20 docs tagged with "GLSL"

WebGL 渲染管线概览，搭建基于原生 Three.js 与 RawShaderMaterial 的 Shader 开发环境

GLSL 强类型系统：float、int、bool、vec、mat 等基本类型与变量声明规则

GLSL 向量 swizzling、几何运算（dot、cross、normalize、mix、fract）与矩阵乘法、坐标系变换

GLSL 存储限定符与 varying 插值机制：attribute 从顶点传 GPU，uniform 全局共享，varying 顶点到片段插值

GLSL 函数定义与 for、if 等控制流，避免动态循环以保证 GPU 并行性能

GLSL 常用内置函数：dot、cross、normalize、mix、step、smoothstep、fract、clamp 等图形学核心 API

顶点着色器到片段着色器的 varying 插值原理与光栅化机制

Lambert 漫反射与 Phong 高光模型实战：法线、向量约定（Surface→Light）与点积计算

实战编写第一个动态色彩波浪 Shader：顶点位移、UV 配色与高度加亮，基于 RawShaderMaterial

进阶实战：菲涅尔、UV 流动、噪声三大经典 Shader 效果及其底层原理

屏幕后处理：RenderTarget 加全屏 pass 实现 Bloom、色差、Glitch、Vignette 等全屏效果

Shader 调试技巧：截图、Spec 工具、RenderDoc、Renderer Info、Chrome DevTools 与常见坑位

Three.js ShaderChunk、ShaderLib、RawShaderMaterial 源码级解析，理解内置材质的 GLSL 工程化

纯原生 WebGL API 实现：脱离 Three.js，彻底理解渲染管线底层

GLSL、WebGL 面试真题、底层原理考察、常见坑位与避坑指南

横向对比 WGSL 与 GLSL 的核心差异：绑定模型、内存模型、入口函数、纹理采样与控制流约束，帮助 GLSL 开发者快速建立 WebGPU 时代的着色器思维。

从 WebGL 时代 onBeforeCompile 字符串黑客的痛点出发，剖析 Three.js 团队为何推 TSL 而非"直接用 WGSL"，并理解 TSL 作为语言无关中间层在 WebGPU / WebGL2 双跑、节点复用、Compute 抽象上的设计价值。

GLSL 系统化课程，从语法基础、向量矩阵、光照模型，到 Shader 实战、后期处理与 Three.js 源码级解析，基于原生 Three.js + RawShaderMaterial 深入 WebGL 渲染管线底层

所有章节的 GLSL 编程作业汇总清单，覆盖基础语法、向量矩阵、光照模型、Shader 实战等

图形学数学基础第 4 周，深入 GLSL 着色器编程：基本类型（float/int/bool）、Uniform 与 Attribute 的区别、Vertex Shader 与 Fragment Shader 的协作方式，以及如何用 ShaderMaterial 在 Three.js 中替换默认材质。