Three.js - 图片管理 - 推荐答案

【问题标题】：Three.js - Images managing - RecommendationsThree.js - 图片管理 - 推荐
【发布时间】：2021-08-08 23:10:07
【问题描述】：

我有一个看起来像这样的项目：

这个想法是：根据用户加载的图片数量增加其高度的通用房间。

它可以工作...但是当我加载 100 多张图片时，它开始严重影响性能。这是我的第一个 Three.js 项目，所以我绝对是新手。

我一直在寻找一些关于优化的提示和技巧，我想听听您的意见。

为了尊重图像尺寸，我做了一个 Promise.all 在 World 初始化之前获取所有图像。然后我使用 PlaneBufferGeometry 根据图像的宽高比构建网格。

显然，建议加载两倍大小的纹理（https://discoverthreejs.com/tips-and-tricks/ -> 纹理部分）。我是否应该调整所有图像的大小，使它们的宽度和高度是 2 的幂，并且比例最接近原始图像？由于原始图像有许多不同的尺寸，您将如何处理这样的事情？

编辑：这是创建绘图对象的方法：

export class Drawing {
    constructor(texture) {        
        
        const imgW = Math.floor(texture.image.naturalWidth / 20);
        const imgH = Math.floor(texture.image.naturalHeight / 20);        
        const material = new MeshBasicMaterial({
            color: 0xffffff,
            map: texture
        });      
        material.color.convertSRGBToLinear();  
        this.mesh = new Mesh(new PlaneBufferGeometry(imgW, imgH), material);
    }

最后，我只是网格到场景中。

【问题讨论】：

如果你使用的是最新的three.js，那么你不需要有2倍大小的纹理。
调整图片大小后是否保留原图？这可以很快填满内存。
我不确定，我已经编辑了帖子以向您展示我是如何创建绘图的。我应该在创建网格后“处理”纹理吗？
不，看起来您使用 imgW 和 imgH 仅用于构造平面几何。您的纹理是原始大小（1000+ 像素），所以是的，您的内存超载了。您不应该 dispose 纹理...只需在加载时将它们调整为原始大小的十分之一（例如）。
上传到 youtube 的关于调试内存的好视频可能很有用。 youtube.com/watch?v=YDU_3WdfkxA

标签： javascript image optimization three.js

【解决方案1】：

您可以生成在相应比例下加载不同（功率）质量图像的 mipmap。然而，一个更大的性能瓶颈显然是资源管理。您应该将图像加载作为反馈（惰性）循环，而不是巨大的一次性功能。也许您会解析 1000 幅图像的元数据，但实际上会在相机位置接近断点时动态加载新纹理。例如在 y=100 时，加载图像 200-300。您还可以使用网格砖石和雾来改善灯箱体验。绝对减少超过合理尺寸的图像，使用画布或适当的东西。避免“围墙花园”方法，负担将在功能上，而不是数量上。

【讨论】：