点燃火柴的博客

WebGL上下文丢失事件与上下文恢复事件处理1. demo效果2. 相关知识点2.1 上下文丢失介绍2.2 WebGL提供的响应事件2.3 响应事件处理2.3.1 响应事件注册2.3.2 响应事件实现说明3. demo代码1. demo效果2. 相关知识点2.1 上下文丢失介绍WebGL 绘图时会使用计算机的图形处理硬件，这部分资源被操作系统统一管理，由浏览器在内的多个应用程序共享，当系统进入休眠状态或一些特殊情况下，浏览器会失去使用这些资源的权利，会导致存贮在硬件中的数据丢失，这时WebGL会出

WebGL加载OBJ-MTL三维模型1. demo效果2. 相关知识点2.1 OBJ文件内容说明1. demo效果2. 相关知识点2.1 OBJ文件内容说明上图是obj文件格式模型的内容，接下来解释一下分别代表什么，先说一下文件中的空格表示不同内容之间的间隔注释 以 # 开头的行表示注释行，第1行和第2行为注释内容引入外部材质文件 以 mtllib 开头的行表示引入外部材质文件，后接外部材质名，第3行表示引入外部材质文件 cube.mtl模型名称 以 o 开头的行表示模型名称，后接模型名

使用（FBO）实现阴影效果1. demo效果2. 相关知识点2.1 阴影如何产生2.2 阴影实现原理2.2.1 准备阴影贴图2.2.2 阴影映射2.2.3 马赫带消除3. demo代码1. demo效果2. 相关知识点现实生活中阴影无处不在，在三维世界中想要获得立体感，阴影必不可少，这里学习通过 阴影贴图 (shadow map) 实现阴影绘制的方法,阴影贴图又称 深度贴图（depth map）2.1 阴影如何产生如上图，坐标原点出有一光源，中间有一个三角形，右侧有一投影面，如果三角形上有一点

WebGL常用API说明1.设置背景色 gl.clearColor()2.清空绘图区 gl.clear()3.绘制操作 gl.drawArrays()4. 获取attribute变量地址 gl.getAttribLocation()5. 给attribute变量传值 gl.vertexAttrib3f()6. 给attribute变量传值 gl.vertexAttrib3f()的同族函数7. 获取uniform变量地址 gl.getUniformLocation()8. 向uniform变量传值 gl.un

将渲染结果作为纹理绘制到另一个物体上1. demo效果2. 相关知识点2.1 帧缓冲区对象（FBO）2.2 渲染到纹理配置步骤3. 相关API3.1 创建帧缓冲区对象 gl.createFramebuffer()3.2 删除帧缓冲区对象 gl.deleteFramebuffer()3.3 创建渲染缓冲区对象 gl.createRenderbuffer()3.4 删除渲染缓冲区对象 gl.deleteRenderbuffer()3.5 绑定渲染缓冲区 gl.bindRenderbuffer()3.6 设置渲染

通过切换着色器实现一个页面同时展示多个立方体1. demo效果2. demo实现步骤2.1 准备绘制单色立方体的着色器2.2 准备绘制纹理立方体的着色器2.3 创建绘制单色立方体的程序对象2.4 创建绘制纹理立方体的程序对象2.5 准备绘制单色立方体的数据并写入缓冲区对象2.6 准备绘制纹理立方体的数据并写入缓冲区对象2.7 绘制单色立方体2.8 绘制纹理立方体3. demo代码1. demo效果2. demo实现步骤这一次的demo实现的核心是切换着色器程序对象，首先要创建所需的着色器和着色器的程

绘制透明面和不透明面的立方体1. 绘制透明立方体1.1 绘制透明立方体要点1.2 绘制透明立方体demo效果1.3 绘制透明立方体demo代码1.4 开启隐藏面消除后2. 透明与不透明共存2.1 透明与不透明共存实现步骤2.2 相关API gl.depthMask()2.3 绘制透明面和不透明面的立方体要点2.4 透明面和不透明面的立方体demo效果2.5 透明面和不透明面的立方体demo代码1. 绘制透明立方体1.1 绘制透明立方体要点上一节我们学习了α混合绘制透明三角形，这一次先绘制一个透明立方体

通过α混合绘制透明三角形1. demo效果2. 知识要点2.1 α混合2.2 α混合实现2.3 指定混合 gl.blendFunc()3. demo代码1. demo效果如上图，绘制了前、中、后三个三角形，通过α混合实现了透明效果2. 知识要点2.1 α混合RGBA模式中A称为颜色的α分量，控制着颜色的透明度，取值范围是0~1,0代表完全透明，完全看不到图形，1代表完全不透明，取0到1之间的值，代表一定的透明度，可以透过本身看到后面的物体，取值越小透明度越大，透过本身看后面的物体越清楚使用颜色

绘制圆形的点1. demo效果2. 实现要点2.1 绘制原理2.1 绘制实现3. demo代码1. demo效果如上图，绘制出了三个红色的小圆点2. 实现要点2.1 绘制原理我们已经知道在绘制图形时有一个光栅化的过程，在光栅化的过程中可以在片元着色器中通过内置变量 gl_FragCoord 来访问片元的坐标，实际上片元着色器还提供了另一个内置变量来获取当前片元在所属点内的坐标，它就是 gl_PointCoord ，归纳一下这两个变量片元着色器内置变量（输入）变量类型名称描述

HUD（平视显示器）实现1. demo效果2.实现要点2.1 什么是HUD2.2 HUD实现2.2.1 准备画布2.2.2 绘制三维图形2.2.3 绘制HUD信息3.demo代码1. demo效果如上图，在三维场景中叠加了二维文本2.实现要点2.1 什么是HUDHUD是 平视显示器 (head up display) 的简称，最早用于飞机驾驶显示器上，将飞机的一些重要信息投影到前方的玻璃上，这样就不用低头看仪表盘了，在游戏中，也经常会在三维场景上叠加一些二维文本或二维图形信息2.2 HUD实现

立方体雾化效果1. demo效果2.相关知识点2.1 雾化相关概念2.2 雾化因子计算2.3 片元颜色计算3.实现要点3.1 计算顶点与视点的距离3.2 计算雾化后片元颜色3.3 计算雾化所需数据传值4. demo代码5. 使用gl_Position的w分量1. demo效果如上图，可以通过向上/向下键盘控制雾化的距离2.相关知识点2.1 雾化相关概念雾化的方式有很多种，这里使用最简单方式：线性雾化,在这里介绍一些相关概念视点 查看物体的眼睛(摄像机)雾化的 起点 表示开始雾化之处雾化的

用鼠标控制立方体的旋转1. demo效果2. 实现要点2.1 注册鼠标事件2.1.1 注册鼠标事件函数的声明2.1.2 注册鼠标事件函数的调用2.2 纹理图片加载2.3 图形绘制3. demo代码1. demo效果如上图，是一个添加了纹理图片的立方体，这个立方体可以通过鼠标按下后上下左右拖动实现立方体的旋转2. 实现要点2.1 注册鼠标事件2.1.1 注册鼠标事件函数的声明在这个函数中需要注册鼠标按下事件、鼠标松开事件和鼠标移动事件的处理函数，在 鼠标按下事件 的处理函数中，需要获取到鼠标按

通过鼠标点击选中立方体，选中立方体的某个面1.三维物体选中原理与实现步骤1.1物体选中原理1.2物体选中实现步骤1.2.1注册鼠标点击事件1.2.2顶点着色器作特定值设置处理1.2.3告诉顶点着色器修改颜色缓冲区1.2.4读取像素颜色判断是否选中2.相关API介绍3.鼠标点击选中立方体demo3.1 demo效果3.2 demo代码4.鼠标点击选中立方体一个表面4.1 demo效果4.2 demo代码1.三维物体选中原理与实现步骤1.1物体选中原理选中三维物体的原理就是先将物体在颜色缓冲区的颜色设置为

每个部件使用不同的缓冲区对象实现机械臂模拟动画1.initShaders() 函数创建步骤2.相关API介绍2.1创建着色器对象 gl.createShader()2.2指定着色器代码 gl.shaderSource()1.initShaders() 函数创建步骤从第一个demo开始一直使用了一个着色器初始化函数initShaders(),但是一直没有详细说明，接下来我们了解一下它是怎么把字符串形式的 GLSL ES 代码编译成可在GPU上运行的着色器程序，该函数大致可分为以下七个步骤：创建着色器对

每个部件使用不同的缓冲区对象实现机械臂模拟动画1.demo效果2.实现要点2.1声明各个组件顶点并创建缓冲区对象2.2绘制各个组件3.demo代码1.demo效果如上图，这次的demo效果与上一节一样，不过使用了不同的实现方式，上一个demo使用同一组顶点数据、同一个缓冲区对象通过矩阵变换绘制出不同的组件，这一次为每一个组件初始化了顶点数据和缓冲区对象2.实现要点2.1声明各个组件顶点并创建缓冲区对象首先定义了各个组件的顶点信息，为它们创建各自的缓冲区对象，但是法向量和索引值是可以共享的，所以创

