During post-processing, the elimination of lens flares can sometimes lead to an error known as "copyTexImage2D: framebuffer is

After looking at the lens flares example here: ,

I'm encountering an issue with post-processing this particular scene. The blocks display correctly, but the light sources and lens flares are missing. Additionally, I am receiving several warnings in the console like: copyTexImage2D: framebuffer is incompatible format. While comparing my code, I noticed that I have added the following snippets to the init() and render() loop:

// init()
// 
// Post Processing (
// 
var rtParameters = {
  minFilter:     THREE.LinearFilter,
  magFilter:     THREE.LinearFilter,
  format:        THREE.RGBFormat,
  stencilBuffer: true
 };

// Vignette scene.
var shaderVignette = THREE.VignetteShader;
var effectVignette = new THREE.ShaderPass(shaderVignette);
effectVignette.uniforms[ "offset" ].value = 0.95;
effectVignette.uniforms[ "darkness" ].value = 1.6;

// What are these??
var clearMask = new THREE.ClearMaskPass();
var renderMask = new THREE.MaskPass(scene, camera);

effectVignette.renderToScreen = true;

// Render entire scene as a texture. 
var renderModel = new THREE.RenderPass(scene, camera);
// renderModel.clear = false;

// Notice: Takes *entire* canvas. 
composerScene = new THREE.EffectComposer(renderer,
  new THREE.WebGLRenderTarget(width, height, rtParameters));
composerScene.addPass(renderModel);
composerScene.addPass(clearMask);

// Not sure what this does... renderTarget2 is the buffer we read from...
renderScene = new THREE.TexturePass(composerScene.renderTarget2);

// Add first composer -- don't add any passes except for renderScene. 
composer1 = new THREE.EffectComposer(renderer,
  new THREE.WebGLRenderTarget(width / 2, height, rtParameters));
composer1.addPass(renderScene);
composer1.addPass(effectVignette);

// Add second composer -- do image processing passes here. 
composer2 = new THREE.EffectComposer(renderer,
  new THREE.WebGLRenderTarget(width / 2, height, rtParameters));
composer2.addPass(renderScene);
composer2.addPass(effectVignette);

renderScene.uniforms[ "tDiffuse" ].value = composerScene.renderTarget2;

And within my render loop, the setup is as follows:

//render() 
// Set view port to entire region
renderer.setViewport(0, 0, width, height);

renderer.clear();
composerScene.render(delta);

// Render original scene. 
renderer.setViewport(0, 0, width / 2, height);
composer1.render(delta);

// Render modified scene. 
renderer.setViewport(width / 2, 0, width / 2, height);
composer2.render(delta);

Answer №1

Upon investigation, the root of the problem was pinpointed to this specific line of code:

// Attention: Requires *entire* canvas.
composerScene = new THREE.EffectComposer(renderer,
  new THREE.WebGLRenderTarget(width, height, rtParameters));

Given that I had split the scene into two separate sections, the width value needed adjustment to width/2. Thus, the revised code reads as follows:

// Attention: Now accepts only the dimensions of the desired image.
composerScene = new THREE.EffectComposer(renderer,
  new THREE.WebGLRenderTarget(width/2, height, rtParameters));

It is important to acknowledge that this issue was unrelated to lens flares and instead rooted in a more fundamental aspect. My apologies for any confusion caused!!

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

Tips for fixing an error encountered when running a react native project for the first time

