2011-10-11 30 views
9

Khi kết xuất họa tiết có kênh alpha, đường viền màu trắng xuất hiện xung quanh phần không trong suốt (đường viền có vẻ là pixel có alpha> 0 và < 1):webgl: viền màu trắng khi sử dụng độ trong suốt (alpha)

enter image description here

Các kết cấu ban đầu được tạo ra trong minh họa và xuất ra dưới dạng một png. ở đây là:

enter image description here

(tốt, dường như stackoverflow thay đổi hình ảnh, điều chỉnh điểm ảnh mà không phải là hoàn toàn mờ đục/minh bạch, vì vậy đây là một link)

nó có lẽ là sự pha trộn, mặc dù tôi không biết những gì là sai với thiết lập:

gl.enable(gl.BLEND); 
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); 

[cập nhật]

Đây là một phiên bản trả lại, nơi tôi đã thêm một alpha-gradient cho phần bên trái của kết cấu (vì vậy nó là nhận được từ 0 opacity tới 1 cho đến nửa)

enter image description here

kết cấu này là chỉ có kết cấu được hiển thị ở vị trí này. nó có vẻ là trắng nhất xung quanh a = 0,5. thực sự kỳ lạ. nền chỉ là một màu xóa:

gl.clearColor(0.603, 0.76, 0.804, 1.0); 
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 
// render objects here 

độ sâu chức năng trông giống như:

gl.enable(gl.DEPTH_TEST); 
gl.depthFunc(gl.LEQUAL); 

bất kỳ ý tưởng? cảm ơn rất nhiều.

[Cập nhật 2]

Trả lời câu hỏi của riêng tôi: hiệu ứng xảy ra khi background-color của vải hoặc cơ thể của html-page là màu trắng. Tôi không có một lời giải thích, mặc dù.

+0

Hãy thử nó với một phần lớn có 0 Shahbaz

+0

có. tôi đã cập nhật bài đăng. có một vùng trắng. lượng màu trắng phụ thuộc vào alpha. có vẻ là trắng nhất xung quanh 0,5 – CodeSalad

+0

Điều kỳ lạ là nó sáng hơn cả kết cấu và hậu cảnh! Bạn đã bật ánh sáng chưa? – Shahbaz

Trả lời

-1

Trả lời câu hỏi của riêng tôi: hiệu ứng xảy ra khi background-color của vải hoặc cơ thể của html-page là màu trắng. Tôi không có một lời giải thích, mặc dù.

(bổ sung này từ Cập nhật 2 của bài ban đầu của tôi, chỉ để chắc câu trả lời dễ dàng hơn để tìm thấy)

+1

Giải thích là bộ đệm khung mục tiêu có kênh alpha, vì vậy nó sẽ được pha trộn với nền của trang web. Một giải pháp khác sẽ đặt 'alpha: false' khi yêu cầu ngữ cảnh webgl hoặc sử dụng hàm pha trộn thích hợp hơn. – urraka

2

Lệnh rút thăm của bạn là gì? Điều này trông giống như một vấn đề đệm sâu với tôi - bạn bắt đầu với một nền màu trắng, vẽ những điều với biên giới để nó được tổng hợp trên màu trắng, sau đó rút ra những điều đằng sau những điều với biên giới. Những khu vực mà biên giới được pha trộn với nền trắng ban đầu sẽ lưu trữ một giá trị trong bộ đệm sâu bằng độ sâu của mặt phẳng của chúng, vì vậy khi đối tượng phía sau được rút ra, các điểm ảnh của nó sẽ bị loại bỏ trong khu vực đó.

Quy tắc chung là vẽ các đối tượng trong suốt sau các đối tượng mờ, thường từ sau ra trước. Nếu bạn đang sử dụng pha trộn phụ gia thì nó thường đủ tốt để vô hiệu hóa bộ đệm độ sâu sau khi vẽ mờ và vẽ chúng theo thứ tự bất kỳ.

+0

trong ảnh chụp màn hình đã cho, đây là kết cấu duy nhất được hiển thị phía trên nền đã xóa (trong một số màu xanh dương). vì vậy đây không phải là vấn đề chính xác, mặc dù đó là một gợi ý rất tốt! tôi đã cập nhật câu hỏi của mình với ảnh chụp màn hình mới. – CodeSalad

2

Đây là vấn đề liên quan đến nội suy tuyến tính kết cấu. Trên biên giới, một số pixel nội suy sẽ mất một nửa màu trắng nửa và 0,5 alpha. Bạn nên sửa đổi kết cấu của mình để mở rộng đường viền bằng một pixel màu xanh lục hơn, ngay cả khi nó hoàn toàn trong suốt.

1

Khi đặt FragColor trong trình đổ bóng, hãy thử nhân RGB hình ảnh với hình ảnh alpha.

+0

Nếu alpha đã là một giá trị thấp, nên màu sắc đã gần như vô hình, thay vì một đường viền màu trắng? –