在多个画布上显示不同的场景共享资源

Display different scenes sharing resources on multiple canvases

本文关键字：共享资源 显示      更新时间：2023-09-26

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

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

页面上的画布数量可能会有所不同，但我希望这个数字通常达到/超过20张画布，因此共享资源(特别是大型纹理)将非常有益。

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

大多数材料共享制服和属性，以避免重复信息，也使所有的材料保持同步(例如，当一些材料随时间变化时，它们应该以相同的方式变化)。

我想知道是否有一种方法可以在场景/渲染器/画布之间共享纹理?当我尝试时，我得到以下错误:

WebGL: INVALID_OPERATION: bindTexture: object not from this context

在我的研究试图找到这个问题的解决方案，我遇到的建议，这可以通过创建多个视口来解决，但我不知道如何在不同的画布显示不同的视口。

TL/DR;

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

提前感谢!

Griffork

不幸的是，你不能(还)跨画布共享资源。几个选项

  1. 在同一画布的不同部分呈现不同的视口。

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

  2. 制作一个覆盖整个窗口的画布，使用占位符元素来确定在哪里绘制，使用getClientBoundingRect来设置视口&在每个元素中绘制场景的剪刀设置

    示例:是否有可能在THREE.js中启用无限数量的渲染器?

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

    <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");

    …从一个视图绘制场景到webglCanvas…

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

    …从另一个视图绘制场景到webglCanvas…

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

    下面是一个实时示例(注意:它在Windows Chrome26, FF20中很慢，希望这将在未来的浏览器中修复)

  4. 使用offscreenenccanvas, 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>

相关文章：