Three.js / WebGL一次加载大量纹理数据,如何?

时间:2013-06-24 16:44:00

标签: javascript memory three.js webgl

最近我有一个项目,我需要使用canvas创建大量纹理,然后将它们上传到GPU。由于所有纹理都被一次性推送到GPU总线上,所以当页面加载时,我的内存不断耗尽(chrome崩溃)和“ch咽”。

我决定错开texture.needsUpdate = true;次调用,以便在单个渲染更新中不会将所有纹理推送到GPU。

这有效,但我对其他任何解决方案都很好奇......

我发布了这个,因为它可能对在启动时加载所有纹理的其他人有帮助...

1 个答案:

答案 0 :(得分:1)

将纹理剔除至零是阻止过度负载的最佳方法。在根部缩小它们将改善跟随线路的所有内容。

虽然这篇文章很老,但它似乎是谷歌的最佳结果。所以这里有一些方便的提示,适用于任何其他初学3D游戏/网络开发人员。

纹理以固定位块的形式添加到缓冲区中,块越少越好,但以2的幂分辨率创建纹理将防止加载半块并浪费位/时间。功率是指在每个实例(2,4,8,16,32,64)处加倍的数字序列,保持此公式将防止丢失位。

查看屏幕上纹理的大小。您的源可能是1024x1024,但如果它在屏幕上只有20px高,或者您的输出画布ID为480x640,则所有额外信息都将丢失。减少纹理,使其与屏幕上的纹理相匹配。

在同样的方面,如果您不使用它们,请在纹理上取出颜色,有时您可以使用顶点着色和/或灯光向纹理添加细节,在这种情况下将纹理保存为灰度图像,或者通过索引来限制调色板大小。

.gif是小纹理的一种很好的格式,而Jpeg更适合压缩大纹理。如果您使用.gif,您还可以通过将纹理分组到一个图像和匹配它们的调色板来节省空间。请记住,整个塞尔达LTTP游戏仅运行256种颜色。有一些方法可以创建RGB索引数组并将图像存储为原始数据。

如果要从JSON导入/导出,请记住您的图像默认为原始32位.png文件。这本身就很大,当作为位数据添加到JSON objet文件的末尾时变得更大。 仅导出网格数据并通过源中的JS将纹理添加回其中,这样您就可以使用更多格式并优化更多纹理。