Three.js ShaderPass 和 ShaderMaterial 纹理采样教程 | 代码示例

// 创建一个 ShaderPass，用于应用自定义的着色器效果 var shaderPass = new THREE.ShaderPass(shaderMaterial);

// 创建一个 THREE.WebGLRenderTarget，用于渲染到纹理 var renderTarget = new THREE.WebGLRenderTarget(width, height);

// 将渲染目标设置为 ShaderPass 的输出 shaderPass.renderToScreen = false; shaderPass.renderTarget = renderTarget;

// 将 ShaderPass 添加到 EffectComposer 中 composer.addPass(shaderPass);

// 在 ShaderMaterial 中设置纹理采样器 var shaderMaterial = new THREE.ShaderMaterial({ uniforms: { textureSampler: { value: null } }, vertexShader: document.getElementById('vertexShader').textContent, fragmentShader: document.getElementById('fragmentShader').textContent });

// 在渲染循环中更新纹理采样器的值 function animate() { requestAnimationFrame(animate);

// 更新纹理采样器的值
shaderMaterial.uniforms.textureSampler.value = renderTarget.texture;

// 渲染场景
composer.render();

}

animate();

上述代码中，我们首先创建了一个 ShaderPass，用于应用自定义的着色器效果。然后创建了一个 THREE.WebGLRenderTarget，用于渲染到纹理。我们将渲染目标设置为 ShaderPass 的输出，并将 ShaderPass 添加到 EffectComposer 中。

接下来，在 ShaderMaterial 中设置了一个纹理采样器 uniform，并在渲染循环中更新纹理采样器的值为渲染目标的纹理。最后，使用 composer.render() 方法渲染场景。

其中，vertexShader 和 fragmentShader 是自定义的着色器代码，你可以根据需要进行修改和扩展。在着色器代码中，可以使用 uniform sampler2D textureSampler 来声明纹理采样器，并使用 texture2D(textureSampler, uv) 来采样纹理。

希望以上代码对你有所帮助！