shader编程-RayMarching与SDF结合开始三维探索（WebGL-Shader开发基础07）
RayMarching与SDF结合开始三维探索 1. 初识RayMarching2. 实现过程2.1 光线步进函数2.2 获取物体表面距离2.3 计算光照阴影2.4 物体表面距离计算 3 demo运行结果4 demo代码 1. 初识RayMarching ...
WebGL入门(六)-通过坐标计算实现图形的平移、旋转和缩放变换
通过坐标计算实现图形的平移、旋转和缩放变换 1.图形的平移1.1平移效果说明1.2平移原理说明1.3平移图形的实现步骤1.3.1在顶点着色器中声明存放平移信息的uniform变量u_Translation1.3.2获取顶点...
WebGL入门(十九)-三维视图通过调整正射投影矩阵/盒状可视空间实现三角形的显示与消失
三维视图正射投影矩阵 1.demo效果2.相关知识点2.1 正射投影2.2 Matrix4.setOrtho()函数 3. demo代码 1.demo效果 如上，通过上下键调整正投影矩阵参数far的值，通过左右键调整正投影...
WebGL-Shader入门（2.着色器语言GLSL ES矢量和矩阵的访问与运算）
矢量类型和矩阵类型变量的访问与运算 1. 序2. 矢量的访问2.1 单一分量访问2.2 分量组合使用2.3 分量聚合作为左值使用 3. 矩阵的访问4. 矢量与矩阵支持的运算符5. 矢量与矩阵的运算5.1 矢量和数...
WebGL入门(二十五)-物体变换时光照处理、立方体平移旋转缩放变换时漫反射光照计算、逆转置矩阵
立方体平移旋转缩放时漫反射光照计算 1.demo效果2.相关知识点2.1 物体坐标变换法向量变化2.2 矩阵逆转置 3. demo代码4.后续 1.demo效果 如上，图一为变换前的效果，是贴的上一个dem...
WebGL入门(二十)-三维视图通过透视投影矩阵创建远小近大的两排三角形
通过透视投影矩阵创建远小近大的两排三角形 1.demo效果2.相关知识点2.1 透视投影2.2 Matrix4.setPerspective()函数 3. demo代码 1.demo效果 如上，通过透视投影矩阵创建了左右两排三角形&...
shader编程-三维场景下SDF建模，平滑交集、平滑并集、平滑差集（WebGL-Shader开发基础11）
三维场景下SDF建模，平滑交集、平滑并集、平滑差集 1. demo效果2. 实现要点2.1 平滑运算方法定义2.2 模型计算3. demo代码 1. demo效果 smooth-operate 如上所示，三个展示的模型分...
WebGL入门(九)-通过缩放矩阵实现图形(三角形)的缩放
通过缩放矩阵实现图形的缩放 1.缩放效果展示2.缩放矩阵推理3.使用缩放矩阵要点3.1声明缩放矩阵3.2获取缩放矩阵u_ScaleMatrix的存储地址3.3向缩放矩阵u_ScaleMatrix传值 4.demo代码 1.缩放效果展...
WebGL入门(四十)-通过切换着色器实现一个页面同时展示多个立方体
通过切换着色器实现一个页面同时展示多个立方体 1. demo效果2. demo实现步骤2.1 准备绘制单色立方体的着色器2.2 准备绘制纹理立方体的着色器2.3 创建绘制单色立方体的程序对象2.4 创建绘制纹理...
WebGL入门(二十三)-绘制每个面指定颜色的立方体
绘制每个面指定颜色的立方体 1.demo效果2.相关知识点2.1 每个面指定颜色原理2.2 定义顶点坐标、顶点颜色、顶点索引数组 3.demo代码 1.demo效果 如上，绘制了不同面指定颜色的立方体 2.相...
WebGL-Shader入门（6.着色器语言GLSL ES 预处理指令和宏定义）
GLSL ES 预处理指令宏定义 1. 预处理指令1.1 `#if`1.2 `#ifdef`1.3 `#ifndef` 2. 宏定义 1. 预处理指令 预处理指令用来在着色器程序真正编译之前对代码进行预处...
WebGL入门(十五)-使用多幅纹理/纹理叠加
使用多幅纹理/纹理叠加 1.demo效果2.实现要点2.1 顶点着色器中声明varying变量v_TexCoord2.2 片元着色器中多纹理处理2.3 外部纹理图像加载2.4 纹理叠加处理与绘图 3.demo代码 1.demo效果 如上图...