A little background on what led me here: I was working on a personal project building a relatively simple grid based map builder (something that could be used as a tool to build maps that might be used in table top games). I started out just building an HTML/CSS/JS solution, however, ran into performance issues once a map started to get bigger than 60x60 tiles, simply due to the number of elements in the dom, and having to manipulate them all when panning the map for example. There are definitely ways to work around this performance issue just using HTML/CSS/JS, however, at this point I thought a Three.js solution might be easier, and ultimately, much more robust.
I’ve done a handful of basic tutorials and went through most of the suggested resources in the Three.js docs, so I feel like I have a general understanding of the basics. I started out by working toward a proof on concept in the most simple, but naive way. Each tile is a separate mesh created based on the settings chosen for that tile. I quickly realized that number of draw calls is a big factor for performance in WebGL even if the objects are simple.
At this point, I feel like I don’t quite have enough experience to know exactly what the right questions are to ask here. But, currently, I’m thinking of two potential approaches to build a proof of concept.
- Understand how to more performantly create many similar meshes to create a grid based map that can be updated dynamically in an editor type context.
- Take the approach of providing a subset of elements that can be placed. For example - a room with given dimensions, or a hallway, etc. Ending up with a much more reasonable number of draw calls for even a large map (but also creating a more limited creation experience).
The first option seems like the way to create a flexible tool, though also possibly much more complicated to implement.
I’ve seen some projects like https://github.com/vonWolfehaus/von-grid that create a grid based builder, but this also breaks down at medium to large grid sizes.
I’ve also looked at multiple different voxel based projects (http://maxogden.github.io/voxel-engine/, http://www.voxeljs.com/ for example). These all seem to create a structure around grouping and chunking a large number of items efficiently, though, most aren’t maintained or current, so it feels like updating and leveraging a tool like that might be a little bit out of depth of an initial Three.js project.
So this ultimately brings me to my question. I’m trying to understand what a reasonable approach in Three.js for this type of functionality might be with performance in mind. I realize this is a pretty big topic, so I’m not looking for someone to lay out an entire plan, but help by describing a general direction to investigate or additional resources/patterns to start with. Are those 2 directions above a reasonable way to think about the problem at hand? Are there any existing, open projects that might resemble this type behavior that would provide a good example? (I haven’t been able to find one, though I’m still very new to the WebGL/Three.js community.)
I appreciate any help on suggestions getting started here, thanks!