我们可以动态地将自定义着色器应用于三个.js 对象吗

Question

我有一个带有 VideoTexture 的 MeshBasicMaterial。我可以动态地将自定义着色器应用于材质吗？我可以使用 THREE.EffectComposer 将着色器应用到整个场景，但是如果我想将自定义过滤器应用到场景中的特定元素怎么办。我想测试简单的过滤器，如棕褐色、色相饱和度。此外，我必须能够在两者之间切换而无需重新加载项目。

我没有使用像 Serious.js 或 glfx.js 这样的 js 库，因为当我使用没有 canvas/img/video 作为地图的三个.js 对象时，它可能会在后期导致问题。

videoTexture = new THREE.VideoTexture(video);
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
material = new THREE.MeshBasicMaterial({
    map: videoTexture,
    side: THREE.DoubleSide,
    transparent: true,
    depthTest: false,
    depthWrite: false
});

composer = new THREE.EffectComposer( renderer );
composer.addPass( new THREE.RenderPass( scene, camera ) );
var effect = new THREE.ShaderPass( THREE.SepiaShader );
effect.renderToScreen = true;
composer.addPass( effect );
composer.render();

编辑 1：过滤器 css(https://developer.mozilla.org/en-US/docs/Web/CSS/filter) 也不起作用，因为它只会改变视觉媒体，因此虽然它可以操纵最终画布，但它不能操纵内部对象纹理。

Answer 1

THREE.EffectComposer 有一个 .reset 函数，你可以用它来擦除它，然后添加你想要的新过滤器。因此，只需将您想要循环的不同过滤器加载到一个数组中，然后从该数组重置并添加通道。

编辑 我以为您在谈论更改作曲家中的着色器。要更改对象上的着色器，您可以创建具有不同着色器但引用相同纹理的多个着色器材质，并在对象上交换材质。因此，您可以编写一个着色器，将纹理色彩空间重新解释为棕褐色，将纹理色彩空间重新解释为 bnw，或者用 r、g 或 b 混合色调和饱和度。

然后，您可以即时交换多种材料。这些效果是基本的 glsl，但是如果您在编写着色器时遇到问题，只需发布​​另一个有特定问题的线程即可。如果你是 glsl 新手，我强烈推荐 the book of shaders. 这是一个很棒的、快速的、交互式的 glsl 速成课程。

但您的问题的解决方案是创建多个着色器材质，或者创建一个可以完成所有工作的着色器材质，然后使用制服在不同效果之间启用/调整。