利用层次模型实现机械臂模拟动画1.demo效果2.实现要点2.1绘制各个模型块2.2绘制方块函数2.3动画函数2.demo代码1.demo效果如上图，实现了模拟机械臂搬运方块动画2.实现要点2.1绘制各个模型块在这个函数中绘制了底座，机械手臂1,2,3，还有要移动的方块和移动中的方块，在绘制这些模块时需要知道<子节点模型变换> = <父节点的模型变换> x <自身模型变换>这一关系式在示例代码中的体现是，创建一个全局变量g_modelMatrix保存模块的

逐片元处理点光源光照效果1.demo效果2.实现要点2.1顶点着色器中声明varying变量2.2片元着色器中使用varying变量3.demo代码1.demo效果如上图，图二为逐片元处理点光源的效果，与之前的demo效果相比，物体表面的光照效果更加柔和、细腻2.实现要点2.1顶点着色器中声明varying变量在顶点着色器中声明varying变量v_Color，v_Normal，v_Position分别用来向片元着色器传值顶点颜色信息，顶点法向量，顶点坐标，在main函数中分别计算它们的值

立方体动画旋转时点光源计算处理1.demo效果1.demo效果

点光源使用，点光源照射下的立方体效果1.demo效果2.相关知识点2.1 点光源方向计算3. demo代码1.demo效果如上图，立方体在点光源照射下的效果，最前面的面右上角看起来比周围更亮一些2.相关知识点2.1 点光源方向计算我们已经知道，在WebGL中，在使用平行光的时候需要知道平行光的方向，但是点光源只有一个位置属性，本身没有方向属性，但是我们可以用点光源的坐标减去顶点的坐标就得到 点光源的方向点光源方向计算<点光源方向> = <点光源坐标> - <顶点

立方体平移旋转缩放变换时漫反射光和环境反射光处理1.demo效果2.相关知识点2.1 相关回顾2.2 环境反射光计算模型2.3 物体表面反射光计算3.demo代码1.demo效果如上，图一是没添加环境光的效果，图二为添加环境光后的效果，添加环境光后整个立方体变的更亮了一些，是因为环境光从各个方向照射在了物体上2.相关知识点2.1 相关回顾在之前的学习中，我们知道，在WebGL中，光源主要分为三类： 平行光、点光源、环境光物体表面反射光线的方式有两种： 漫反射 和 环境反射 ，漫反射是针对平行

立方体平移旋转缩放时漫反射光照计算1.demo效果2.相关知识点2.1 物体坐标变换法向量变化2.2 矩阵逆转置3. demo代码4.后续1.demo效果如上，图一为变换前的效果，是贴的上一个demo的运行效果图，图二是本次demo的效果，在上一个demo的基础上，处理了物体坐标变换时光照变化的效果2.相关知识点2.1 物体坐标变换法向量变化如上图，归纳一下物体坐标变换法向量变化的规律如下平移变换， 法向量不会改变旋转变换， 大多数情况下法向量会变 ，如果绕某个轴旋转360度，又回到原

漫反射光照射下的立方体1.demo效果2.相关知识点2.1 光照原理2.2 光源类型2.3 反射类型2.4 漫反射计算模型3.demo代码1.demo效果如上，添加了漫反射光照射效果的立方体，最前面的面亮一些，顶上和右侧的面暗一些2.相关知识点2.1 光照原理现实中，物体被光线照射，会有一部分光在物体表面反射，当反射光线进入你的眼睛时，你就看到了物体的形状与颜色，现实生活中你会发现，有光照照射物体时会在地面上投下影子，物体表面会出现明暗程度不一样的效果，正是因为存在 影子（阴影） 和 明暗差异

绘制每个面指定颜色的立方体1.demo效果2.相关知识点2.1 每个面指定颜色原理2.2 定义顶点坐标、顶点颜色、顶点索引数组3.demo代码1.demo效果如上，绘制了不同面指定颜色的立方体2.相关知识点2.1 每个面指定颜色原理前一篇文章中，是创建顶点信息的时候同时把顶点颜色信息也放在了顶点数组中，这样我们根据索引取到顶点后既可以获取坐标信息又可以获取颜色信息，但是如果你想将立方体的前表面（顶点v0-v1-v2-v3组成的面）涂成红色，将上表面（顶点v0-v5-v6-v1组成的面）涂成蓝色，

