Cách được khuyến nghị để tạo một HUD 2d trong webgl

Question

Đối với trò chơi trong webgl nơi hiệu suất fps là quan trọng, cách hiệu quả nhất để tạo HUD 2D là gì? Tôi có thể nghĩ đến 3 lựa chọn, nhưng nó không rõ ràng với tôi chi phí hiệu suất của mỗi cái là gì và cái nào sẽ được khuyến nghị là hiệu quả nhất.

Vì vậy, chi phí hoạt động tương đối giữa 3 lựa chọn sau đây là những gì:

A: làm cho hud với đa giác trong không gian 3D sử dụng một camera chính tả và pha trộn trong cảnh gốc. Ưu điểm là hiệu ứng opengl tiên tiến là có thể, với chi phí sắp xếp thủ công các container.

B: xây dựng HUD bằng html/css và để trình duyệt tổng hợp. Trường hợp Inthis là có một hit lớn perf với thành phần trình duyệt?

C: vẽ trên canvas 2D trên canvas 3D và cho phép trình duyệt tổng hợp. Điều này thậm chí có thể và tôi sẽ có vấn đề với sự kiện tuyên truyền giữa canvases chẳng hạn như sự kiện chuột và tập trung.

Rất cám ơn!

Answer 1

Lựa chọn A có lẽ kỹ thuật nhanh nhất, nhưng sẽ mang lại cho ta một loạt toàn bộ các vấn đề khác mà bạn sẽ cần phải xử lý bằng tay. Nếu bạn đang cập nhật văn bản (sức khỏe, đạn, vv), bạn sẽ phải đưa ra một thói quen hiển thị văn bản, và đó là không tầm thường để nói rằng ít nhất. Nếu bạn tương tác với giao diện người dùng thông qua chuột hoặc bàn phím, bạn sẽ cần phải tự mình xử lý và cơ hội bạn làm điều đó đủ mạnh và hiệu quả để mang lại trải nghiệm tốt hơn so với tiện ích con của trình duyệt gốc. Vấn đề là, có rất nhiều công việc cho khả năng nhanh hơn một chút.

Tùy chọn B là, theo ý kiến ​​của tôi, con đường để đi. Trình duyệt khá hợp lý và mặc dù sẽ có một hit hoàn hảo vì nó trừ khi bạn đang thực hiện một HUD chi tiết thực sự điên rồ, tôi đoán rằng lượt truy cập sẽ không đáng kể so với các phần khác của ứng dụng của bạn (như logic JS). Thêm vào đó là một lộ trình "kỳ diệu" sẽ tốt hơn khi thời gian trôi qua và các trình duyệt trở nên hiệu quả hơn với những gì họ làm. IMO nhược điểm lớn nhất ở đây là bạn có thể gặp phải một số lỗi hiển thị nếu bạn đang sử dụng một số hiệu ứng CSS mới nhất và lớn nhất để tạo kiểu cho HUD theo cách bạn muốn, nhưng một lần nữa sẽ biến mất khi thời gian trôi qua.

Tùy chọn C là, theo hiểu biết của tôi, không thể trong một canvas. Bạn có thể có một lớp vải 2D riêng biệt trên lớp 3D của bạn và vẽ HUD của bạn cho nó, nhưng tại thời điểm đó bạn đang kế thừa tất cả các vấn đề của A và B mà không có lợi ích nào. Tôi có thể thấy không có lý do chính đáng để giới thiệu nó.

Tôi nghĩ một trong những lợi thế lớn mà WebGL có trên nhiều nền tảng 3D gốc là nó có quyền truy cập không đáng kể vào một trong những khung giao diện người dùng được sử dụng rộng rãi nhất và linh hoạt nhất trên hành tinh (HTML). Bỏ qua lợi thế đó sẽ là một nỗ lực khổng lồ với rất ít lợi ích hữu hình. Sử dụng các công cụ có sẵn cho bạn, và không quan tâm bản thân quá nhiều so với mất mili giây vì nó. Tôi hứa với bạn rằng có nhiều vấn đề lớn hơn mà bạn sẽ phải đối mặt trong khi làm việc trên trò chơi của bạn và thời gian và công sức của bạn sẽ tốt hơn nhiều so với cố gắng để phát minh lại bánh xe đặc biệt này.