Using EffectComposer in conjunction with the alpha channel in three.js

Here's the code I'm working with:

renderTargetParametersRGBA = { 
minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter,
 format: THREE.RGBAFormat,stencilBuffer: true 
 };
colorTarget = new THREE.WebGLRenderTarget(
 SCALE * SCREEN_WIDTH, SCALE * SCREEN_HEIGHT, renderTargetParametersRGBA
 );
composer = new THREE.EffectComposer( 
renderer,colorTarget 
);
var renderScene = new THREE.RenderPass(scene,camera);
var effect2 = new THREE.ShaderPass(THREE.ShaderExtras[ "shader1" ]);
composer.addPass(renderScene);
composer.addPass(effect2);

While setting the alpha channel in renderScene, I noticed that the alpha channel value is not the same in shader1. It seems like the alpha channel might be getting altered. Any idea what could be causing this issue?

Appreciate any help, thank you

Answer №1

When working with Three.js EffectComposer layers, true transparency can be a bit tricky. Transparent pixels can often render as black or the background color by default. To combat this, careful consideration must be taken when combining pixel values in shaders to ensure the desired color combinations are achieved despite the lack of transparency.

One way to address this issue is by controlling the alpha channel directly within the shader. By passing the alpha value as a uniform or attribute, it becomes possible to manipulate transparency as needed. In my own workflow, I utilize a separate attribute array for alpha values and use them within the shader to adjust alphas accordingly.

varying float vAlpha;
varying vec3 vColor;

void main() {
gl_FragColor = vec4( vColor, vAlpha );
...

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 nesting ajax calls in jQuery a clever strategy?

I currently have this ajax call: $.ajax({ url: "misc/sendPM.php", type: "POST", data: data, success: function(stuff) { if (typeof stuff == "object") { var err = confirm(stuff.error); if (err) { ...

How to Convert Python Lists into JavaScript?

octopusList = {"first": ["red", "white"], "second": ["green", "blue", "red"], "third": ["green", "blue", "red"]} squidList = ["first", "second", "third"] for i in range(1): squid = random.choice(squidList) octopus = random. ...

Implementing advanced checkbox filtering feature in React

Does anyone have experience with creating dynamic Checkbox filtering in React using Material-UI? I'm finding it challenging because the checkbox options are generated dynamically from incoming data and need to be categorized by type of Select componen ...

What is the best way to trigger the Save as ..dialog by clicking on an image?

Below is the code snippet provided. When the link is clicked, a save as dialog should pop up. <a href="http://www.experts-exchange.com/xp/images/newNavLogo.png" target="_new"> <img src="http://www.experts-exchange.com/xp/images/newNavLogo.png" a ...

Transferring data using Ajax in a contact form PHP file

I recently started learning about AJAX and came across a code snippet online for sending data to a PHP file using AJAX. However, I'm facing an issue where I'm not sure if the data is being submitted or what is happening. The alert box doesn' ...

What steps can I take to stop the browser from refreshing a POST route in Express?

Currently, I am using node along with stripe integration for managing payments. My application includes a /charge route that collects various parameters from the front end and generates a receipt. I am faced with a challenge on how to redirect from a POST ...

Transfer the Vue query parameter from the current route to the router-link

Why is it so challenging to detect and pass query parameters in Vue components? I'm trying to access the router from my component, but nothing seems to be working. How can I achieve this? <router-link :to="{ path: '/', query: { myQue ...

Identify the moment a dialogue box appears using jQuery

I'm facing a situation where multiple dialogs are opened in a similar manner: $("#dialog").load(URL); $("#dialog").dialog( attributes, here, close: function(e,u) { cleanup } The chall ...

What could be causing my Express API registration route to fail when attempting to POST?

Currently, I'm in the process of developing a compact authentication system for a practice project that I've undertaken. As part of this endeavor, I am sending POST requests via Postman to my Express server located at http://localhost:4000/api/re ...

What is the best way to ensure that a component remains the highest layer on a react-leaflet map?

I am encountering an issue where the table on my page only shows for a brief second when I refresh the page, and then it disappears. The Map Component being used is a react-leaflet map. I would like to have a component always displayed on top of the map wi ...

Aligning the content in the center of a div with inline display

Hi there, I have a quick question for the experts out there. I'm new to all of this so please bear with me :) I'm attempting to center an inline social sharing div on my website, but it's proving to be quite challenging. The div is nested w ...

Utilizing Draft JS to dynamically insert text in the form of span

I'm utilizing Draft.js with its mentions plugin. Occasionally, I'd like users to input a mention not by choosing from a dropdown menu, but by typing something like, for example, "@item" or "@item". In the function below, you can observe that if ...

Which specific indexOf method is the most appropriate for my use case?

While exploring a codebase, I came across this code snippet that adds the indexOf function: if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(elt /*, from*/) { var len = this.length >>> 0; var from = Number(arguments ...

Is it possible to have setTimeOut() executed after the page has been redirected?

Why is it not possible to duplicate: The question was not addressed in the previous post. I have a link for deletion, which, when clicked, triggers a popup with a button. Upon clicking that button, the page inside the popup redirects to a new internal pag ...

Retrieve JSON data from an object using the Amplify Storage feature

I recently retrieved data from an object in an S3 Bucket using Amplify. export function amplify() { let key = "68a92d44-f25a-4bd8-9543-cc95369ae9a0"; return Storage.get(key + ".json", { download: true }) .then(function(result) { return ...

Attempting to modify information in vue.js

I have been facing an issue with overriding data in the App.vue component. It seems that every time I try to update the data in my main.js file, the component still takes the default data. I am working with webpack as well. App.vue <template> & ...

Expanding properties in a React component based on certain conditions using TypeScript

I am attempting to dynamically expand my component props based on whether a specific prop is included. The goal is to add attributes from an anchor if the href prop is provided, and include attributes from a button if it is not. Is this achievable? Chec ...

Why is the 'a' element not clickable after the AJAX complete function has executed in JavaScript?

I have a small question regarding my use of AJAX. Everything is working fine, but after the AJAX request completes, I am trying to change the element attributes such as backgroundImage dynamically. Although this process works correctly, the element that wa ...

Validate if a string in JQuery contains a specific substring

How can I determine if one string contains another string? var str1 = "ABCDEFGHIJKLMNOP"; var str2 = "DEFG"; What function should I utilize to check if the string str1 includes the string str2? ...

What is the process for utilizing a custom plugin within the <script setup> section of Vue 3?

//CustomPlugin.js const generateRandomValue = (min, max) => { min = Math.ceil(min); max = Math.floor(max); const random = Math.floor(Math.random() * (max - min + 1)) + min; console.log(random); }; export default { install(Vue) { Vue.conf ...