4

我正在使用 three.js 创建一个交互式 Web 应用程序，但遇到了一个小绊脚石：

我在页面上的可拖动 div 中包含许多画布。在每个画布中，我希望显示一个应用了不同材质的无光照 3D 对象（每种材质都使用自定义着色器）。所有这些材料都使用相同的纹理（一种可能是蓝色的，一种可能是去饱和的，等等）。

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

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

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

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

WebGL: INVALID_OPERATION: bindTexture: object not from this context

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

TL/DR;

我可以：

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

提前致谢！

格里福克

4

1 回答 1

9

不幸的是，您（还）不能跨画布共享资源。几个选项

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

    这是一个活生生的例子（注意：在 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>

于 2013-04-05T18:17:23.273 回答