Có lý do gì để sử dụng WebGL thay vì 2D Canvas cho trò chơi / ứng dụng 2D không?

Có lý do nào, ngoại trừ hiệu suất, để sử dụng WebGL thay vì 2D-Canvas cho trò chơi / ứng dụng 2D không?

Nói cách khác, WebGL cung cấp những chức năng 2D nào mà không thể dễ dàng đạt được với 2D-Canvas?

Nhìn vào câu hỏi này từ một khía cạnh khác:
làm thế nào để một nhà phát triển chọn công nghệ này hơn công nghệ khác?

• tích hợp tốt hơn trong hệ thống đã được xây dựng của họ
• dễ sử dụng hơn
• nhanh hơn
• có nhiều khả năng hơn hoặc phù hợp hơn với nhu cầu của họ
• Giá cả
• độc lập hơn

Vì vậy, tôi sẽ thảo luận về sự khác biệt giữa API canvas và webGL liên quan đến những phẩm chất này.

Cả canvas và webGL đều là API JavaScript. Chúng khá giống nhau về tích hợp (ràng buộc). Cả hai đều được hỗ trợ bởi một số thư viện có thể tăng tốc độ viết mã của bạn. Các thư viện khác nhau cung cấp cho bạn những cách khác nhau để tổ chức mã của bạn, vì vậy lựa chọn thư viện quyết định cách các API vẽ của bạn được cấu trúc, nhưng nó vẫn khá giống nhau (cách phần còn lại của mã liên kết với nó). Nếu bạn sử dụng thư viện, việc viết mã dễ dàng phụ thuộc vào chính thư viện.

Nếu bạn viết mã từ 0, canvas API sẽ dễ học và hiểu hơn nhiều. Nó yêu cầu kiến ​​thức toán học tối thiểu và sự phát triển nhanh chóng và đơn giản.

Làm việc với API WebGL đòi hỏi kỹ năng toán học vững vàng và hiểu biết đầy đủ về quy trình kết xuất. Những người có những kỹ năng này khó tìm hơn, sản xuất chậm hơn (do kích thước và độ phức tạp của cơ sở mã như vậy), và do đó chi phí cao hơn.

WebGL nhanh hơn và có nhiều khả năng hơn. Không nghi ngờ gì về điều đó. Đó là một API 3D gốc cung cấp cho bạn quyền truy cập đầy đủ vào đường dẫn kết xuất, mã và hiệu ứng được thực thi nhanh hơn và dễ 'tinh chỉnh' hơn. Với webGL thực sự không có giới hạn.

Cả canvas và webGL đều là những tiện ích html5. Thông thường các thiết bị hỗ trợ cái này sẽ hỗ trợ cái kia.

Vì vậy, tóm lại:

• hợp nhất mã API bản vẽ và phần còn lại (tích hợp): tương tự
• dễ sử dụng:
  • (với thư viện) canvas = webGL
  • (từ đầu) webGL << canvas
• speed: webGL> canvas
• khả năng: webGL> canvas
• chi phí: webGL đắt hơn nhiều
• nền tảng: rất giống nhau

Hi vọng điêu nay co ich.

PS Mở để thảo luận.

Ưu điểm lớn nhất là khả năng lập trình của đường ống và hiệu suất. Ví dụ: giả sử bạn đang vẽ 2 hộp một bên trên hộp kia và một hộp bị ẩn, một số triển khai GL có phạm vi loại bỏ hộp ẩn.

Về phần so sánh, Vì không có cách tạo bảng nhanh ở đây nên tôi chỉ tải lên hình ảnh của bảng so sánh bên dưới. Đã thêm Three.js chỉ để hoàn thiện.

Nói từ kinh nghiệm trên các ứng dụng của riêng tôi , trình tạo bóng đồ họa là lý do duy nhất và tôi yêu cầu hỗ trợ cho WebGL. Tính dễ sử dụng có ít ảnh hưởng đối với tôi vì cả hai khung đều có thể được trừu tượng hóa bằng ba.js. Giả sử tôi không cần trình tạo bóng, tôi cho phép sử dụng một trong hai khung để tối đa hóa hỗ trợ trình duyệt / máy.

WebGL cung cấp khả năng 2D nào mà canvas 2D thì không? IMHO lớn nhất là trình tạo bóng phân mảnh có thể lập trình được trên phần cứng đồ họa. Ví dụ: trong WebGL, người ta có thể triển khai Trò chơi cuộc sống của Conway trong bộ đổ bóng trên phần cứng 3D của bạn:

http://glslsandbox.com/e#207.3

