canvas so với webGL so với CSS 3d -> để chọn?

Question

Đối với ứng dụng web cơ bản 3d, tức là một vài hình khối, xoay vòng và dịch trong không gian 3d - tốt hơn nên chọn là gì?

CSS 3d có vẻ dễ dàng nhất, nhưng không được hỗ trợ trên IE9 hoặc trên lộ trình cho IE10 và cung cấp ít quyền kiểm soát hơn các tùy chọn khác. Canvas & WebGL có vẻ phức tạp hơn, nhưng tôi không biết liệu chúng có phải là bằng chứng trong tương lai hay không.

Tại sao có rất nhiều kỹ thuật khác nhau cho 3D? cái nào tốt hơn? đó là bằng chứng trong tương lai?

Answer 1

Lý do có rất nhiều tùy chọn khác nhau cho 3D là vì toàn bộ mọi thứ vẫn ở trạng thái thông lượng - 3D trong trình duyệt không phải là tiêu chuẩn đã hoàn thành và các tùy chọn bạn liệt kê, hoạt động trong tất cả các trình duyệt hiện có là Canvas.

Đặc biệt, IE không có khả năng mang đến cho bạn nhiều niềm vui - như bạn nói, 3D thậm chí còn không được hỗ trợ cho IE10 tại thời điểm này. Có nói rằng, SVG đã được thêm vào IE9 khá muộn trong ngày, vì vậy luôn có hy vọng. Nhưng lý do không chắc là Microsoft đã đưa ra một điểm chỉ về các tính năng hỗ trợ đã được chính thức phê chuẩn làm tiêu chuẩn.

Trong số các công nghệ bạn đã liệt kê, Canvas là cho đến nay được hỗ trợ tốt nhất, nhưng Canvas không phải là công nghệ 3D; đó là một khung hình 2D, và nếu bạn muốn có các hiệu ứng 3D trong đó, bạn cần tự viết chúng, và chúng sẽ không được tăng tốc phần cứng.

Tôi đoán câu trả lời thực sự cho câu hỏi của bạn phụ thuộc vào mức độ quan trọng của đối tượng địa lý đối với trang web của bạn. Nếu đó chỉ là kẹo mắt, người dùng trình duyệt không được hỗ trợ có thể sống mà không có, thì bằng mọi cách, hãy làm điều đó với một số CSS 3D. Nhưng nếu bạn cần phải làm cho nó phù hợp trong tất cả các trình duyệt hiện tại, sau đó làm điều đó với Canvas.

Tôi có xu hướng khuyên bạn không nên sử dụng WebGL cho trường hợp của bạn, vì có vẻ như nó sẽ quá mức cần thiết cho những gì bạn đang làm.

CSS 3D có lẽ là câu trả lời đúng, nhưng sử dụng Canvas ngay bây giờ cho đến khi phần còn lại của trình duyệt thêm hỗ trợ cho CSS 3D.

Answer 2

Tôi thực sự phụ thuộc vào những gì bạn đang cố gắng làm. Làm thế nào đơn giản là đơn giản?

CSS 3D không thể sử dụng được. Nó chỉ làm cho nó thành firefox. Đó là lỗi trong cả firefox và chrome. Nó không hoạt động trong phiên bản beta FF9 trên OSX. Nó cũng có vấn đề trong Chrome lên ít nhất 16. Xem http://greggman.com/downloads/examples/intersecting-elements-3d-css.html và so sánh Safari trên OSX với nhiều trình duyệt khác.

ba.js (https://github.com/mrdoob/three.js/) được sử dụng để (và có thể vẫn còn) cung cấp một số canvas sử dụng 3d đơn giản.

Nếu không nếu bạn muốn bất cứ điều gì thú vị đi WebGL và chọn một thư viện (three.js, SceneJS, vv ..)

Bạn đã có để thực hiện một sự lựa chọn. Sử dụng WebGL và từ bỏ IE, Sử dụng Flash 11, Sử dụng Unity3D, sử dụng Canvas và nhận 3d rất hạn chế hoặc không làm 3d.

WebGL đã được các trang web lớn sử dụng. CNN hiện đang sử dụng WebGL http://www.stinkdigital.com/en/work/ecosphere

Answer 3

Tôi biết đây là 2 năm nhưng tôi nghĩ tôi sẽ đăng bài này ở đây cho độc giả trong tương lai.

Điều gì sẽ tùy thuộc vào những gì bạn cần.

Bạn có cần hình dạng 3D đơn giản không có hoặc ít hoạt ảnh không? Hãy thử nếu bạn có thể làm điều đó với CSS3, đó là dễ nhất cho đến nay. Đối với IE, bạn có thể nhận được một thư viện cung cấp hỗ trợ.

Bạn có cần một số mô hình 3D ngọt ngào với đồ họa đẹp và có thể làm đủ mọi thứ không? Truy cập WebGL, bạn không thể yêu cầu kiểm soát nhiều hơn và hiệu suất cho 3d trong trình duyệt.

Bạn có cần hình dạng 3D có thể làm đủ mọi thứ, nhưng không cần kết cấu và sẽ hoạt động ở mọi nơi và sẽ không yêu cầu nhiều hiệu suất? Truy cập Canvas.

CSS3 chỉ dành cho mắt kẹo. Bạn có thể làm cho nó khá dễ dàng, phong cách nó theo bất kỳ cách nào bạn muốn và rất dễ bảo trì. Một khi bạn muốn làm nhiều hơn là chỉ kẹo mắt, đeo găng tay của bạn bởi vì đó là gonna reuire một số công việc.

Với Canvas 2d, bạn có thể tạo nội dung 3D. Nếu bạn mới dùng nó, nó sẽ rất khó chịu và phức tạp (để đặt tên một ví dụ; bạn cần phải biết về ma trận), Bạn có thể làm bất cứ điều gì với canvas 2d mà bạn có thể làm với WebGL nhưng một số điều sẽ dễ dàng hơn trong WebGL (nghiêm túc, nếu đi 2d Canvas, đừng cố gắng sử dụng kết cấu, đó là một cơn ác mộng). WebGL sử dụng OpenGL, tóm lại, có nghĩa là nó sẽ luôn hoạt động tốt hơn Canvas 2d.

Tuy nhiên, WebGL yêu cầu người dùng phải có thẻ video tương thích.

Answer 4

Mọi người đều có thể mệt mỏi khi nghe 'nó phụ thuộc', nhưng ... nó phụ thuộc!

Có một chút "chiến tranh" xảy ra là liệu tốt hơn là sử dụng Canvas hay HTML/CSS3 và cụ thể là vì Canvas chậm hơn DOM trên các máy/thiết bị cũ hơn. Yeap, DOM là cách nhanh hơn trong một số trường hợp, trong khi canvas là nhanh hơn trên hầu hết các trình duyệt/thiết bị hiện đại.

WebGL - Tùy chọn tốt nhất cho cả 2D và 3D, nhưng vì nó không được hỗ trợ tốt trên các trình duyệt và thiết bị, bạn sẽ phải cung cấp dự phòng cho canvas hoặc DOM bất cứ khi nào cần thiết.

Canvas - Ít thích hợp cho 3D so với WebGL, nhưng phù hợp hơn cho khả năng tương thích, cộng đồng, các công cụ vv

DOM - Nhanh hơn hầu hết nghĩ rằng, nếu được sử dụng đúng, hỗ trợ cao nhất xung quanh, nhưng bạn không thể đi hình ảnh động quá ưa thích/chơi game khôn ngoan.

Hope this helps