Is it possible to dynamically apply custom shaders to a MeshBasicMaterial with VideoTexture in Three.js? I have successfully applied shaders to the entire scene using THREE.EffectComposer, but how can I apply custom filters to a specific element within the scene? I am interested in testing simple filters like sepia and hue-saturation, and I also need to be able to switch between these without reloading the project.
I chose not to use JavaScript libraries like seriously.js or glfx.js because they may cause issues later on when working with Three.js objects that do not have canvas/img/video as maps.
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();
Edit 1: Using CSS filter won't work either as it only changes visual media and cannot manipulate internal object textures. See more here: https://developer.mozilla.org/en-US/docs/Web/CSS/filter.