I’m weighing up whether to embark on a 3D, block based diorama game in CSS3 (3d transforms) or in p5 + WebGL. There are lots of issues in making a 3D isometric map with CSS3 so I’m hoping you guys have an answer for me!
The issue is with controlling how textures are applied to shapes, in particular, boxes. I would like to:
make the top face have its own texture
make the side faces repeat a texture along the box, with all of the textures in the same orientation
The best way to visualise what I’m trying to achieve would be to think of a stack of soil blocks in minecraft, with the top face containing a grass texture.
I understand that I could perhaps add a plane to the top of every box, but that will double the number of objects I have (it is a 10x10 grid so 100 shapes becomes 200, not sure how bad this is performance wise), and there is still the issue of having the textures facing the same way up and tiling instead of stretching.
In p5.js, rather than using box() I believe that you will want to create a Block class made out of rectangles, each of which receives its own texture.
Is your game is fixed-perspective isometric? If so you only need 3 rectangles, not 6. So you just saved yourself 3 sides!
You could do some preliminary performance tests on boxes-with-rects vs 3-rects, but you might not want to worry about that too much until you get the basics of your design roughed out in test code.
I wouldn’t recommend CSS3 for this right now – even beyond the current compatibility issues, it will probably be a real pain compared to a JS-based approach. However, maybe somebody else has had good experiences with it that they would like to share.
Edit: You mentioned WebGL box, specifically. If you go that route and want different textures on different faces, here is some discussion – see in particular the ramen menu cube example on the second link.
General tutorial here – I’m not sure if it addresses separate textures specifically:
Thanks for the help! Yes, I need to be able to have different textures on different sides and would want to manipulate the textures with UI controls (panning, scaling and such) so it’s important that each face has its own image / orientation. Also it will have perspective so will need all 6 sides!
I’ll have a read through those resources, thanks again
