Showcasing a variety of scenarios where resources are being used across several canvases

Question

Showcasing a variety of scenarios where resources are being used across several canvases

I am currently working on a project using three.js to develop an interactive web application, but I have hit a roadblock:

Within the design, there are numerous canvases enclosed in draggable divs on the page. Each canvas is meant to showcase a 3D object with a unique material applied, utilizing custom shaders. These materials all rely on a shared texture (varying from blue-tinted to desaturated).

The quantity of canvases may fluctuate, commonly exceeding 20, which makes resource sharing, especially for large textures, extremely advantageous.

Thus far, I have been employing multiple renderers, cameras, and scenes, which has worked well except when attempting to utilize the same texture across various scenes.

Much of the materials use shared uniforms and attributes to prevent redundant information and maintain synchronization between them (i.e., changes in some materials should reflect uniformly across all).

I am curious if there is a way to share textures among different scenes/renderers/canvases? When attempting this, I receive the following error message:

WebGL: INVALID_OPERATION: bindTexture: object not from this context

In my quest to troubleshoot this issue, I stumbled upon the suggestion that creating multiple viewports could resolve it, although I am uncertain how to display distinct viewports over diverse canvases.

TL/DR;

Is it possible to:

Show the same scene on different canvases?
Utilize the same uniforms (including a texture uniform) across different scenes, renderers, and/or canvases?

Thank you in advance!

Griffork

javascript google-chrome three.js webgl

Answer 1

Answer №1

Regrettably, it is currently not possible to share resources across canvases. However, there are a few alternatives you can explore:

Render the different viewports in different sections of the same canvas.

For example:
Create a canvas that spans the entire window, use placeholder elements to determine where to draw, utilize getClientBoundingRect to establish viewport & scissor settings for drawing scenes in each element.

For example: Is it possible to enable unbounded number of renderers in THREE.js?

Render the scene to an offscreen canvas and then transfer it to visible canvases.

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

... draw the scene into webglCanvas from one view...

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

... draw the scene into webglCanvas from another view...

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

Here's a live example (please note: It may be slow on Windows in Chrome26, FF20, but hopefully this will be resolved in future browser updates)

Utilize OffscreenCanvas, transferToImageBitmap, etc. (note: this feature has not been implemented in any browsers as of 2018/1/8, but it can be accessed through a flag in 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>

Answer 2

Regrettably, it is currently not possible to share resources across canvases. However, there are a few alternatives you can explore:

Render the different viewports in different sections of the same canvas.

For example:
Create a canvas that spans the entire window, use placeholder elements to determine where to draw, utilize getClientBoundingRect to establish viewport & scissor settings for drawing scenes in each element.

For example: Is it possible to enable unbounded number of renderers in THREE.js?

Render the scene to an offscreen canvas and then transfer it to visible canvases.

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

... draw the scene into webglCanvas from one view...

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

... draw the scene into webglCanvas from another view...

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

Here's a live example (please note: It may be slow on Windows in Chrome26, FF20, but hopefully this will be resolved in future browser updates)

Utilize OffscreenCanvas, transferToImageBitmap, etc. (note: this feature has not been implemented in any browsers as of 2018/1/8, but it can be accessed through a flag in 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>

Showcasing a variety of scenarios where resources are being used across several canvases

Answer №1

Similar questions

Discover the steps to integrating jsfiddle into my local development environment

What is the best way to transform a Map<string, boolean> into an array of objects with key-value pairs {key: string, value: boolean

Karma is unable to locate the module within the specified relative path

Updating props in a recursive Vue 3 component proves to be a challenging task

Trigger controller redirection in AngularJS 1.5.0 by clicking on <tr> tag

Employ the useEffect hook to make a constant post request

Utilizing JQuery's .Toggle function in conjunction with a stylish CSS transform button

Create a new button dynamically within an HTML table row using pure JavaScript programming techniques

Display HTML content in autocomplete using jQuery UI

Unraveling nested elements with the array map() method in Angular2 and Typescript: Fixing the issue of undefined property reference while mapping

How to create a vertically scrollable div within another div by utilizing scrollTop in jQuery

Express: Improperly formatted MIME type for background graphics

What is the best way to manage files in Vue.js?

Navigating through nested objects in JSON when working with D3: a guide

Comparing unique values between objects in JavaScript with varying keys

The issue with the functionality of position absolute in CSS when used with JavaScript

Utilizing CSS Grid to arrange child elements inside their respective parent containers

Transforming JSON data into a visual flowchart using VUE.js

How can I make TypeScript mimic the ability of JavaScript object wrappers to determine whether a primitive value has a particular "property"?

Leverage AngularJS to effectively parse JSON data using scope variables