Do you know anyone who has tried to overlay iFrames with three.js from different sources and render three.js content as such that both iFrames use the same depth buffer or webgl context?
WebGLRenderer has a property called domElement, which represents the corresponding canvas element that displays the render result. In most cases, three.js applications append this element to their DOM. But you can also use it as an intermediate cache and draw/copy the results to other canvas elements like in this example.
https://threejs.org/examples/webgl_multiple_canvases_grid.html
You have a single scene but you render to different views. As you can see in the code, each view consists of a unique canvas element and a custom camera (check out the View constructor function and the respective .render() method).
If you can get the references to the canvas elements in your iFrames, it should be possible to do the same thing like in the example.
1 Like
@Mugen87 that is a very good idea. Thank you. To make the case a bit more extreme, I was wondering if there is a possibility for two iFrames to draw in the same canvas element, even when they are from different origins. In that case we can only use postMessages for communication. I wonder if someone has done experiments with building a postMessage wrapper for three.js or something like that. Or maybe stream the depth buffer via postMessages?
Why? In 2D, I can make a webpage appear as one using embedded webpages from different origins. However moving in to 3D space, its not working anymore. The renderer must require the collocation of different origins in some way.