I am encountering some errors while attempting to run this project for the first time and I am unable to resolve them. Below is the content of the package.json file: { "scripts": { "start": "expo start", "andro ...

Oops! Looks like the 'opennebula' module is missing in your Meteor.JS project

I've attempted using meteorhacks:npm but encountered the same issues. While working on a Meteor.JS application with iron:router installed, I'm facing difficulties loading the NPM module "opennebula" (found at https://github.com/OpenNebula/addon- ...

Remove all Visual Composer Shortcodes while preserving the content

I'm in the process of transferring 200 posts from a previous WordPress website, which contain numerous visual composer shortcodes within the content. Is there a method to remove all the shortcodes and retain the content? ...

How to use JavaScript and regex to control the state of a disabled submit button

I have a challenge where I need to activate or deactivate a submission button in a form called btn-vote using JavaScript. The button will only be activated if one of the 10 radio buttons is selected. Additionally, if the person-10 radio button is chosen, t ...

Best practices for managing CSV files in Next.js with TypeScript

Hello, I am currently working on a web application using nextjs and typescript. One of the features I want to implement is a chart displaying data from a csv file. However, I am not sure if using a csv file is the best choice in the long run. I may end up ...

having difficulty sending a post request with Angular

Submitting form data via HTTP post will look like this: saveDataFile(mutlidata,id,value): Observable<Response> { var _url = 'http://xxxx.xxx.xxx'; var saveDataURL = _url + '/' + id; var _this = this; ...

invoking a method of the grandparent from within the grandchild component

My components are nested three levels deep: <GrandParent /> <Parent /> <Child /> In the Child component, I have a button that, when double clicked, should call a function in the GrandParent component. <button @dblclick=&quo ...

How come attempting to read a nonexistent document from Firestore results in an uncaught promise?

I've been struggling to read and display data from Firestore, but I keep seeing error messages in the console. Encountered (in promise) a TypeError: Unable to read properties of undefined (reading 'ex') Encountered (in promise) a TypeError ...

Basic inquiry about Ajax

Would you like to know a simple solution for refreshing a specific area of your website using ajax? Instead of having JavaScript constantly checking for changes on the server, is there a way for the server to send data when a certain event occurs? Imagine ...

Troubleshooting: JavaScript Bookmarklet Fails to Execute on Certain Websites

Recently, I created a unique bookmarklet that functions flawlessly on some websites, but unfortunately fails to work on others. Interestingly, even when it doesn't work, the script is still added to the bottom of the page; however, only a portion of t ...

Activate the audit command for the npm enterprise registry

I'd like to know how to activate the npm audit command in my npm enterprise registry. Whenever I attempt to run the npm audit command, I encounter the following error: { "error": { "code": "ENOAUDIT", "summary": "Your configured registry ( ...

The issue of variable stagnation in Firefox content script while utilizing self.port.on

I'm having trouble updating the version var as intended. When I try to update it with the following code: self.port.on("get-version", ver => { version = ver; alert(version); }); An alert pops up displaying the correct version number, but the HTML ...

Is it possible to use a pass-through or helper function to invoke Asynchronous Generators in Node.js?

Exploring New Territory Upon my discovery that the asynchronous generator pattern is relatively novel in JavaScript and currently only supported in Node.js starting from version 10, I delved deeper into its functionalities. Now, equipped with this knowled ...

React: Updating a state before calling another function - Best practices

In my code, there is a state variable named list that gets updated whenever the function setList is called. The setting of the list happens within the function AddToList, where a new value is added to the existing values in the list. However, I have notice ...

Is the value incorrect when using angular's ng-repeat?

Currently iterating through an array nested within an array of objects like this: <div ng-repeat="benefit in oe.oeBenefits"> <div class="oeInfo" style="clear: both;"> <div class="col-md-2 oeCol"> <img style="he ...

Navigate to an element with a specific ID using JavaScript

How can I implement scrolling to an element on a webpage using pure javascript in VueJS with Vuetify framework? I want to achieve the same functionality as <a href="#link"></a> but without using jQuery. My navigation structure is as follows: ...

What is the best way to show a tooltip alongside highlighted text?

How can I display a tooltip (using qTip) next to selected text? The code below captures the selected text in the console, but the tooltip is not displayed. <div class='test'>Actual text will be much longer...Test Test Test Test Test Test T ...

Dynamic way to update the focus color of a select menu based on the model value in AngularJS

I am looking to customize the focus color of a select menu based on a model value. For example, when I choose "Product Manager", the background color changes to blue upon focusing. However, I want to alter this background color dynamically depending on th ...

"Encountering an issue with AngularJS where the selected ng-model value is

I'm utilizing plain options for the select tag because I only need to display a few options when they meet a certain condition. In order to perform other operations, I require the value of the selected dropdown in the controller. However, the issue is ...

Migrating to Angular Universal for server-side rendering with an external API server

Thank you for taking the time to read my query. I have developed a project using server-side Node.js and client-side Angular 6. The purpose of the app is to provide information on cryptocurrency prices and details. I am now looking to transition my Angu ...