传递数据给着色器

我们可以通过uniforms向着色器传递数据示例

1.创建带uniforms的着色器材质

const shaderMaterial = new THREE.ShaderMaterial({
    vertexShader: vertexShader,   // 顶点着色器
    fragmentShader: fragmentShader, // 片段着色器
    uniforms: {
        opacity: { value: 0.5 }, // 透明度
    },
    wireframe: false // 设置为true可以查看网格结构
});

2. 通过uniforms向着色器传递数据:

// 片段着色器
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 编程的核心,掌握了着色器编程,就掌握了高性能图形渲染的关键技术。通过自定义着色器,可以创造出无限可能的视觉效果。