Question

运行以下大小为256的jsfiddle代码，我们获得了约60ms /帧的性能。设置大小= 1024时，我们获得了约10ms /帧。有谁知道为什么在这种情况下较大的纹理渲染速度更快？这是jsfiddle链接：https://jsfiddle.net/weilun/bfchn7yv/11/，检查控制台日志以获取打印的计时信息。

  var width = window.innerWidth, height = window.innerHeight;
  var size = 1024; // use these we got 60ms / frame, while use 1024 we got 10ms / frame
  var canvas = document.createElement('canvas'),
      ctx = canvas.getContext('2d');

  var camera, scene, renderer, geometry, texture, mesh;

  function changeCanvas() {
      ctx.font = '20pt Arial';
      ctx.fillStyle = 'red';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = 'white';
      ctx.fillRect(10, 10, canvas.width - 20, canvas.height - 20);
      ctx.fillStyle = 'black';
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.fillText(new Date().getTime(), canvas.width / 2, canvas.height / 2);
  }

  function init() {
      renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height);

      scene = new THREE.Scene();

      camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
      camera.position.z = 500;
      scene.add(camera);

      texture = new THREE.Texture(canvas);
      var material = new THREE.MeshBasicMaterial({ map: texture });
      geometry = new THREE.CubeGeometry( 200, 200, 200 );
      mesh = new THREE.Mesh( geometry, material );
      scene.add( mesh );

      canvas.width = canvas.height = size;

      document.body.appendChild(renderer.domElement);
  }

  function animate() {
      requestAnimationFrame(animate);
      var s = performance.now()

      mesh.rotation.y += 0.01;
      for (var i=0; i<100; i++) {
          changeCanvas();
          texture.needsUpdate = true;
          renderer.render(scene, camera);
      }

      console.log('total: ', performance.now() - s)

  }

  init();
  animate();

我试图通过切换到较小的纹理来对另一个项目进行一些优化，但这实际上使情况变得更糟：-（

Answer 1

删除动画函数中的for循环。
我看不到有什么用，它正在生成，应用纹理并渲染场景每帧100次。

function animate() {
      requestAnimationFrame(animate);
      var s = performance.now()

      mesh.rotation.y += 0.01;
      for (var i=0; i<100; i++) { <----remove this line
          changeCanvas();
          texture.needsUpdate = true;
          renderer.render(scene, camera);
      }                          <-----and this line
      console.log('total: ', performance.now() - s)
  }

为什么较大的纹理在webgl中渲染速度更快？

1 个答案: