Three.js ShaderPass 和 ShaderMaterial：如何采样贴图并编写顶点和片元着色器

在THREE.js中，使用ShaderPass和ShaderMaterial来进行着色器渲染时，你可以通过采样贴图来应用纹理。下面是一个简单的例子，展示了如何在顶点着色器和片元着色器中采样贴图。\n\n首先，你需要创建一个ShaderMaterial对象，并将顶点着色器和片元着色器代码分别赋值给顶点着色器属性和片元着色器属性。在这个例子中，我们将使用一个uniform变量来传递纹理到着色器中。\n\njavascript\nvar vertexShader = `\n void main() {\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n`;\n\nvar fragmentShader = `\n uniform sampler2D texture;\n \n void main() {\n vec2 uv = vec2(0.5, 0.5); // 纹理坐标\n vec4 color = texture2D(texture, uv); // 从纹理中采样颜色\n gl_FragColor = color; // 输出颜色\n }\n`;\n\nvar shaderMaterial = new THREE.ShaderMaterial({\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n uniforms: {\n texture: { value: texture } // 传递纹理到uniform变量中\n }\n});\n\n\n在这个例子中，我们创建了一个uniform变量texture，它用于接收纹理。在片元着色器中，我们通过调用texture2D函数来从纹理中采样颜色，并将结果赋值给gl_FragColor，以输出颜色。\n\n接下来，你可以创建一个ShaderPass对象，并将刚刚创建的ShaderMaterial对象作为参数传递进去。然后将ShaderPass对象添加到EffectComposer中，就可以在渲染过程中应用着色器效果了。\n\njavascript\nvar shaderPass = new THREE.ShaderPass(shaderMaterial);\ncomposer.addPass(shaderPass);\n\n\n这里的composer是一个EffectComposer对象，用于管理渲染过程。你可以在渲染循环中调用composer.render方法来渲染场景，并应用着色器效果。\n\n完整的示例代码如下：\n\njavascript\nvar vertexShader = `\n void main() {\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n`;\n\nvar fragmentShader = `\n uniform sampler2D texture;\n \n void main() {\n vec2 uv = vec2(0.5, 0.5); // 纹理坐标\n vec4 color = texture2D(texture, uv); // 从纹理中采样颜色\n gl_FragColor = color; // 输出颜色\n }\n`;\n\nvar shaderMaterial = new THREE.ShaderMaterial({\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n uniforms: {\n texture: { value: texture } // 传递纹理到uniform变量中\n }\n});\n\nvar shaderPass = new THREE.ShaderPass(shaderMaterial);\ncomposer.addPass(shaderPass);\n\nfunction animate() {\n requestAnimationFrame(animate);\n composer.render();\n}\n\nanimate();\n\n\n请注意，这只是一个简单的示例，真实的着色器代码可能更复杂。你可以根据自己的需求进行修改和扩展。