WebGL入门(十三)-通过片元着色器内置变量gl_FragCoord验证内插过程
通过片元着色器内置变量gl_FragCoord验证内插过程 1.demo效果2. 片元着色器的内置变量gl_FragCoord3. demo代码 1.demo效果 如上图，这个demo实现一个紫色渐变效果的三角形，通过使...
WebGL入门(二十六)-同时使用漫反射光和环境反射光、立方体平移旋转缩放变换时漫反射光和环境反射光处理
立方体平移旋转缩放变换时漫反射光和环境反射光处理 1.demo效果2.相关知识点2.1 相关回顾2.2 环境反射光计算模型2.3 物体表面反射光计算 3.demo代码 1.demo效果 如上，图一是没添加环境光...
WebGL入门(一)-初识WebGL
初识WebGL 1.什么是WebGL2.WebGL起源3.WebGL特点与优势4.总结 1.什么是WebGL WebGL就是可以帮助你在浏览器上创建和渲染三维图形的一个API集，也就是专门用于Web页面的OpenGL 2.WebGL起源 ...
WebGL入门(二十)-三维视图通过透视投影矩阵创建远小近大的两排三角形
通过透视投影矩阵创建远小近大的两排三角形 1.demo效果2.相关知识点2.1 透视投影2.2 Matrix4.setPerspective()函数 3. demo代码 1.demo效果 如上，通过透视投影矩阵创建了左右两排三角形&...
WebGL入门(二)-属于WebGL的Hello Word
属于WebGL的Hello Word1.demo效果2.相关知识点2.1 Canvas2.1.1 获取Canvas对象2.1.2 获取Canvas的上下文2.2 着色器2.2.1 着色器分类2.2.2 着色器的初始化2.2.2.1 着色器语言数据类型（此例涉...
shader编程-RayMarching三维场景下使用交集、并集、差集方法CSG建模（WebGL-Shader开发基础10）
三维场景下使用交集、并集、差集方法CSG建模 1. CSG介绍2. demo效果3. 实现过程3.1 交集、并集、差集函数3.2 旋转矩阵3.3 基础形状3.4 组合过程3.4.1 互相垂直圆柱实现3.4.2 相交的球体与立方体...
WebGL入门(八)-通过旋转矩阵实现图形(三角形)绕Z轴的旋转
通过旋转矩阵实现图形的旋转 1.旋转效果展示2.旋转矩阵推理3.使用旋转矩阵要点3.1声明旋转矩阵3.2获取旋转矩阵u_RotateMatrix的存储地址3.3向旋转矩阵u_RotateMatrix传值 4.demo代码 1.旋转效果...
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-Shader入门（5.着色器语言GLSL ES 内置变量和内置函数）
GLSL ES 内置变量和内置函数 1. 内置变量1.1 gl_PointSize1.2 gl_Position1.3 gl_FragColor1.4 gl_FragCoord1.5 gl_PointCoord 2. 内置函数2.1 通用函数2.2 角度和三角函数2.3 指数函数2.4 几何...