WebGL入门(二十五)-物体变换时光照处理、立方体平移旋转缩放变换时漫反射光照计算、逆转置矩阵
立方体平移旋转缩放时漫反射光照计算 1.demo效果2.相关知识点2.1 物体坐标变换法向量变化2.2 矩阵逆转置 3. demo代码4.后续 1.demo效果 如上，图一为变换前的效果，是贴的上一个dem...
WebGL入门(二十六)-同时使用漫反射光和环境反射光、立方体平移旋转缩放变换时漫反射光和环境反射光处理
立方体平移旋转缩放变换时漫反射光和环境反射光处理 1.demo效果2.相关知识点2.1 相关回顾2.2 环境反射光计算模型2.3 物体表面反射光计算 3.demo代码 1.demo效果 如上，图一是没添加环境光...
WebGL入门(二十七)-点光源使用，点光源照射下的立方体效果
点光源使用，点光源照射下的立方体效果 1.demo效果2.相关知识点2.1 点光源方向计算 3. demo代码 1.demo效果 如上图，立方体在点光源照射下的效果，最前面的面右上角看起来比...
WebGL入门(二十八)-物体坐标变换时光照计算，立方体动画旋转时点光源计算处理
立方体动画旋转时点光源计算处理 1.demo效果2.实现要点2.1 声明顶点着色器2.2 声明动画函数tick 3.demo代码 1.demo效果 如上图，立方体旋转时点光源照射在指定的位置上的效果，照射...
WebGL入门(二十九)-逐片元处理点光源光照效果
逐片元处理点光源光照效果 1.demo效果2.实现要点2.1顶点着色器中声明varying变量2.2片元着色器中使用varying变量 3.demo代码 1.demo效果 如上图，图二为逐片元处理点光源的效果，与...
WebGL入门(三十)-利用层次模型实现机械臂模拟动画
利用层次模型实现机械臂模拟动画 1.demo效果2.实现要点2.1绘制各个模型块2.2绘制方块函数2.3动画函数 2.demo代码 1.demo效果 如上图，实现了模拟机械臂搬运方块动画 2.实现要点 2.1绘制各...
WebGL入门(三十一)-每个部件使用不同的缓冲区对象实现机械臂模拟动画
每个部件使用不同的缓冲区对象实现机械臂模拟动画 1.demo效果2.实现要点2.1声明各个组件顶点并创建缓冲区对象2.2绘制各个组件 3.demo代码 1.demo效果 如上图，这次的demo效果与上一节一样...
WebGL入门(三十二)-着色器和着色器程序对象，初始化着色器说明
着色器和着色器程序对象，初始化着色器说明 1.initShaders() 函数创建步骤2.相关API介绍2.1创建着色器对象 gl.createShader()2.2指定着色器代码 gl.shaderSource()2.3编译着色器 gl.compi...
WebGL入门(三十三)-通过鼠标点击选中立方体，选中立方体的某个面
通过鼠标点击选中立方体，选中立方体的某个面 1.三维物体选中原理与实现步骤1.1物体选中原理1.2物体选中实现步骤1.2.1注册鼠标点击事件1.2.2顶点着色器作特定值设置处理1.2.3告诉顶点着色...
WebGL入门(三十四)-三维空间中鼠标控制物体旋转，用鼠标控制立方体的旋转
用鼠标控制立方体的旋转 1. demo效果2. 实现要点2.1 注册鼠标事件2.1.1 注册鼠标事件函数的声明2.1.2 注册鼠标事件函数的调用 2.2 纹理图片加载2.3 图形绘制 3. demo代码 1. demo效果 如上图&#x...
WebGL入门(三十五)-三维物体雾化效果，立方体雾化效果
立方体雾化效果 1. demo效果2.相关知识点2.1 雾化相关概念2.2 雾化因子计算2.3 片元颜色计算 3.实现要点3.1 计算顶点与视点的距离3.2 计算雾化后片元颜色3.3 计算雾化所需数据传值 4. demo代码5...
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效果 如上图，在三维场景中叠...