WebGL入门

WebGL入门(十三)-通过片元着色器内置变量gl_FragCoord验证内插过程-卡核

WebGL入门(十三)-通过片元着色器内置变量gl_FragCoord验证内插过程

通过片元着色器内置变量gl_FragCoord验证内插过程 1.demo效果2. 片元着色器的内置变量gl_FragCoord3. demo代码 1.demo效果 如上图,这个demo实现一个紫色渐变效果的三角形,通过使...
点燃火柴的头像-卡核点燃火柴2年前
08106149
WebGL入门(十四)-用加载纹理图片在矩形表面上创建纹理贴图/实现纹理映射-卡核

WebGL入门(十四)-用加载纹理图片在矩形表面上创建纹理贴图/实现纹理映射

在矩形表面上创建纹理贴图 1.demo效果2.相关知识点2.1 纹理、纹素、纹理映射、纹理坐标、坐标映射关系2.2 gl.createTexture()方法2.3 gl.pixelStorei()方法2.4 gl.activeTexture()方法2.5 gl.bi...
点燃火柴的头像-卡核点燃火柴2年前
09938791
WebGL入门(十五)-使用多幅纹理/纹理叠加-卡核

WebGL入门(十五)-使用多幅纹理/纹理叠加

使用多幅纹理/纹理叠加 1.demo效果2.实现要点2.1 顶点着色器中声明varying变量v_TexCoord2.2 片元着色器中多纹理处理2.3 外部纹理图像加载2.4 纹理叠加处理与绘图 3.demo代码 1.demo效果 如上图...
点燃火柴的头像-卡核点燃火柴2年前
06816149
WebGL入门(十六)-三维视图模型原理,视点、视线、观察点、上方向-卡核

WebGL入门(十六)-三维视图模型原理,视点、视线、观察点、上方向

三维视图模型原理 1.demo效果2.相关知识点2.1 视点、视线、观察点、上方向2.2 创建视图矩阵 3. demo代码 1.demo效果 如上图,这个demo中三个不同颜色的三角形展示在三维坐标中。 2.相关知...
点燃火柴的头像-卡核点燃火柴2年前
03837899
WebGL入门(十七)-三维视图从指定视点观察变换后的图形/观察旋转后的三角-卡核

WebGL入门(十七)-三维视图从指定视点观察变换后的图形/观察旋转后的三角

三维视图从指定视点观察变换后的图形 1.demo效果2.相关知识点2.1 从视点观察变换后图形的模型2.2 Matrix4对象的图形变换相关方法和属性 3.demo代码 1.demo效果 如上,图一是在视点观察到...
点燃火柴的头像-卡核点燃火柴2年前
09409786
WebGL入门(十八)-三维视图通过上下左右键改变视点实现视图的移动-卡核

WebGL入门(十八)-三维视图通过上下左右键改变视点实现视图的移动

通过上下左右键改变视点实现视图的移动 1.demo效果2.实现要点2.1 注册键盘按下事件2.2 键盘按下处理函数2.2 draw()函数实现 3. demo代码 1.demo效果 如上,通过上下左右键调整视图矩阵的...
点燃火柴的头像-卡核点燃火柴2年前
08740737
WebGL入门(十九)-三维视图通过调整正射投影矩阵/盒状可视空间实现三角形的显示与消失-卡核

WebGL入门(十九)-三维视图通过调整正射投影矩阵/盒状可视空间实现三角形的显示与消失

三维视图正射投影矩阵 1.demo效果2.相关知识点2.1 正射投影2.2 Matrix4.setOrtho()函数 3. demo代码 1.demo效果 如上,通过上下键调整正投影矩阵参数far的值,通过左右键调整正投影...
点燃火柴的头像-卡核点燃火柴2年前
07819557
WebGL入门(二十)-三维视图通过透视投影矩阵创建远小近大的两排三角形-卡核

WebGL入门(二十)-三维视图通过透视投影矩阵创建远小近大的两排三角形

通过透视投影矩阵创建远小近大的两排三角形 1.demo效果2.相关知识点2.1 透视投影2.2 Matrix4.setPerspective()函数 3. demo代码 1.demo效果 如上,通过透视投影矩阵创建了左右两排三角形&...
点燃火柴的头像-卡核点燃火柴2年前
07541107
WebGL入门(二十一)-三维视图对象前后关系的处理/隐藏面消除与深度冲突处理-卡核

WebGL入门(二十一)-三维视图对象前后关系的处理/隐藏面消除与深度冲突处理

对象前后关系的处理/隐藏面消除与深度冲突处理 1.demo效果2.相关知识点2.1 三维视图矩阵模型2.2 对象前后关系处理2.3 gl.enable()方法2.4 gl.disable()方法2.5 深度冲突2.6 gl.polygonOffset()...
点燃火柴的头像-卡核点燃火柴2年前
09353911
WebGL入门(二十二)-通过顶点索引绘制渐变色的立方体-卡核

WebGL入门(二十二)-通过顶点索引绘制渐变色的立方体

通过顶点索引绘制渐变色的立方体 1.demo效果2.相关知识点2.1 顶点索引原理2.2 gl.drawElements() 方法 3.demo代码 1.demo效果 如上,通过顶点索引绘制出了一个渐变色的立方体 2.相关知识...
点燃火柴的头像-卡核点燃火柴2年前
08383346
WebGL入门(二十三)-绘制每个面指定颜色的立方体-卡核

WebGL入门(二十三)-绘制每个面指定颜色的立方体

绘制每个面指定颜色的立方体 1.demo效果2.相关知识点2.1 每个面指定颜色原理2.2 定义顶点坐标、顶点颜色、顶点索引数组 3.demo代码 1.demo效果 如上,绘制了不同面指定颜色的立方体 2.相...
点燃火柴的头像-卡核点燃火柴2年前
07146171
WebGL入门(二十四)-光照原理、漫反射光计算、漫反射光照射下的立方体-卡核

WebGL入门(二十四)-光照原理、漫反射光计算、漫反射光照射下的立方体

 漫反射光照射下的立方体1.demo效果2.相关知识点2.1 光照原理2.2 光源类型2.3 反射类型2.4 漫反射计算模型3.demo代码1.demo效果添加了漫反射光照射效果的立方体,最前面的面亮一些,顶上和右侧...
点燃火柴的头像-卡核点燃火柴2年前
03302372