我正在尝试将两个纹理融合在一起而没有成功。我只是得到黑色的纹理。
我不确定这是着色器代码还是我使用ThreeJS实现它的方式。
我尝试了两种不同的着色器方法,但是我都对它们使用了黑色纹理:
Test1:
var pitchMaterialParams = {
uniforms: THREE.UniformsUtils.merge([{
texture1: { type: "t", value: texture1 },
texture2: { type: "t", value: texture2 },
}]),
vertexShader:
`
precision highp float;
precision highp int;
//uniform mat4 modelViewMatrix;
//uniform mat4 projectionMatrix;
//attribute vec3 position;
//attribute vec2 uv;
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`,
fragmentShader:
`
precision mediump float;
uniform sampler2D texture1;
uniform sampler2D texture2;
varying vec2 vUv;
void main() {
vec4 t1 = texture2D( texture1, vUv );
vec4 t2 = texture2D( texture2, vUv );
//gl_FragColor = mix( t1, t2, t2.a );
gl_FragColor = vec4(mix(t1.rgb, t2.rgb, t2.a), 1.0);
}
`};
https://jsfiddle.net/Eketol/doLgv9cw/
测试2:
var pitchMaterialParams = {
uniforms: THREE.UniformsUtils.merge([{
fade: { type: "f", value: 0 },
u_texture1: { type: "t", value: texture1 },
u_texture2: { type: "t", value: texture2 }
}]),
vertexShader:
`
precision highp float;
precision highp int;
varying vec2 v_uv;
varying float v_textureIndex;
void main() {
v_textureIndex = step(0.5, uv.x) + step(0.5, uv.y) * 2.0;
v_uv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader:
`
precision mediump float;
varying vec2 v_uv;
varying float v_textureIndex;
uniform sampler2D u_texture1;
uniform sampler2D u_texture2;
void main() {
gl_FragColor = mix( texture2D(u_texture1, v_uv), texture2D(u_texture2, v_uv), step(0.5, v_textureIndex) );
}
`};
https://jsfiddle.net/Eketol/qm435wL7/
[基本上,我只想使用叠加/乘法方法将两个图像融合在一起,其中最上面的是白色并带有一些透明区域。
任何帮助将不胜感激。
您遇到了以下问题:
https://github.com/mrdoob/three.js/issues/8016
合并制服后只需分配纹理。
https://jsfiddle.net/r4nmf2wt/1/
three.js R112
此部分:
uniforms: THREE.UniformsUtils.merge([{
texture1: { type: "t", value: texture1 },
texture2: { type: "t", value: texture2 },
}])
更好地简化它:
uniforms: {
texture1: { value: texture1 },
texture2: { value: texture2 }
}
着色器可能是这样的:
vertexShader:
`
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader:
`
varying vec2 vUv;
uniform sampler2D u_texture1;
uniform sampler2D u_texture2;
void main() {
vec4 col1 = texture2D(u_texture1, vUv);
vec4 col2 = texture2D(u_texture2, vUv);
col2 = col2.a > 0.5 ? col2 : vec4(0, 0, 0, 1);
gl_FragColor = mix( col1, col2, 0.25 );
}
`
(代表问题作者发布的解决方案,将其移至答案空间)。
感谢@ Mugen87和@ prisoner849:我有一个解决方案:
var camera, scene, renderer, object;
var texture1URL = "https://cdn.rawgit.com/mrdoob/three.js/45418089bd5633e856384a8c0beefced87143334/examples/textures/terrain/grasslight-big.jpg";
var texture2URL = "https://cdn.rawgit.com/mrdoob/three.js/45418089bd5633e856384a8c0beefced87143334/examples/textures/patterns/circuit_pattern.png";
var status = document.getElementById("status");
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xcccccc );
var ambientLight = new THREE.AmbientLight( 0xffffff, 1 );
scene.add( ambientLight );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 500 );
camera.enableDamping = false;
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = -15;
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.gammaFactor = 2.14;
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableDamping = true;
//var gridHelper = new THREE.GridHelper(10, 20, 0x333333, 0x333333);
//scene.add( gridHelper );
}
// -------------------- Object -------------------- //
function initObject() {
var texture1 = new THREE.TextureLoader().load( texture1URL );
var texture2 = new THREE.TextureLoader().load( texture2URL );
var pitchMaterialParams = {
uniforms: THREE.UniformsUtils.merge([{
texture1: null,
texture2: null,
}]),
vertexShader:
`
precision highp float;
precision highp int;
//uniform mat4 modelViewMatrix;
//uniform mat4 projectionMatrix;
//attribute vec3 position;
//attribute vec2 uv;
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader:
`
precision mediump float;
uniform sampler2D texture1;
uniform sampler2D texture2;
varying vec2 vUv;
void main() {
//vec4 t1 = texture2D( texture1, vUv );
//vec4 t2 = texture2D( texture2, vUv );
//gl_FragColor = mix( t1, t2, t2.a );
vec4 col1 = texture2D(texture1, vUv);
vec4 col2 = texture2D(texture2, vUv);
col2 = col2.a > 0.5 ? col2 : vec4(0, 0, 0, 1);
gl_FragColor = mix( col1, col2, 0.25 );
}
`
};
// Dummy box for reference.
//scene.add( new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshStandardMaterial({color:0xff0000})) );
var material = new THREE.ShaderMaterial(pitchMaterialParams);
material.uniforms.texture1.value = texture1;
material.uniforms.texture2.value = texture2;
material.side = THREE.DoubleSide;
var geometry = new THREE.PlaneGeometry(10, 10);
var object = new THREE.Mesh(geometry, material);
scene.add( object );
}
// -------------------- Events -------------------- //
function initEvents() {
window.addEventListener("resize", onWindowResize);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
init();
initObject();
initEvents();
animate();