Generate custom texture and use in material


I have a basic question for understanding. So: I want to load in a texture and use a shader to modify it on-fhe-fly… then, after doing so, use the outcome of that shader as input-texture for a material.

Is there any basic example for doing so? Or a starting point already doing it?

Thanks for all your tips and hints!

Do you want to share that “outcome” across several models/meshes?


By now, only one specific model is relevant - later, I´m sure, it´s going to be shared accross more than one…

And did I get it correctly, that you want kind of a dynamic texture?

Yep, like the only thing that is static is the before loaded bitmap which I then modify in a custom shader → and after doing so can use as map in a material @prisoner849 ?

I’m kind of get lost :slight_smile:
You want it once on loading, or you want it constantly changing on each iteration of render loop?

I want my custom-ShaderMaterial to be able to be updated by uniforms everytime (render loop) and to apply the result of these updates as “new” texture to PhysicalMaterial´s map everytime custom ShaderMaterial did update @prisoner849

ah, now it’s clearer :slight_smile:
Use a render target then

Something like I did here: LightNoise (selective bloom + noise)
See the section of lines 46 - 72. There, I setup a render target, instantiate a camera and a plane with a custom shader. It’s intened to render a height map of noise, which I share between other objects in the scene.
And then, in the animation loop:

  renderer.render(rtScene, rtCamera);
  renderer.render(scene, camera);

Also, there are several examples with render targets: three.js examples

Thanks @prisoner849 ,

As always a great help and source of understanding things - will make my through it!

You’re welcome :slight_smile:
Hope it helps :beers: