The render target texture from THREE.js refuses to render in an alternate scene

Seeking insights from experienced THREE.js developers who can help troubleshoot why I am unable to use WebGLRenderTarget as a material for a plane in a different scene.

Currently, the workflow involves creating a scene with a perspective camera within the Application object where a simple plane is rendered.

In addition, there is a WaveMap object that utilizes another scene with an orthographic camera. Through a fragment shader, it generates the cos(x) * sin(y) function on a quad covering the entire screen. This output is rendered to a texture, which is then used to create a material.

This material is then passed to the Application object to be applied to the initial plane. However, the issue arises when attempting to display this material in the scene with the perspective camera after passing it over.

While passing a basic material with a solid color works without any problems, using a material with WebGLRenderTarget as a texture results in it not showing up at all.

https://github.com/ArminTaheri/rendertotexture-threejs

javascriptthree.jsrendertarget

Answer №1

To render any material or texture, it is essential to clone it for compatibility with multiple renderers.

var newMaterial = existingMaterial.clone();

In versions prior to r72, manually updating the image buffers for textures was necessary:

newMaterial.uniforms.textureExample.value.needsUpdate = true;

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

Checking the types of arrays does not function properly within nested objects

let example: number[] = [1, 2, 3, 'a'] // this code block correctly fails due to an incorrect value type let example2 = { demo: 1, items: <number[]> ['a', 'b'], // this code block also correctly fails because of ...

javascripttypescript

ThreeJS - Implementing point light shadows as spotlights

In my current scene, I have both ambient light and a point light. I want to achieve shadows underneath the meshes similar to the image provided, but the central area shows an unwanted shadow. It appears that the point light is behaving like a spot light i ...

javascripthtmlthree.js

Enhance the "text" attribute of IXMLDOMElement to enable functionality in Chrome

The web application I am currently working on was developed approximately 10 years ago and is only compatible with Internet Explorer. My goal is to make it functional in Chrome as well. I am facing a challenge regarding the "text" property of IXMLDOMEleme ...

javascripthtmlcross-browser

The module located at "c:/Users//Desktop/iooioi/src/main/webapp/node_modules/rxjs/Rx" does not have a default export available

I am currently delving into the realm of RxJs. Even after installing rxjs in package.json, why am I still encountering an error that says [ts] Module '"c:/Users//Desktop/iooioi/src/main/webapp/node_modules/rxjs/Rx"' has no default export ...

javascriptjqueryangulartypescriptrxjs

Ext 4.1 - Accessing a class instance using Ext.define()

In my code, I have a class with a method defined like this: Ext.define('MY.class.Manager', { .... .... .... manageStuff: function(){ } } Initially, the manageStuff function was only needed in one place and everything worke ...

javascriptextjs

Manually closing Bootstrap 4 Popper.js Tooltip on command

To activate a Bootstrap 4 Popper.js Tooltip using jQuery, I simply do the following: When the 'like' button is clicked, the tooltip will be displayed: $('.like-btn').on('click',function(){$(this).tooltip('show');}); ...

javascriptjquerybootstrap-4tooltippopper.js

How can I remove the script from Response.Write?

Instead of using Response.Write to test some values in code with an alert box, I tried writing dynamic javascript directly into the page. Even after reverting the code, rebuilding, and clearing all temp data from IE, the alert still pops up. I followed a ...

javascriptasp.netresponse.write

"Troubleshooting the issue of Angular not functioning with Coffeescript

Although I have had success using straight coffeescript in my development environment, I recently encountered issues when trying to incorporate AngularJS. It seems that my current setup is not running correctly with coffeescript. Here's what works: ...

javascriptangularjscoffeescript

encounter with file compression using gzip

Currently, I am facing an issue with zipping files using jszip because the backend can only unzip gzip files, not zip files. My front end is built using vue.js. let zip = new jszip(); zip.file(fileToCompress.name, fileToCompress); let component = t ...

javascriptvue.jscompressiongzip

When trying to insert JavaScript into the console, a section of the code fails to execute

In this code snippet, I am fetching the most common English words from Wikipedia, extracting all the words from the page, and then filtering out the commonly used words: // get table data from most common words var arr = []; $.ajax({ url: 'https:/ ...

javascriptjquerygoogle-chrome

Tips for inserting line breaks within a <p> element in a contentEditable division

When I press enter or shift+enter on my contentEditable div, the new line is shown as a textNode within the div. However, I prefer the new line to be inside a p element. Seeking a straightforward solution Utilizing React Js, I store the content of the co ...

javascriptreactjsdomnext.jscontenteditable

Expanding size on hover without affecting the alignment of surrounding elements

Imagine there are 10 divs on the page styled as squares, collectively known as the home page. Among these 10: 3 divs belong to the .event1 class, 5 divs belong to the .event2 class, and 2 divs belong to the .event3 class. <div class="boxes event1"> ...

javascriptjqueryhtmlcsscss-transforms

Changing the background color of radio buttons using Chrome and the power of WebGL<script>canvas</script>

When using the Three.js WebGL renderer, I noticed that radio buttons have white backgrounds, but this issue only seems to occur in Chrome. If you want to see the problem for yourself, check out this fiddle: http://jsfiddle.net/5pL8v/328/ Does anyone know ...

javascriptcssradio-buttonwebglthree.js

What is the best way to have child divs occupy the entire area of the parent div while also accounting for margins

I am facing a challenge with arranging child divs inside a parent div that has a specific width. Even though I am using isotope to arrange them, the layout modes do not work well for me in terms of spacing. My goal is to have the child divs fill the space ...

javascriptjqueryhtmlcssjquery-isotope

Determine the latest date within each group and display the corresponding output value

I am seeking a way to showcase only the most recent value for each group. For example, in the CSV data provided below, the total amount of Bagels in the Cinnamon Raisin variety were collected during three different sampling periods: May 2017, March 2017, ...

javascripthtmljsond3.js

Is there something incorrect with the incrementation in JavaScript?

for (let i = 0; i < 5; ++i){ alert(i); } for (let i = 0; i < 5; i++){ alert(i); } Both of these constructs get the same result: 0, 1, 2, 3, 4. But what are the underlying differences between them? And does the choice of increment in a for l ...

javascriptfor-loop

Is it possible to employ a For loop with a Nodelist?

I have a unique HTML code structure that resembles a tree. My goal is to traverse the NodeList and assign specific classes to nodes that have children. Here's a snippet of the code: <li id='test' class="parentNode"> <button class ...

javascripthtmlnodelist

Retrieve data from backend table only once within the bootstrap modal

How can I retrieve values from a table once a modal is displayed with a form? I am currently unable to access the values from the table behind the modal. Are there any specific rules to follow? What mistake am I making? I would like to extract the values ...

javascriptjqueryhtmltwitter-bootstrap

Locate the child element that has a particular class assigned to it

I need help writing a code to search through all children elements in order to find a div with a specific class. Unfortunately, the DIV I am looking for does not have an ID. Below is the sample HTML that I will be working with: <div class="outerBUB ...

javascriptjquery

Unraveling in jQuery

Struggling to properly handle the data being returned by JQuery from an API call. Currently encountering an error in the process. Is it possible to iterate through data using a JQuery loop like this? $.each(data.results, function (i, item) { // attemptin ...

javascriptjqueryjson