gl.DrawElements 调用了多少次？答案

【问题标题】：How many times is gl.DrawElements called?gl.DrawElements 调用了多少次？
【发布时间】：2018-10-29 08:42:59
【问题描述】：

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

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

或

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

我的英文写得不好，对不起。我希望我的问题很清楚。谢谢你的回答。

【问题讨论】：

标签： three.js webgl webgl2

【解决方案1】：

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

从下面的示例中，我们看到每个“Mesh”都有一个绘制调用。如果我们添加阴影，那么每个网格每个灯光绘制阴影可能需要一个绘制调用。 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>

【讨论】：

【解决方案2】：

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

https://spector.babylonjs.com

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

【讨论】：