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

Question

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

我没有使用诸如riously.js或glfx.js之类的js库，因为当我使用没有canvas/img/video作为 map 的三个.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 ) 也不起作用，因为它只会更改视觉媒体，因此虽然它可以操纵最终 Canvas ，但无法操纵内部对象纹理。

Answer 1

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

编辑我以为你在谈论更改 Composer 中的着色器。要更改对象上的着色器，您可以使用不同的着色器创建多个着色器 Material ，但引用相同的纹理，然后在对象上交换 Material 。因此，您可以编写一个着色器，将纹理颜色空间重新解释为棕褐色，将纹理颜色空间重新解释为 bnw，或者使用 r、g 或 b 混合色调和饱和度。

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

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