Nhiều họa tiết trong suốt trên cùng một khuôn mặt lưới trong Three.js

Question

Có thể đặt nhiều họa tiết lên trên cùng một khuôn mặt trên cùng một khuôn mặt trong Three.js sao cho sự pha trộn alpha được thực hiện với GPU tăng tốc trong webGL không?

Kết cấu được (hoặc phải) được áp dụng cho cùng một khuôn mặt sao cho kết cấu phía dưới (kết cấu 1) không có kênh alpha và các họa tiết trên được phân luồng theo cách như kết cấu 2 trong ví dụ dưới đây.

Việc kết hợp này có thể đạt được bằng cách sử dụng HTML5 Canvas làm bước trước, nhưng vì bitmap kết cấu có thể rất lớn, tôi thích bỏ qua các hoạt động trộn Canvas.

Tôi đã thử nghiệm bằng cách tạo bản sao lưới và áp dụng một kết cấu trên lưới và làm cho lưới khác trong suốt và di chuyển nó một chút, thành công gần như tốt, nhưng có một số nhấp nháy và vì đối tượng không thể chính xác ở cùng một vị trí , có một số phòng giữa các kết cấu không phải là hiệu ứng đúng. Họ có vẻ như họ đã được pha trộn trong ví dụ. Photoshop (như hình dưới đây).

Answer 1

Sử dụng ShaderMaterial và đặt cả kết cấu như đồng phục, và sau đó trộn chúng trong shader.

Tôi đã tạo ví dụ này: http://abstract-algorithm.com/three_sh/ và điều đó thực sự là đủ.

Vì vậy, bạn thực hiện 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 

}); 

Và tạo lưới với chất liệu rằng:

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

Bạn có thể đặt vertex đơn giản nhất:

varying vec2 vUv; 

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

Và fragment shader mà thực sự sẽ làm sự pha trộ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); 
} 

Nếu bạn cần để pha trộn nhiều hơn kết cấu, bạn sử dụng cùng một phương trình cho trộn chỉ nhiều lần.

Vì vậy, đây là kết quả: