Shader 在线试验场 - 编写 GLSL 并实时渲染

专业术语解析

Shader（着色器）

Shader 是运行在 GPU 上的小型程序，用于控制图形渲染管线中的各个阶段。在 WebGL 和 OpenGL 中，shader 用 GLSL（OpenGL Shading Language）编写。最常见的两种 shader 类型是顶点着色器（Vertex Shader）和片段着色器（Fragment Shader）。顶点着色器处理每个顶点的位置和属性，片段着色器计算每个像素的最终颜色。Shader 可以实现从简单颜色填充到复杂光照计算的各种视觉效果。

GLSL

GLSL（OpenGL Shading Language）是专门为 OpenGL 和 WebGL 设计的着色器编程语言。它的语法类似于 C 语言，支持向量和矩阵类型（如 vec2、vec3、mat4 等），以及丰富的内置数学函数。GLSL 代码运行在 GPU 上，可以高效地进行大规模并行计算。常见的 GLSL 数据类型包括 float、int、bool、vec2、vec3、vec4、mat3、mat4 等，以及采样器类型（sampler2D 等）用于纹理采样。

片段着色器（Fragment Shader）

片段着色器是渲染管线中的一个阶段，负责计算屏幕上每个像素（片段）的最终颜色。它是 shader 编程中最常用和最直观的部分。片段着色器的输入包括纹理坐标（varying）、uniform 变量、纹理采样数据等，输出是该像素的 RGBA 颜色值（通过 gl_FragColor 变量）。在片段着色器中可以实现各种像素级别的效果，如颜色渐变、纹理混合、光照计算、后处理等。

顶点着色器（Vertex Shader）

顶点着色器是渲染管线中的第一个可编程阶段，负责处理每个顶点的数据。它的主要任务是将顶点位置从模型坐标系变换到屏幕坐标系（通过模型-视图-投影矩阵变换），同时可以计算和传递其他顶点属性（如法线、纹理坐标、颜色等）给片段着色器。顶点着色器的输出变量通过光栅化阶段插值后传递给片段着色器。通过顶点着色器可以实现顶点动画、骨骼动画、实例化渲染等效果。

Uniform 变量

Uniform 是从 JavaScript 端传递到着色器的只读全局变量，在一次 draw call 中所有顶点和片段共享相同的值。常见的 uniform 变量包括时间（u_time，用于动画效果）、分辨率（u_resolution，用于坐标计算）、鼠标位置（u_mouse，用于交互效果）、变换矩阵（modelViewMatrix、projectionMatrix）等。Uniform 变量的声明以 uniform 关键字开头，类型可以是 float、vec2、vec3、vec4、mat4、sampler2D 等。

WebGL

WebGL（Web Graphics Library）是基于 OpenGL ES 的 JavaScript API，用于在网页浏览器中渲染2D和3D图形。WebGL 直接利用 GPU 进行硬件加速渲染，无需安装任何插件。WebGL 的渲染管线中可编程的阶段使用 shader 实现，开发者通过编写 GLSL 着色器来控制渲染效果。WebGL 广泛应用于数据可视化、游戏开发、产品展示、虚拟现实等 Web 端图形应用。

渲染管线

渲染管线（Render Pipeline）是图形硬件将3D场景数据转换为2D屏幕图像的一系列处理步骤。对于可编程渲染管线，主要阶段包括：顶点着色器（处理顶点变换）、图元装配（组装三角形等图元）、光栅化（将图元转换为片段）、片段着色器（计算片段颜色）、混合与测试（深度测试、模板测试、颜色混合）等。理解渲染管线是掌握 shader 编程的基础。

FPS

FPS（Frames Per Second，每秒帧数）是衡量图形渲染性能的重要指标，表示每秒钟渲染器能输出多少帧画面。对于实时交互应用，30 FPS 是基本的流畅标准，60 FPS 是理想的流畅度。FPS 越高说明渲染性能越好，shader 计算效率越高。如果 FPS 过低，需要优化着色器代码或减少场景复杂度。编辑器中的 FPS 显示功能帮助开发者监控和优化 shader 性能。

噪声函数

噪声函数（Noise Function）是 shader 编程中常用的技术，用于生成随机但连续的数值，模拟自然界的不规则纹理和图案。常见的噪声类型包括 Perlin Noise（柏林噪声）、Simplex Noise（单纯形噪声）、Value Noise（值噪声）等。噪声函数广泛用于生成地形、云彩、火焰、水面等自然效果，以及创建程序化纹理和图案。在 GLSL 中通常使用噪声函数与插值技术来实现丰富的视觉效果。