通过顶点索引绘制渐变色的立方体1.demo效果2.相关知识点2.1 顶点索引原理2.2 gl.drawElements() 方法3.demo代码1.demo效果如上，通过顶点索引绘制出了一个渐变色的立方体2.相关知识点2.1 顶点索引原理如上，立方体有8个顶点，v0~v7；6个面，前、后、上、下、左、右；以最前面的面为例，由四个顶点v0-v1-v2-v3拼出的两个三角形组成，这两个三角形使用的顶点索引分别是 （0,1,2）和（0,2,3）。通过三角形的顶点索引，可以取到对应索引的顶点坐标和颜色

对象前后关系的处理/隐藏面消除1.demo效果2.相关知识点2.1 三维视图矩阵模型2.2 对象前后关系处理2.3 gl.enable()方法2.4 gl.disable()方法3. demo代码1.demo效果如上，图一为隐藏面消除前的效果，图二为隐藏面消除后的效果，即通常希望看到的效果2.相关知识点2.1 三维视图矩阵模型我们知道矩阵相乘可以得到对应变换组合的效果，因此所有的三维视图模型都可以由以下模型表示：<投影矩阵>x<视图矩阵>x<模型矩阵>x&

通过透视投影矩阵创建远小近大的两排三角形1.demo效果2.相关知识点2.1 透视投影2.2 Matrix4.setPerspective()函数3. demo代码1.demo效果如上，通过透视投影矩阵创建了左右两排三角形，呈现在页面中2.相关知识点2.1 透视投影上一篇文章中说可视空间分为 正射投影 和 透视投影 ，在正射投影中不管图形与视点的距离是远还是近，图形有多大那么画出来的图形就有多大，但透视投影根据成像原理画出来的图会近大远小，更具有深度感。接下来先介绍一下透视投影的工作原理如

三维视图正射投影矩阵1.demo效果2.相关知识点2.1 正射投影2.2 Matrix4.setOrtho()函数3. demo代码1.demo效果如上，通过上下键调整正投影矩阵参数far的值，通过左右键调整正投影矩阵near的值，重新设置可视空间，实现页面中的三角形消失与复现2.相关知识点2.1 正射投影对于人类而言，只能看到眼前的东西，这就是我们所说的可视范围，在WebGL中同样有可视范围，它包括水平视角、垂直视角和可视深度，我们根据这三个要素定义了 可视空间 ，对于不在可视空间的图形，通常

通过上下左右键改变视点实现视图的移动1.demo效果2.实现要点2.1 注册键盘按下事件2.2 键盘按下处理函数2.2 draw()函数实现3. demo代码1.demo效果如上，通过上下左右键调整视图矩阵的视点坐标实现图形的移动。2.实现要点2.1 注册键盘按下事件//注册上下左右键盘按下事件document.onkeydown = function (ev) { keydown(ev, gl, n, u_ViewMatrix, viewMatrix)}2.2 键盘按下处理函数/

三维视图从指定视点观察变换后的图形1.demo效果2.相关知识点2.1 视点、视线、观察点、上方向1.demo效果如上图，这个demo中三个不同颜色的三角形展示在三维坐标中。2.相关知识点2.1 视点、视线、观察点、上方向...

三维视图模型原理1.demo效果2.相关知识点2.1 视点、视线、观察点、上方向2.2 gl.createTexture()方法1.demo效果如上图，这个demo中三个不同颜色的三角形展示在三维坐标中。2.相关知识点2.1 视点、视线、观察点、上方向视点 指的是观察者所处的位置。视线的起点，用(eyeX,eyeY,eyeZ)表示观察目标点 指被观察目标所在的点。它是一个点，用(atX, atY, atZ)表示纹素 指的是组成纹理图像的像素。纹理坐标 上图左变图像中的st坐标就是纹理坐

使用多幅纹理/纹理叠加1.demo效果2.实现要点2.1 顶点着色器中声明varying变量v_TexCoord2.2 片元着色器中多纹理处理2.3 外部纹理图像加载2.4 纹理叠加处理与绘图3.demo代码1.demo效果如上图，这个demo加载了三幅外部纹理图片，分别是背景草原、骏马、卡通小羊，通过纹理叠加让它们呈现在同一个页面上。2.实现要点2.1 顶点着色器中声明varying变量v_TexCoord在顶点着色器中需要声明attribute变量a_TexCoord和varying变量v_

在矩形表面上创建纹理贴图1.demo效果2.相关知识点2.1 纹理、纹素、纹理映射、纹理坐标、坐标映射关系2.2 gl.getUniformLocation()方法2.3 gl.uniform4f()方法1.demo效果如上图，这个demo加载了外部纹理图片，并用这个图片创建了纹理贴图映射在中间的矩形上。2.相关知识点2.1 纹理、纹素、纹理映射、纹理坐标、坐标映射关系纹理 又称为纹理图像，就是用于贴在矩形表面的图片。纹理映射 就是将一张图像/贴纸映射到一个几何图形的表面上。纹素 指的是

