WebGL - Làm cách nào để hiển thị kết cấu lớn?

Question

Tôi đang cố thực hiện một số xử lý hình ảnh trong WebGL. Nhưng nếu tôi cố gắng tải các hình ảnh lớn (từ camera - 8 MP) trong kết cấu GLSL trên thiết bị di động, trình duyệt bị treo. Hình ảnh nhỏ hoạt động tốt. Vì vậy, tôi nghĩ rằng nó đang hết bộ nhớ.

Tôi đã googled rất nhiều, nhưng không tìm thấy giải pháp. Tôi nghĩ cách tốt nhất là triển khai hiển thị "dựa trên nền". Tách bức ảnh 8 MP thành các phần nhỏ hơn, làm cho chúng và dán chúng lại với nhau. Nhưng sẽ có vấn đề, như áp dụng hiệu ứng mờ. Bạn sẽ thấy các cạnh của "render phụ". Vì vậy, tôi phải hiển thị các pixel trùng lặp và "làm mờ" chúng lại với nhau. Nghe có vẻ không ổn.

Có giải pháp nào mà tôi không nghĩ đến không? Làm thế nào để làm việc với kết cấu thực sự rất lớn trên các thiết bị di động?

Answer 1

Những gì bạn cần làm để gạch của bạn hoạt động là cung cấp đủ đầu vào ở ranh giới để bao gồm các địa phương không có hiệu ứng xử lý hình ảnh của bạn - ví dụ: bán kính hạt nhân mờ của bạn. Điều đơn giản nhất tôi có thể nghĩ đến là:

Đối với mỗi ô của hình ảnh đầu ra, hãy nạp ô nhập tương ứng và 8 hàng xóm của nó. Sau đó, chạy bộ lọc mờ của bạn bằng cách sử dụng tất cả 9 như đầu vào: nơi bạn thường gọi texture2D, thay vào đó sử dụng chức năng (tùy chỉnh) có tọa độ và tìm kiếm chúng trong một trong 9 kết cấu phù hợp.

Để sử dụng ít hoạ tiết hơn, hãy bù trừ các lát đầu ra so với gạch đầu vào của bạn bằng một nửa chiều dài của chúng ở cả hai chiều; thì bạn chỉ cần sử dụng 4 ô nhập liệu cho mỗi lần tính toán lát gạch, nhưng bạn sẽ có thêm một đường viền trong các ô đầu ra nếu bạn sử dụng đủ các ô để bao trùm tất cả các đầu vào. (Mặt khác, đó có thể là một điều tốt nếu bạn thông minh về cắt tỉa sau đó, ví dụ, nếu tôi áp dụng một bóng đổ vào một hình ảnh đầu vào, tôi muốn như để có bóng lớn hơn đầu ra chứ không phải là bị cắt ngắn ở ranh giới ban đầu.)

Nếu bạn làm điều này đúng, cần có không có hiện vật ở ranh giới ô.

(Tuyên bố từ chối trách nhiệm: Mặc dù giải pháp này có vẻ đơn giản, rõ ràng và chính xác đối với tôi, tôi không phải là chuyên gia về xử lý hình ảnh hoặc bảo tồn tài nguyên GPU. Có thể có lý do tại sao điều này không thực sự hiệu quả ngoài kia.)

Answer 2

Không chắc rằng một hình ảnh 8MP sẽ vượt quá ram sẵn có. Tại RGB (byte) nó sẽ chiếm 24mb ram. Ngay cả ở độ chính xác nửa nổi, nó sẽ là 50mb ram. Các hệ thống ARM sử dụng kiến ​​trúc ram thống nhất nơi GPU và CPU chia sẻ ram. Ví dụ iPhone có 1gb ram có sẵn.

Hỗ trợ kết cấu phải đạt kích thước mong muốn (ví dụ 3264x2248) dường như không có vấn đề gì đối với điện thoại di động cao cấp (4096x4096 được hỗ trợ bởi 81% of mobiles).

Có thể kích thước bản vẽ bản vẽ tối đa nhỏ hơn kích thước họa tiết được hỗ trợ tối đa (bạn có thể query that).

Ngoài ra, bạn có thể chỉ cần chạy vào một lỗi, điều này gây phiền toái. Vì vậy, cách để đối phó với điều đó là bạn chia nhỏ hình ảnh của bạn thành các ô nhỏ hơn và xử lý từng ô một lần.

Có hai cách bạn có thể xử lý biên giới nếu bạn có hạt nhân lọc.

• Bạn có thể vượt qua trong 9 kết cấu và chi nhánh trên tra cứu kết cấu để giải quyết đúng (mà có thể được làm chậm, một số GPU không hỗ trợ phân nhánh và sẽ thực hiện tất cả các codepaths). Biên giới kết cấu sẽ chỉ là 2x2 vì vậy sẽ có ít dấu chân ram. Lưu ý rằng giữa các kết cấu sẽ không có nội suy, do đó, không dựa vào nó, hoặc thay thế của riêng bạn.
• Bạn có thể thêm một nửa đường viền có kích thước hạt nhân xung quanh mỗi lát lấy pixel từ các ô lân cận trong bước tiền xử lý.