CODEWITHSUNDEEP
javascriptthree.jsglsl
Mr.Flatman
Mr.Flatman

Reputation: 119

Three.js, custom shader, fill png texture and set transparency?

The task is to change the color of the texture with a predominance of red. I'm trying to do this, but my texture completely fills the picture with red, please tell me where is the error?

I don't understand why I can't 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
     }

 );

Upvotes: 0

Views: 342

Answers (1)

user128511
user128511

Reputation:

The shader is setting gl_FragColor to red

        gl_FragColor = texture2D(u_texture, vUv);  // this line is effectively ignored
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);   // because this line sets glFragColor

Maybe you meant this?

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

or this?

        gl_FragColor = texture2D(u_texture, vUv);  
        gl_FragColor *= vec4(1.0, 0.0, 0.0, 1.0);  // multiply by red

Upvotes: 2

Related Questions