Chào mừng bạn đến với chương này về Hiệu Ứng Hình Ảnh (VFX) trong Three.js và React Three Fiber. Trong chương này, bạn sẽ học cách tạo ra những hiệu ứng hình ảnh tuyệt đẹp sẽ làm cho các cảnh 3D của bạn trở nên sống động.

Mục tiêu của tôi là giúp bạn bắt đầu với VFX và truyền cảm hứng cho bạn để tạo ra những hiệu ứng của riêng mình. Tôi đã dành vô số giờ đồng hồ tham khảo nhiều nguồn khác nhau, thử nghiệm, tìm kiếm cho bạn cách tiếp cận đúng để bạn có thể học chỉ trong vài giờ điều mà sẽ tốn hàng tuần hoặc hàng tháng.

Hình ảnh xem trước của dự án TSL GPGPU mà chúng ta sẽ cùng xây dựng.

Nghệ thuật VFX

VFX là từ viết tắt của Visual Effects. Đó là nghệ thuật tạo ra các hiệu ứng để nâng cao trải nghiệm hình ảnh của một bộ phim, trò chơi điện tử, hoặc trong trường hợp của chúng ta là những trải nghiệm web 3D.

VFX có thể được sử dụng để tạo ra các hiệu ứng chân thực, như vụ nổ, lửa, nước, khói, hoặc các hiệu ứng kỳ diệu, như phép thuật, dịch chuyển, và nhiều hơn nữa.

Trong bối cảnh của chúng ta, ngay cả khi bạn không xây dựng một trò chơi, VFX có thể được sử dụng để thêm chút gì đó đặc biệt cho dự án của bạn. Nó có thể được sử dụng để tạo ra trải nghiệm nhập vai hơn, làm cho các cảnh của bạn hấp dẫn hơn, hoặc tạo ra một giao diện hoàn thiện hơn. Cuối cùng xây dựng những dự án chuyên nghiệp và hấp dẫn hơn về mặt hình ảnh.

Giả sử dự án của bạn có tính năng kéo & thả. Bạn có thể thêm hiệu ứng hạt khi người dùng thả một mục, hoặc khi mục đó được kéo. Điều này sẽ làm cho sự tương tác trở nên thú vị và hấp dẫn hơn.

Khi bước vào thế giới VFX, hãy chuẩn bị tinh thần để nhìn thấy trò chơi điện tử và phim ảnh dưới một góc độ khác. Bạn sẽ bắt đầu để ý đến các hiệu ứng được sử dụng để tạo ra những gì bạn thấy trên màn hình.

Sự kết hợp giữa nhiều loại hiệu ứng

Một hiệu ứng được tạo thành từ một hoặc nhiều thành phần. Các thành phần này có thể là particles, shaders, textures, meshes, trails, và nhiều hơn nữa. Bằng cách kết hợp các yếu tố này, bạn có thể tạo ra các hiệu ứng phức tạp và đẹp mắt.

Chúng ta sẽ học cách tạo ra từng thành phần này với Three.js và React Three Fiber trong các bài học tiếp theo. Nhưng trước tiên, hãy cùng xem qua từng thành phần này.

Particles

Particles là những phần tử nhỏ được phát ra từ một nguồn. Chúng có thể được sử dụng để tạo hiệu ứng như lửa, gió, mưa, tuyết, phép thuật, bạn đặt tên gì cũng được.

Bằng cách điều chỉnh số lượng particles và các thuộc tính của chúng, như kích thước, kết cấu, màu sắc, tốc độ và thời gian tồn tài, bạn có thể tạo ra vô số hiệu ứng khác nhau.

Chúng có thể là sprites (hình ảnh 2D luôn hướng về phía camera), hoặc các đối tượng 3D.

Xem trước bài học pháo hoa.

Meshes/Geometry

Khi chúng ta thường nghĩ về particles như là điểm hoặc sprites, tôi nghĩ rằng cần nhấn mạnh rằng meshes cũng có thể được sử dụng để tạo hiệu ứng. Ví dụ như đá từ dưới đất nổi lên, hoặc một cổng thông hiện ra.

Bằng cách điều chỉnh geometry, material và shaders, bạn có thể tạo ra những hiệu ứng độc đáo nổi bật.

Trong trò chơi phù thủy mà chúng ta sẽ cùng xây dựng, xem cách những mảnh băng từ mặt đất tăng thêm hiệu ứng tổng thể.

Trails

Trails là một loại hiệu ứng tạo ra một dòng phía sau một đối tượng. Chúng có thể được dùng để tạo hiệu ứng như sao chổi, chùm laser, hoặc gió.

Chúng tạo ấn tượng về sự di chuyển và có thể được sử dụng để tạo cảm giác về tốc độ hoặc hướng đi.

Để tạo ra chúng, chúng ta có thể sử dụng particles hoặc meshes (chẳng hạn như các dòng hoặc ống). Chúng ta sẽ học cả hai phương pháp trong các bài học tiếp theo.

Chúng ta sẽ thao tác với trails để tạo hiệu ứng sao chổi và nhiều hơn nữa.

Shaders/Texures

Chúng ta đã học về shaders trong chương dành riêng. Trong bối cảnh của VFX, shaders có thể được áp dụng trên particles, meshes, hoặc toàn bộ cảnh để làm cho chúng di chuyển, thay đổi màu sắc, biến dạng, và nhiều hơn thế nữa. Giới hạn duy nhất là sự tưởng tượng của bạn.

