Three.js와 순수 GLSL로 구현한 오픈소스 절차적 VFX 플레이그라운드 'Elemental Sandbox'

외부 텍스처나 스프라이트 시트 없이 순수 GLSL 수학식, 볼륨 레이마칭, GPU 시뮬레이션 파티클로 10종의 마법 어빌리티를 실시간 렌더링하는 Three.js 기반 오픈소스 절차적 시각효과 개발 도구 'Elemental Sandbox'를 살펴봅니다.

tau · 2026년 9월 10일

#Three.js #GLSL #WebGL #VFX #오픈소스 #개발도구

Three.js와 순수 GLSL로 구현한 오픈소스 절차적 VFX 플레이그라운드 'Elemental Sandbox'

3D 인터랙티브 웹 개발자 Chiro Visuals(@chirovisuals)가 외부 이미지 텍스처나 사전 제작된 스프라이트 에셋 없이, 순수 GLSL 셰이더와 수학 연산만으로 구현된 Three.js 기반 오픈소스 절차적 VFX 샌드박스 'Elemental Sandbox'(리포지토리명: LinearAbilityExtThreeJS)를 공개했습니다.

Three.js와 순수 GLSL 절차적 연산으로 렌더링된 실시간 마법 VFX 어빌리티와 런타임 인스펙터 인터페이스

이미지 출처: Chiro Visuals (@chirovisuals)

Three.js와 Vite 생태계에서 웹 3D 그래픽과 실시간 시각효과(VFX)를 탐구하는 프론트엔드 엔지니어 및 기술 아티스트(Tech Artist)에게 실시간 절차적 렌더링 파이프라인의 구체적인 구현 방식을 제공하는 개발용 오픈소스 플레이그라운드입니다.

외부 에셋 없는 100% 절차적 렌더링과 셰이더 아키텍처

'Elemental Sandbox'의 핵심 특징은 텍스처 이미지, 스프라이트 시트, 사전 베이킹된 3D 메시를 일절 사용하지 않는다는 점입니다. 화면에 표시되는 10가지 복합 마법 어빌리티의 모든 시각적 형태와 움직임은 GPU 상에서 수기로 작성된 GLSL 셰이더 연산만을 통해 실시간으로 계산됩니다.

  • GPU 시뮬레이션 인스턴스드 파티클: 컬 노이즈 난류(curl turbulence)와 소용돌이 형태의 볼텍스 스월(vortex swirl) 물리 역학을 적용한 GPU 기반 인스턴스드 쿼드(instanced quad) 파티클 시스템을 구현했습니다.
  • 볼륨 레이마칭(Volume Raymarching): 밀도 높은 에너지 구체와 원소 방출 효과를 렌더링하기 위해 셰이더 내부에서 광선 전진(raymarching) 알고리즘을 사용합니다.
  • 버텍스 셰이더 월드 좌표계 연산: 모델 좌표계 대신 버텍스 셰이더 단계에서 직접 월드 공간 좌표를 계산하여, 카메라 시점 변환이나 복합 투사체 궤적에 자연스럽게 동기화되는 에너지 변형 효과를 구현했습니다.

외부 이미지 에셋 로딩 과정이 완전히 배제되어 네트워크 대역폭 의존성을 낮추는 동시에, 수학적 공식에 기반한 무한한 스케일링과 디테일 표현이 가능합니다.

런타임 VFX 인스펙터와 셰이더 프리로더 최적화

개발 도구로서의 실용성을 높이기 위해, 프로젝트 내부에는 런타임 환경에서 즉시 조작 가능한 인게임 VFX 에디터가 탑재되어 있습니다.

  • 일시 정지(Paused) 상태의 실시간 파라미터 조작: 시뮬레이션이 멈춘 상태에서도 10종 어빌리티의 난류 강도, 소용돌이 반경, 방출 속도, 색상 감쇄 등 모든 시각 파라미터를 실시간으로 수정하고 그 결과를 즉각 관찰할 수 있습니다.
  • 인스펙터 프리셋 저장: 튜닝이 완료된 파라미터 조합을 커스텀 프리셋 형태로 내보내거나 저장하여 다른 작업 환경으로 손쉽게 전달할 수 있습니다.
  • 셰이더 프리로더(Pre-loader) 파이프라인: WebGL 애플리케이션의 대표적인 사용성 저해 요소인 런타임 셰이더 컴파일 지연(stutter)을 방지하기 위해, 초기 로딩 화면 단계에서 10가지 어빌리티의 모든 셰이더를 미리 컴파일하고 GPU 메모리에 워밍업하는 파이프라인을 구축했습니다.

프로젝트 활용 시 고려사항 및 코드 참조

실무 웹 프로젝트나 포트폴리오에 이번 절차적 파이프라인을 도입하거나 벤치마킹할 때 염두에 두어야 할 기술적 제약과 리포지토리 참조 주의사항이 있습니다.

  • GPU 연산 집중 및 모바일 최적화: 텍스처 메모리는 사용하지 않지만 순수 GLSL 수학 함수와 볼륨 레이마칭, 수천 개의 인스턴스드 파티클을 매 프레임 실시간 연산하므로 저사양 모바일 기기나 구형 통합 그래픽 환경에서는 연산 부하가 집중될 수 있습니다. 상용 서비스 적용 시 파티클 개수 스케일링과 레이마칭 스텝 수 동적 제어가 권장됩니다.
  • 공식 리포지토리 경로 확인: 저자의 초기 분기 프로젝트(AvatarCastingAbilitiesThreeJS) 및 리포지토리명 오탈자(LinearAbiltyCastingThreeJS)가 웹상에 혼재되어 있으므로, 10종 어빌리티와 런타임 인스펙터가 최신 반영된 공식 리포지토리인 achrefelouafi/LinearAbilityExtThreeJS의 메인 브랜치를 참조해야 합니다.

출처

본 개발 도구 분석은 3D 인터랙티브 그래픽 개발자 Chiro Visuals가 공개한 공식 GitHub 리포지토리의 소스 코드와 기술 시연 게시물을 기반으로 검증 및 작성되었습니다.