Dynamic decal (Additive texture layer)

Questions
,
1

Hey guys,
I want to have additive layer on my texture, like mark on another texture. So I think I can use decal for it but my model has an animation and the additive texture should be updated according to the animation.
I was checking DecalGeometry but seems it is good for fixed models and it’s not optimized to update the decal each frame by DecalGeometry (Although I couldn’t test DecalGeometry because of mesh.geometry error in DecalGeometry and I don’t know how to fix it).

So what is your suggestion ?

2

As you already highlighted, DecalGeometry is intended for static use cases and probably the wrong approach in context of animations.

Have you considered to manipulate your diffuse texture at runtime? three.js provides actually a basic API for this, see WebGLRenderer.copyTextureToTexture(). Check out the following example to see this in action.

https://threejs.org/examples/webgl_materials_texture_partialupdate

Instead of modifying your diffuse texture, you could also enhance a build-in material with Material.onBeforeCompile and introduce an additional texture for your additive effects.

1 Like
3

@Mugen87
For copyTextureToTexture, I have this error:
TypeError: “b.image is undefined”
copyTextureToTexture three.min.js:209
Any idea ?

4

If you’re familiar with shaders you could extend your material to add your additional texture layer.

https://codepen.io/Fyrestar/pen/YmpXYr

2 Likes
5

@Fyrestar
Thanks for the shader, it is really helpful.
Just I want to know how I can increase that additional texture layer opacity ? I mean I don’t want the part of the underlay is visible.

6

Additive means it will be added, so it is mixed by default. Here’s one just alpha blending for full coverage.

https://codepen.io/Fyrestar/pen/xvRpxa

3 Likes