6

Chúng tôi vừa phát hành Babylon.js 2.3 với bộ tính năng lớn nhất chúng tôi từng cung cấp.

Trên blog của mình, David (David khác!) Đã trình bày bản demo mà chúng tôi xây dựng với Michel Rousseau: bản demo Sponza. Bản demo này thực sự giới thiệu những gì có thể được thực hiện trên web ngày hôm nay liên quan đến kết xuất chất lượng hình ảnh (ngay cả trên các thiết bị cấp thấp.)

Trong số tất cả các tính năng mới mà chúng tôi đã thêm, tính năng tôi tự hào nhất là bóng sáng điểm động (DPLS).

Để hiểu rõ hơn về DPLS là gì, đây là một video nhỏ về giao diện của chúng:


Bạn thậm chí có thể nhìn thấy nó trực tiếp trên trang web babylon.js: http://babylonjs.com/demos/SponzaDocateShadows/

Trong bài viết này, trước tiên tôi sẽ giải thích đèn điểm là gì và sau đó làm thế nào chúng ta có thể đạt được bóng tối thời gian thực trong 3D.

Đèn điểm

Đèn ở chế độ 3d được sử dụng để tạo màu nhận được theo từng pixel. Màu này sau đó được sử dụng bởi các vật liệu để xác định màu cuối cùng của mỗi pixel.

Chúng là nhiều loại ánh sáng khác nhau và bạn có thể nghĩ về ánh sáng điểm như một ánh sáng được xác định bởi một điểm duy nhất. Điểm này phát ra năng lượng của nó theo mọi hướng (giống như một mặt trời thực sự nhỏ bé.)

Đây là một cảnh 3D siêu đơn giản chỉ với một mặt phẳng và đèn điểm:

http://www.babylonjs-playground.com/#J6ZHG#0

Chúng ta có thể biết ánh sáng ở đâu bằng cách nhìn vào tác động của nó trên mặt đất. Không có ánh sáng, cảnh tương tự sẽ như thế này:

Đèn là một điểm quan trọng trong 3D vì thực sự rất khó để nhìn thấy bất kỳ âm lượng nào mà không có đèn.

Ví dụ, hãy lấy một hộp màu đỏ đơn giản:

Bây giờ, cùng một hộp với một ánh sáng đơn giản:


Như bạn có thể thấy, ánh sáng giúp bộ não của bạn hiểu 3D.

Bóng

Để có được sự chân thực hơn nữa, bạn có thể thêm bóng cho cảnh của mình. Tuy nhiên, bóng trong 3D rất khó tái tạo vì chúng liên quan đến khái niệm tắc.

Thật vậy, một cái bóng chỉ là một nơi mà ánh sáng bị che khuất.

Điều này ngụ ý sự cần thiết phải có thể kiểm tra xem ánh sáng có thực sự đạt được hay không đối với mọi pixel bạn muốn kết xuất.

Nếu bạn nhìn vào cảnh mới này, bạn sẽ thấy một hình cầu và một hộp có ánh sáng điểm nhưng không có bóng:

http://www.babylonjs-playground.com/#J6ZHG#1

Theo mặc định, bóng tối bị tắt vì chúng đòi hỏi nhiều sức mạnh GPU. Đây là cảnh tương tự nhưng bây giờ với bóng được kích hoạt:

http://www.babylonjs-playground.com/#J6ZHG#2

Babylon.js làm điều này cực kỳ dễ thực hiện bằng cách cho phép bạn tạo ShadowGenerator, xác định ai sẽ tạo bóng và ai nhận chúng và hiển thị nó.

Boom, bạn đã hoàn thành.

Đèn điểm và bóng

Dưới mui xe, mọi thứ trở nên phức tạp hơn một chút.

Để xác định xem một pixel có ở trong bóng tối hay không, chúng ta cần một đường chuyền đầu tiên, nơi chúng ta sẽ kết xuất cảnh từ quan điểm của ánh sáng. Pass này sẽ tạo ra bản đồ bóng.

