三维视图从指定视点观察变换后的图形 1.demo效果2.相关知识点2.1 从视点观察变换后图形的模型2.2 Matrix4对象的图形变换相关方法和属性 3.demo代码 1.demo效果 如上，图一是在视点观察到...

通过α混合绘制透明三角形 1. demo效果2. 知识要点2.1 α混合2.2 α混合实现2.3 指定混合 gl.blendFunc() 3. demo代码 1. demo效果 如上图，绘制了前、中、后三个三角形，通过α混...

通过坐标计算实现图形的平移、旋转和缩放变换 1.图形的平移1.1平移效果说明1.2平移原理说明1.3平移图形的实现步骤1.3.1在顶点着色器中声明存放平移信息的uniform变量u_Translation1.3.2获取顶点...

点光源使用，点光源照射下的立方体效果 1.demo效果2.相关知识点2.1 点光源方向计算 3. demo代码 1.demo效果 如上图，立方体在点光源照射下的效果，最前面的面右上角看起来比...

三维视图模型原理 1.demo效果2.相关知识点2.1 视点、视线、观察点、上方向2.2 创建视图矩阵 3. demo代码 1.demo效果 如上图，这个demo中三个不同颜色的三角形展示在三维坐标中。 2.相关知...

绘制圆形的点 1. demo效果2. 实现要点2.1 绘制原理2.1 绘制实现 3. demo代码 1. demo效果 如上图，绘制出了三个红色的小圆点 2. 实现要点 2.1 绘制原理 我们已经知道在绘制图形时有一个光...

使用缓冲区对象向着色器传值绘制三角形 1.demo效果2.相关知识点2.1 什么是缓冲区对象2.2 使用缓冲区对象的步骤2.2.1 创建缓冲区对象2.2.2 绑定缓冲区2.2.3 向缓冲区对象写入数据2.2.4 将缓冲区...

立方体平移旋转缩放变换时漫反射光和环境反射光处理 1.demo效果2.相关知识点2.1 相关回顾2.2 环境反射光计算模型2.3 物体表面反射光计算 3.demo代码 1.demo效果 如上，图一是没添加环境光...

使用多幅纹理/纹理叠加 1.demo效果2.实现要点2.1 顶点着色器中声明varying变量v_TexCoord2.2 片元着色器中多纹理处理2.3 外部纹理图像加载2.4 纹理叠加处理与绘图 3.demo代码 1.demo效果 如上图...

HUD（平视显示器）实现 1. demo效果2.实现要点2.1 什么是HUD2.2 HUD实现2.2.1 准备画布2.2.2 绘制三维图形2.2.3 绘制HUD信息 3.demo代码 1. demo效果 如上图，在三维场景中叠...

在JavaScript程序通过uniform变量向片元着色器传值 1.demo效果2.相关知识点2.1 片元着色器中的uniform变量2.2 gl.getUniformLocation()方法2.3 gl.uniform4f()方法2.4 gl.uniform4f()的同族函数...

立方体平移旋转缩放时漫反射光照计算 1.demo效果2.相关知识点2.1 物体坐标变换法向量变化2.2 矩阵逆转置 3. demo代码4.后续 1.demo效果 如上，图一为变换前的效果，是贴的上一个dem...