WebGL入门(三十九)-透明与不透明物体共存，绘制透明面和不透明面的立方体
绘制透明面和不透明面的立方体 1. 绘制透明立方体1.1 绘制透明立方体要点1.2 绘制透明立方体demo效果1.3 绘制透明立方体demo代码1.4 开启隐藏面消除后 2. 透明与不透明共存2.1 透明与不透明共存...
WebGL入门(三十八)-绘制透明三维物体，通过α混合绘制透明三角形
通过α混合绘制透明三角形 1. demo效果2. 知识要点2.1 α混合2.2 α混合实现2.3 指定混合 gl.blendFunc() 3. demo代码 1. demo效果 如上图，绘制了前、中、后三个三角形，通过α混...
WebGL入门(三十七)-绘制圆形的点
绘制圆形的点 1. demo效果2. 实现要点2.1 绘制原理2.1 绘制实现 3. demo代码 1. demo效果 如上图，绘制出了三个红色的小圆点 2. 实现要点 2.1 绘制原理 我们已经知道在绘制图形时有一个光...
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入门(三十五)-三维物体雾化效果，立方体雾化效果
立方体雾化效果 1. demo效果2.相关知识点2.1 雾化相关概念2.2 雾化因子计算2.3 片元颜色计算 3.实现要点3.1 计算顶点与视点的距离3.2 计算雾化后片元颜色3.3 计算雾化所需数据传值 4. demo代码5...
WebGL入门(三十四)-三维空间中鼠标控制物体旋转，用鼠标控制立方体的旋转
用鼠标控制立方体的旋转 1. demo效果2. 实现要点2.1 注册鼠标事件2.1.1 注册鼠标事件函数的声明2.1.2 注册鼠标事件函数的调用 2.2 纹理图片加载2.3 图形绘制 3. demo代码 1. demo效果 如上图&#x...
WebGL入门(三十三)-通过鼠标点击选中立方体，选中立方体的某个面
通过鼠标点击选中立方体，选中立方体的某个面 1.三维物体选中原理与实现步骤1.1物体选中原理1.2物体选中实现步骤1.2.1注册鼠标点击事件1.2.2顶点着色器作特定值设置处理1.2.3告诉顶点着色...
WebGL入门(三十二)-着色器和着色器程序对象，初始化着色器说明
着色器和着色器程序对象，初始化着色器说明 1.initShaders() 函数创建步骤2.相关API介绍2.1创建着色器对象 gl.createShader()2.2指定着色器代码 gl.shaderSource()2.3编译着色器 gl.compi...
WebGL入门(三十一)-每个部件使用不同的缓冲区对象实现机械臂模拟动画
每个部件使用不同的缓冲区对象实现机械臂模拟动画 1.demo效果2.实现要点2.1声明各个组件顶点并创建缓冲区对象2.2绘制各个组件 3.demo代码 1.demo效果 如上图，这次的demo效果与上一节一样...
WebGL入门(三十)-利用层次模型实现机械臂模拟动画
利用层次模型实现机械臂模拟动画 1.demo效果2.实现要点2.1绘制各个模型块2.2绘制方块函数2.3动画函数 2.demo代码 1.demo效果 如上图，实现了模拟机械臂搬运方块动画 2.实现要点 2.1绘制各...
WebGL入门(二十九)-逐片元处理点光源光照效果
逐片元处理点光源光照效果 1.demo效果2.实现要点2.1顶点着色器中声明varying变量2.2片元着色器中使用varying变量 3.demo代码 1.demo效果 如上图，图二为逐片元处理点光源的效果，与...
WebGL入门(二十八)-物体坐标变换时光照计算，立方体动画旋转时点光源计算处理
立方体动画旋转时点光源计算处理 1.demo效果2.实现要点2.1 声明顶点着色器2.2 声明动画函数tick 3.demo代码 1.demo效果 如上图，立方体旋转时点光源照射在指定的位置上的效果，照射...