WebGL入门(十三)-通过片元着色器内置变量gl_FragCoord验证内插过程
通过片元着色器内置变量gl_FragCoord验证内插过程 1.demo效果2. 片元着色器的内置变量gl_FragCoord3. demo代码 1.demo效果 如上图，这个demo实现一个紫色渐变效果的三角形，通过使...
WebGL入门(十四)-用加载纹理图片在矩形表面上创建纹理贴图/实现纹理映射
在矩形表面上创建纹理贴图 1.demo效果2.相关知识点2.1 纹理、纹素、纹理映射、纹理坐标、坐标映射关系2.2 gl.createTexture()方法2.3 gl.pixelStorei()方法2.4 gl.activeTexture()方法2.5 gl.bi...
WebGL入门(十五)-使用多幅纹理/纹理叠加
使用多幅纹理/纹理叠加 1.demo效果2.实现要点2.1 顶点着色器中声明varying变量v_TexCoord2.2 片元着色器中多纹理处理2.3 外部纹理图像加载2.4 纹理叠加处理与绘图 3.demo代码 1.demo效果 如上图...
WebGL入门(十六)-三维视图模型原理，视点、视线、观察点、上方向
三维视图模型原理 1.demo效果2.相关知识点2.1 视点、视线、观察点、上方向2.2 创建视图矩阵 3. demo代码 1.demo效果 如上图，这个demo中三个不同颜色的三角形展示在三维坐标中。 2.相关知...
WebGL入门(十七)-三维视图从指定视点观察变换后的图形/观察旋转后的三角
三维视图从指定视点观察变换后的图形 1.demo效果2.相关知识点2.1 从视点观察变换后图形的模型2.2 Matrix4对象的图形变换相关方法和属性 3.demo代码 1.demo效果 如上，图一是在视点观察到...
WebGL入门(十八)-三维视图通过上下左右键改变视点实现视图的移动
通过上下左右键改变视点实现视图的移动 1.demo效果2.实现要点2.1 注册键盘按下事件2.2 键盘按下处理函数2.2 draw()函数实现 3. demo代码 1.demo效果 如上，通过上下左右键调整视图矩阵的...
WebGL入门(十九)-三维视图通过调整正射投影矩阵/盒状可视空间实现三角形的显示与消失
三维视图正射投影矩阵 1.demo效果2.相关知识点2.1 正射投影2.2 Matrix4.setOrtho()函数 3. demo代码 1.demo效果 如上，通过上下键调整正投影矩阵参数far的值，通过左右键调整正投影...
WebGL入门(二十)-三维视图通过透视投影矩阵创建远小近大的两排三角形
通过透视投影矩阵创建远小近大的两排三角形 1.demo效果2.相关知识点2.1 透视投影2.2 Matrix4.setPerspective()函数 3. demo代码 1.demo效果 如上，通过透视投影矩阵创建了左右两排三角形&...
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效果添加了漫反射光照射效果的立方体，最前面的面亮一些，顶上和右侧...