javascript - 在多个 Canvas 上显示不同场景共享资源

Question

我正在使用 three.js 创建交互式 Web 应用程序，但遇到了一个小障碍:

我在页面上的可拖动 div 中包含许多 Canvas 。在每个 Canvas 中，我希望显示一个未点亮的 3D 对象，并应用了不同的 Material (每种 Material 都使用自定义着色器)。所有这些 Material 都具有相同的纹理(一种可能是蓝色的，一种可能是去饱和的，等等)。

页面上的 Canvas 数量可能会有所不同，但我预计数量通常会达到/超过 20 个 Canvas ，因此共享资源(特别是对于大纹理)将非常有益。

到目前为止，我一直在使用多个渲染器、相机和场景，在我开始尝试在多个场景中使用相同的纹理之前，它们运行良好。

大多数 Material 共享制服和属性以避免必须重复信息，并且还使所有 Material 彼此保持同步(例如，当某些 Material 随时间变化时，它们都应该以相同的方式变化方式)。

我想知道是否有一种方法可以在场景/渲染器/ Canvas 之间共享纹理？当我尝试时出现以下错误:

WebGL: INVALID_OPERATION: bindTexture: object not from this context 

在我试图为这个问题找到解决方案的研究中，我遇到了可以通过创建多个视口(viewport)来解决这个问题的建议，但是我不知道如何在不同的 Canvas 上显示不同的视口(viewport)。

TL/DR;

我可以:

• 在不同的 Canvas 上显示相同的场景？
• 在不同的场景、渲染器和/或 Canvas 上使用相同的制服(包括纹理制服)？

提前致谢!

狮鹫

Answer 1

不幸的是，您(目前)还不能跨 Canvas 共享资源。几个选项

1. 在同一 Canvas 的不同部分渲染不同的视口(viewport)。

   示例:http://webglsamples.org/multiple-views/multiple-views.html

2. 制作覆盖整个窗口的 Canvas ，使用占位符元素确定绘制位置，使用 getClientBoundingRect 设置视口(viewport)和剪刀设置以在每个元素中绘制场景

   示例:Is it possible to enable unbounded number of renderers in THREE.js?

3. 将场景渲染到屏幕外 Canvas ，然后将其绘制到可见 Canvas 中。

   <canvas id="c1"></canvas>
   <canvas id="c2"></canvas>
   <script>
   var webglCanvas = document.createElement("canvas");
   var canvas1 = document.getElementById("c1");
   var ctx1 = canvas1.getContext("2d");
   var canvas2 = document.getElementById("c1");
   var ctx2 = canvas1.getContext("2d");
   

   ...从一个 View 将场景绘制到 webglCanvas...

   // copy scene to canvas1
   ctx1.drawImage(webglCanvas, 0, 0);
   

   ...从另一个 View 将场景绘制到 webglCanvas...

   // copy scene to canvas2
   ctx2.drawImage(webglCanvas, 0, 0);
   

   Here's a live example (注意:在 Chrome26、FF20 中，它在 Windows 上很慢，希望在未来的浏览器中得到修复)

4. 使用 OffscreenCanvas、transferToImageBitmap 等...(注意:截至 2018 年 1 月 8 日，此功能尚未在任何浏览器中提供，但在 Firefox 上的标志后可用)

const one = document.getElementById("one").getContext("bitmaprenderer"); 
const two = document.getElementById("two").getContext("bitmaprenderer");

const offscreen = new OffscreenCanvas(256, 256);
constr gl = offscreen.getContext('webgl');

// ... some drawing for the first canvas using the gl context ...
gl.clearColor(1,0,0,1);
gl.clear(gl.COLOR_BUFFER_BIT);

// Commit rendering to the first canvas
let bitmapOne = offscreen.transferToImageBitmap();
one.transferImageBitmap(bitmapOne);

// ... some more drawing for the second canvas using the gl context ...
gl.clearColor(0,1,0,1);
gl.clear(gl.COLOR_BUFFER_BIT);

// Commit rendering to the second canvas 
let bitmapTwo = offscreen.transferToImageBitmap();
two.transferImageBitmap(bitmapTwo);

<canvas id="one"></canvas>
<canvas id="two"></canvas>