WebGL-Shader入门(1.着色器语言GLSL ES数据类型介绍与使用)-卡核

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 矩阵...
WebGL-Shader入门(2.着色器语言GLSL ES矢量和矩阵的访问与运算)-卡核

WebGL-Shader入门(2.着色器语言GLSL ES矢量和矩阵的访问与运算)

矢量类型和矩阵类型变量的访问与运算 1. 序2. 矢量的访问2.1 单一分量访问2.2 分量组合使用2.3 分量聚合作为左值使用 3. 矩阵的访问4. 矢量与矩阵支持的运算符5. 矢量与矩阵的运算5.1 矢量和数...
WebGL-Shader入门(3.着色器语言的限定词-参数限定词/存储限定词/精度限定词)-卡核

WebGL-Shader入门(3.着色器语言的限定词-参数限定词/存储限定词/精度限定词)

着色器语言的限定词 1. 序2 参数限定词3 存储限定词4 精度限定词 1. 序 GLSL ES 中提供了三类限定词(又称限定字或限定符,都是一回事,本文统称为限定词),参数限定词、存储...
WebGL-Shader入门(4.着色器语言GLSL ES函数定义与流程控制)-卡核

WebGL-Shader入门(4.着色器语言GLSL ES函数定义与流程控制)

函数定义与流程控制 1. 函数定义1.1 函数结构1.2 规范声明 2 流程控制2.1 if语句2.2 for语句2.3 continue、break语句2.4 discard语句 1. 函数定义 1.1 函数结构 GLSL ES 的函数定义与C语言接近&...
WebGL-Shader入门(5.着色器语言GLSL ES 内置变量和内置函数)-卡核

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 几何...
WebGL-Shader入门(6.着色器语言GLSL ES 预处理指令和宏定义)-卡核

WebGL-Shader入门(6.着色器语言GLSL ES 预处理指令和宏定义)

GLSL ES 预处理指令宏定义 1. 预处理指令1.1 `#if`1.2 `#ifdef`1.3 `#ifndef` 2. 宏定义 1. 预处理指令 预处理指令用来在着色器程序真正编译之前对代码进行预处...
使用VBO、IBO创建彩色甜圈圈(WebGL进阶01)-卡核

使用VBO、IBO创建彩色甜圈圈(WebGL进阶01)

使用VBO、IBO创建彩色甜圈圈 1. demo效果2. 实现要点2.1 初始化顶点信息2.2 向着色器传值2.3 注册鼠标拖拽事件 3. demo代码 1. demo效果 2. 实现要点 2.1 初始化顶点信息 如上图绘制甜圈圈的思...
三维模型平行光照射实现(WebGL进阶02)-卡核

三维模型平行光照射实现(WebGL进阶02)

三维模型平行光照射实现 1. demo效果2. 知识要点2.1 平行光照射2.2 物体变换时表面法线处理 3. 实现要点3.1 顶点着色器3.2 相关矩阵计算 4. demo代码 1. demo效果 上图是平行光照射下效果 上图...
三维模型环境光照射实现(WebGL进阶03)-卡核

三维模型环境光照射实现(WebGL进阶03)

三维模型环境光照射实现 1. demo效果2. 环境光介绍3. 实现要点3.1 顶点着色器调整3.2 向着色器中传值环境光颜色 4. demo代码 1. demo效果 上图是平行光照射下效果 上图是平行光+环境光照射...
三维模型反射光照射实现、物体表面高光实现(WebGL进阶04)-卡核

三维模型反射光照射实现、物体表面高光实现(WebGL进阶04)

三维模型反射光照射实现 1. demo效果2. 反射光介绍3. 实现要点3.1 反射光计算3.2 向着色器传值 4. demo代码 1. demo效果 2. 反射光介绍 反射光分为漫反射和镜面反射,平行光属于慢反射。...
WebGL三维模型实现Phong着色(WebGL进阶05)-卡核

WebGL三维模型实现Phong着色(WebGL进阶05)

WebGL三维模型实现Phong着色 1. demo效果2. Phong着色与Gouraud 着色2.1Gouraud 着色2.2 Phong 着色 3. 实现要点4. demo代码 1. demo效果 2. Phong着色与Gouraud 着色 通过前面几篇文章,...
WebGL使用点光源照明(WebGL进阶06)-卡核

WebGL使用点光源照明(WebGL进阶06)

使用点光源照明 1. demo效果2. 点光源介绍3. 实现要点3.1 片元着色器中计算点光源3.2 准备绘制物体的数据3.3 绘制物体 4. demo代码 1. demo效果 上图效果为原点处有点光源照射的效果 2. 点光源...