Question

我有一个简单的演示，适用于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>

Answer 1

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

Safari MacOS中简单的Three.js场景中的FPS不好

1 个答案: