Question

我有一个带有VideoTexture的MeshBasicMaterial。我可以动态地将自定义着色器应用于材质。我能够使用THREE.EffectComposer将着色器应用于整个场景，但如果我想将自定义滤镜应用于场景内的特定元素，该怎么办呢？我想测试像棕褐色，色调饱和度这样的简单滤镜。此外，我必须能够在不重新加载项目的情况下在两者之间切换。

我没有使用像serious.js或glfx.js这样的js库，因为在我将使用three.js对象没有canvas / img / video作为map时，它可能会导致后期阶段出现问题。

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的优秀，快速，互动的速成课程。

但问题的解决方案是创建多个着色材质，或者创建一个着色器材料来完成所有事情，然后使用制服在不同效果之间启用/缩放。

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

1 个答案: