How to instance Floor Plank in Procedural Floor component

Hi there,

i built this procedural Floor component (https://codesandbox.io/p/sandbox/floorprocedural-j7s5n3).
It works as intended, but i cannot get Instancing to work. Right now, there are too many draw calls. So i tried to use drei’s <Instances /> Component without success.
I know that a problem lies in the different maps on the <FloorPlank /> component. But i thougt i can simply create 6 different Instances to keep those different maps. Has anybody had a similar case, who could guide me through the process of instancing? Is it even possible to instance in this case of my component?
Any advise could be helpful!

Thanks,
Tom

I would make the floorplank as a single model (gltf) or otherwise, that uses a single material, and then you can instance it. But more generally, instancing individual floorboards isn’t going to be super efficient. I would probably design floors as an extruded shape of the room outline, and use a single tiled floorboard texture on that extruded shape. You could also use a normalmap to give the illusion of more individual boards.

I also thought about using a single mesh with one texture but i was given different single floor planks. Meaning i would have to create a procedural tiled single texture out of the single textures… Is there an easy way?

How are you going to handle floors that aren’t square or have angled walls?

Check out the floors in here: Blueprint 3D - Example

They use the extrusion of the floor perimeter like I described. The tricky part is identifying the room boundary polygon.

Of course, that would be the best case, but for now rectangle/squared floors are fine. Just out of curiosity, how exactly are they extruding this exact shape with correct uvs? What I dont like, that the seams are visible:

With my approach this would be much cleaner (…and way less performant). Do you know any way to create a procedural Texture out of single planks? (I’ll research myself, just wanted to ask if you know something)

Lots of ways. But easiest/most efficient is to just draw it into a canvas and use the CanvasTexture and adjust .repeat/.offset to fit the bounds of the floor mesh.

And… these are all just suggestions. I don’t know what your actual target is for this…

If you’re designing floors for interactive display… I would definitely aim for more optimal approaches.

If you’re trying to design an offline animation generator, or something that computes the number of floorboards and sizes/lengths for some kind of architectural application, then instancing might be the way to go.

Actually the floor is just nice to have so i do not want to spend too much time on. So the option of creating big textures and apply it on an extruded mesh sounds pretty convincing for me. I’ll just need a fast way to make the big seamless texture out of 6 plank textures. But i’ll dive into that maybe it is not that hard.

Thanks @manthrax

1 Like