Wawa Sensei logo

VFX 소개

Three.js와 React Three Fiber의 Visual Effects (VFX)에 대한 이 장에 오신 것을 환영합니다. 이 장에서는 3D 장면을 생동감 있게 만드는 멋진 시각 효과를 만드는 방법을 배울 것입니다.

제 목표는 VFX를 시작하는 데 도움을 주고, 여러분이 자신만의 효과를 만들도록 영감을 주는 것입니다. 저는 여러 가지 자원을 교차 참조하고 실험하며, 몇 주 또는 몇 달이 걸릴 수 있는 학습을 몇 시간 만에 할 수 있도록 최적의 접근 방식을 찾기 위해 무수히 많은 시간을 보냈습니다.

Wawa Sensei의 로고가 입자로 그려진 이미지

함께 만들 TSL GPGPU 프로젝트의 미리보기

VFX의 예술

VFX는 Visual Effects의 약자입니다. 이는 영화, 비디오 게임, 또는 우리의 경우 3D 웹 경험의 시각적 경험을 향상시키기 위한 효과를 만드는 예술입니다.

VFX는 폭발, 불, 물, 연기와 같은 현실적인 효과를 만들거나, 마법 주문, 텔레포테이션 등과 같은 환상적인 효과를 만드는 데 사용될 수 있습니다.

우리의 맥락에서, 비록 게임을 만들고 있지 않더라도 VFX는 프로젝트에 약간의 추가적인 터치를 더하는 데 사용할 수 있습니다. 더 몰입감 있는 경험을 만들거나, 장면을 더 매력적으로 만들거나, 더 세련된 모습을 만들어 더욱 전문적이고 시각적으로 매력적인 프로젝트를 구축할 수 있습니다.

예를 들어, 프로젝트에 드래그 & 드롭 기능이 있다고 가정해봅시다. 사용자가 아이템을 드롭할 때나 아이템을 드래그할 때 입자 효과를 추가할 수 있습니다. 이렇게 하면 상호작용이 더 매력적이고 재미있어집니다.

VFX의 세계에 발을 들이면 비디오 게임과 영화를 다른 시각으로 보게 될 준비를 하십시오. 화면에 보이는 것들을 만들기 위해 사용되는 효과들을 알아채기 시작할 것입니다.

여러 종류의 효과 조합

하나의 효과는 하나 이상의 요소로 구성됩니다. 이러한 요소는 입자, shaders, 텍스처, meshes, trails 등이 될 수 있습니다. 이러한 요소를 조합하여 복잡하고 아름다운 효과를 만들 수 있습니다.

우리는 Three.js와 React Three Fiber를 사용하여 각 요소를 만드는 방법을 다음 수업에서 배우게 될 것입니다. 그러나 그 전에 각 요소를 살펴보겠습니다.

파티클

파티클은 소스에서 방출되는 작은 요소입니다. 이들은 불, 바람, 비, 눈, 마법 주문 등과 같은 효과를 만드는 데 사용될 수 있습니다.

파티클의 수와 크기, 텍스처, 색상, 속도, 수명과 같은 속성을 조작하여 무한한 수의 효과를 만들 수 있습니다.

이들은 항상 카메라를 향하는 스프라이트 (2D 이미지)일 수도 있고, 3D 오브젝트일 수도 있습니다.

불꽃놀이 레슨의 미리보기.

Meshes/Geometry

우리가 종종 파티클을 점 또는 스프라이트로 생각하는 동안, 메쉬도 효과를 만드는 데 사용될 수 있다는 점을 언급하는 것이 중요하다고 생각합니다. 예를 들어, 땅에서 나오는 바위나 열리는 포탈을 생각해보세요.

Geometry, material, shader를 조작하여 독특한 효과를 만들어낼 수 있습니다.

우리가 함께 만들 게임에서 땅에서 나오는 얼음 조각이 전체적인 효과에 어떻게 기여하는지 확인하세요.

트레일

트레일은 물체 뒤에 선을 만드는 효과의 일종입니다. 이는 혜성, 레이저 빔 또는 바람과 같은 효과를 만드는 데 사용될 수 있습니다.

이들은 움직임의 인상을 주며 속도나 방향성을 느끼게 할 수 있습니다.

이를 만들기 위해 파티클이나 메쉬 (예: 선 또는 튜브)를 사용할 수 있습니다. 다음 강의에서 두 방법을 모두 배울 것입니다.

우리는 트레일을 조작하여 혜성 효과 등을 만들어 볼 것입니다.

