2015-08-11 15 views
6

Hiện tại có bất kỳ bộ công cụ tiện ích nào chỉ cung cấp các thành phần hiển thị trong WebGL không? Tương tự như ZebraUI project, hiển thị thành phần giao diện người dùng đầy đủ được đặt trong canvas HTML5?Hoàn thành bộ công cụ tiện ích con giao diện người dùng đầy đủ trong WebGL

Screenshot of Zebra UI toolkit rendering in HTML5 canvas

Ý tưởng là để viết thuần JavaScript, và vẫn có thể shaders để render các thành phần.

+3

Tại sao? bạn đã có toàn bộ trình duyệt để tạo giao diện người dùng của mình. Nó hỗ trợ tất cả unicode, tất cả IME cho các ngôn ngữ khác, từ phải sang trái, và nó có thể đọc được bởi các phần mở rộng khuyết tật khác nhau. Nó cũng hoàn toàn có thể tạo kiểu bởi các nhà thiết kế. Lý do nào bạn có thể muốn giao diện người dùng WebGL sẽ không thực hiện điều đó? – gman

+0

Ngoài nhận xét @gmans, html cũng cung cấp cho bạn khả năng hiển thị văn bản có thể mở rộng hoàn hảo, bố cục đơn giản và hiệu ứng gọn gàng hơn bằng cách sử dụng [css 3d transforms] (http://desandro.github.io/3dtransforms/) và [css filters] (https : //developer.mozilla.org/en-US/docs/Web/CSS/filter). Điều duy nhất * hiện đang thiếu * là [css shaders] (http://www.adobe.com/devnet/archive/html5/articles/css-shaders.html), không chắc chắn về trạng thái của chúng. –

+0

Trường hợp có ý nghĩa khi xây dựng hoàn toàn giao diện người dùng trong WebGL: Hiển thị giao diện người dùng tương tác cao ở mức 4k với 60 khung hình/giây trên nền tảng được nhúng (ví dụ: bảng dựa trên ARM chạy trong TV, v.v.); với tùy chọn để hoàn toàn 3D tại một số điểm trong tương lai. Bộ lọc tùy chỉnh CSS (còn gọi là trình che giấu CSS) đã được [xóa khỏi cơ sở mã Webkit] (https://lists.webkit.org/pipermail/webkit-dev/2014-January/026098.html). –

Trả lời

5

Có một dự án nguồn mở mới hỗ trợ hiển thị hoàn chỉnh tất cả các tiện ích con bằng WebGL: DreemGL toolkit. Đây là ảnh chụp màn hình của ứng dụng DreemGL. Tất cả các phần tử giao diện người dùng được hiển thị bằng WebGL (bao gồm phông chữ). Nó vẫn là chất lượng alpha hoặc beta.

DreemGL application rendering the full UI in WebGL

+0

Kiến trúc sư phần mềm của DreemGL ​​đang làm việc trên một nền tảng mã hóa sáng tạo được gọi là [Makepad] (https://github.com/makepad/makepad.github.io) ngay bây giờ. Mã nguồn là trên Github, đây là liên kết đến [Makepad demo] (https://makepad.github.io/makepad.html). Giống như DreemGL, giao diện người dùng đầy đủ (bao gồm cả phần tử văn bản) được hiển thị hoàn toàn trong WebGL. Nó vẫn là phần mềm chất lượng Alpha, nhưng tại một số điểm có thể được sử dụng để tạo ra các mẫu thử nghiệm ở tốc độ 60 khung hình/giây trên các điện thoại thông minh như iPhone 6 hoặc các phiên bản sau, cũng như Galaxy S6 & Note 5 hoặc các phiên bản mới hơn. –

+0

Và đã chỉ ra ở trên nó hoàn toàn thất bại trong việc hỗ trợ bất kỳ ngôn ngữ phi roman. Không có người Nhật, không người Trung Quốc, không người Hàn Quốc, không hỗ trợ IME nào khác. Nó cũng là SLOOOOW. Tôi đã thử cuộn xuống trong trình soạn thảo văn bản và nó cuộn ở khoảng 15-20fps khi trang này ở đây trên Stackoverflow cuộn ở 60 khung hình/giây – gman

Các vấn đề liên quan