排序
WebGL入门(十六)-三维视图模型原理，视点、视线、观察点、上方向
三维视图模型原理 1.demo效果2.相关知识点2.1 视点、视线、观察点、上方向2.2 创建视图矩阵 3. demo代码 1.demo效果 如上图，这个demo中三个不同颜色的三角形展示在三维坐标中。 2.相关知...
点燃火柴
WebGL入门(三十七)-绘制圆形的点
绘制圆形的点 1. demo效果2. 实现要点2.1 绘制原理2.1 绘制实现 3. demo代码 1. demo效果 如上图，绘制出了三个红色的小圆点 2. 实现要点 2.1 绘制原理 我们已经知道在绘制图形时有一个光...
点燃火柴
WebGL入门(五)-使用缓冲区对象向着色器传值绘制三角形
使用缓冲区对象向着色器传值绘制三角形 1.demo效果2.相关知识点2.1 什么是缓冲区对象2.2 使用缓冲区对象的步骤2.2.1 创建缓冲区对象2.2.2 绑定缓冲区2.2.3 向缓冲区对象写入数据2.2.4 将缓冲区...
点燃火柴
WebGL入门(二十六)-同时使用漫反射光和环境反射光、立方体平移旋转缩放变换时漫反射光和环境反射光处理
立方体平移旋转缩放变换时漫反射光和环境反射光处理 1.demo效果2.相关知识点2.1 相关回顾2.2 环境反射光计算模型2.3 物体表面反射光计算 3.demo代码 1.demo效果 如上，图一是没添加环境光...
点燃火柴
WebGL入门(十五)-使用多幅纹理/纹理叠加
使用多幅纹理/纹理叠加 1.demo效果2.实现要点2.1 顶点着色器中声明varying变量v_TexCoord2.2 片元着色器中多纹理处理2.3 外部纹理图像加载2.4 纹理叠加处理与绘图 3.demo代码 1.demo效果 如上图...
点燃火柴
WebGL入门(三十六)-HUD（平视显示器）实现
HUD（平视显示器）实现 1. demo效果2.实现要点2.1 什么是HUD2.2 HUD实现2.2.1 准备画布2.2.2 绘制三维图形2.2.3 绘制HUD信息 3.demo代码 1. demo效果 如上图，在三维场景中叠...
点燃火柴
WebGL入门(四)-在JavaScript程序通过uniform变量向片元着色器传值
在JavaScript程序通过uniform变量向片元着色器传值 1.demo效果2.相关知识点2.1 片元着色器中的uniform变量2.2 gl.getUniformLocation()方法2.3 gl.uniform4f()方法2.4 gl.uniform4f()的同族函数...
点燃火柴
WebGL入门(二十五)-物体变换时光照处理、立方体平移旋转缩放变换时漫反射光照计算、逆转置矩阵
立方体平移旋转缩放时漫反射光照计算 1.demo效果2.相关知识点2.1 物体坐标变换法向量变化2.2 矩阵逆转置 3. demo代码4.后续 1.demo效果 如上，图一为变换前的效果，是贴的上一个dem...
点燃火柴
WebGL入门(十四)-用加载纹理图片在矩形表面上创建纹理贴图/实现纹理映射
在矩形表面上创建纹理贴图 1.demo效果2.相关知识点2.1 纹理、纹素、纹理映射、纹理坐标、坐标映射关系2.2 gl.createTexture()方法2.3 gl.pixelStorei()方法2.4 gl.activeTexture()方法2.5 gl.bi...
点燃火柴