Shaders/Textures

우리는 전용 장에서 이미 shader에 대해 배웠습니다. VFX 맥락에서 shaders는 particles, meshes 또는 전체 장면에 적용되어 이동, 색상 변경, 왜곡 등 다양한 효과를 제공합니다. 유일한 한계는 여러분의 상상력입니다.

shaders와 textures를 결합하면 더욱 복잡한 효과를 만들 수 있습니다. textures는 노이즈, 패턴, 이미지와 같은 세부 사항을 효과에 추가하는데 사용될 수 있습니다.

SFX

SFX는 Sound Effects를 의미하며, VFX와 직접 관련은 없지만 중요한 경험의 일부분입니다. VFX에 sound effects를 추가하고 이를 시각 효과와 동기화함으로써 보다 몰입적이고 일관된 경험을 만들 수 있습니다.

이 과정에서는 sound effects를 만드는 방법을 배우지 않지만, 3D 공간에서 공간화된 소리를 재생하는 흥미로운 기술을 배우게 될 것입니다.

CPU vs GPU

특히 웹과 같은 제한된 환경에서 VFX를 만들 때는 효과 성능을 신중히 고려하는 것이 중요합니다.

VFX를 만들 때 가능한 많은 작업을 GPU에 맡기고 싶습니다. 이는 shaders, textures, 다른 GPU 가속 기술을 사용하여 효과를 만드는 것을 의미합니다.

몇 개의 particles와 같은 간단한 효과의 경우, CPU를 사용할 수 있습니다. 그러나 수천 개의 particles와 같은 복잡한 효과의 경우 GPU를 사용하는 것이 좋습니다.

이 과정에서는 CPU와 GPU 기술 모두를 배울 것이지만, 가능한 한 GPU 기술에 집중할 것입니다. 이를 통해 대부분의 장치에서 효과가 원활하게 실행되도록 할 것입니다.

우리는 복잡한 효과를 쉽게 만들 수 있는 간단한 GPU VFX 엔진을 만들 것입니다. 또한, TSL과 함께 WebGPU를 탐구하고 매력적인 GPGPU 프로젝트를 진행할 것입니다.

더 나아가기

VFX는 방대한 분야이며, 이 과정에서 다루지 않을 기술과 효과가 많습니다. 하지만 기본을 배우면 다양한 효과를 만들 수 있습니다.

자료

Three.js 생태계는 VFX에서는 드문하지만, Three.js에 적용할 수 있는 게임 개발에 대한 많은 자료가 있습니다. Unity, Unreal, Godot는 VFX에 대해 더 많이 배울 수 있는 훌륭한 엔진입니다.

항상 다른 자료를 참조하는 것은 배우는 데 좋은 방법입니다. 아래는 시작하는 데 도움이 되는 자료입니다:

이러한 튜토리얼에서 본 효과를 Three.js와 React Three Fiber에서 재현해보세요. 그렇게 함으로써 많은 것을 배우게 될 것입니다.

ArtStation 또는 Pinterest도 영감을 얻기 좋은 장소입니다.

라이브러리

안타깝게도, Three.js는 Unity나 Unreal처럼 내장된 VFX 엔진을 가지고 있지 않습니다. 그러나 Three.js에서 VFX를 만드는 데 도움이 되는 몇 가지 라이브러리가 있습니다:

  • Quarks VFX는 Three.js에 대한 가장 진보된 VFX 라이브러리입니다. Unity Shuriken 구현을 기반으로 하여 Unity VFXs를 Three.js로 가져올 수 있게 합니다. 유료 라이브러리이지만 프로젝트와 필요에 따라 많은 시간을 절약할 수 있습니다.
  • VFX Composer Suite는 Hendrik Mans로부터 나온 훌륭한 라이브러리로 Three.js에서 VFX를 만들 수 있습니다. 무료 및 오픈 소스이지만, Quarks VFX보다는 유지보수가 덜 됩니다.
  • Wawa VFX는 이 과정에서 함께 만든 라이브러리입니다. 복잡한 효과를 쉽게 만들 수 있는 간단한 VFX 엔진입니다. 무료 및 오픈 소스이며, 미래에 TSL로 변환할 계획입니다. 자유롭게 기여해주세요.

결론

VFX의 세계에 뛰어들게 되어 매우 기대됩니다. 이 장에서 배우게 될 지식을 바탕으로 무엇을 만들지 기대됩니다.

< Shader transitions
Particles >