Three.js, пользовательский шейдер, залить png текстурой и установить прозрачность?

Стоит задача, необходимо изменить цвет текстуры с преобладанием красного. Я пытаюсь делать так, но у меня текстура полностью заливает картинку красным цветом, подскажите, пожалуйста, где ошибка?

//подключение модуля
import * as THREE from "./three/build/three.module.js";
import {OrbitControls} from "./three/examples/jsm/controls/OrbitControls.js";
////import * as TWEEN from "./tween.esm.js";
        
//создание сцены
const scene = new THREE.Scene();
//установка камеры
const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
                
//установка отрисовщика сцены
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(325353, 0.5);
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//renderer.shadowMap.enabled = true;// - нужно включить для того, чтоб появились тени 

var cameraControl = new OrbitControls(camera, renderer.domElement);
cameraControl.target.set(0,0,0);
cameraControl.update();

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
     }

 );

const planeGeometry = new THREE.PlaneGeometry(30, -30, 100, 100);
const plane = new THREE.Mesh(planeGeometry,material);

plane.rotation.x = -0.5 * Math.PI / 2;

scene.add(plane);




 //установка камеры
camera.position.z = 55;


//const clock = new THREE.Clock();
const animate = function () {
requestAnimationFrame( animate );
renderer.render(scene, camera);
};

animate();

Ответы (1 шт):

Автор решения: Range
gl_FragColor = texture2D(u_texture, vUv);
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);

Пиксельный шейдер, первая строка затирается второй. Надо использовать умножение.

→ Ссылка