Version 84 of Three.js has an issue with EffectComposer where it is unable to reuse the texture from WebGLRenderTarget

Currently, I am working on implementing a process that was previously discussed in a prior post that I authored.

The ShaderPass is utilizing the texture from the readBuffer to populate the tDiffuse uniform. You can view this at Line 49 on github. I have made adjustments to the ShaderPass to include an additional property, this.exportBuffer.

The this.exportBuffer is filled with the content of the readBuffer used for rendering at Line 61. This property is populated after the renderer.render() function has been executed.

I then extract the exportBuffer.texture property from the final ShaderPass. My assumption is that the exported exportBuffer.texure should contain the image from the last writeBuffer, which is meant to be the image displayed on my initial EffectComposer.

However: The texture within the exportBuffer remains black regardless of my attempts to address this issue.

If there are any additional details or code snippets that could aid in resolving this matter, please inform me.

Best regards.

javascriptthree.js

Answer №1

It seems that the issue lies in the fact that multiple webgl canvases are unable to share the same context (refer to ).

My recommendation would be to utilize the same renderer for running both of your EffectComposers. It appears that all you need to do is ensure the "map" of your "scndMat" is correctly pointed to the output texture before commencing rendering with the 2nd EffectComposer.

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

Is it possible to enable tooltips to function through the innerHTML method?

Currently, I am utilizing the innerHTML attribute to modify the inner HTML of a tag. In this instance, it involves the <td></td> tag, but it could be applied to any tag: <td *matCellDef="let order" mat-cell [innerHTML]="order. ...

javascripthtmlangulartypescript

Update JSON data in ng-blur event using AngularJS

Could you offer some guidance on how to push the content from a text box into JSON when I click outside of the box? Below is the code for my text box: <input type="text" name="treatmentCost" class="form-control" ng-model="addTemplate" /> And here i ...

javascriptjsonangularjshtml

Guidelines for accessing the value of the parent function upon clicking the button within the child function?

I have a pair of buttons labeled as ok and cancel. <div class="buttons-div"> <button class='cancel'>Cancel</button> <button class='ok'>Ok</button> </div> The functions I am working wi ...

javascripthtmlcsscurrying

The response from Axios in NodeJs is displaying incorrect encoding

Having some trouble executing a REST call using Axios and receiving an unexpected response. try { const response = await axios.get("https://api.predic8.de/shop/products/"); console.log(response.data); } catch (error) { console.log(`[Error] -> ...

javascriptnode.jsaxios

Looking for assistance with jqGrid

Is there a method to confirm if the grid has finished loading using a separate function? My goal is to automatically click on the first row and move that row to the second grid once this action occurs. jQuery("#search_grid").jqGrid('setGridParam&apo ...

phpjavascripthtmlajaxjqgrid

Ensure that the image within the div consistently occupies an equal amount of space at all times

<div id=“parent”> <div id = "child1"> <img src="123"/> </div> <div id = "child2"> <p> Some text1 </p> <p> Some text2 </p> </div> </div> In my HTML stru ...

javascriptjqueryhtmlcss

How can jQuery be used to determine if the number of checked checkboxes is a multiple of three?

Within the ul, I have li tags with checkboxes and I want to create a function that checks, when the submit button is pressed, if the number of checked checkboxes is not a multiple of 3. If it isn't, an alert should be displayed. How can I accomplish t ...

javascriptjqueryhtmlcheckbox

UCS-2 in Node.JS: Understanding Big-Endian Byte Order

Currently, I am utilizing Node.JS. In my project, I require support for big-endian UCS-2 buffers, which is not natively offered by Node's buffers that only support little-endian format. How can I achieve this specific requirement? ...

javascriptunicodenode.jsbufferendianness

Error: Unable to establish connection with local host (::1) on port 50106

I am currently in the process of developing a Discord bot using Node.js and erela.js. However, I encountered an error when attempting to retrieve the server that handles erela: A node error occurred: connect ECONNREFUSED ::1:50106 2020-05-01T21:23:19.367 ...

javascriptnode.js

"Implementing automated default values for Select/dropdown lists in ReactJs, with the added capability to manually revert back to the default selection

After browsing multiple websites, I couldn't find a clear solution on how to both set and select a default value in a select element. Most resources only explain how to set the value, without addressing how to reselect the default value. My Requireme ...

javascriptreactjsselectmaterial-ui

Saving automatic Javascript increments into a Django database

I have a JavaScript function that increments a value retrieved from my database every 3.5 seconds. However, I am now facing the challenge of saving these incremented values back to the database in real-time using Django and JavaScript. Every time I refres ...

javascriptpythondjangodjango-rest-frameworkdjango-views

Facing issues with Express, http-proxy-middleware, and encountering the error net::ERR_CONNECTION_REFUSED

For some time now, I've been troubleshooting an issue with my Express App that utilizes http-proxy-middleware to forward requests to another backend service. The problem arises when a third-party application makes a request to my server using an IP ad ...

javascriptnode.jsexpressproxyhttp-proxy-middleware

Timing of React setState updates

Currently, I am working on developing a memory game using React. The main objective of the game is to click on cards without repeating any selections in order to earn points. If the same card is clicked twice, it results in losing the game. This project se ...

javascriptreactjsasynchronous

Using Javascript and Node.js, a child class instance in ES5 can access a method belonging to its parent

I am facing an issue while trying to call a parent's method from child's constructor. Below is the code snippet: parentClass.js var ParentClass = function(arg) { this.arg = arg; this.result = {}; }; ParentClass.prototype = { constr ...

javascriptnode.js

Challenges with xmlHttpRequest in a search autocomplete feature similar to Google's suggestion feature

I am currently working on implementing an autosuggestion search field that functions similarly to Google Suggestion. I am utilizing pure JavaScript/AJAX along with two files: index.php and ajax-submit.php (which is responsible for querying the database). H ...

javascriptajaxxmlhttprequest

Determine whether an image is retina or non-retina using just one picture

Is it possible to use just one picture that is already optimized for retina displays, but automatically resize or crop down to a non-retina version when viewed on a non-retina screen? I'm facing this issue specifically with IE while using a PC. The im ...

javascripthtmlimageretina

Utilizing ES6, accessing the first element of an array of objects

How can I access the values of the first or a specific object in an array based on an index using ES6? arrayOne =[ { child: [ {e1: 'ABCD', e2: 'BCDF'}, {e1: '1234', e2: '5689'}, {e1: 'QAZ ...

javascriptarraystypescriptecmascript-6

The AJAX post request contains no data (an empty string in the database)

I am facing an issue with my AJAX code. $(document).ready(function() { var activeTD; $(".td_test").click(function() { $("#bModal").modal('show'); activeTD = this; return false; }); $("#ajaxtest").submit( ...

javascriptjqueryajaxservlets

React |Different ways to handle multiple children sending events to parent simultaneously and updating the parent state

I have a Form component and an Input component. The Form contains Input as children. When the form is submitted, I send an incremented value to the child Input component. In the Input component, I have a listener (useEffect) on that incremented value to va ...

javascriptreactjsformsvalidation

Exploring the depths of cURL and PHP beyond the basics

After realizing that my previous question was not quite right, I am back with a more accurate one. This time, I am working with cURL in PHP and trying to access a website. However, every time I change the site, the browser sends a value x to the server. If ...

javascriptphphtmlcurl