我们可以通过uniforms向着色器传递数据(示例):
const shaderMaterial = new THREE.ShaderMaterial({
vertexShader: vertexShader, // 顶点着色器
fragmentShader: fragmentShader, // 片段着色器
uniforms: {
opacity: { value: 0.5 }, // 透明度
},
wireframe: false // 设置为true可以查看网格结构
});
// 片段着色器
const fragmentShader = `
precision mediump float;
varying vec2 vUv;
uniform float opacity; // 从uniform获取的透明度数据
void main() {
// 基础颜色
vec3 color = vec3(vUv.x, vUv.y, opacity);
gl_FragColor = vec4(color, 1.0);
}
`;
着色器是 GPU 编程的核心,掌握了着色器编程,就掌握了高性能图形渲染的关键技术。通过自定义着色器,可以创造出无限可能的视觉效果。