three.js - 使用 CanvasRenderer 提高性能 (FPS)答案

【问题标题】：three.js - improve performance (FPS) using CanvasRendererthree.js - 使用 CanvasRenderer 提高性能 (FPS)
【发布时间】：2012-12-13 18:32:20
【问题描述】：

我有一个管状几何体。 JSON 文件中有 18738 个点。 Tube 有 2000 个点（考虑每 9 个点）。 Tube 有 2000 段（强制），每段有 12 个面，每个面都应用了颜色。

当我在桌面浏览器上使用THREE.WebGLRenderer 渲染模型时，FPS 介于 54-60 之间。当我在桌面浏览器上使用THREE.CanvasRenderer 渲染相同的模型时，FPS 为 1-2。

我必须在 iPad 上运行这个模型。所以我需要使用THREE.CanvasRenderer。如果我减少段数，FPS 会增加，但 2000 段是必要的。

JSON 文件结构如下：

{"id":"0",
"r30" :"5.247","r60" :"5.088","r90" :"4.77","r120" :"5.724","r150" :"5.83","r180" :"5.459","r210" :"5.194","r240" :"5.035","r270" :"5.247","r300" :"5.565","r330" :"5.618","md":"20","point" :new THREE.Vector3(0,0,20)}

类似的方法我有 18738 个点并绘制每 9 个点来构建一个管。

tubeMesh = new THREE.Mesh(tube, new THREE.MeshBasicMaterial({
    color: 0xffffff,
    shading: THREE.FlatShading,
    side: THREE.DoubleSide,
    wireframe: false,
    transparent: false,
    vertexColors: THREE.FaceColors,
    overdraw: false
}));

如何使用 THREE.CanvasRenderer 提高 FPS 的性能？

r53

【问题讨论】：

我知道这与您的问题无关，但如果您的“JSON”文件中有 new THREE.Vector3(0,0,20)，则说明您没有使用 JSON。就您的问题而言，我认为提高速度的唯一方法是使用某种替代表示（那会是什么，我不知道，尤其是您的“必须有 2000 段”评论）。
实际上我已经将点坐标和其他值存储在 JSON 对象中，这样一旦我解析了对象，我就可以获得 3d 模型所需的所有属性。是的，2000 段是强制性要求。-@JayC

标签： javascript json html5-canvas three.js

【解决方案1】：

遗憾的是，CanvasRenderer 无法处理此类数字。在 iPad 上更是如此。

【讨论】：

有什么方法可以使用CanvasRenderer 运行这个模型吗？如果没有办法，那么如何在 Android 平板电脑上使用 WebGLRenderer 提高性能？-@mrdoob
THREE.MeshFaceMaterial 可以用CanvasRenderer 提高性能吗？-@mrdoob