After much wailing and gnashing of teeth I seem to have heightmap saving and loading working properly. Now you can load up a scene, make changes to the terrain height, save the scene, refresh the page, load the scene you just saved, and the terrain changes you made earlier are persistent. The heightmap data is stored in a PNG image that gets stored on the server whenever you save the scene. This has been relatively complicated to get going because THREE.js dropped all non-buffer based geometry. This is, apparently, a much more efficient way to send data to the GPU but it means you can’t just loop through a geometry object’s vertices. Instead you must access the geometry’s ‘position’ attribute array, and make changes there. It’s actually not that much different it just throws my head for a loop because geometries have position attributes as well as indices that define individual faces. I may be overthinking the relationship between the indices array and the vertices array, but in any case it gives me trouble occasionally. But, for now, scene saving is working again.
My next step is to implement camera zooming. It’s really tough to edit terrains efficiently when you can only see the terrain from a fixed distance. I then need to create different terrain editing tools that are adjustable. Right now all you can do is raise or lower the terrain vertices within a statically sized selection sphere. I need to be able to perform other functions like smoothing and flattening as well as change the size and strength of the selection sphere. I also don’t like the idea of displaying the selection tool as a sphere. Hopefully I can figure out how to make it a decal instead that changes appearance based on the size and strength adjustments made by the user.
I’ll be working on these features for the next few days and will post again when they are done. Oh, and happy Valentine’s Day everyone.