Hình ảnh và mặt nạ trong OpenGL ES 2.0

Question

Tôi đang học OpenGL ES 2.0 và tôi muốn tạo một Ứng dụng để hiểu rõ hơn cách hoạt động của nó. Ứng dụng có một bộ lọc mà người dùng có thể áp dụng trên hình ảnh (tôi biết, không có gì mới: P).

Một trong những bộ lọc này có hai hình ảnh và một mặt nạ và nó pha trộn hai hình ảnh cho thấy chúng thông qua các mặt nạ (ở đây một hình ảnh để giải thích rõ hơn những gì tôi muốn để có được)

Tại thời điểm này Tôi thực sự bối rối và tôi không biết bắt đầu từ đâu để tạo hiệu ứng này. Tôi không thể hiểu được thời tiết tôi phải làm việc với nhiều họa tiết và nhiều FrameBuffers hoặc tôi chỉ có thể làm việc với một trình đổ bóng đơn.

Bạn có gợi ý nào để giúp tôi thực hiện dự án này không?

EDIT --------

tôi đã tìm thấy giải pháp này, nhưng khi tôi sử dụng như dòng mặt nạ thay vì vòng tròn kết quả là thực sự "grungy", đặc biệt là nếu dòng được luân chuyển.

precision highp float; 

varying vec4 FragColor; 
varying highp vec2 TexCoordOut; 

uniform sampler2D textureA; 
uniform sampler2D textureB; 
uniform sampler2D mask; 

void main(void){ 
    vec4 mask_color = texture2D(mask, TexCoordOut); 

    if (mask_color.a > 0.0){ 
     gl_FragColor = texture2D(textureA, TexCoordOut); 
    }else { 
     gl_FragColor = texture2D(textureB, TexCoordOut); 
    } 
} 

Có thể sử dụng bộ đệm hoặc pha trộn của Stencil tốt hơn?

Answer 1

Bạn có thể áp dụng mặt nạ trong một dòng mà không sử dụng tốn kém if:

gl_FragColor = step(0.5, vMask.r) * vColor_1 + (1.0 - step(0.5, vMask.r)) * vColor_2; 

Hoặc, tốt hơn chỉ suy giữa hai màu sắc:

gl_FragColor = mix(vColor_1, vColor_2, vMask.r); 

Trong trường hợp này các mặt nạ có thể được cân bằng (tức là với Gaussian blur) để tạo ra ít răng cưa hơn. Điều này sẽ mang lại kết quả rất tốt so với một giá trị duy nhất.

Answer 2

Không cần nhiều trình đổ bóng hoặc bộ đệm khung, chỉ cần nhiều đơn vị kết cấu. Đơn giản chỉ cần sử dụng 3 đơn vị kết cấu mà tất cả được lập chỉ mục bởi cùng tọa độ kết cấu và sử dụng kết cấu Mặt nạ để chọn giữa hai họa tiết khác. Các shader fragment sẽ trông như thế này:

uniform sampler2D uTextureUnit_1; 
uniform sampler2D uTextureUnit_2; 
uniform sampler2D uTextureMask; 
varying vec2 vTextureCoordinates; 

void main() 
{ 
    vec4 vColor_1 = texture2D(uTextureUnit_1, vTextureCoordinates); 
    vec4 vColor_2 = texture2D(uTextureUnit_2, vTextureCoordinates); 
    vec4 vMask = texture2D(uTextureMask, vTextureCoordinates); 

    if (vMask.r > 0.5) 
     gl_FragColor = vColor_1; 
    else 
     gl_FragColor = vColor_2; 
} 

Bạn có thể thấy rằng việc sử dụng một đơn vị kết cấu thứ ba chỉ để làm một thử nghiệm nhị phân trên kênh Red không phải là rất hiệu quả, vì vậy nó sẽ là tốt hơn để mã hóa các mặt nạ vào kênh alpha của Textures 1 hoặc 2, nhưng điều này sẽ giúp bạn bắt đầu.