Issue with post-processing filters in Three.JS r71: Transparent renderer is not functioning as expected

I am attempting to implement a BloomPass on my current scene and want the background of the containing page to show through. However, when I apply the BloomPass, the background turns black.

You can see my example here:http://plnkr.co/edit/0mp0jaGVF6it52HY7aq2?p=preview

I have tried following suggestions from this old thread https://github.com/mrdoob/three.js/issues/1080 on my local version of the plunkr (such as changing the ClearAlpha flags in RenderPass), but none of those solutions seem to work. The black background remains even when using different shaders (I also tried FilmPass and FXAA).

I am using Chrome 45.0.2454.101 (64-bit) on Yosemite 10.10.5.

javascriptthree.jsrenderingwebgl

Answer №1

If you intend on utilizing the EffectComposer extensively, it will be necessary to dedicate time to fully comprehend its intricacies. There are numerous nuances to consider.

The desired outcome is for the post-processing effect to appear transparent.

In order to achieve this, ensure that the render targets utilized by the Composer possess an alpha channel - in other words, are of THREE.RGBAFormat.

composer.renderTarget1.format = THREE.RGBAFormat;
composer.renderTarget2.format = THREE.RGBAFormat;
effectBloom.renderTargetX.format = THREE.RGBAFormat;
effectBloom.renderTargetY.format = THREE.RGBAFormat;

three.js r.73

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

more efficient method for gathering information and refreshing a database

Presented here is a method for form submission. In reality, there are many more text inputs to consider. While everything functions properly, I am seeking a more concise approach, especially on the server side. This is due to the fact that the data-col ...

javascriptphpjquerymysql

Employing the identical directive within a directive [angularjs]

My requirement is to utilize the same directive within another directive, based on a conditional parameter. However, every time I attempt to do this, it appears to enter an infinite loop. It seems like the templates are being preloaded and causing a recurs ...

javascriptangularjsangularjs-directive

What are the steps to implement the jQuery slide menu effect on a website?

When visiting the website , you may notice a symbol positioned in the top left corner of the site. By clicking on this symbol, a sleek div will slide out. How can this type of animation be achieved through javascript or jquery? ...

javascriptmenuslide

How to Align Text at the Center of a Line in Three.js

Exploring What I Possess. https://i.sstatic.net/nAtmp.png Setting My Goals: https://i.sstatic.net/svcxa.png Addressing My Queries: In the realm of three.js, how can I transform position x and y into browser coordinates to perfectly align text in th ...

javascripthtmlthree.js

Using Dynamic Jinja HTML to Select Elements Dynamically

I have a unique system where forms are dynamically created based on values from a dictionary. Each form is assigned an ID corresponding to the key value and initially hidden. <div id="subforms" style="display: none" > {%for k, v in options.items() ...

javascriptpythonhtmljinja2

Can diverse array elements be divided into separate arrays based on their object type in JavaScript?

Looking to create new arrays based on objects with similar attributes from an existing array? Here's how: Starting with this [ {name: "test", place: "country"}, {name: "walkAndEat", Long: 100, Lat: 15, Location: "place name"}, {name: "te ...

javascriptarraysangularjsmean

Is it acceptable to initiate an import with a forward slash when importing from the root directory in Next.js?

I've noticed that this import works without any issues, but I couldn't find official documentation confirming its validity: // instead of using a complex nested import like this import { myUtil } from '../../../../../lib/utils' // this ...

javascriptnode.jsreactjsnext.js

Tips for transferring an array from a form to a URL using JavaScript?

My form uses a get method, and includes a select element allowing users to choose multiple options. However, when the user submits the form, the URL does not neatly display these selections. Is there a way for me to pass the array in a more organized manne ...

javascriptnode.jsformsexpressurl

Utilize JavaScript to establish an object with key and value pairings

Wanting to loop through and create an object that contains key => [value], if the key already exists, simply add the value. Here is what I have tried so far: let dataName = []; let obj = {}; checkboxes.forEach(checkbox => { if (checkbox.che ...

javascript

Tips for customizing the appearance of the day button in a React Material-UI date picker

In my React project, I am using material-ui date picker and I am looking for a way to customize the styling of the day buttons. Specifically, I want to change the text color of the available days. By default, as seen in the screenshot, the text color is bl ...

javascriptcssreactjsmaterial-ui

Tips for displaying and sorting two requests within one console

I am currently working on a project to display both folders and subfolders, but only the folders are visible at the moment. function getParserTypes (types, subject) { return types.map((type) => { return { id: type.entry.id, name: type. ...

javascriptnode.jsreactjsapirest

Is Fullpage.js functioning only on local servers?

I have decided to create a personal website showcasing my portfolio using the fullpage.js library. Everything seems to be working fine during development, but once I upload the site to my github.io or another public domain via FTP, I encounter GET errors t ...

javascriptjqueryhtmlcssfullpage.js

Implementing the requiredUnless validator of vuelidate for checkboxes: A step-by-step guide

When utilizing Vuelidate, the 'required' validator now accepts boolean 'false' as a valid value. To enforce required validation for checkboxes, you must use 'sameAs' such as sameAs: sameAs( () => true ). How can 'requi ...

javascriptvalidationvue.jsvuelidate

Accordion content in motion

After creating an accordion, I wanted to enhance the user experience by adding a transition effect whenever they click on the accordion header. Even though I included height: auto and transition in the accordion container, it did not seem to have any impa ...

javascripthtmlcss

JavaScript can intelligently extract and categorize an array of objects based on their properties

In essence, I aim to develop a versatile function "organize" that can transform the following data structure: [ { name: 'band1', type: 'concert', subtype: 'rock' }, { name: 'band2', type: 'concert' ...

javascriptvue.js

Making an AJAX POST request using jQuery to send the current date and time to an ASP

I am working with an ASP.NET Web API endpoint where I need to send POST data. Suppose I want to post the following information: var myObject = { name: "Alice Johnson", age: "29", accountCreated: "CURRENT DATE TIME" }; What is the JavaScript equivalent o ...

c#javascriptjqueryasp.net-web-api

Confirming user banking information is necessary solely for account activation through Stripe

I've been working with NodeJS and ExpressJS Is there a way to set up account verification with Stripe? I want to confirm that users have bank accounts without charging them. What kind of information can I access through this verification process? My ...

javascriptnode.jsnpmstripe-payments

Angular Kendo dropdownlist and input textbox are not working together as anticipated

I'm looking to implement a dropdown list similar to Google search using Kendo Angular. However, I've encountered an issue where entering text in the textbox and pressing "Enter" passes the first matching value from the dropdown list to my compone ...

javascriptangulartelerikkendo-ui-angular2kendo-dropdown

Firefox does not allow contenteditable elements to be edited if they are nested inside a parent element that is draggable

Here is a basic HTML example: <div draggable=true> <div contenteditable=true>can't edit me</div> </div> When testing in Chrome, I noticed that I was able to edit the contents of the contenteditable div, however, this functi ...

javascripthtmlgoogle-chromeinternet-explorerfirefox

What is the process for removing a specific photo from a user's profile if the photo in question has a file beginning with file://?

How can I delete a specific photo object of the user if that photo object starts with file://? I am currently working on adding an image feature in my app using NodeJs. The route I have created for uploading images is functioning properly. However, I encou ...

javascriptnode.jsreactjsmongodb