Question

告诉我THREEjs一帧调用函数gl.DrawElements的次数。一次？，或在每个对象上引起该功能。

// Render at once //
ONE gl.DrawElements ( box + sphere + plane ) = SCENE

OR

// Render each object independently //
gl.DrawElements ( box ) + gl.DrawElements ( sphere ) + gl.DrawElements ( plane ) = SCENE

我用英语写的不好，对不起。希望我的问题清楚。感谢您的回答。

Answer 1

您可以通过查看renderer.info.render.calls来查找three.js叫gl.drawXXX的次数

在下面的示例中，我们看到每个“网格”都有一个绘制调用。如果我们添加阴影，则每个网格每个光绘制阴影可能只有一个绘制调用。 Three.js具有可选的剔除功能，因此，如果看不到某些内容，则可能不会尝试绘制。

'use strict';

/* global THREE */

function main() {
  const infoElem = document.querySelector('#info');
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas: canvas});

  const fov = 75;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 5;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 2;

  const scene = new THREE.Scene();

  {
    const color = 0xFFFFFF;
    const intensity = 1;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(-1, 2, 4);
    scene.add(light);
  }

  const boxWidth = 1;
  const boxHeight = 1;
  const boxDepth = 1;
  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

  function makeInstance(geometry, color, x) {
    const material = new THREE.MeshPhongMaterial({color});

    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    cube.position.x = x;

    return cube;
  }

  const cubes = [
    makeInstance(geometry, 0x44aa88,  0),
    makeInstance(geometry, 0x8844aa, -2),
    makeInstance(geometry, 0xaa8844,  2),
  ];

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  function render(time) {
    time *= 0.001;

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

    cubes.forEach((cube, ndx) => {
      const speed = 1 + ndx * .1;
      const rot = time * speed;
      cube.rotation.x = rot;
      cube.rotation.y = rot;
    });

    renderer.render(scene, camera);
    
    infoElem.textContent = JSON.stringify(renderer.info, null, 2);

    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
}

main();

body {
    margin: 0;
}
#c {
    width: 100vw;
    height: 100vh;
    display: block;
}
#info {
    position: absolute;
    left: 0;
    top: 0;
    color: white;
    font-size: x-small;
}

<canvas id="c"></canvas>
<pre id="info"></pre>
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r94/three.min.js"></script>

Answer 2

另一种方法是使用这样的工具：

https://spector.babylonjs.com

或者Firefox附带的内置检查器（每晚？）。它将为您提供更多有关抽奖的信息。

gl.DrawElements调用了多少次？

2 个答案: