A-Frame相机与具有大量元素的场景中的three.js相机性能

时间:2017-09-13 03:39:33

标签: three.js aframe

以下代码笔压力测试3种情况:https://codepen.io/ubermario/pen/QqWQPa

...
    this.el.setObject3D(objName, cubeObj);  //register to A-Frame; accessible with this.el.getObject3D(objName)
...
  1. 使用带有WASD控件的默认摄像头在场景中滚动多达60,000个立方体。使用.setObject3D方法生成多维数据集,该方法将动态生成的元素注册到A-Frame。
  2. 使用带有WASD控件的默认摄像头在场景中滚动多达60,000个立方体。使用three.js object3D.add方法生成多维数据集,该方法不会将动态生成的元素注册到A-Frame。
  3. 使用three.js轨道控制相机在场景中滚动多达60,000个立方体。使用three.js object3D.add方法生成多维数据集。此方案类似于方案#2。
  4. 问题:虽然所有3个方案加载速度非常快。场景#3在滚动时始终表现良好。场景#1和#2有时会出现“锯齿状”#39;图像刷新。

    有关使用方案#1实现方案#3的性能的任何建议吗?

1 个答案:

答案 0 :(得分:0)

您所看到的是,在示例#3中,OrbitControls管理render()循环。因此,它只决定在滚轮实际移动时渲染,并且可以使事情更顺畅。你可以通过在渲染函数中添加console.log('render')来测试它,并看到它只在你滚动时打印。

这种策略对VR没有帮助,无论如何都需要以90 FPS重新渲染(因为HMD总是在移动)。所以不幸的是,在A-Frame中没有办法做同样的事情。

如果要渲染大量类似对象,您可以做的是instancingmerging geometry来减少绘制调用。