Utilizing the power of WebGL and three.js, merge an alpha-transparent texture with an alpha-transparent color using a fragment

I'm facing an issue with a fragment shader where I have a texture being passed to it and I want to overlay a color with 50% alpha on top of it. While I've managed to partially achieve this, the original texture seems to lose its alpha channel.

Here's my current setup:

uniform sampler2D texture;
varying vec2 vUv;

void main() {
    vec4 tColor = texture2D(texture, vUv);

    vec4 color = vec4(1.0, 0.0, 0.0, 0.5);
    gl_FragColor = vec4(mix(tColor.rgb, color.rgb, color.a), 1.0);
}

Upon closer inspection, it's evident that the alpha channel of the texture is not being considered in gl_FragColor. I'm currently at a loss on how to incorporate it correctly.

Answer №1

gl_FragColor = vec4(mix(tColor.rgb, color.rgb, color.a), 1.0);

It seems the alpha value you are passing in as 1.0 is hardcoded to be 1, do you think this may cause any issues?

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

Load jQuery results when scrolling to the top of the window

I have a function that triggers when I click a button to fetch more data from my table. I'm attempting to make it work when the button reaches a certain distance from the top of the window, but I've been unable to achieve this so far... $(funct ...

Storing and reusing sendKeys in a variable with Webdriver JS

I currently have a form with 10 fields that require sending keys, storing the value, and then asserting that value when saving the form. Is it necessary to create a function for each field to store the value in a variable, or is there a more efficient appr ...

I am experiencing difficulties in accessing the DOM

I have implemented jQuery $.ajax to dynamically load data into table rows as shown below: <table id='row-data'> <tr><td>1001</td></tr> <tr><td>1322</td></tr> <tr><td>15 ...

Expanding upon passing arguments in JavaScript

function NewModel(client, collection) { this.client = client; this.collection = collection; }; NewModel.prototype = { constructor: NewModel, connectClient: function(callback) { this.client.open(callback); }, getSpecificCollection: ...

What's the best way to initiate a script in HTML to alter font size when a button is clicked?

Can someone help me with creating a script that changes the font size when a button is clicked? The buttons should be labeled 'normal', 'medium', and 'large'. ...

React is throwing an error because it cannot access the property 'length' of an undefined value

TypeError: Cannot read property 'length' of undefined When I try to run my React app, I keep getting this error message from the compiler. What steps should I take to resolve this issue? request = (start,end) => { if(this.state.teams.lengt ...

Google Map continues to update itself without needing to call render() again

In my current project, I am integrating Google Maps using ReactJS and Redux. However, whenever I interact with the map like clicking on a marker or zooming in, the entire map refreshes and turns gray before redrawing the same map with the marker. Even aft ...

What are the steps to troubleshooting using VS Code and Chrome browser with Webpack?

Can anyone provide guidance on how to debug webpack in VS Code with the Chrome browser? As a beginner in programming, I'm struggling because webpack minifies everything into one line which makes traditional debugging methods ineffective. I haven' ...

How can I use JavaScript to add a search text to the selectpicker searchbox in Bootstrap, and then automatically display the search results in the dropdown menu?

In the process of developing a web application with Razor Pages ASP.NET CORE 3.0, I have integrated a Bootstrap "selectpicker" dropdown with the attribute "data-live-search= true". The dropdown is populated with the names of employees from my model. Below ...

Challenges when integrating Autodesk Forge with Mapbox

I have recently started utilizing Autodesk Forge to display 3D buildings on my website. For the front-end framework, I am using React.js. Everything has been progressing smoothly, but there is one specific challenge that I am facing. My objective is to r ...

The Google Maps Javascript API will only load data if the console is open

I'm facing an issue with displaying a map on my webpage where I want to set a marker. What's the problem Despite no errors in the console or from Google, the map data is not loading properly. All I see is the Google logo and a grey background, ...

What is the best method for choosing these elements and surrounding them with a wrapper?

I need to style a title with two radio inputs by wrapping them in a form: <p><strong>Country</strong></p> <div class="radioWrapper"> <span class="label">Canada</span> <span class="radio"> ...

Automatically initiate a click event when the page is loaded

I'm having trouble getting a click event to trigger on my controller when the page loads. I really just want the checkboxes to be clicked automatically. <!DOCTYPE html> <html > <head> <link rel="stylesheet" type="text/css" ...

Limiting the display to only a portion of the document in Monaco Editor

Is there a way to display only a specific portion of a document, or in the case of Monaco, a model, while still maintaining intellisense for the entire document? I am looking to enable users to edit only certain sections of a document, yet still have acce ...

The sluggishness of Ajax - A recursive problem

I've come across an issue with the ajax code I'm using to request a page. It's causing high memory consumption, slowing down the browser, and making everything lag. It seems like there's recursion happening but I'm not sure how to ...

Animate items in a list by staggering their appearance during the initial rendering

I am currently working on creating a navigation menu that has a staggered effect when the list items appear upon opening the menu. Using a burger symbol to toggle the navigation menu to fullscreen, I want to incorporate an animation where each list item ( ...

What is the best way to customize the functionality of the Done (node-dialog-ok) button in node-red when it is

I have created a custom node and I want to trigger some specific actions when the 'Done' button (with id: node-dialog-ok) in the editor-tray-toolbar is clicked, instead of its default functionality. Is it possible to override the onclick event o ...

"Google Maps Integration: Customize Your Map with Grey Color Scheme and User-F

After reviewing the other questions and answers related to my problem, none of them seemed to address it. The issue is that when loading and placing a marker, the map seems to "freeze," turns grey, but still displays controls. The marker ends up in the up ...

Progress bar indicating the loading status of an AJAX script

I am facing a challenge with creating a progress bar in AJAX. The entire page is loaded through AJAX, and one of the webpage elements uses AJAX to fetch large rows from the database. I have attempted to implement a progress bar within this script using a ...

Adding a preloaded picture multiple times in a loop

window.preloadShips = function(){ window.shipImages.omega = new Image(); window.shipImages.omega.src = "shipIcons/omega.png"; } // After a while for (var i = 0; i < this.primary.systems.length; i++){ var td = document.createElement("td ...