Advertisement
  1. Game Development
  2. Three.js
Gamedevelopment

Chỉ dẫn nhanh: Cách kết xuất thành một Cấu trúc trong Three.js

by
Difficulty:IntermediateLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Mặc định, tất cả mọi thứ bạn kết xuất trong Three.js được gửi đến màn hình. Sau tất cả, vấn đề kết xuất một thứ gì đó là gì nếu bạn không thể nhìn thấy nó? Nó chỉ ra một điểm rất quan trọng: thu thập dữ liệu trước khi nó được gửi đến màn hình.

Điều này giúp dễ dàng hơn cho việc áp dụng các hiệu ứng hậu kỳ, như cân bằng màu sắc, thay đổi màu sắc hoặc làm mờ, và nó cũng hữu ích cho hiệu ứng đổ bóng.

Kỹ thuật này được gọi là kết xuất thành cấu trúc hoặc kết xuất thành một vùng đệm; kết quả cuối cùng của bạn được lưu trữ trong một cấu trúc, sau đó bạn có thể kết xuất nó ra màn hình. Trong chỉ dẫn nhanh này, tôi sẽ hướng dẫn bạn cách làm điều đó, và sau đó dẫn dắt bạn đi qua một ví dụ thực hành về kết xuất một khối lập phương đang chuyển động ở trên bề mặt của một khối lập phương đang di chuyển động khác.

Lưu ý: Hướng dẫn này giả định rằng bạn đã có một nền tảng cơ bản về Three.js. Nếu không, hãy xem bài viết Cách học Three.js cho việc phát triển trò chơi.

Cài đặt cơ bản

Có rất nhiều ví dụ về cách thực hiện điều này hướng đến việc nhúng vào các hiệu ứng phức tạp hơn. Dưới đây là cài đặt tối thiểu mà bạn cần có để kết xuất một cái gì đó thành một cấu trúc trong Three.js:

Đầu tiên chúng ta thiết lập scene cơ bản. Sau đó, chúng ta tạo một scene khác, bufferScene; bất kỳ đối tượng nào mà chúng ta thêm vào scene này sẽ được vẽ bên ngoài màn hình của chúng ta thay vì bên trong màn hình.

Sau đó chúng ta tạo bufferTexture, là một WebGLRenderTarget. Đây là những gì Three.js sử dụng để cho phép chúng ta kết xuất lên thứ gì khác mà không phải lên màn hình.

Cuối cùng, chúng ta nói với Three.js để kết xuất bufferScene:

Việc này giống như kết xuất một scene bình thường, ngoại trừ chúng ta chỉ định một đối số thứ ba: mục tiêu kết xuất.

Vì vậy, các bước là:

  1. Tạo ra một scene để giữ các đối tượng của bạn.
  2. Tạo ra một cấu trúc để lưu trữ những gì bạn kết xuất
  3. Kết xuất scene của bạn vào trong cấu trúc

Đây cơ bản là những gì chúng ta phải làm. Tuy nhiên, nó không có gì thú vị cả, vì chúng ta không thấy bất cứ điều gì. Ngay cả khi bạn đã thêm các thứ vào bufferScene, bạn vẫn sẽ không nhìn thấy bất cứ điều gì; Điều này là bởi vì bạn cần phải bằng cách nào đó kết xuất cấu trúc mà bạn đã tạo lên scene chính của bạn. Dưới đây là một ví dụ về cách làm điều đó.

Ví dụ về việc sử dụng

Chúng ta sẽ tạo một khối lập phương trong một scene, vẽ nó vào trong một cấu trúc, và sau đó sử dụng như là một cấu trúc cho một khối mới!

1. Bắt đầu với một scene cơ bản

Đây là scene cơ bản của chúng ta với một khối lập phương màu đỏ xoay và một mặt phẳng màu xanh ở phía sau nó. Không có gì đặc biệt ở đây, nhưng bạn có thể kiểm tra code bằng cách chuyển đến tab CSS hay JS trong demo.

Bạn có thể fork (sao chép) và sửa đổi nó ngay trên CodePen.

2. Kết xuất nó vào trong một cấu trúc

Bây giờ chúng ta sẽ lấy nó và kết xuất nó vào một cấu trúc. Tất cả những gì chúng ta cần làm là tạo ra một bufferScene giống như trong cài đặt cơ bản ở trên, và thêm các đối tượng của chúng ta vào nó.

Bạn có thể fork (sao chép) và sửa đổi nó ngay trên CodePen.

Nếu thực hiện đúng, chúng ta sẽ không thấy bất cứ thứ gì, vì bây giờ không có gì được kết xuất lên trên màn hình. Thay vào đó, scene của chúng ta được kết xuất và lưu trong bufferTexture.

3. Kết xuất một khối cấu trúc lập phương

bufferTexture không khác so với bất kỳ cấu trúc nào khác. Chúng ta có thể đơn giản là tạo ra một đối tượng mới và sử dụng nó như là cấu trúc của chúng ta:

Bạn có thể fork (sao chép) và sửa đổi nó ngay trong CodePen.

Bạn có thể có khả năng vẽ bất cứ thứ gì trong các cấu trúc đầu tiên, và sau đó kết xuất nó vào bất cứ thứ gì mà bạn thích!

Tiềm năng sử dụng

Trường hợp sử dụng đơn giản nhất là bất kỳ loại hiệu ứng hậu kỳ nào. Nếu bạn muốn áp dụng một số cân chỉnh màu hoặc chỉnh sửa vào scene của bạn, thay vì áp dụng với từng đối tượng, bạn có thể kết xuất toàn bộ scene vào trong một cấu trúc, và sau đó áp dụng hiệu ứng nào mà bạn muốn vào cấu trúc sau cùng đó trước khi kết xuất nó ra màn hình.

Bất kỳ loại bóng đổ nào mà yêu cầu đa truyền (chẳng hạn như hiệu ứng mờ) sẽ sử dụng kỹ thuật này. Tôi đã giải thích cách làm thế nào để sử dụng các vùng đệm để tạo ra một hiệu ứng khói trong hướng dẫn này.

Hy vọng bạn thấy chỉ dẫn nhỏ này là hữu ích đối với bạn! Nếu bạn phát hiện bất kỳ lỗi nào hoặc có bất kỳ câu hỏi nào, xin vui lòng cho tôi biết trong phần bình luận ở dưới!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.