Can we apply custom shaders to three.js objects dynamically

Question

I have a MeshBasicMaterial with VideoTexture. Can I apply custom shaders to the material dynamically. I was able to apply shader to the complete scene using THREE.EffectComposer but what if I want to apply custom filters to a specific element inside the scene. I want to test simple filters like sepia, hue-saturation. Also I must be able to switch between the two without reloading the project.

I did not go with js libraries like seriously.js or glfx.js because it may cause problem at later stages when I will work with three.js objects not having canvas/img/video as 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();

Edit 1: filter css( https://developer.mozilla.org/en-US/docs/Web/CSS/filter) won't work either as it only changes visual media and hence though it can manipulate final canvas it can not manipulate internal object textures.

OtterFamily · Accepted Answer · 2017-06-07 10:14:15Z

1

THREE.EffectComposer has a .reset function that you could use to wipe it, and then add the new filters you want. So just load the different filters you want to cycle through into an array, then reset and add passes from that array.

EDIT I thought you were talking about changing shaders in the composer. To change shaders on an object, you can create multiple shadermaterials with different shaders but referencing the same texture, and swap the materials out on the object. So you can write a shader that reinterprets the texture colorspace to sepia, one that reinterprets the texture colorspace to bnw, or swizzles hue and saturation with r,g, or b.

Then you swap multiple materials out on the fly. These effects are basic glsl, but if you have trouble writing the shaders, just post another thread with specific problems. If you're a glsl novice, I highly recommend the book of shaders. It's a great, fast, interactive crash course on glsl.

But the solution to your problem is to create multiple shadermaterials, or create one shader material that does everything and then use uniforms to enable/lerp between the different effects.

edited Jun 7, 2017 at 10:14

answered Jun 7, 2017 at 9:06

OtterFamily

8034 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Amritesh Anand Over a year ago

I want to apply the texture filter to a specific object inside the scene and not the complete scene.

Amritesh Anand Over a year ago

can you provide a fiddle example of swaping material. When I assign shaderMaterial to my mesh it does not display?

pailhead Over a year ago

Did you look at the mask pass? Never used it just know that it's there. Otherwise might be worth looking into stencil buffers.

OtterFamily Over a year ago

please open another issue if you have specific questions about shadermaterial after you've tried something with a link to a jsfiddle, but the first step is to read the documentation threejs.org/docs/index.html#api/materials/ShaderMaterial and to do tutorials on shaders. but for the question of this thread, swapping materials is the answer to your question.

Amritesh Anand Over a year ago

Thanks I was able to swap the materials.

Collectives™ on Stack Overflow

Can we apply custom shaders to three.js objects dynamically

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related