Bản đồ này sẽ chứa khoảng cách giữa mọi pixel có thể nhìn thấy từ ánh sáng và chính ánh sáng.

Trong quá trình vượt qua chính, chúng tôi sẽ sử dụng bản đồ bóng này để kiểm tra xem khoảng cách của pixel hiện tại và ánh sáng có lớn hơn khoảng cách được lưu trữ bên trong bản đồ bóng hay không. Điều này được thực hiện cho mọi pixel. Nếu đây là trường hợp, thì pixel nằm trong bóng tối:

Vấn đề với đèn điểm là chúng phát ra ánh sáng theo mọi hướng. Bạn không thể đơn giản tạo ra một kết cấu từ quan điểm của ánh sáng vì không có một quan điểm duy nhất (nghĩa là một vị trí và hướng.)

Đây là nơi bóng tối điểm vào trò chơi.

Để khắc phục vấn đề này, chúng ta cần tạo 6 kết cấu: một cho mỗi hướng (lên, xuống, trái, phải, trước và sau). Bằng cách này, động cơ luôn có thể tìm thấy kết cấu tốt nhất để sử dụng tùy thuộc vào vị trí pixel được hiển thị liên quan đến ánh sáng.

Chẳng hạn, đây là các kết cấu được tạo trên mỗi khung hình cho bản demo Sponza trong video của tôi (chúng tôi gọi chúng là kết cấu khối, bởi vì, tốt, chúng tạo thành một khối.):

Quay trở lại bản Demo Demo

Bây giờ, hãy quay lại bản demo để xem Michel đã xây dựng nó như thế nào.

Trước hết, bạn có thể truy cập URL và sử dụng bảng điều khiển dưới cùng để bật lớp gỡ lỗi. Nó sẽ cho phép bạn chơi với các thông số của động cơ:

Hãy bắt đầu lại từ đầu bằng cách tắt đèn:

Bởi vì cảnh dựa trên ánh sáng hoàn toàn năng động, mọi thứ đều chuyển sang màu đen (giống như trong thế giới thực.)

Sau đó, hãy bật lại đèn và bật nhãn có thể nhấp để hiển thị tất cả các thực thể sống trong cảnh:

Đèn được hiển thị màu vàng và bạn có thể nhấp vào nhãn để bật và tắt (Omin001 và Omni002.)

Về cơ bản, cảnh được xây dựng như thế này:

Dựa trên những gì chúng ta đã thấy trước đây, có 2 hình khối được tạo cho cảnh này.

Nhưng, vì chỉ có Omni001 di chuyển, chúng tôi có thể tạo sơ đồ khối cho Omni002 khi khởi động và tiết kiệm rất nhiều băng thông theo cách này.

Nhìn về tương lai với WebGL 2.0

Phiên bản hiện tại của Babylon.js sử dụng WebGL 1.0, do đó, nó yêu cầu 6 lượt để tạo một sơ đồ hoàn chỉnh.

Để tăng sản lượng kết xuất, chúng tôi dự định sử dụng tiện ích mở rộng (là một phần của WebGL 2.0) có tên " WEBGL_draw_buffers ." Tiện ích mở rộng này sẽ cho phép chúng tôi hiển thị tất cả các mặt của sơ đồ khối trong một cuộc gọi cải thiện hiệu suất tổng thể rất nhiều.

Trong khi đó, chúng tôi thực sự hài lòng với kỹ thuật hiện tại hoạt động trên tất cả các trình duyệt và thiết bị hiện đại hỗ trợ WebGL 1.0.

Trong bài viết này, chúng tôi đã thấy tại sao ánh sáng và bóng tối lại quan trọng trong 3D thời gian thực. Chúng tôi cũng phát hiện ra cách thêm bóng thời gian thực vào đèn điểm bằng cách sử dụng hình khối.

Nếu bạn thích bài viết này, bạn có thể thấy các liên kết này thú vị:

|