Hi. I am new to this forum and in the process of planning my first project with three js. I have played around with three in the past, and with Babylon.js, but now it’s time to make something good. So I have a little knowledge, but would appreciate any sort of general advice about the following:
I am creating a scene in Blender, which I intend to use as a threejs backdrop on a personal site. I plan on moving the camera around the scene during navigation around the site. What I am trying to plan out my asset creation pipeline in such a way that I can make this scene fairly large while keeping it performant.
So the scene I am going for is in essence a large landscape with a few landmarks that will be visible close up, trees in the medium and far distance and mountains and a city on the horizon. The camera controls will be very restricted, so I only have to make things look good from certain points of view, at ground level.
So generally my plan so far is to create a simple landscape mesh, add some low poly landmarks to it, (buildings in the distance mainly), and fill the scene with tree sprites, to give the effect of moving through a forest on the outskirts of a city. I will bake the lighting into a lightmap. I think that simple planes with transparency, painted to look like groups of trees will work, when mixed with a few instanced tree meshes for close up. As I said the view will be restricted so I don’t need to procedurally swap out the trees or anything, it will all be manually placed in Blender, more like creating a movie scene than an open world game. I will handpaint a skydome as well, (the whole thing will have a sort of painterly effect, I will be painting things in Krita, so photorealism is not an issue).
What I am wondering about is the format of the textures that I should use. I don’t know much about this area, but as I understand it, I can create a texture atlas, pack in lots of detail to that one texture and reuse it across multiple meshes. Then when I come to export the scene I can use Don Mccurdy’s gltf-transform tool to compress the exported GLTF so that the textures are swapped for Basis textures. What sort of image format would be best for that kind of workflow, in terms maintaining quality for a small file size? I see PNG is used a lot so was thinking about using that, but they are quite large I think…
Another thing I don’t really understand about textures is the tradeoffs between using large texture atlases, in terms of their resolution, as compared with using multiple smaller texture files. For instance would it be better to try to pack everything in to a few 2048 by 2048 png images or to use more 512 by 512 png images?
Maybe there is not much difference, but thought I would ask in case anyone here can keep me right. Maybe I am overthinking the performance stuff at this stage 
but I don’t want to go create this scene in stupid ways and find that it is too heavy to run well in three js.
So anyway, any tips on things I should watch out for when creating this scene would be really appreciated. Any relevant tutorials would be useful as well. Most of the ones I have seen are related to creating game assets for unity or mobile game engines in open worlds, but this project will be a bit different and as I understand it getting the optimization right is even more important when it comes to assets on the web.
Will report back as I progress through my experiments on here in case someone else finds it useful.
