在three.js中加载多个纹理的最佳实践是什么? [英] What is the best practice for loading multiple textures in three.js?

问题描述

最近已将我的渲染器切换为three.js，现在我想设置一个用于映射纹理的系统.但是，我不太确定最佳做法是什么.这是我的用例

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

• 我的关卡由很多盒形几何组成
• 我需要能够将各种纹理映射到每个盒子几何体的每个面(草，水，石头，岩石等)
• 我想以最高效，注重性能的方式进行此操作，因此最好将其卸载到GPU
• 我正在使用Web GL渲染器

我目前在sprite表中设置了纹理；每个纹理都是一个64x64像素的正方形，因此每个不同的纹理会根据其位置偏移64个像素.

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.

这是必要的，还是我应该只拥有一个包含许多不同纹理的目录，循环浏览并为每个目录创建一个新的THREE.ImageUtils.loadTexture( "textures/someTexture.png" );实例?

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?

推荐答案

由于纹理非常轻巧，因此您在注释中使用单独的文件提到的按需方法可能是正确的方法，因为它可以使您明确控制哪些内容已加载以及何时加载.智能处理很重要，首先加载可见的纹理，然后再加载可能会随着某些移动而变得可见的纹理，然后再加载其他所有内容.充分利用雾和相机视图的视锥/距离属性可以使这种自动操作变得很重要.

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.

将多个纹理排列到一个更大的文件(2048 x 2048是您想要的高度)并立即加载它们，当然是一种合理的策略，特别是如果您的Internet连接在较少文件处理的情况下工作得更好的话(咳嗽)咳嗽卫星).但是我认为，如果您需要更新单个纹理，则此策略将开始失败，因为这意味着替换整个图像.如果您具有使用某些纹理集的区域"，则最好是在播放器接近该区域且预加载器尚未调整的情况下，将这些集预加载为大图像.

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.

这篇关于在three.js中加载多个纹理的最佳实践是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！