Render a scene sequentially using WebGL and Three.js in multiple renderers

When attempting to render a scene in two different renderers consecutively (not simultaneously), I encountered the error message "GL_INVALID_OPERATION".

Below is a snippet of the code:

var scene1   = new THREE.Scene();
var camera1  = new THREE.PerspectiveCamera( ... );
var renderer1= new THREE.WebGLRenderer( ... );

var renderer2= new THREE.WebGLRenderer( ... );
var camera2  = new THREE.PerspectiveCamera( ... );

//Render scene1 in renderer1
renderer1.render( scene1, camera1 );

//[After some user event...]
//Render scene1 in renderer2
renderer2.render( scene1, camera2 );  //This fails. getError()=1282 (i.e. GL_INVALID_OPERATION)

I am aware that it is not recommended to render the same scene in two different renderers even if done consecutively, but due to the complexity of my project, I couldn't find another solution.

I understand that there may be GL data associated with scene1 that are tied to renderer1, but how can I remove this data so that I can render scene1 again in a different renderer?

Just to clarify, I am not attempting to render the scene in both renderers simultaneously (as discussed here: https://github.com/mrdoob/three.js/issues/189).

Any assistance on this matter would be greatly appreciated. Thank you and best regards.

Answer №1

After investigating, it was discovered that the issue stemmed from objects/material/textures being attached to certain OpenGL buffers. The resolution involves unbinding all children of the object slated for removal from one scene before introducing them into another scene.

I plan to share the code for my fix shortly. Thank you.

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

What are the effects of calling callback(false) and callback(true)?

I'm currently diving into a nodejs chat project, and I’m a bit confused about the outcome when callback(false) and callback(true) are triggered in this context... io.sockets.on('connection', function(socket){ socket.on('new user& ...

How to pass only the clicked element to the onClick function in React.js

I have several elements with the same className, and I want to add the className active to an element (with the className history-node) when it is clicked, in addition to its current className. However, I am facing an issue where the child elements of tha ...

Is there a way to unselect a button in Angular?

I have a set of buttons representing different categories. When I click on a button, it displays a card with relevant information. <app-category-button [label]='category.name' [isSelected]='category.id === (selectedCategoryId$ | asy ...

Adjust the menu scrollbar position to the right or limit scrolling to within the menu area

$(function() { "use strict"; $(".navbar-toggler").on("click", function() { $(".navbar-toggler").toggleClass("collapsed"); $(".offcanvas-collapse").toggleClass("open"); let menuposition = $("#toggler").offset().left + $("#toggler").width() + ...

How can we effectively implement alert notifications for validating image sizes and formats prior to uploading?

code playground : https://codesandbox.io/s/quizzical-lamport-ql5ep I'm encountering an issue with the code provided in the CodeSandbox link. https://i.sstatic.net/xg3aK.png I've attempted to resolve this issue using various methods, but unfortu ...

How can it be that "Function" actually functions as a function?

In JavaScript, there exists a function called "Function". When you create an instance of this function, it returns another function: var myfunc = new Function('arg1','arg2','return arg1+arg2'); In the above example, the vari ...

The functionality to disable the submit button for unchecked radio buttons is not functioning properly

I am currently working on a form where I need to disable the submit button until all fields are filled out. Everything is functioning properly for other field types, EXCEPT FOR RADIO BUTTONS. Even when we do not select a radio option, the Submit button s ...

Are there any specific features in HERE maps for the JavaScript platform or REST API that pertain to rerouting functionality?

When a user deviates from the planned route, I am having trouble calculating an appropriate reroute. The calculateRoute service does not take into account the user's heading direction. I am attempting to implement the rerouting feature myself using J ...

Using *ngFor in Angular for Parent-Child component interaction

Is there a way to iterate through a child component multiple times with different data each time? For instance, in my 'sitelist' component (parent), I aim to loop through my 'summary' component (child) as many times as needed based on ...

The functions getFiles and getFolders will consistently retrieve a single file or folder each time they are

When attempting to fetch all files and folders from my Google Drive, the function .getFiles() is only returning one file, while .getFolders() is only returning a single folder. However, I can confirm that there are multiple folders and files in my drive. ...

The issue is that only the first checkbox within ngFor is being toggled on and off each time a different checkbox is clicked

When I have checkboxes inside a ngFor loop and click on any one of them, only the first one gets checked and unchecked, updating only the status of the first checkbox. Here is the HTML template: <div *ngFor="let num of count" class="m-b-20"> & ...

Is there a way to apply materials to a collada child in THREE.js?

After creating a scene in Blender that contained some meshes without materials, I exported it to Collada and then loaded it into a three.js scene using ColladaLoader. Everything seemed fine until I attempted to assign materials to the children of the meshe ...

Maintain the values of radio buttons, dropdowns, and checkboxes using Javascript

When I click on a radio button, it activates a drop down menu. Upon selecting different values from the drop down, various checkboxes become visible. Now, I want to preserve the selection of the radio button along with the selected drop down values and ch ...

Tips for calculating the total sum of inner object property values using JavaScript, TypeScript, or Angular 5

What is the total sum of successCount values in the given array object? var successCount;//I want count of all successCount attributes from the below object var accordianData = [ { name: "Start of Day", subItemsData: [ { title: " ...

React Router malfunctioning on production environment when integrated with an Express backend

My Single Page application is built using React for the frontend and Express for the backend. Within the application, there are two main components: and . The goal is to display the component when the "/"" URL is requested, and show the component for an ...

Abbreviating Column Labels in Google Visualization

Is there a way to use the google visualization API to display column headers in an abbreviated form in a table, but show the full labels in a pie chart using the same dataset? Check out this snippet of JavaScript: //create the dashboard and table chart ...

Issue with incorporating Material UI HtmlTooltip within Material UI Select MenuItem and handling synthetic events in the select onChange method

---OBJECTIVE--- The goal is to integrate a Material UI select component with MenuItems wrapped in HtmlTooltips, providing hover information for each option in the list. For now, I'm keeping it simple as a proof of concept and plan to implement dynam ...

Angular is reporting that the check-in component is nonexistent

I encountered an error in my Angular 8 application while working on a component. The error seems to be related to nested components within the main component. It appears that if the component is empty, the error will be shown, but if it's not null, th ...

AngularJS using the ng-controller directive

I am presenting the following HTML code excerpt... <!DOCTYPE html> <html lang="en-US" ng-app> <head> <title>priklad00007</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angula ...

Press a button to generate an image inside a specified div element

I've been struggling with this particular issue and have attempted various solutions, but there seems to be an error in my implementation as it's not functioning correctly. My goal is simple: I want to be able to click a button and have an image ...