uniform
uniform
一个基础节点,用于将任何静态或动态数据(如颜色、数字、纹理)从 JavaScript (CPU) 传递给着色器 (GPU)。
核心优势
它通过提供一种简单、类型安全的方式,让 JavaScript 可以在运行时控制着色器参数,从而实现动态和可配置的材质,且无需重新编译着色器。
常见用途
传递由 JS 控制的动态值(如时间、鼠标位置)以驱动动画。
定义可配置的材质属性(如颜色、粗糙度),用于产品配置器等场景。
将纹理(如漫反射贴图、法线贴图)传递给着色器进行采样。
如何调整
通过在 JavaScript 中修改其 .value 属性来调整。例如,创建一个 vec2 uniform,在 JS 中用鼠标坐标持续更新其值,然后在着色器中用它来驱动一个跟随鼠标的探照灯效果。
代码示例
1// 在 JS 中创建一个 uniform 来持有颜色
2const myColorUniform = uniform(new THREE.Color(0xff0000));
3material.colorNode = myColorUniform;
4
5// 在渲染循环中,直接修改 .value 属性
6myColorUniform.value.setHSL(hue, 1.0, 0.5);