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);
Пиксельный шейдер, первая строка затирается второй. Надо использовать умножение.