更贴近原生 WebGL

到目前为止，我们使用的是 ShaderMaterial。它会为你注入一部分 Three.js 的 GLSL 代码、宏与兼容逻辑，让你更容易写 shader。

本节我们改用 RawShaderMaterial：它更接近原生 WebGL 的写法，你需要自己写好精度声明，并显式声明属性与矩阵等变量。这能帮助你分清：哪些是“WebGL 必需”，哪些是 “Three.js 便利”。

目标

• 理解 RawShaderMaterial 与 ShaderMaterial 的差别
• 熟悉最小的 raw shader 结构：精度声明、attribute、矩阵 uniform
• 使用 gl_FragCoord 与 uResolution 在屏幕空间生成渐变

你应当看到什么

你会看到一个三角形在缓慢旋转，并且颜色随时间变化。渐变来自屏幕空间坐标（gl_FragCoord），而不是模型的 UV。

代码要点

文件：RawTriangle.ts

• 顶点着色器需要你显式声明：

precision mediump float;
attribute vec3 position;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;

• 片元着色器使用屏幕坐标：

vec2 uv = gl_FragCoord.xy / uResolution.xy;

这是一条非常常用的“屏幕空间归一化”写法，后处理与许多 2D 特效都会用到它。

动手练习

• 把渐变从 uv.x 改成 uv.y，观察方向变化
• 让颜色随时间更快变化（调大 uTime 的系数）
• 用 length(uv - 0.5) 生成一个圆形遮罩，回顾第 2 节的思路

小结

你已经能在 Three.js 中写出接近原生 WebGL 的 shader，并理解渲染管线中最关键的数据流。接下来如果你要深入 Three.js 的材质系统、后处理框架或自定义渲染管线，这些知识都会成为你的底层能力。