Loại màn hình 2D này sẽ chỉ chạy trên CPU, không phải GPU, với canvas 2D. Tất cả các tính toán sẽ được triển khai bằng JavaScript và sẽ không song song như GPU ngay cả khi có sự trợ giúp của nhân viên web. Tất nhiên, đây chỉ là một ví dụ, tất cả các loại hiệu ứng 2D thú vị đều có thể được thực hiện với trình tạo bóng.

Chà, hiệu suất sẽ là một trong những lý do lớn nhất bởi vì khi bạn viết mã một trò chơi, nó phải nhanh. Nhưng có một số lý do khác mà bạn có thể muốn chọn WebGL trên canvas. Nó cung cấp khả năng mã hóa các trình tạo bóng, ánh sáng và thu phóng, điều này rất quan trọng nếu bạn đang làm một ứng dụng trò chơi thương mại. Ngoài ra canvas bị lag sau 50 sprites hoặc lâu hơn.

Bạn không thể làm gì với Canvas mà bạn không thể làm với webGL: canvas cho phép nghiền nát các byte với get / putImageData và bạn có thể vẽ các đường thẳng, vòng tròn, ... theo lập trình với webGL.
Nhưng nếu bạn đang tìm cách thực hiện một số bản vẽ, và cả một số hiệu ứng ở tốc độ 60 khung hình / giây, thì khoảng cách hiệu suất cao đến mức không thể thực hiện được với canvas, khi nó sẽ chạy ổn trong webGL. Hiệu suất là một tính năng gốc.

Tuy nhiên, webGL khá phức tạp để lập trình: xem canvas có đủ tốt cho bạn hay không hoặc tìm kiếm một thư viện giúp giảm bớt nỗi đau ...
Hạn chế khác: nó không hoạt động trên IE (nhưng thì sao?) Và trên một số điện thoại di động.
Xem tại đây để tương thích: http://caniuse.com/webgl

Khi bạn đặc biệt muốn một số thứ 2d cổ điển không hoạt động tốt với canvas:

• biến đổi màu sắc (như nhấp nháy một sprite)
• lặp lại bitmap điền
• lát gạch bản đồ trong vòng quay (dưới canvas, một số triển khai sẽ tạo ra các đường nối)
• phân lớp sâu (rất phụ thuộc vào việc triển khai)
• sự pha trộn nhân hoặc cộng tính

... nhưng tất nhiên bạn có quyền truy cập pixel, vì vậy bạn thực sự có thể làm bất cứ điều gì, kể cả những điều trên, theo cách thủ công. Nhưng điều đó có thể thực sự, rất chậm. Về lý thuyết, bạn có thể viết mã Mesa openGl để kết xuất canvas.

Một lý do lớn khác để sử dụng webGL là kết quả là rất dễ dàng để chuyển sang bất kỳ nơi nào khác. Điều này cũng làm cho kỹ năng có giá trị hơn.

Lý do để sử dụng canvas là nó vẫn được hỗ trợ tốt hơn và nếu bạn học cách làm từng pixel thì đó cũng là một bài học rất quý giá.

Vì WebGL là công nghệ đặc biệt mới và HTML5 canvas được thiết lập tốt hơn, những gì bạn muốn sử dụng phụ thuộc vào người dùng của bạn. Nếu bạn nghĩ rằng người dùng của mình sẽ sử dụng thiết bị di động thì tôi sẽ đề xuất canvas HTML5 nhưng nếu bạn muốn kết xuất 2D tốt hơn, tôi sẽ sử dụng WebGL. Vì vậy, những gì bạn có thể làm là nếu việc sử dụng trên thiết bị di động hiển thị với HTML5 khác nếu chúng ở trên nền tảng hỗ trợ WebGL.

Ví dụ:

 if (window.WebGLRenderingContext) {
     webGLcanvasApp()
         } else if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
     html5CanvasAppFMobile()
    } else {
    html5CanvasApp()
    }

Nguồn:
Cách thích hợp để phát hiện hỗ trợ WebGL?
Cách tốt nhất để phát hiện thiết bị di động trong jQuery là gì?

WebGL không sử dụng được nếu không có GPU.
Sự phụ thuộc vào phần cứng này không phải là một vấn đề lớn vì hầu hết các hệ thống đều có GPU, nhưng nếu kiến ​​trúc GPU hoặc CPU từng phát triển, việc bảo tồn nội dung webgl bằng mô phỏng có thể là một thách thức. Chạy nó trên các máy tính cũ (ảo hóa) là một vấn đề.

Nhưng "Canvas vs WebGL" không nhất thiết phải là một lựa chọn nhị phân. Tôi thực sự thích sử dụng webgl cho các hiệu ứng, nhưng thực hiện phần còn lại trong canvas. Khi tôi chạy nó trong máy ảo, nó vẫn hoạt động tốt và nhanh chóng, chỉ không có các hiệu ứng.