排序
WebGL入门(三十四)-三维空间中鼠标控制物体旋转，用鼠标控制立方体的旋转
用鼠标控制立方体的旋转 1. demo效果2. 实现要点2.1 注册鼠标事件2.1.1 注册鼠标事件函数的声明2.1.2 注册鼠标事件函数的调用 2.2 纹理图片加载2.3 图形绘制 3. demo代码 1. demo效果 如上图&#x...
2年前
WebGL入门(二十八)-物体坐标变换时光照计算，立方体动画旋转时点光源计算处理
立方体动画旋转时点光源计算处理 1.demo效果2.实现要点2.1 声明顶点着色器2.2 声明动画函数tick 3.demo代码 1.demo效果 如上图，立方体旋转时点光源照射在指定的位置上的效果，照射...
2年前
WebGL入门(二十四)-光照原理、漫反射光计算、漫反射光照射下的立方体
漫反射光照射下的立方体1.demo效果2.相关知识点2.1 光照原理2.2 光源类型2.3 反射类型2.4 漫反射计算模型3.demo代码1.demo效果添加了漫反射光照射效果的立方体，最前面的面亮一些，顶上和右侧...
2年前
WebGL入门(二十二)-通过顶点索引绘制渐变色的立方体
通过顶点索引绘制渐变色的立方体 1.demo效果2.相关知识点2.1 顶点索引原理2.2 gl.drawElements() 方法 3.demo代码 1.demo效果 如上，通过顶点索引绘制出了一个渐变色的立方体 2.相关知识...
2年前
WebGL入门(四)-在JavaScript程序通过uniform变量向片元着色器传值
在JavaScript程序通过uniform变量向片元着色器传值 1.demo效果2.相关知识点2.1 片元着色器中的uniform变量2.2 gl.getUniformLocation()方法2.3 gl.uniform4f()方法2.4 gl.uniform4f()的同族函数...
2年前
WebGL入门(三十三)-通过鼠标点击选中立方体，选中立方体的某个面
通过鼠标点击选中立方体，选中立方体的某个面 1.三维物体选中原理与实现步骤1.1物体选中原理1.2物体选中实现步骤1.2.1注册鼠标点击事件1.2.2顶点着色器作特定值设置处理1.2.3告诉顶点着色...
2年前
WebGL入门(三十一)-每个部件使用不同的缓冲区对象实现机械臂模拟动画
每个部件使用不同的缓冲区对象实现机械臂模拟动画 1.demo效果2.实现要点2.1声明各个组件顶点并创建缓冲区对象2.2绘制各个组件 3.demo代码 1.demo效果 如上图，这次的demo效果与上一节一样...
2年前
WebGL入门(七)-通过平移矩阵实现图形(三角形)的平移
通过平移矩阵实现图形的平移 1.平移效果展示2.平移矩阵原理3.使用平移矩阵要点3.1声明平移矩阵3.2获取平移矩阵u_TranslateMatrix的存储地址3.3向平移矩阵u_TranslateMatrix传值 4.demo代码 1.平...
2年前
WebGL入门(六)-通过坐标计算实现图形的平移、旋转和缩放变换
通过坐标计算实现图形的平移、旋转和缩放变换 1.图形的平移1.1平移效果说明1.2平移原理说明1.3平移图形的实现步骤1.3.1在顶点着色器中声明存放平移信息的uniform变量u_Translation1.3.2获取顶点...
2年前
WebGL入门(四十四)-WebGL上下文丢失事件与上下文恢复事件处理
WebGL上下文丢失事件与上下文恢复事件处理 1. demo效果2. 相关知识点2.1 上下文丢失介绍2.2 WebGL提供的响应事件2.3 响应事件处理2.3.1 响应事件注册2.3.2 响应事件实现说明 3. demo代码 1. dem...
2年前
WebGL入门(二十五)-物体变换时光照处理、立方体平移旋转缩放变换时漫反射光照计算、逆转置矩阵
立方体平移旋转缩放时漫反射光照计算 1.demo效果2.相关知识点2.1 物体坐标变换法向量变化2.2 矩阵逆转置 3. demo代码4.后续 1.demo效果 如上，图一为变换前的效果，是贴的上一个dem...
2年前
WebGL入门(二十三)-绘制每个面指定颜色的立方体
绘制每个面指定颜色的立方体 1.demo效果2.相关知识点2.1 每个面指定颜色原理2.2 定义顶点坐标、顶点颜色、顶点索引数组 3.demo代码 1.demo效果 如上，绘制了不同面指定颜色的立方体 2.相...
2年前