How can I utilize a custom shader in Three.js to fill a png texture and establish transparency?

I am facing an issue with changing the color of a texture that predominantly contains red. Despite my efforts, the texture is completely filling the picture with red. Can someone please help me identify the error?

I am also struggling to understand why I am unable to set transparency.

function vertexShader(){

    return `
        precision mediump float;   
        varying vec2 vUv;

    void main(){

        vUv = uv;
        
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0 );
    
    }
    `
}


function fragmentShader(){

    return `
        precision mediump float;


        varying vec2 vUv;
        uniform sampler2D u_texture;

        uniform float u_time;
        

        void main(){

            gl_FragColor = texture2D(u_texture, vUv);
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);     
        }
    `
}

var texLoader = new THREE.TextureLoader();

var texture = texLoader.load("217.png");

const uniforms = {
    u_texture: {value: texture}
}


const material = new THREE.ShaderMaterial(
     {
        uniforms,
        vertexShader: vertexShader(),
        fragmentShader: fragmentShader(),
        side: THREE.DoubleSide,
        //wireframe: true
     }

 );

Answer №1

The shader is instructing the gl_FragColor to be displayed as the color red

        gl_FragColor = texture2D(u_texture, vUv);  // this part of the code is essentially disregarded
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);   // as this line specifically sets glFragColor to red

Perhaps you intended this instead?

        gl_FragColor = texture2D(u_texture, vUv);  
        gl_FragColor += vec4(1.0, 0.0, 0.0, 1.0);  // incorporating red

or maybe this?

        gl_FragColor = texture2D(u_texture, vUv);  
        gl_FragColor *= vec4(1.0, 0.0, 0.0, 1.0);  // blending with red

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 challenging surfaces of a mesh through raycasting in Three.js

I successfully built a box using three.js var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 100, window.innerWidth/window.innerHeight, 0.1, 1000 ); camera.position.set(5, 5, 10); var geo = new THREE.BoxGeometry(5,2,5); var mat = n ...

Calculate the sum of hours worked in a day using pure JavaScript, no external libraries required

Hello, I'm new to this website and please excuse me if my English is not perfect, I am trying my best to communicate :) I have been working on a page that calculates the total hours worked in a day and this is what I have achieved so far until 15/06 ...

Exploring the world of Node.js callback parameter passing

Currently, I am diving into the world of Node callbacks and JavaScript in general. As I delve deeper, I find myself puzzled by the following snippet: var request = require('request'); request('http://www.google.com', function (error, ...

Transmit the JavaScript array via AJAX to PHP server

Is it possible to transfer a JS array created using the .push function to another PHP file? I have included the code snippets for the two files involved, game.js and gallery.php. In Game.js: imgarray.push({"img_name": img_name,"x": x_value,"y": y_value,"w ...

What steps can a web developer take to view user console errors?

Is there an effective method for a web developer to receive notifications of console errors logged by other authorized users? I am currently working with Express, Passport, and MongoDB. These errors may occur on either the client or server side. One approa ...

Encountering a "Karma error: resource not discovered" while examining an AngularJS application

I'm attempting to run my AngularJS application in Netbeans IDE, and I believe I've set up the files correctly. However, an error is appearing when I try to test it by right-clicking on my project and selecting Test: Karma cannot start (incorrect ...

Saving form data with a tinymce textarea, radio button, and checkbox to the database

My form contains multiple textarea fields, radio buttons, checkboxes, and a select input. Initially, I was able to submit the form using PHP without any issues. However, when I integrated TinyMCE with one of the textareas, I had to introduce JavaScript to ...

Adding a data attribute to a group of elements derived from an array

Looking to enhance the functionality of a slick slider by creating a custom navigation with buttons that will work alongside the original navigation dots. To achieve this, I need to extract the 'data-slick-index' attribute from every fourth slid ...

Getting a random value within a Struts set tag can be achieved by utilizing the <

Using struts2 tags in my application, I am trying to dynamically change the value in a JavaScript array using s:set tags. However, when I add the values dynamically, the output I get is 2012 - diff + 1, whereas I am expecting 2011. How can I achieve this? ...

Utilizing a Three.js vertex shader to ensure that all geometry triangles are oriented to face the camera for

Seeking guidance on how to create a vertex shader in Three.js for rendering textured geometry with all triangles facing the camera directly. The aim is to replicate the efficiency of Three.js Points without being restricted by gl_PointSize limitations. I ...

Avoiding the opening of a select menu

Is there a way to prevent the dropdown menu from appearing when a select element is clicked in a form? I have attempted two methods but they did not work: $('select').click (function (e) { console.log (e); return false; }); and $(&apo ...

Using AJAX and React to handle RESTful requests

Hello there, I am attempting to utilize a web service in React but am encountering issues with the AJAX function. I'm unsure if my code is working as expected. Here is a snippet of my code: prox= {"email":email, "password": password}; //tag comment $ ...

Retrieve the item that is contained within a separate item within the original

Is there a way to access the Photos object in my code? I attempted to use {{ item.image.Photos[0].image }} but it was unsuccessful https://i.stack.imgur.com/IGC2c.png Looking for Assistance with TypeScript listHotelPhotos( hotel_id ){ let loader = t ...

I recently created an application using Vue and I'm exploring options for storing information to use later. Would using js-cookie be a viable solution for this?

After experimenting with Vuex to store user-selected information in my app, I found that the data was lost upon page reload. Switching to Cookies and using js-cookie solved this issue seamlessly. It makes me wonder if there is a downside to relying on cook ...

Updating a Vue ref does not result in the component reflecting the changes made

My Vue3 form has three text inputs and a group of checkboxes. To implement this, I am using the bootstrap-vue form along with its checkbox-group component. After calling an API to fetch default values for the form, I update the ref as shown below. Interes ...

Creating an Ionic 3 canvas using a provider

I recently followed a tutorial on integrating the canvas API into Ionic, which can be found at this link. However, I encountered an issue where all the canvas-related functions had to be placed within the pages class, making it quite cumbersome as these f ...

Problem with a for loop: retrieve only the final item

Using the fileReader to read the content of selected files and appending it to the DOM creates a paragraph element for each file. However, when attempting to store each file's content in local storage, only the last item is being saved. What could be ...

Loading static assets dynamically in React Native WebView

Is there a way to dynamically load files in a WebView from the local file system or assets folder? I've been able to fetch resources from a server using ajax, but struggling to figure out how to load local resources. DETAILS: I am currently loading a ...

Dygraphs.js failing to display the second data point

My website features a graph for currency comparison using Dygraphs. Everything was working fine until I encountered this strange issue. https://i.stack.imgur.com/OGcCA.png The graph only displays the first and third values, consistently skipping the seco ...

How can I use query to swap out elements within a div when clicked?

I have a project with two separate div classes named demo-heart and demo-coal. The goal is to implement functionality that allows the user to click on the fa-heart icon and have it switch to fa-coal, and vice versa when clicking on fa-coal. <div class ...