30 thử nghiệm WebGL chỉ là Wow!

Kìa, cho một công cụ tuyệt vời với những lời hứa tuyệt vời đang đến trước mắt bạn. Nó nhanh và trơn tru. Nó tái hiện 3D và với sự tích hợp nó hoạt hình, hãy đoán xem nó là gì? HTML5? CSS3? Không, nó được gọi là WebGL, một thư viện phần mềm mở rộng khả năng của JavaScript để tạo đồ họa 3D tương tác và vâng, không có bất kỳ plugin nào!

Trong phần giới thiệu này, chúng tôi không muốn cho bạn thấy những điều thường xuyên. Chúng tôi muốn giới thiệu với bạn 30 thử nghiệm WebGLCác nhà phát triển chuyên nghiệp được chế tạo cẩn thận để bạn chứng kiến ​​sức mạnh thực sự của WebGL không chỉ truyền cảm hứng mà còn cho bạn một cái nhìn thoáng qua về tương lai của web sẽ như thế nào. Nhảy vào tương lai sau khi nhấp!

Bạn thực sự nên xem các bản demo này bằng phiên bản Google Chrome phiên bản mới nhất. Mặc dù vậy, hầu hết các bản demo đều hỗ trợ phiên bản Firefox, Google Chrome và Safari mới nhất.

3 giấc mơ đen

Được ủy quyền bởi Nhóm dữ liệu nghệ thuật của Google, 3 Dreams of Black đưa bạn vào 3 thế giới giấc mơ được xây dựng thông qua sự kết hợp của các hình vẽ 2D và hoạt hình phong phú đan xen với các chuỗi 3D tương tác. Kiểm tra những điều kỳ diệu cho trải nghiệm tuyệt vời!

Hạt khối lượng hoạt hình

Đây là một nghệ thuật thực sự - động vật hoạt hình được xây dựng bởi các hạt 3D bằng cách sử dụng kết cấu nổi và các đối tượng đệm khung. Bất ngờ hơn nếu bạn di chuyển chuột!

Bể nuôi cá

Mô phỏng môi trường dưới nước? Đó không phải là vấn đề đối với WebGL. Bản demo có các mô hình 3D với kết cấu chất lượng cao, hoạt hình cảnh, hoạt hình đổ bóng pixel, phản xạ, khúc xạ và tụ quang, chỉ là tất cả mọi thứ để đưa lên cảnh dưới nước thực tế!

Azathioprine

Có lẽ là bản demo WebGL hoành tráng nhất, đủ nói. Mũ cho tác giả Jochen Wilhelmy.

Chuyến đi hấp dẫn

Nếu bạn muốn trải nghiệm 3D thì đây là bản demo tốt nhất cho bạn, cũng được thiền với vẻ đẹp to lớn của đồ họa do WebGL tạo ra bằng công thức Hopalong của Martin.

Sứa

“Mô hình hóa thủ tục được thực hiện với Side FX Houdini. Được xuất với trình xuất Python thành định dạng json. Kết cấu được vẽ bằng Autodesk Mudbox. Hoạt hình với một shader đỉnh.”

Chrysaora

Đây không phải là bản demo hoạt hình thông thường, nhưng nó có các bộ xương mô phỏng động, mô phỏng và đồng bộ hóa phía máy chủ một phần với WebSocket, hệ thống hạt đối diện với camera, hiệu ứng ánh sáng thể tích và thư viện ma trận mjs của Vladimir Vukićević. Nói tóm lại, một thử nghiệm tuyệt vời với những công trình phức tạp.

Xin chào

Giới thiệu mô phỏng xe tương tác cao cấp, mang đến cho bạn độc quyền bởi HelloEnjoy.

Vật liệu: Ô tô

Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 và Chevrolet Camaro trong trình duyệt của bạn. Chọn đi xe của bạn và tận hưởng khung cảnh. Heck, bạn thậm chí có thể chọn màu sắc của họ.

Xe WebGL

Tương lai của dòng Need For Speed ​​sẽ có trong trình duyệt web. Quá tham vọng? Chắc chắn là không nếu bạn đã ghé thăm những chiếc xe được kết xuất bằng bản đồ khối động, bản đồ bóng và hiệu ứng hậu xử lý.

Quốc gia Robot của tôi

Chà, nếu con số không phải là sở thích của bạn, thì hãy thử xây dựng robot mát mẻ và quyến rũ và khoe với bạn của bạn! Bạn thậm chí có thể chi tiêu tiền của bạn để làm cho nó một thỏa thuận thực sự.

Pacmaze

Làm thế nào về một trò chơi Pac-Man 3D? Đồ họa và lối chơi rất hay, và quan trọng nhất là nó rất vui!

Mũ trùm đầu màu đỏ

Bây giờ đây là một trò chơi dễ thương hay máu me. Trò chơi này không có gì ngoài một trò chơi thú vị để cho bạn thấy khả năng của WebGL khi được phát triển thành trò chơi bắn súng từ trên xuống. Vui vẻ và thú vị cho chắc chắn.

TankWorld

Bạn đoán nó, một trò chơi bắn súng xe tăng thú vị với vũ khí để sử dụng và bản đồ để khám phá, và ở một số cấp độ, bạn thậm chí có thể có một máy bay trực thăng để khám phá thế giới! Đây thực sự không chỉ là một trò chơi thông thường, và đồ họa trông thật thoải mái!

Bột giấy