Bằng cách kết hợp shaders với textures, bạn có thể tạo ra các hiệu ứng phức tạp hơn. Textures có thể được sử dụng để thêm chi tiết vào hiệu ứng của bạn, như noise, patterns, hay images.

SFX

SFX là viết tắt của Sound Effects, và dù không liên quan trực tiếp đến VFX, nó là một phần quan trọng của trải nghiệm. Thêm hiệu ứng âm thanh vào VFX của bạn và đồng bộ chúng với hiệu ứng hình ảnh, bạn có thể tạo ra một trải nghiệm hấp dẫn và liền mạch hơn.

Chúng ta sẽ không học cách tạo âm thanh trong khóa học này, nhưng chúng ta sẽ học một kỹ thuật thú vị để phát âm thanh không gian trong không gian 3D.

CPU vs GPU

Khi tạo VFX, đặc biệt trong môi trường hạn chế như web, điều quan trọng là phải chú ý đến hiệu suất của hiệu ứng của bạn.

Khi tạo VFX, bạn nên chuyển giao khối lượng công việc nhiều nhất có thể cho GPU. Điều này có nghĩa là bạn nên sử dụng shaders, textures, và các kỹ thuật tăng tốc bởi GPU khác để tạo ra hiệu ứng của bạn.

Đối với các hiệu ứng đơn giản, như một vài particles, bạn có thể sử dụng CPU. Tuy nhiên, đối với các hiệu ứng phức tạp, như hàng nghìn particles, bạn sẽ muốn sử dụng GPU.

Chúng ta sẽ học cả hai kỹ thuật CPU và GPU trong khóa học này, nhưng chúng ta sẽ tập trung vào kỹ thuật GPU nhiều nhất có thể. Điều này sẽ đảm bảo rằng hiệu ứng của bạn chạy mượt mà trên hầu hết các thiết bị.

Chúng ta sẽ tạo một động cơ VFX GPU đơn giản, cho phép chúng ta tạo ra các hiệu ứng phức tạp một cách dễ dàng. Chúng ta cũng sẽ khám phá WebGPU với TSL qua một dự án GPGPU tuyệt vời.

Tiến xa hơn

VFX là một lĩnh vực rộng lớn, và có nhiều kỹ thuật và hiệu ứng mà chúng ta sẽ không thể khám phá hết trong khóa học này. Tuy nhiên, bằng cách học các kiến thức cơ bản, bạn sẽ có thể tạo ra một loạt các hiệu ứng.

Tài liệu tham khảo

Mặc dù hệ sinh thái Three.js không có nhiều về VFX, nhưng có rất nhiều tài liệu tham khảo dành cho phát triển game, có thể được áp dụng cho Three.js. Unity, Unreal, và Godot là những động cơ tuyệt vời để học thêm về VFX.

Như mọi khi, tham khảo chéo các tài liệu khác nhau là cách tuyệt vời để học. Dưới đây là một số tài liệu để bạn bắt đầu:

• Gabriel Aguiar kênh YouTube có các hướng dẫn tuyệt vời về VFX trong Unity và hiện nay là Godot. Tôi cũng khuyến nghị khóa học của anh ấy trên Udemy tên là Visual Effects for Games in Unity - Beginner To Intermediate.

• Brackeys kênh YouTube có các hướng dẫn tuyệt vời về VFX trong Unity (và bây giờ là Godot sau một thời gian dài nghỉ).

• Coreb Games kênh YouTube tương tự như những kênh trước nhưng với Unreal Engine.

• VFX Apprentice kênh YouTube hoặc website chứa nhiều video về VFX và các nguyên tắc của nó.

Thử tái tạo lại các hiệu ứng bạn thấy trong những hướng dẫn này trong Three.js và React Three Fiber. Bạn sẽ học được nhiều điều bằng cách làm như vậy.

ArtStation hoặc Pinterest cũng là những nơi tuyệt vời để tìm cảm hứng.

Thư viện

Không may, Three.js không có một động cơ VFX tích hợp như Unity hoặc Unreal. Tuy nhiên, có một số thư viện có thể giúp bạn tạo VFX trong Three.js:

• Quarks VFX thư viện VFX tiên tiến nhất cho Three.js. Nó dựa trên triển khai Unity Shuriken cho phép bạn nhập Unity VFX vào Three.js. Đây là một thư viện trả phí nhưng có thể tiết kiệm rất nhiều thời gian tùy thuộc vào dự án và nhu cầu của bạn.
• VFX Composer Suite từ Hendrik Mans là một thư viện tuyệt vời để tạo VFX trong Three.js. Nó miễn phí và mã nguồn mở nhưng ít được bảo trì hơn Quarks VFX.
• Wawa VFX thư viện mà chúng ta đã cùng xây dựng trong khóa học này. Nó là một động cơ VFX đơn giản cho phép bạn tạo ra các hiệu ứng phức tạp một cách dễ dàng. Nó miễn phí và mã nguồn mở. Tôi dự định chuyển đổi nó sang TSL trong tương lai. Hãy thoải mái đóng góp cho nó.

Kết luận

Tôi hy vọng bạn sẽ hào hứng như tôi để dấn thân vào thế giới của VFX. Tôi không thể chờ đợi để thấy những gì bạn sẽ tạo ra với kiến thức mà bạn sẽ đạt được trong chương này.