Turn on/off the webGL Context in webGL/three.js

I am currently working on an exciting project using three.js, and so far everything is going according to plan. The project involves displaying various meshes in different canvases, which has led me to encounter a particular issue.

My goal for the project is to have multiple canvases displayed simultaneously, each with its own context. However, I have come across the limitation of only being able to have 16 live WebGL contexts at once. Since I intend to display more than 16 canvases on a single page, I am exploring ways to work around this restriction by disabling a context when it is not visible on the screen. By dynamically enabling/disabling contexts as the user scrolls, I hope to overcome this limitation and have as many contexts as needed.

While I have discovered the renderer.forceContextLoss() function, which allows me to force the disabling of a context, I have not been able to find a way to re-enable it. Although I can detect when a context is lost, I am struggling with restoring it.

If you have any suggestions or ideas on how I can accomplish this task, please feel free to share your insights.

Thank you in advance!

javascriptthree.jswebgl

Answer №1

To achieve the illusion of multiple canvases, you can simplify things by utilizing just one instance of three.js. By covering the entire window with this instance, adding placeholder divs where you want to display content, and then employing element.getClientBoundingRect to establish scissor regions and viewports for each individual scene within those elements.

For a visual example, check out this reference.

You can find more information on the topic in the original StackOverflow response from which the aforementioned sample was derived:

This approach will optimize memory usage compared to utilizing multiple canvases, avoiding the need for separate data sets, shaders, etc...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Express.js to import a SQL file

I am facing challenges while attempting to import an sql file into Express JS. I have tried various codes involving the mssql and fs modules, but none seem to be working as expected. fs.readFile(__dirname +'/database.sql', function (err, sqlFile ...

javascriptmysqlnode.jsfileexpress

Tips on revealing TypeScript modules in a NodeJS environment

Currently, I am working on developing a TypeScript library. My goal is to make this library compatible with both TypeScript and JavaScript Node projects. What would be the most effective approach for achieving this? Should I create two separate versions ...

javascriptnode.jstypescript

What should you do when you need to send a message from a website to an MQTT broker that lacks Websockets support?

Currently venturing into the realm of web development, I find myself tackling a project that involves sending messages from my website to Thingstream, an MQTT broker. My initial attempt using the MQTT Paho JavaScript library was thwarted by the fact that ...

javascriptwebsockettcpmqttpaho

Tips for verifying if the input in a Material UI textfield is an <iframe> tag

In my ReactJS code, I am utilizing the TextField component from material-ui. I need to verify if the user input is an iframe. How can I achieve this? Currently, I am attempting to use window.parent.frames.length > 0; to determine if the page contains a ...

javascripthtmlreactjsiframematerial-ui

Leveraging jQuery's element objects and the :contains selector allows for powerful

I need to search for a link that contains the word 'gathered'. Although I understand how to do it logically, I am having trouble writing the jQuery syntax for the selector: if (index === 3) { var $link = $('#rest').find('.tr ...

javascriptjquery

Unusual host value being returned by next/headers in Next.js version 13

In my current Next.js project, I am utilizing next/headers to dynamically set a baseUrl for calls to my API. const baseUrl = () => { const protocol = process?.env.NODE_ENV === "development" ? "http" : "https"; const ...

javascriptnext.jsrequest-headers

What is the best way to turn a model on a flat surface?

My current project involves using a plane geometry to display a terrain model with varying "y" values (altitude). I have successfully implemented the raycaster function to move the model on the plane. I am looking for a method to rotate the model paral ...

rotationthree.js

What is the best method for waiting on a JavaScript function to provide a response utilizing the Chrome.storage API?

I am attempting to utilize the given code for managing name value pairs in a Chrome Extension. if (!this.Chrome_getValue || (this.Chrome_getValue.toString && this.Chrome_getValue.toString().indexOf("not supported") > -1)) { this.Chrome_getV ...

javascriptjquerygoogle-chromegoogle-chrome-extension

Should objects passed as props be modified in Vue.js components?

I've observed that in Vue, object fields passed as Props can be changed, and these changes reflect in the parent component. Is this considered a bad practice? Should it be avoided, or is it acceptable to use? What are the potential pitfalls of this a ...

javascriptvue.jsvuejs3

Transforming the output of a PHP script from an HTML table into an ion-list format tailored for the Ionic framework

Currently I am working on an application built with the Ionic framework. I have developed a PHP file to retrieve 'Users' data from my database and it is currently being displayed in an HTML table format. In the services section of the framework, ...

javascriptjqueryangularjsajaxionic-framework

Exploring the meaning behind RxJS debounce principles

Referencing information found in this source: const debouncedInput = example.debounceTime(5); const subscribe = debouncedInput.subscribe(val => { console.log(`Debounced Input: ${val}`); }); When the first keyup event occurs, will the debouncedI ...

javascriptangularjsrxjs

Use AngularJS to extract information from Wikipedia and display it

Just starting out with angularjs and attempting to pull data from Wikipedia to display on the front end. I managed to fetch the data using the php code below: $url = 'http://en.wikipedia.org/w/api.php?action=query&prop=extracts|info&exintro&a ...

javascriptphpangularjswikipediawikipedia-api

After updating the state, the Next.js axios call experiences a delay before executing the desired action

I am currently working on a NextJS project that relies on Axios for handling API calls. Within this project, there is a loading state implemented to show a loading spinner when making these API calls. However, I have encountered an issue where after click ...

javascriptreactjsnext.jsaxios

Is it necessary to send form data back with Express, or is there an alternative solution?

I am facing a simple problem with my handlers for /login get and post requests. Here is the code: loginRender(req, res) { let options = { title: 'Login', layout: 'auth.hbs' } res.render('login', options) } logi ...

javascripthtmlnode.jsformsexpress

Fetch operates based on the specified categoryId

Hey there, I'm currently in the process of learning JS and trying to fetch data from an API. I've successfully fetched all the work from api/works and displayed them in a div. Now, I'm looking to create 3 buttons that represent 3 categories ...

javascripthtmlapidynamic

Applying Tailwind styles to dynamically inserted child nodes within a parent div

Currently, I am in the process of transitioning my website stacktips.com from using Bootstrap to Tailwind CSS. While initially, it seemed like a simple task and I was able to replace all the static HTML with tailwind classes successfully. However, now I ha ...

javascriptcsstailwind-csstailwind-elements

Validating data with Joi can result in multiple error messages being displayed for a single field

I'm attempting to implement a validation flow using the joi package, which can be found at https://www.npmjs.com/package/joi. 1) First, I want to check if the field category exists. If it doesn't, I should display the error message category requ ...

javascriptvalidationexpressjoi

Condensing an Array of Objects into a solitary result

Hey there, I'm currently exploring the most efficient method to accomplish a task. The data I am dealing with looks something like this: [ { name: 'email.delivered', programme: 'Email One', timestamp: 2022-03-24T18: ...

javascriptarraysecmascript-6

Leveraging AJAX to assist in PHP for data parsing

I am currently exploring the world of AJAX and grappling with a unique situation. I am in the process of developing an HTML app that will be integrated into a mobile application using PhoneGap. The main objective of my project is for the HTML page to con ...

javascriptjqueryajaxhtmlcordova

javascript assign array to object key

Looking at this basic array: const arr = [ { "id": 2, "color": "red" }, { "id": 1, "color": "blue" }, { "id": 2, "color": "yellow" ...

javascriptarraystypescripthashmap