Ví dụ tốt nhất về cách đồ họa và hoạt hình đơn giản có thể gây ấn tượng với mọi người khi chúng được thực hiện đúng.

Bề mặt

Kiểm tra Surface, một thí nghiệm thanh lịch và đầy cảm hứng được thực hiện bởi Paul Lewis. Bạn không chỉ thay đổi cường độ, độ đàn hồi, quỹ đạo tự động, khung dây và hạt mưa trong bản demo mà còn kéo và thả hình ảnh của chính bạn vào đó để cảm nhận hiệu ứng khác đi.

Hạt ảnh

Chỉ cần thả hình ảnh yêu thích của bạn vào bản demo này và tận hưởng việc xem nó phát nổ thành vô số hạt và được tương tác với một số dạng từ tính. Thử nghiệm là sự kết hợp của bốn công nghệ: Kéo và thả, API tệp, Canvas và WebGL của HTML5.

Rutt-Etra-Izer

Rutt-Etra-Izer là một mô phỏng WebGL của bộ tổng hợp video Rutt-Etra cổ điển. Bản demo cho phép bạn đặt hình ảnh của riêng bạn vào bên trong và thao tác với chúng. Với nội dung này, hình ảnh 2D thậm chí có thể trông giống như 3D!

Vũ điệu lắc lư

Một bản demo đơn giản nhưng đáng chú ý cho thấy WebGL có thể lỏng như thế nào, với bộ tạo bóng ánh sáng dị hướng và biến dạng đỉnh chao đảo.

Ultranoir

Một thử nghiệm tuyệt vời khác cho thấy tiềm năng của WebGL. Nouvelle Vague cung cấp trải nghiệm 3D thời gian thực đầy thơ mộng và tương tác dựa trên Twitter, và những gì bạn thấy sẽ là các tweet được thực hiện với các vật thể bay khác nhau. Chắc chắn là một cách nghệ thuật để thưởng thức các tweet.

Khỉ nhấp nhô

“Lần này tôi chỉ muốn làm một thử nghiệm để xem có bao nhiêu vị trí và quy tắc đỉnh tôi có thể cập nhật trực tiếp trong JavaScript. Hóa ra 2.000 là tốt :) Tôi cũng đã thêm vào một chút ánh xạ môi trường. Và sự kỳ lạ. Luôn thêm sự kỳ lạ.”

Video FX

Ứng dụng ấn tượng được thực hiện bởi Daniel Pettersson cho phép bạn áp dụng nhiều hiệu ứng hậu xử lý đồng thời cho đoạn giới thiệu Happy feet 2. Hãy thử và vui vẻ!

Voxels lỏng

Biểu diễn 3D của thuật toán hiệu ứng nước 2D cổ điển, cũng cho bạn thấy WebGL tương tác như thế nào.

Tủ sách WebGL

Duyệt qua hơn 10.000 bìa sách với Tủ sách WebGL này, được phát triển bởi Nhóm nghệ thuật dữ liệu của Google. Bạn cũng có thể tìm kiếm theo chủ đề, mở mô hình 3D của từng loại bằng cách nhấp vào nó và tải xuống sách trên điện thoại của mình bằng mã QR.

Quả cầu WebGL

Một thử nghiệm thú vị của nhóm Google thực sự khiến bạn cảm thấy như mình đang ở tương lai với trực quan hóa dữ liệu đẹp, thanh lịch và tương lai của nó.

Chuyến bay thế giới

Một ứng dụng trực quan hóa dữ liệu trực quan hấp dẫn khác có thể trực quan hóa các đường bay của các hãng hàng không lớn, có vẻ đầy hứa hẹn!

Bộ lọc hình ảnh WebGL

Ứng dụng biên tập đồ họa với WebGL? Nó không bao giờ là không thể. Trên hết, nó nhanh và mượt!

Nước WebGL

“Một vũng nước được phản chiếu, khúc xạ, tụ quang và tắc xung quanh. Hồ bơi được mô phỏng với một trường độ cao và chứa một hình cầu có thể tương tác với mặt nước.”

Suy tư

Vấn đề lớn nhất mà WebGL phải đối mặt, có lẽ là bảo mật của nó. Theo Wikipedia, Nhóm Sẵn sàng Khẩn cấp Máy tính Hoa Kỳ (US-CERT) đã đưa ra cảnh báo rằng WebGL chứa nhiều vấn đề bảo mật có thể dẫn đến việc thực thi mã tùy ý, từ chối dịch vụ và thậm chí tấn công tên miền chéo. Điều này có nghĩa rất, rất nhiều đối với chủ sở hữu trang web.

Tuy nhiên, Tập đoàn Khronos bao gồm Mozilla và Google đã đề xuất các giải pháp khả thi và phương pháp phát triển trong tương lai để tăng cường bảo mật chống lại các mối đe dọa bảo mật có thể có. Hy vọng rằng các vấn đề có thể được giảm bớt và thậm chí sẽ được giải quyết trong tương lai, vì WebGL có rất nhiều khả năng được giới thiệu bởi các nhà phát triển tài năng và chuyên nghiệp!

Hãy cho chúng tôi biết thử nghiệm nào làm bạn ngạc nhiên nhất, và tất nhiên, hãy khoe với chúng tôi nếu bạn có một thử nghiệm!

Thêm bài viết liên quan:

• Trang web HTML5: 48 Bản trình diễn giết chết tiềm năng
• Trang web HTML5: 15 thử nghiệm khác
• Trình diễn hoạt hình CSS3 truyền cảm hứng