在JavaScript程序通过uniform变量向片元着色器传值1.demo效果2. 片元着色器的内置变量gl_FragCoord3. demo代码1.demo效果如上图，这个demo实现一个紫色渐变效果的三角形，通过使用内置变量FragCoord模拟内插过程实现的2. 片元着色器的内置变量gl_FragCoord类型和变量描述vec4 gl_FragCoord该内置变量的第一参数表示片元在canvas坐标系中的横坐标，第二参数表示片元在canvas坐标系中的纵坐标使用

使用varying变量绘制彩色三角形1.demo效果2.相关知识点2.1 varying变量介绍2.2 varying变量使用步骤2.2.1 顶点着色器中声明varying变量2.2.2 片元着色器中使用varying变量2.2.3 通过缓冲区对象给attribute变量传值3.demo代码1.demo效果如上图，绘制了一个顶点不同颜色的三角形。是使用varying变量在顶点着色器给片元着色器传值绘制的图形2.相关知识点2.1 varying变量介绍之前已经学习了attribute变量和unif

通过矩阵相现图形的动画1.动画效果展示2.动画效果原理3.动画实现要点4.demo代码1.动画效果展示第一个动画效果，是在动画处理函数中不断旋转的效果第二个动画效果，是复合变换动画，在动画处理函数中先做旋转在做平移的效果2.动画效果原理在组合变换的基础上，实现动画差不多是顺利成章的事情，我们只需要利用浏览器提供的 requestAnimationFrame() 不断进行变换就可以实现动画，它的实质就是变换矩阵的不断相乘 。3.动画实现要点首先要定义一个动画处理函数 tick()，在这个函数

通过矩阵相乘实现图形的组合变换1.组合变换效果展示2.知识点梳理2.1组合变换原理2.2组合变换实现要点2.2.1顶点着色器声明uniform变量u_ModelMatrix2.2.2声明模型矩阵Matrix4对象及其属性方法介绍2.2.3模型矩阵组合变换及传值给着色器3.demo代码1.组合变换效果展示如上，图一是变换前，图二是Y轴放大1.5倍，绕Z轴旋转45度，沿X轴平移0.2组合变换后的效果2.知识点梳理2.1组合变换原理我们已经了解了通过矩阵可以实现图形的平移、旋转和缩放的变换，今天我们

通过缩放矩阵实现图形的缩放1.缩放效果展示2.缩放矩阵推理3.使用缩放矩阵要点3.1声明缩放矩阵3.2获取缩放矩阵u_ScaleMatrix的存储地址3.3向缩放矩阵u_ScaleMatrix传值4.demo代码1.缩放效果展示如上图，三角形在Y轴方向上放大了1.5倍，是通过缩放矩阵实现的缩放效果。先来看看它的实现原理与实现过程2.缩放矩阵推理如上，与平移矩阵与一样，缩放矩阵推理也分三步：第一步介绍矩阵变换的形式。第二步由缩放等式类比矩阵变换推算出缩放矩阵(行主序)。第三步由行主序的缩放矩

通过旋转矩阵实现图形的旋转1.旋转效果展示2.旋转矩阵推理3.使用旋转矩阵要点3.1声明旋转矩阵3.2获取旋转矩阵u_RotateMatrix的存储地址3.3向旋转矩阵u_RotateMatrix传值4.demo代码1.旋转效果展示 如上图，三角形逆时针旋转了60度，是通过旋转矩阵实现的旋转效果。先来看看它的实现原理与实现过程2.旋转矩阵推理如上，与平移矩阵与一样，旋转推理也分三步：第一步介绍矩阵变换的形式。第二步由旋转等式类比矩阵变换推算出旋转矩阵(行主序)。第三步由行主序的旋转矩阵推理

通过平移矩阵实现图形的平移1.平移效果展示2.平移矩阵原理3.使用平移矩阵要点3.1声明平移矩阵3.2获取平移矩阵u_TranslateMatrix的存储地址3.3向平移矩阵u_TranslateMatrix传值4.demo代码1.平移效果展示如上图2.平移矩阵原理如上，平移矩阵的推理过程分为三步：第一步介绍矩阵变换的形式。第二步由平移等式类比矩阵变换推出平移矩阵(行主序)。第三步由行主序的平移矩阵推出列主序的平移矩阵，也就是WebGL中用的矩阵。3.使用平移矩阵要点3.1声明平移矩阵

通过坐标计算实现图形的移动、旋转和缩放变换1.demo效果1.demo效果