Hành vi kết cấu trong suốt trong WebGL

Question

Môi trường: WebGL, Chrome. Tôi có hành vi sau đây khi sử dụng png trong suốt làm họa tiết cho các kiểu máy:

1. Hình A - cây ẩn tòa nhà phía sau nó và tôi thấy kết cấu hộp thế giới. Nó cũng giúp giấu đi riêng của mình (chi nhánh lại không nhìn thấy được)
2. Cùng lúc đó - Hình ảnh B - hoạt động đúng, cửa sổ trong suốt và tôi thấy những gì đằng sau

A: B:

Cả hai ảnh chụp màn hình được thực hiện trên cùng một cảnh cùng một lúc từ các vị trí camera khác nhau. Kết cấu được tạo ra bởi cùng một thuật toán.

Tôi không thể hiểu sự khác biệt giữa tính minh bạch của cửa sổ và chi nhánh là gì. Câu hỏi chính của tôi là - làm cách nào để sửa các nhánh cây để không che giấu các vật thể đằng sau chúng? Mã Shader là:

gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a); 

Tôi chơi với bật/tắt kết hợp và depth_test, đôi khi nhận được kết quả mong muốn, nhưng không chắc chắn đó là cách thích hợp để thực hiện.

Answer 1

Bạn đang gặp vấn đề về bộ đệm độ sâu, nó không liên quan gì đến chế độ hòa trộn hoặc đổ bóng của bạn.

Điều đang xảy ra là thứ tự mà bạn hiển thị hình học trong suốt đang ảnh hưởng đến khả năng hiển thị của bạn phía sau nó. Điều này là do bộ đệm độ sâu không có khái niệm minh bạch hoặc không minh bạch. Kết quả là, mặc dù chúng không trực quan đóng góp cho cảnh, những pixel trong suốt tự ghi chúng vào bộ đệm độ sâu và sau đó bất kỳ pixel nào bạn vẽ phía sau chúng sẽ bị loại bỏ vì chúng "không hiển thị". Tuy nhiên, nếu bạn vẽ hình học phía sau đối tượng trong suốt trước tiên, nó sẽ hiển thị chính xác vì nó được viết vào khung trước khi độ sâu trong suốt được đặt vào vị trí để loại bỏ nó.

Đây là điều mà ngay cả những công cụ trò chơi thương mại lớn vẫn phải vật lộn với một mức độ nào đó, vì vậy đừng cảm thấy xấu về nó gây ra một số nhầm lẫn. :)

Không có "giải pháp hoàn hảo" cho vấn đề này, nhưng những gì nó thực sự sôi xuống đang cố gắng để cấu trúc cảnh của bạn như vậy:

1. Render bất kỳ hình học đục sắp xếp theo trạng thái (shader/texture/vv)
2. Hiển thị mọi hình trong suốt bên cạnh. Nếu có thể sắp xếp chúng theo chiều sâu, để bạn rút ra xa nhất từ ​​camera trước.

Chỉ cần gắn cờ các bit hình trong suốt và hiển thị chúng sau khi mọi thứ khác bạn sẽ giải quyết 90% vấn đề này, nhưng vấn đề có thể vẫn còn cho các đối tượng trong suốt trùng nhau. Đó có thể không phải là một vấn đề cho bạn, tùy thuộc vào cảnh của bạn, nhưng nếu nó vẫn gây ra hiện vật, bạn sẽ cần phải sắp xếp các đối tượng trong suốt theo chiều sâu trước khi vẽ.

Answer 2

Loại bỏ các đoạn có alpha thấp hơn, ví dụ 0,5 có thể giúp (tất nhiên, có tác dụng phụ).

nếu (gl_FragColor.a < 0.5) loại bỏ;

AlphaFunctions in WebGL?