WebGL入门(十九)-三维视图通过调整正射投影矩阵/盒状可视空间实现三角形的显示与消失
三维视图正射投影矩阵 1.demo效果2.相关知识点2.1 正射投影2.2 Matrix4.setOrtho()函数 3. demo代码 1.demo效果 如上，通过上下键调整正投影矩阵参数far的值，通过左右键调整正投影...
WebGL入门(四十四)-WebGL上下文丢失事件与上下文恢复事件处理
WebGL上下文丢失事件与上下文恢复事件处理 1. demo效果2. 相关知识点2.1 上下文丢失介绍2.2 WebGL提供的响应事件2.3 响应事件处理2.3.1 响应事件注册2.3.2 响应事件实现说明 3. demo代码 1. dem...
WebGL入门(二十一)-三维视图对象前后关系的处理/隐藏面消除与深度冲突处理
对象前后关系的处理/隐藏面消除与深度冲突处理 1.demo效果2.相关知识点2.1 三维视图矩阵模型2.2 对象前后关系处理2.3 gl.enable()方法2.4 gl.disable()方法2.5 深度冲突2.6 gl.polygonOffset()...
WebGL入门(二十二)-通过顶点索引绘制渐变色的立方体
通过顶点索引绘制渐变色的立方体 1.demo效果2.相关知识点2.1 顶点索引原理2.2 gl.drawElements() 方法 3.demo代码 1.demo效果 如上，通过顶点索引绘制出了一个渐变色的立方体 2.相关知识...
WebGL入门(二十三)-绘制每个面指定颜色的立方体
绘制每个面指定颜色的立方体 1.demo效果2.相关知识点2.1 每个面指定颜色原理2.2 定义顶点坐标、顶点颜色、顶点索引数组 3.demo代码 1.demo效果 如上，绘制了不同面指定颜色的立方体 2.相...
WebGL入门(二十四)-光照原理、漫反射光计算、漫反射光照射下的立方体
漫反射光照射下的立方体1.demo效果2.相关知识点2.1 光照原理2.2 光源类型2.3 反射类型2.4 漫反射计算模型3.demo代码1.demo效果添加了漫反射光照射效果的立方体，最前面的面亮一些，顶上和右侧...
WebGL入门(二十五)-物体变换时光照处理、立方体平移旋转缩放变换时漫反射光照计算、逆转置矩阵
立方体平移旋转缩放时漫反射光照计算 1.demo效果2.相关知识点2.1 物体坐标变换法向量变化2.2 矩阵逆转置 3. demo代码4.后续 1.demo效果 如上，图一为变换前的效果，是贴的上一个dem...
WebGL入门(二十六)-同时使用漫反射光和环境反射光、立方体平移旋转缩放变换时漫反射光和环境反射光处理
立方体平移旋转缩放变换时漫反射光和环境反射光处理 1.demo效果2.相关知识点2.1 相关回顾2.2 环境反射光计算模型2.3 物体表面反射光计算 3.demo代码 1.demo效果 如上，图一是没添加环境光...
WebGL入门(二十七)-点光源使用，点光源照射下的立方体效果
点光源使用，点光源照射下的立方体效果 1.demo效果2.相关知识点2.1 点光源方向计算 3. demo代码 1.demo效果 如上图，立方体在点光源照射下的效果，最前面的面右上角看起来比...
