排序
WebGL入门(五)-使用缓冲区对象向着色器传值绘制三角形
使用缓冲区对象向着色器传值绘制三角形 1.demo效果2.相关知识点2.1 什么是缓冲区对象2.2 使用缓冲区对象的步骤2.2.1 创建缓冲区对象2.2.2 绑定缓冲区2.2.3 向缓冲区对象写入数据2.2.4 将缓冲区...
2年前
WebGL三维模型实现Phong着色（WebGL进阶05）
WebGL三维模型实现Phong着色 1. demo效果2. Phong着色与Gouraud 着色2.1Gouraud 着色2.2 Phong 着色 3. 实现要点4. demo代码 1. demo效果 2. Phong着色与Gouraud 着色 通过前面几篇文章，...
2年前
WebGL入门(三十九)-透明与不透明物体共存，绘制透明面和不透明面的立方体
绘制透明面和不透明面的立方体 1. 绘制透明立方体1.1 绘制透明立方体要点1.2 绘制透明立方体demo效果1.3 绘制透明立方体demo代码1.4 开启隐藏面消除后 2. 透明与不透明共存2.1 透明与不透明共存...
2年前
shader编程-RayMarching与SDF搭建三维场景实现Blinn-Phong光照（WebGL-Shader开发基础08）
RayMarching与SDF搭建三维场景实现Blinn-Phong光照 1. demo概述与效果2. Blinn-Phong光照模型介绍3. demo实现3.1 场景物体准备3.2 rayMarching调整3.3 Blinn-Phong光照计算 4. demo代码 1. demo...
2年前
WebGL-Shader入门（1.着色器语言GLSL ES数据类型介绍与使用）
GLSL ES数据类型介绍与使用 1. GLSL ES介绍2. 变量定义3. 变量类型3.1 基本类型3.1.1 基本类型的介绍3.1.2 基本类型的赋值和类型转换 3.2 矢量3.2.1 矢量类型介绍3.2.2 矢量构造和赋值 3.3 矩阵...
2年前
shader编程-通过交集、并集、差集实现形状的合并（WebGL-Shader开发基础04）
shader编程-通过交集、并集、差集实现形状的合并 1. 准备2. 交集实现3. 并集实现3. 差集实现4. 示例代码 1. 准备 先复习一下数学概念，交集、并集、差集如下图所示 我们准备拿圆做实验&#x...
2年前
WebGL入门(七)-通过平移矩阵实现图形(三角形)的平移
通过平移矩阵实现图形的平移 1.平移效果展示2.平移矩阵原理3.使用平移矩阵要点3.1声明平移矩阵3.2获取平移矩阵u_TranslateMatrix的存储地址3.3向平移矩阵u_TranslateMatrix传值 4.demo代码 1.平...
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进阶03）
三维模型环境光照射实现 1. demo效果2. 环境光介绍3. 实现要点3.1 顶点着色器调整3.2 向着色器中传值环境光颜色 4. demo代码 1. demo效果 上图是平行光照射下效果 上图是平行光+环境光照射...
2年前
WebGL入门(八)-通过旋转矩阵实现图形(三角形)绕Z轴的旋转
通过旋转矩阵实现图形的旋转 1.旋转效果展示2.旋转矩阵推理3.使用旋转矩阵要点3.1声明旋转矩阵3.2获取旋转矩阵u_RotateMatrix的存储地址3.3向旋转矩阵u_RotateMatrix传值 4.demo代码 1.旋转效果...
2年前
WebGL入门(一)-初识WebGL
初识WebGL 1.什么是WebGL2.WebGL起源3.WebGL特点与优势4.总结 1.什么是WebGL WebGL就是可以帮助你在浏览器上创建和渲染三维图形的一个API集，也就是专门用于Web页面的OpenGL 2.WebGL起源 ...
2年前
三维模型平行光照射实现（WebGL进阶02）
三维模型平行光照射实现 1. demo效果2. 知识要点2.1 平行光照射2.2 物体变换时表面法线处理 3. 实现要点3.1 顶点着色器3.2 相关矩阵计算 4. demo代码 1. demo效果 上图是平行光照射下效果 上图...
2年前