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

Question

我有一个管几何体。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

Answer 1

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