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

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:

1

// @author Omar Shehata. 2016.

2

// We are loading the Three.js library from the CDN here: 

3

// https://cdnjs.com/libraries/three.js/

4

5

//// This is the basic scene setup ////

6

7

var scene = new THREE.Scene();

8

var width, height = window.innerWidth, window.innerHeight;

9

var camera = new THREE.PerspectiveCamera( 70, width/height, 1, 1000 );

10

var renderer = new THREE.WebGLRenderer(); 

11

renderer.setSize( width,height);

12

document.body.appendChild( renderer.domElement );

13

14

//// This is where we create our off-screen render target ////

15

16

// Create a different scene to hold our buffer objects

17

var bufferScene = new THREE.Scene();

18

// Create the texture that will store our result

19

var bufferTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter});

20

21

////

22

// Add anything you want to render/capture in bufferScene here //

23

////

24

25

function render() {

26

  requestAnimationFrame( render );

27

	// Render onto our off-screen texture

28

	renderer.render(bufferScene, camera, bufferTexture);

29

	// Finally, draw to the screen

30

	renderer.render( scene, camera );

31

}

32

33

render(); // Render everything!

Đầ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:

1

renderer.render(bufferScene, camera, bufferTexture);

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 nó 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.

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ó.

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:

1

var boxMaterial = new THREE.MeshBasicMaterial({map:bufferTexture});

2

var boxGeometry2 = new THREE.BoxGeometry( 5, 5, 5 );

3

var mainBoxObject = new THREE.Mesh(boxGeometry2,boxMaterial);

4

5

// Move it back so we can see it

6

mainBoxObject.position.z = -10;

7

// Add it to the main scene

8

scene.add(mainBoxObject);

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!