在THREE.js中是否可以启用无限数量的渲染器？

Question

为了避免XY问题，请允许我解释我的出发点。我想使用THREE.js在同一时间轴上堆叠大量波形，这些波形仅是THREE.Line，我正在实现通过修改正交相机的视图范围来缩放/平移/缩放这些波形。

我的初始尝试是创建多个高度固定、相互堆叠的画布元素，并将THREE.WebGLRenderer附加到每个画布上。这很完美，直到我尝试将其缩放超过15个波形时，THREE.js给我一个警告"too many active webgl contexts"，并开始删除旧的上下文。

考虑到这里应用了相同的技术：http://threejs.org/examples/#webgl_multiple_canvases_grid，我觉得这是不错的做法。

在此示例中，创建了4个WebGLRenderers，每个画布一个。

那么，有没有可能以某种方式覆盖此警告并创建无限数量的画布元素，每个画布元素都有自己的渲染器？

另外：

我考虑过在一个场景中定位波形，并使用类似于http://threejs.org/examples/#webgl_multiple_views的多个相机的方法。

问题有两个：

(1)我失去了在每个波形上dom操作和轻松附加键和鼠标监听器的能力。

(2)这种解决方案似乎也无法扩展。一旦渲染器的高度超过约6000像素，它就开始进入某种类型的损坏状态，场景的一部分不会出现，而其余内容会被拉伸以进行补偿。

感谢任何能够帮助我的人！

- hercuptruk

---

创建了4个WebGL渲染器。为了澄清：实际上并没有创建4个渲染器，而是有4个画布，每个画布只渲染部分视图，使用自己的相机，但只创建并使用一个渲染器（我已经检查过，在提问时也是这样做的）。 - Suma

Answer 1

你可以使用一个非滚动全窗口大小的画布，并为波形放置占位符DIV。然后使用1个渲染器，每个波形有1个场景，并在渲染每个场景之前调用renderer.setViewport和renderer.setScissor与每个DIV的位置相对应。

实际上是这样的：

renderer.setScissorTest( true );
scenes.forEach( function( scene ) {

  // get the element that is a place holder for where we want to
  // draw the scene
  var viewElement = scene.viewElement;

  // get its position relative to the page's viewport
  var rect = viewElement.getBoundingClientRect();

  // check if it's offscreen. If so skip it
  if ( rect.bottom < 0 || rect.top  > renderer.domElement.clientHeight ||
     rect.right  < 0 || rect.left > renderer.domElement.clientWidth ) {
    return;  // it's off screen
  }

  // set the viewport
  var width  = rect.right - rect.left;
  var height = rect.bottom - rect.top;
  var left   = rect.left;
  var top    = rect.top;

  renderer.setViewport( left, top, width, height );
  renderer.setScissor( left, top, width, height );

  camera.aspect = width / height;
  camera.updateProjectionMatrix();

  renderer.render( scene, camera );
} );
renderer.setScissorTest( false );

例子：

var canvas;

var scenes = [], camera, renderer, emptyScene;

init();
animate();

function init() {

  canvas = document.getElementById( "c" );

  camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 100 );
  camera.position.z = 1.5;

  var geometries = [
    new THREE.BoxGeometry( 1, 1, 1 ),
    new THREE.SphereGeometry( 0.5, 12, 12 ),
    new THREE.DodecahedronGeometry( 0.5 ),
    new THREE.CylinderGeometry( 0.5, 0.5, 1, 12 ),
  ];

  var template = document.getElementById("template").text;
  var content = document.getElementById("content");

  var emptyScene = new THREE.Scene();

  var numScenes = 100;

  for ( var ii =  0; ii < numScenes; ++ii ) {

    var scene = new THREE.Scene();

    // make a list item.
    var element = document.createElement( "div" );
    element.innerHTML = template;
    element.className = "list-item";

    // Look up the element that represents the area
    // we want to render the scene
    scene.element = element.querySelector(".scene");
    content.appendChild(element);

    // add one random mesh to each scene
    var geometry = geometries[ geometries.length * Math.random() | 0 ];
    var material = new THREE.MeshLambertMaterial( { color: randColor() } );

    scene.add( new THREE.Mesh( geometry, material ) );

    light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 0.5, 0.8, 1 );
    scene.add( light );

    light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( -0.5, -0.8, -1 );
    scene.add( light );

    scenes.push( scene );
  }


  renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
  renderer.setClearColor( 0xFFFFFF );

}

function updateSize() {

  var width = canvas.clientWidth;
  var height = canvas.clientHeight;

  if ( canvas.width !== width || canvas.height != height ) {

    renderer.setSize ( width, height, false );

  }

}

function animate() {

  render();

  requestAnimationFrame( animate );
}

function render() {

  updateSize();
  
  canvas.style.transform = `translateY(${window.scrollY}px`;

  renderer.setClearColor( 0xFFFFFF );
  renderer.clear( true );
  renderer.setClearColor( 0xE0E0E0 );

  renderer.setScissorTest( true );
  scenes.forEach( function( scene ) {
    // so something moves
    scene.children[0].rotation.x = Date.now() * 0.00111;
    scene.children[0].rotation.z = Date.now() * 0.001;

    // get the element that is a place holder for where we want to
    // draw the scene
    var element = scene.element;

    // get its position relative to the page's viewport
    var rect = element.getBoundingClientRect();

    // check if it's offscreen. If so skip it
    if ( rect.bottom < 0 || rect.top  > renderer.domElement.clientHeight ||
       rect.right  < 0 || rect.left > renderer.domElement.clientWidth ) {
      return;  // it's off screen
    }

    // set the viewport
    var width  = rect.right - rect.left;
    var height = rect.bottom - rect.top;
    var left   = rect.left;
    var top    = rect.top;

    renderer.setViewport( left, top, width, height );
    renderer.setScissor( left, top, width, height );

    camera.aspect = width / height;
    camera.updateProjectionMatrix();

    renderer.render( scene, camera );

  } );
  renderer.setScissorTest( false );

}

function rand( min, max ) {
  if ( max == undefined ) {
    max = min;
    min = 0;
  }

  return Math.random() * ( max - min ) + min;
}

function randColor() {
  var colors = [ rand( 256 ), rand ( 256 ), rand( 256 ) ];
  colors[ Math.random() * 3 | 0 ] = 255;
  return ( colors[0] << 16 ) |
       ( colors[1] <<  8 ) |
       ( colors[2] <<  0 ) ;
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

body {
  color: #000;
  font-family:Monospace;
  font-size:13px;

  background-color: #fff;
  margin: 0;
}


#content {
  position: absolute;
  top: 0; width: 100%;
  z-index: 1;
  padding: 2em;
}

#c {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.list-item {
  margin: 1em;
  padding: 2em;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  -webkit-flex-direction: row;
}

.list-item .scene {
  width: 200px;
  height: 200px;
  flex: 0 0 auto;
  -webkit-flex: 0 0 auto;
}
.list-item .description {
  font-family: sans-serif;
  font-size: large;
  padding-left: 2em;
  flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
}

@media only screen and (max-width : 600px) {
  #content {
    width: 100%;
  }
  .list-item {
    margin: 0.5em;
    padding: 0.5em;
    flex-direction: column;
    -webkit-flex-direction: column;
  }
  .list-item .description {
    padding-left: 0em;
  }
}

<canvas id="c"></canvas>
<div id="content">
</div>
<script id="template" type="notjs">
            <div class="scene"></div>
            <div class="description">some random text about this object, scene, whatever</div>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>

更新：

原来的解决方案使用了一个带有position: fixed属性的画布，这意味着画布不会滚动。下面的新解决方案将其更改为position: absolute; top: 0，然后在每一帧设置画布的变换。

  canvas.style.transform = `translateY(${window.scrollY}px`;

This has the advantage that even if we can't update the canvas every frame the canvas will scroll with the page until we get a chance to update it. This makes the scrolling stay in sync.

你可以将旧方案与新方案进行比较。两者都设置为每4帧只渲染一次，以夸大问题。向上或向下滚动它们，差异应该很明显。

更新2：

另一个解决方案是虚拟化WebGL上下文，其中你创建了一个离屏WebGL上下文，然后修补其他使用WebGL的东西，使其获得一个虚拟的WebGL上下文，该上下文在共享的实际WebGL上下文之上模拟。

- gman

---

太棒了！我真的很印象深刻。这正是我所期望的那种巧妙解决方案。作为这些领域的新手，非常感谢你。 - hercuptruk

非常棒的答案！我正在尝试做类似的事情，但我正在使用 TypeScript。编译器对scene.element有问题，说属性 element 在类型 scene 中不存在。您有什么解决方法吗？ - Eben Kadile

你如何将场景与元素关联起来完全取决于你自己。这不是 three.js 的一部分。可以创建一个具有场景属性和元素属性的自定义类。 - gman