WebGL入门(十六)-三维视图模型原理，视点、视线、观察点、上方向
三维视图模型原理 1.demo效果2.相关知识点2.1 视点、视线、观察点、上方向2.2 创建视图矩阵 3. demo代码 1.demo效果 如上图，这个demo中三个不同颜色的三角形展示在三维坐标中。 2.相关知...
shader编程-三维场景下SDF建模，对模型进行扭曲、弯曲、裁剪、掏空操作（WebGL-Shader开发基础12）
对模型进行扭曲、弯曲、裁剪、掏空操作 1. demo效果2. 实现要点2.1 模型扭曲2.2 模型弯曲2.3 模型裁剪与掏空2.3.1 球体裁剪与掏空2.3.2 圆柱裁剪与掏空2.3.3 甜圈圈裁剪与掏空 3. demo代码 1. d...
WebGL入门(二十七)-点光源使用，点光源照射下的立方体效果
点光源使用，点光源照射下的立方体效果 1.demo效果2.相关知识点2.1 点光源方向计算 3. demo代码 1.demo效果 如上图，立方体在点光源照射下的效果，最前面的面右上角看起来比...
shader编程-着色器中颜色基础（WebGL-Shader开发基础06）
shader编程-着色器中颜色基础 1. 单色背景颜色2. 颜色根据屏幕坐标变化3. 物体形状颜色4. 借助A通道处理物体形状颜色5. 相关代码 1. 单色背景颜色 在之前的文章中我们用一个三维向量表示颜色 ve...
WebGL入门(三十四)-三维空间中鼠标控制物体旋转，用鼠标控制立方体的旋转
用鼠标控制立方体的旋转 1. demo效果2. 实现要点2.1 注册鼠标事件2.1.1 注册鼠标事件函数的声明2.1.2 注册鼠标事件函数的调用 2.2 纹理图片加载2.3 图形绘制 3. demo代码 1. demo效果 如上图&#x...
WebGL入门(十)-通过矩阵相乘实现图形(三角形)的组合变换
通过矩阵相乘实现图形的组合变换 1.组合变换效果展示2.知识点梳理2.1组合变换原理2.2组合变换实现要点2.2.1顶点着色器声明uniform变量u_ModelMatrix2.2.2声明模型矩阵Matrix4对象及其属性方法介...
WebGL入门(二十四)-光照原理、漫反射光计算、漫反射光照射下的立方体
漫反射光照射下的立方体1.demo效果2.相关知识点2.1 光照原理2.2 光源类型2.3 反射类型2.4 漫反射计算模型3.demo代码1.demo效果添加了漫反射光照射效果的立方体，最前面的面亮一些，顶上和右侧...
WebGL入门(三)-在JavaScript程序通过attribute变量向顶点着色器传值
在JavaScript程序通过attribute变量向着色器传值 1.demo效果2.相关知识点2.1 着色器中的attribute变量2.2 gl.getAttribLocation()方法2.3 gl.vertexAttrib3f()方法2.4 gl.vertexAttrib3f()的同...
WebGL入门-WebGL常用API说明详解
WebGL常用API说明 1.设置背景色 gl.clearColor()2.清空绘图区 gl.clear()3.绘制操作 gl.drawArrays()4. attribute变量4.1 获取attribute变量地址 gl.getAttribLocation()4.2 给attribute变量传...
