Issue with resizing browser window when using three.js EffectComposer

My current rendering setup encounters a resizing issue when adjusting the browser window size.

In my setup, I am rendering two scenes - one for objects with postprocessing effects applied. The postprocessing effects are achieved using THREE.EffectComposer and shaders from the example directory.

To combine the two scene renders, I use another shader example that performs additive blending.


You can view a simplified version of this setup here: http://jsbin.com/hibum/18/edit?js,output. (In the HTML section, I have included necessary JavaScript sources from the three.js repository)

If you resize the output panel, then reload the page and expand it again, you will notice the following:

The main scene (depicted by a blue sphere) updates its rendering size correctly, but the effects scene (shown as an orange sphere) maintains the same resolution, getting upscaled instead.

I am trying to determine which render target, renderer, or shader uniform needs updating during a browser resize event to ensure the image is rendered accurately after resizing.

For the main composer, calling setSize() resolves the issue. However, performing the same action on the effects composer results in the effects scene not being rendered.

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

Answer №1

To resolve the issue, I needed to restart both EffectComposers and also reset the tDiffuse2 uniform in the AdditiveBlendShader:

composer.reset();  
effectsManager.reset();  

blendShader.uniforms.tDiffuse2.value = effectsManager.renderTarget2;

For more details, please visit http://example.com

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

Exploring the possibilities of wildcards in npm scripts on Windows

Currently, I am attempting to use jshint to lint all of my javascript files by utilizing an npm script command. Even though I am working on a Windows system, I am facing an issue where I cannot successfully lint more than one file regardless of the wildca ...

An effective method for creating responsive layouts for custom-shaped HTML elements in a board game

Can anyone guide me on aligning spaces responsively on a board in HTML using Angular 1.x? I've tried using vw/vh's and %s, but consistency breaks on different view sizes. Any straightforward suggestions to address this issue? Avoiding multiple c ...

Error encountered while utilizing a custom third-party component within an Angular project during static analysis

Currently, I am utilizing an Angular (2+) datepicker component (link to Github) in two separate Angular projects: Angular CLI v1.0.0-beta.30, Angular v2.3 Angular CLI v1.0.0, Angular v4.0 The first project works flawlessly both during development with n ...

What indicators should we look for to decide if JavaScriptExecutor is needed in a Selenium C# project?

Encountering an exception with TestInChrome1 - "OpenQA.Selenium.ElementNotInteractableException: element not interactable". On the other hand, using JavaScriptExecutor in TestInChrome2 resolves the issue. Some key questions arise: What is causing the ...

What is the best way to dynamically update or display unique CSS styles when a service is invoked or provides a response in AngularJS using JavaScript

Seeking to display a unique CSS style on my HTML FORM prior to invoking a service in my code and then reverting back after receiving the response. I have implemented the use of ng-class to dynamically add the class when the boolean activeload1 is set to tr ...

Trap mistakes while utilizing async/await

Within my Express application, I have a register function for creating new users. This function involves creating the user in Auth0, sending an email, and responding to the client. I am looking to handle errors from Auth0 or Postmark individually and send ...

Feeling overwhelmed by the potential capabilities of Angular Firestore

Seeking clarification as I am struggling to understand the usage of Angular and Firestore. Recently delved into Google Firebase and attempted CRUD operations with Firestore. What sets apart this library from others? import { Firestore } from '@angul ...

How to insert a row above the header in an Excel sheet using JavaScript within

i am using excel js to export json data to excel. The json data is successfully exported to the sheet, but now I need to add a row that provides details of the sheet above the header text. for more details please refer image the code is shown below: i ...

Communication between related components in Angular involving siblings

I am currently working in Angular 4 with sibling components, where there are no parent-child relationships, only siblings. One of the siblings is able to successfully retrieve data, particularly the ID from the URL using the code snippet below: public ge ...

Is there a way to assign API data as inner HTML using Lit?

Need help setting inner html of html elements with a get request Any suggestions on how to achieve this? import { LitElement, html, css } from "lit"; import { customElement } from "lit/decorators.js"; import axios from "axios" ...

Is it feasible to insert the result of a JavaScript code into a PHP script?

Alternatively, you can view both codes side by side on the panelbackup(dot)com/codes page Alright, I have a code placed on page 1.html that adds four random numbers at the end of any given URL: <head><script>window.onload = function() { ...

Tips for updating values in a nested array within JSON

I am working with the following .json file and my goal is to update the values of "down" and "up" based on user input. "android": { "appium:autoAcceptAlerts": true, "appium:automationName": "UiAutomator2", ...

Steps for creating a two-dimensional arc

I want to input some pre-determined acr values from another program and replicate them in three.js Currently, I'm using code I found on this site to draw the arc, although it might not be the most optimal solution. function DRAWarc(){ ...

What is the best method to assign a property to a model within AngularJS by utilizing an attribute parameter?

I am in the process of creating a custom directive in AngularJS for a UI slider that can be used multiple times. Each slider should be able to bind to a specific property. My idea was to use an attribute called "property" which would automatically update w ...

Step-by-step guide on utilizing bootstrap 4 modals to create a "block ui" feature - a modal screen that disables input and displays a "please wait" message

Is it possible to use Bootstrap 4 modals as a "block ui" feature to fade the screen dynamically during an AJAX call and display a "wait a minute..." message or sandglasses? Although modals in the framework can be used for UI blocking functionality, I have ...

UI changes are not appearing until after the synchronous ajax call

I have two JavaScript functions that are called one after the other, as shown below. updateUI(event); syncCall(); function updateUI(event) { formSubmitBtn = $(event.target).find('[type=submit]:not(".disabled")'); formSubmitBtn.attr('di ...

What is the best way to manage two different IDs, one using jQuery and the other using Vue.js?

How can I manage to include a sliding effect for my products using jQuery ID and display items with Vue.js? <script type="text/javascript> $(window).load(function() { $("#flexiselDemo1").flexisel({ ....................... ...

Connecting a dynamically assessed function on the $scope to a service

Within my code, there is a function called make_value_summary that has the capability to generate a generic summary of various fields within the $scope. By applying this function, I am able to create location_summary, which is then linked to the view using ...

Having trouble with JSON parsing in Promise execution

I am in the process of developing a Promise with the objective of adding up any numbers discovered within an array or JSON object. The add() function is designed to receive a series of URLs as a string input and calculate the total sum of those URLs. Her ...

Issue persists: Ajax functionality remains nonfunctional, prompting the need for

My goal is to use the post input, and upon hitting enter, I want to dynamically replace <div id="mainPagePosts"></div> with new data without causing a page refresh. However, even after submitting the post, the page still refreshes, although I d ...