webgl-notes
/
index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>WebGL Learning Notes</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- index 页面 样式 -->
    <link rel="stylesheet" href="css/webgl-notes.css">
</head>

<body>
    <div class="view">
        <span>一、WebGL入门程序</span>
        <ul>
            <li><a href="home/01-webgl入门/01-通过canvas绘制矩形.html">01-通过canvas绘制矩形</a></li>
            <li><a href="home/01-webgl入门/02-清空canvas绘图区域.html">02-清空canvas绘图区域</a></li>
            <li><a href="home/01-webgl入门/03-绘制一个点.html">03-绘制一个点</a></li>
            <li><a href="home/01-webgl入门/04-着色器代码写在script标签中.html">04-着色器代码写在script标签中</a></li>
            <li><a href="home/01-webgl入门/05-通过attribute向着色器传递数据.html">05-通过attribute向着色器传递数据</a></li>
            <li><a href="home/01-webgl入门/06-鼠标点击绘制点.html">06-通过鼠标点击绘制点</a></li>
        </ul>
        <span>二、绘制和变换三角形</span>
        <ul>
            <li><a href="home/02-绘制和变化三角形/01-绘制多个点.html">01-绘制多个点</a></li>
            <li><a href="home/02-绘制和变化三角形/02-绘制一个三角形.html">02-绘制一个三角形</a></li>
            <li><a href="home/02-绘制和变化三角形/03-绘制线条.html">03-绘制线条</a></li>
            <li><a href="home/02-绘制和变化三角形/04-绘制矩形.html">04-绘制矩形</a></li>
            <li><a href="home/02-绘制和变化三角形/05-平移-三角形.html">05-平移-三角形</a></li>
            <li><a href="home/02-绘制和变化三角形/06-旋转-三角形.html"></a></li>
            <li><a href="home/02-绘制和变化三角形/07-矩阵变换-旋转-三角形.html">07-矩阵变换-旋转-三角形</a></li>
            <li><a href="home/02-绘制和变化三角形/08-矩阵变换-平移-三角形.html">08-矩阵变换-平移-三角形</a></li>
            <li><a href="home/02-绘制和变化三角形/09-矩阵变换-缩放-三角形.html">09-矩阵变换-缩放-三角形</a></li>
        </ul>
        <span>三、高级变换与动画基础</span>
        <ul>
            <li><a href="home/03-高级变换与动画基础/01-使用类库-三角形矩阵旋转变换.html">01-使用类库-三角形矩阵旋转变换</a></li>
            <li><a href="home/03-高级变换与动画基础/02-使用类库-三角形-平移后旋转.html">02-使用类库-三角形-平移后旋转</a></li>
            <li><a href="home/03-高级变换与动画基础/03-使用类库-三角形-旋转后平移.html">03-使用类库-三角形-旋转后平移</a></li>
            <li><a href="home/03-高级变换与动画基础/04-三角形-旋转动画基础.html">04-三角形-旋转动画基础</a></li>
            <li><a href="home/03-高级变换与动画基础/05-三角形-旋转动画-调节旋转速度.html">05-三角形-旋转动画-调节旋转速度</a></li>
        </ul>
        <span>四、颜色与纹理</span>
        <ul>
            <li><a href="home/04-颜色与纹理/01-顶点着色器传入不同顶点大小.html">01-顶点着色器传入不同顶点大小</a></li>
            <li><a href="home/04-颜色与纹理/02-两种数据打包到一个缓冲区中.html">02-两种数据打包到一个缓冲区中</a></li>
            <li><a href="home/04-颜色与纹理/03-通过varying变量修改顶点颜色.html">03-通过varying变量修改顶点颜色</a></li>
            <li><a href="home/04-颜色与纹理/04-varying传递变量-彩色三角形.html">04-varying传递变量-彩色三角形</a></li>
            <li><a href="home/04-颜色与纹理/05-几何形状装配和光栅化.html">05-几何形状装配和光栅化</a></li>
            <li><a href="home/04-颜色与纹理/06-纹理贴图-基础.html">06-纹理贴图基础</a></li>
            <li><a href="home/04-颜色与纹理/07-纹理贴图-平铺式纹理映射.html">07-纹理贴图-平铺式纹理映射</a></li>
            <li><a href="home/04-颜色与纹理/08-纹理贴图-镜像纹理映射.html">08-纹理贴图-镜像纹理映射</a></li>
            <li><a href="home/04-颜色与纹理/09-纹理贴图-使用多张纹理贴图.html">09-纹理贴图-使用多张纹理贴图</a></li>
        </ul>
        <span>五、进入三维世界</span>
        <ul>
            <li><a href="home/05-进入三维世界/01-视点和视线-查看三角形.html">01-视点和视线-查看三角形</a></li>
            <li><a href="home/05-进入三维世界/02-视点和视线-加入模型矩阵.html">02-视点和视线-加入模型矩阵</a></li>
            <li><a href="home/05-进入三维世界/03-视点和视线-模型视图矩阵.html">03-视点和视线-模型视图矩阵</a></li>
            <li><a href="home/05-进入三维世界/04-视点和视线-利用键盘改变视点.html">04-视点和视线-利用键盘改变视点</a></li>
            <li><a href="home/05-进入三维世界/05-视点和视线-修改near和far值.html">05-视点和视线-修改near和far值</a></li>
            <li><a href="home/05-进入三维世界/06-视点和视线-设置可视区域.html">06-视点和视线-设置可视区域</a></li>
            <li><a href="home/05-进入三维世界/07-视点和视线-透视投影.html">07-视点和视线-透视投影</a></li>
            <li><a href="home/05-进入三维世界/08-视点和视线-三个矩阵共冶一炉.html">08-视点和视线-三个矩阵共冶一炉</a></li>
            <li><a href="home/05-进入三维世界/09-视点和视线-模型视图投影矩阵.html">09-视点和视线-模型视图投影矩阵</a></li>
            <li><a href="home/05-进入三维世界/10-视点和视线-深度检测消除隐藏面.html">10-视点和视线-深度检测消除隐藏面</a></li>
            <li><a href="home/05-进入三维世界/11-视点和视线-立方体偏移消除深度冲突.html">11-视点和视线-立方体偏移消除深度冲突</a></li>
            <li><a href="home/05-进入三维世界/12-视点和视线-绘制立方体-并循环渲染.html">12-视点和视线-绘制立方体-并循环渲染</a></li>
            <li><a href="home/05-进入三维世界/13-视点和视线-绘制颜色立方体.html">13-视点和视线-绘制颜色立方体</a></li>
            <li><a href="home/05-进入三维世界/14-视点和视线-单颜色立方体.html">14-视点和视线-单颜色立方体</a></li>
        </ul>
        <span>六、光照</span>
        <ul>
            <li><a href="home/06-光照/01-光照-漫反射下的立方体.html">01-光照-漫反射下的立方体</a></li>
            <li><a href="home/06-光照/02-光照-循环计算法线矩阵.html">02-光照-循环计算法线矩阵</a></li>
            <li><a href="home/06-光照/03-光照-加入环境光效果.html">03-光照-加入环境光效果</a></li>
            <li><a href="home/06-光照/04-光照-法向量矩阵变换.html">04-光照-法向量矩阵变换</a></li>
            <li><a href="home/06-光照/05-光照-点光源光效果.html">05-光照-点光源光效果</a></li>
            <li><a href="home/06-光照/06-光照-点光源光旋转效果.html">06-光照-点光源光旋转效果</a></li>
            <li><a href="home/06-光照/07-光照-逐片元渲染.html">07-光照-逐片元渲染</a></li>
        </ul>
        <span>七、高级技术示例</span>
        <ul>
            <li><a href="home/07-高级技术示例/01-通过鼠标操作模型.html">01-通过鼠标操作模型</a></li>
            <li><a href="home/07-高级技术示例/02-鼠标点击物体.html">02-鼠标点击物体</a></li>
            <li><a href="home/07-高级技术示例/03-雾化效果.html">03-雾化效果</a></li>
            <li><a href="home/07-高级技术示例/04-雾化效果-使用w分量.html">04-雾化效果-使用w分量</a></li>
            <li><a href="home/07-高级技术示例/05-绘制圆形顶点.html">05-绘制圆形顶点</a></li>
            <li><a href="home/07-高级技术示例/06-透明混合.html">06-透明混合</a></li>
            <li><a href="home/07-高级技术示例/07-透明混合-彩色立方体.html">07-透明混合-彩色立方体</a></li>
            <li><a href="home/07-高级技术示例/08-使用不同着色器.html">08-使用不同着色器</a></li>
        </ul>
    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <!-- index 页面操作 -->
    <script src="js/webgl-notes.js"></script>
</body>

</html>