Is it possible to apply decals to a mesh and then save the result as a new mesh texture in 3js/r3f?

38 Views Asked by At

I am using 3js via react-three-fiber and have in a scene a model with possibly thousands of DecalGeometry's (via react-three-drei's <Decal> abstraction):

<mesh {...}>
    <primitive object={geometry} args={[1,1,1]} />
    <meshStandardMaterial attach={"material"} color={'orange'}/>
    {decals.map((_decal, index) => 
        <Decal
            key={index}
            position={_decal}
            mesh={meshref}
            scale={0.1}
            rotation={[0, 0, 0]}
            >
                <meshBasicMaterial map={texture}
                                   polygonOffset
                                   polygonOffsetFactor={-1}
                />
            </Decal>
    )}
</mesh>

I know this is probably sub-optimal as my understanding is that each of these need to be sent to the GPU separately. I have tried to look into instanced rendering, but can't see how that would work at least with the drei's abstraction I am using (furthermore, the decal intersection calculations are probably nontrivial which whould diminish any benefits?).

That got me wondering: would it be possible to access the result of applying a handful of decals to the model as a texture, in the model's uv space? That way, once in a while, when performance becomes an issue, I could take all the decals and bake them into a separate texture, freeing up that performance for new ones.

However, I am a little lost on how to approach doing something like that. Is there a way to access the resulting texture somehow in threejs / r3f?

0

There are 0 best solutions below