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?