问题
Having recently switched to three.js as my renderer, I am now wanting to set up a system for mapping textures. However, I'm not too sure on what the best practice for this is. Here is my use case
- I have levels made of a lot of box geometries
- I need to be able to map a wide variety of textures to each face of each box geometry (grass, water, stone, rock etc.,)
- I would like to do this in the most efficient, performance conscious way as possible, so offloading this to the GPU would be best if possible
- I am using the Web GL renderer
I currently have my textures set up in a sprite sheet; each texture is a 64x64 pixel square, so each different texture is offset by 64 pixels depending on its position.
Is this necessary, or should I just have a directory full of many different textures, loop through it and create a new instance of THREE.ImageUtils.loadTexture( "textures/someTexture.png" ); for each one?
Or is there a more efficient way of doing this?
回答1:
Since your textures are so lightweight, the on-demand approach you mention in your comment with separate files is probably the right method because it gives you explicit control over what is loaded and when. Smart handling is important, load visible textures first, then textures that might become visible with some movement, then everything else. Good use of fog and camera view frustum/distance properties can make much of this automatic.
It is certainly a legitimate strategy to arrange multiple textures into a larger file ( 2048 x 2048 is as high as you would want to go ) and load them at once, especially if your internet connection works better with less file handling (cough cough satellite). But I think this strategy begins to fail if you ever need to update individual textures because it means replacing the whole image. If you have "zones" that use certain texture sets, it might be a good idea to preload these sets as large images if the player is approaching the zone and the preloader is not already chugging.
The entire history of the internet is the story of efficient loading of media, so you're on well-trodden ground. Check out how browser caches work too so you never reload an image you don't have to. Hope this helps.
来源：https://stackoverflow.com/questions/26323620/what-is-the-best-practice-for-loading-multiple-textures-in-three-js