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

时间:2013-04-05 02:19:13

标签: javascript google-chrome three.js webgl

我正在使用three.js创建一个交互式Web应用程序,而且我遇到了一个小绊脚石:

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

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

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

大多数材料共享制服和属性以避免必须复制信息,并且还使所有材料彼此保持同步(例如,当一些材料随时间变化时,它们应该全部变化方式)。

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

WebGL: INVALID_OPERATION: bindTexture: object not from this context 

在我的研究试图找到解决这个问题的方法时,我想到了这可以通过创建多个视口来解决,但是我不知道如何在不同的画布上显示不同的视口。

TL/DR;

我可以:

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

提前致谢!

Griffork

1 个答案:

答案 0 :(得分:7)

不幸的是,你不能(还)在画布之间共享资源。几个选项

  1. 在同一画布的不同部分渲染不同的视口。

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

  2. 制作一个覆盖整个窗口的画布,使用占位符元素来确定绘制的位置,使用getClientBoundingRect设置视口和放大器。用于在每个元素中绘制场景的剪刀设置

    示例:Is it possible to enable unbounded number of renderers in 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);
    

    Here's a live example(注意:Chrome26,FF20上的Windows速度很慢,希望将来会在未来的浏览器中修复)

  4. 使用OffscreenCanvas,transferToImageBitmap等...(注意:此功能自2018/1/8起未在任何浏览器中发布,但在Firefox上的标志后面可用)

  5. 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>