javascript - Múltiples texturas transparentes en la misma cara de malla en Three.js

webgl textures

Question

¿Es posible colocar varias texturas una encima de otra en la misma cara en Three.js para que la mezcla alfa se realice con GPU acelerada en webGL?

Las texturas se aplican (o deberían aplicarse) a la misma cara de modo que la textura del fondo (textura 1) no tenga canal alfa y las texturas anteriores se canalicen alfa de manera similar a la textura 2 en el ejemplo de la imagen a continuación.

Esta combinación se puede lograr utilizando HTML5 Canvas como paso previo, pero como los mapas de bits de textura pueden ser enormes, prefiero omitir las operaciones de fusión de Canvas.

Probé creando una copia de la malla y aplicando una textura por malla, hice otra malla transparente y la moví un poco, lo cual tuvo éxito, pero hay algunos parpadeos y, como los objetos no pueden estar exactamente en la misma posición, hay algunos Sala entre texturas que no es el efecto correcto. Deben parecer como si estuvieran mezclados en, por ejemplo. Photoshop (como es la imagen de abajo).

Answer 1

Use ShaderMaterial y configure ambas texturas como uniformes, y luego combínelas dentro del sombreado.

Hice este ejemplo: http://abstract-algorithm.com/three_sh/ y eso debería ser suficiente.

Entonces, haces ShaderMaterial:

var vertShader = document.getElementById(''vertex_shh'').innerHTML;
var fragShader = document.getElementById(''fragment_shh'').innerHTML;

var attributes = {}; // custom attributes

var uniforms = {    // custom uniforms (your textures)

  tOne: { type: "t", value: THREE.ImageUtils.loadTexture( "cover.png" ) },
  tSec: { type: "t", value: THREE.ImageUtils.loadTexture( "grass.jpg" ) }

};

var material_shh = new THREE.ShaderMaterial({

  uniforms: uniforms,
  attributes: attributes,
  vertexShader: vertShader,
  fragmentShader: fragShader

});

Y crea malla con ese material:

var me = new THREE.Mesh( new THREE.CubeGeometry(80,80,80), material_shh );

Puedes poner el sombreador de vértices más simple:

varying vec2 vUv;

void main()
{
    vUv = uv;
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_Position = projectionMatrix * mvPosition;
}

Y fragmento de sombreado que realmente hará la fusión:

#ifdef GL_ES
precision highp float;
#endif

uniform sampler2D tOne;
uniform sampler2D tSec;

varying vec2 vUv;

void main(void)
{
    vec3 c;
    vec4 Ca = texture2D(tOne, vUv);
    vec4 Cb = texture2D(tSec, vUv);
    c = Ca.rgb * Ca.a + Cb.rgb * Cb.a * (1.0 - Ca.a);  // blending equation
    gl_FragColor= vec4(c, 1.0);
}

Si necesita combinar aún más texturas, use la misma ecuación para combinar solo varias veces.

Así que aquí está el resultado: