Safari MacOS 中简单的 Three.js 场景中的不良 FPS答案

【问题标题】：Bad FPS in a simple Three.js scene in Safari MacOSSafari MacOS 中简单的 Three.js 场景中的不良 FPS
【发布时间】：2017-11-14 06:05:58
【问题描述】：

我有一个在 Chrome 和 Firefox 中运行良好的简单演示。但是Safari就像地狱一样滞后。如果我禁用抗锯齿，它会增加 FPS，但不会那么多。如何优化我的代码？也许使用一些缓存？我是three.js的新手

如果它也能在 iOs safari 中工作，那就太好了。

这是演示：

var $container = $('#torus');
var mouseX = 0,
  mouseY = 0;

var camera, scene, renderer;
var geometry, material, mesh, config;
var numTorus = 65;
var tabTorus = [];
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

config = {
  speed: 1.3,
  rotation: 1,
  opacity: 1
}


function init() {

  camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 10, 1000);
  camera.position.z = 1;
  scene = new THREE.Scene();
  material = new THREE.MeshNormalMaterial();
  material.transparent = true;
  material.opacity = config.opacity;
  geometry = new THREE.TorusGeometry(130, .5, 120, 100);
  geometry.computeFaceNormals();
  geometry.computeVertexNormals();
  geometry.normalsNeedUpdate = true;
  geometry.verticesNeedUpdate = true;
  geometry.dynamic = true;

  for (var i = 0; i < numTorus; i++) {
    tabTorus.push(new Torus(-i * 6));
    scene.add(tabTorus[i].b);
  }

  renderer = new THREE.WebGLRenderer({
    antialias: true,
    autoClear: true,
    alpha: true,
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  $container.append(renderer.domElement);

}

function Torus(f) {

  this.b = new THREE.Mesh(geometry, material);
  this.b.position.y = 55 * Math.sin(f);
  this.b.position.x = 55 * Math.cos(f);
  this.b.position.z = f * 2.72;
}

function onWindowResize() {

  windowHalfX = window.innerWidth / 2;
  windowHalfY = window.innerHeight / 2;

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);
}

function onDocumentMouseMove(event) {
  mouseX = (event.clientX - windowHalfX) / 10;
  mouseY = (event.clientY - windowHalfY) / 10;
}

function update() {
  for (var i = 0; i < numTorus; i++) {
    tabTorus[i].b.position.z += config.speed * 1.5;
    tabTorus[i].b.material.opacity = config.opacity;
    tabTorus[i].b.geometry.parameters.arc = 0.5 + config.opacity * 10;
    if (tabTorus[i].b.position.z > 0) {
      tabTorus[i].b.position.z = -1000;
    }
  }
}

function animate() {
  requestAnimationFrame(animate);
  camera.position.x += (mouseX - camera.position.x) * .02;
  camera.position.y += (-mouseY - camera.position.y) * .02;
  renderer.render(scene, camera);
  update();
}

window.addEventListener('resize', onWindowResize, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);

init();
animate();

body {
  background: black;
}

#torus {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<div id="torus"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>

【问题讨论】：

出于好奇，有 120 个径向段有什么意义？试试这样的：geometry = new THREE.TorusGeometry(130, .5, 12, 60);
24000 tris, 12000 verts ...你真的可以减少几何镶嵌。
我改成 THREE.TorusGeometry(130, .5, 5, 60);它有助于。一点。我可以做点别的吗？

标签： javascript optimization safari three.js webgl

【解决方案1】：

这似乎是 Safari 本身的一个问题：合成页面花费了大量时间（我的机器上 40-50 毫秒，而 JavaScript 需要 2-4 毫秒）。此外，它取决于窗口的大小。你应该报告给https://bugs.webkit.org。

【讨论】：