UD5工具箱
常见问题
什么是 Shader（着色器）？
Shader 是运行在 GPU 上的小型程序，用于控制图形渲染过程中的各个阶段。简单来说，Shader 就是告诉计算机"如何绘制屏幕上每个像素颜色"的代码。在 WebGL 环境中，Shader 用 GLSL（OpenGL Shading Language）语言编写。最常见的两种 Shader 是顶点着色器（处理顶点位置变换）和片段着色器（计算像素颜色）。通过编写不同的 Shader 代码，可以实现从简单的颜色填充到复杂的光照、阴影、后处理等各种视觉效果。Shader 编程是现代图形开发中的核心技能。
GLSL 语言的基础语法是什么？
GLSL 的语法类似 C 语言，但增加了对向量和矩阵的原生支持。常用的数据类型包括：float（浮点数）、int（整数）、bool（布尔值）、vec2/vec3/vec4（二维/三维/四维浮点向量）、mat3/mat4（3x3/4x4浮点矩阵）。每种着色器必须有一个 main 函数作为入口，片段着色器通过 gl_FragColor 输出颜色，顶点着色器通过 gl_Position 输出位置。GLSL 提供了丰富的内置函数如 sin、cos、mix、smoothstep、texture2D 等，以及内置变量如 gl_FragCoord、gl_PointCoord 等。编写着色器时需要注意变量的作用域和精度限定符（如 highp、mediump、lowp）。
片段着色器和顶点着色器有什么区别？
顶点着色器和片段着色器是 GPU 渲染管线中的两个不同阶段。顶点着色器处理的是顶点数据，每个顶点执行一次，主要负责将3D坐标变换为屏幕2D坐标（通过 MVP 矩阵变换），并可以传递纹理坐标、法线等属性给后续阶段。片段着色器处理的是像素（片段）数据，每个像素执行一次，主要负责计算该像素的最终颜色，可以实现纹理采样、光照计算、颜色混合等效果。简单理解：顶点着色器决定"形状在哪里"，片段着色器决定"颜色是什么"。两者通常配合使用来完成完整的渲染任务。
什么是 Uniform 变量？如何使用？
Uniform 变量是从 JavaScript 代码传递到着色器的外部数据，在一次绘制调用中对所有顶点和片段都是相同的值（即"统一的"）。在 GLSL 代码中用 uniform 关键字声明，例如 uniform float u_time; uniform vec2 u_resolution; uniform vec2 u_mouse; 等。常用的内置 uniform 包括：u_time（从开始运行的时间，用于创建动画效果）、u_resolution（画布分辨率，用于计算坐标）、u_mouse（鼠标位置，用于交互效果）。在 JavaScript 端通过 gl.uniform1f()、gl.uniform2f() 等方法设置 uniform 的值。注意 uniform 是只读的，着色器内部不能修改其值。
WebGL 渲染管线的完整流程是什么？
WebGL 渲染管线的主要流程如下：首先，JavaScript 代码准备顶点数据（位置、颜色、纹理坐标等）并传递给 GPU；然后，顶点着色器对每个顶点执行，完成坐标变换和属性传递；接着，图元装配阶段将顶点组装成三角形、线段等基本图元；光栅化阶段将图元转换为离散的片段（像素候选）；片段着色器对每个片段执行，计算最终颜色值；最后经过深度测试、模板测试和颜色混合等阶段，最终结果写入帧缓冲区并显示在屏幕上。整个管线支持可编程的阶段是顶点着色器和片段着色器，其他阶段通过状态机进行配置。
有哪些常见的 Shader 效果和应用场景？
Shader 可以实现非常丰富的视觉效果。常见效果包括：颜色渐变和纯色填充（基础应用）、纹理映射和混合（多层纹理叠加）、Perlin 噪声和分形图案（程序化纹理生成）、光照模型（Phong、PBR 等光照计算）、阴影映射（Shadow Mapping）、边缘检测和描边（图像处理）、模糊和锐化（后处理效果）、水波和扭曲（顶点动画）、粒子系统（GPU 加速粒子）、光线步进和射线追踪（高级渲染技术）。应用场景涵盖游戏开发（角色渲染、场景特效）、数据可视化（图表、地图）、Web 产品展示（3D 产品模型、交互效果）、创意编程和艺术创作等。
如何优化 Shader 的运行性能？
Shader 性能优化的关键策略包括：减少循环次数和条件分支，GPU 的并行架构对复杂分支和循环的支持有限；使用低精度类型（如 mediump 代替 highp），在移动端尤其重要；缓存重复计算的结果到变量中，避免重复执行相同的数学运算；减少纹理采样次数，合并多次采样为一次；使用内置函数代替手动计算（如 dot 代替手动向量乘法再求和）；对于纹理密集型 shader，考虑使用 mipmap 和纹理压缩；分析 FPS 数据找出瓶颈，针对性优化计算量最大的部分。在开发过程中应养成在不同硬件上测试性能的习惯。