브라우저에서 오픈 월드 만들기, 1부: 우리는 그것을 부숴보는 일부터 시작했다
글 Oleg Sidorkin, Cinevva CTO 겸 공동 창업자
처음 오셨나요? 시리즈 가이드를 보세요. spike가 무엇인지 설명하고 모든 부분을 링크해 둡니다.
우리는 전적으로 브라우저에서 돌아가는 멀티플레이어 오픈 월드를 만들고 있습니다. 설치도 없고, 앱 스토어도 없고, 그냥 URL 하나뿐입니다. 처음부터 가장 큰 위험은 분명했습니다. 브라우저가 게임플레이, 물리, 네트워킹을 위한 여유를 남겨두면서 지속적인 3D 월드를 플레이 가능한 프레임 레이트로 렌더링할 수 있을까?
대부분의 오픈 월드 프로젝트는 예측 가능한 순서로 실패합니다. 먼저 괜찮은 콘셉트가 나옵니다. 그다음 예쁜 장면이 나옵니다. 그러다 게임플레이가 존재하기도 전에 프레임 예산이 이미 다 떨어졌다는 걸 깨닫습니다.
우리는 다른 어떤 것에도 투자하기 전에 렌더 예산이라는 질문에 먼저 답하고 싶었습니다. 그래서 Spike 1은 예쁜 트레일러를 건너뛰고 곧장 측정으로 갔습니다.
설정은 의도적으로 단순하게 했습니다. 512미터 지형 mesh, 층을 쌓은 sine 노이즈에 섬 감쇠를 더한 절차적 높이, 수면 평면, 대기 안개, 그리고 인스턴스화된 객체 500개. 평범한 WebGL과 Three.js, ACES 톤 매핑을 썼고, 그림자는 켜지 않았습니다.
우리는 그것이 어떻게 보이는지에는 관심이 없었습니다. 카메라가 장면 안을 움직일 때 장면이 안정적으로 유지되는지에 관심이 있었습니다.
이 spike에서 두 가지가 나왔고, 그것이 프로젝트 전체를 만들었습니다.
첫째, 첫 패스를 절제 있게 유지하면 데스크톱에서는 진짜 여유가 있다는 걸 확인했습니다. 덕분에 나중에 더 어려운 지형 아키텍처를 시도할 자신감이 생겼습니다.
둘째, 기준선 계약을 만들었습니다. 이후의 모든 spike는 이 장면 대비 자신의 비용을 설명해야 했습니다. 새 기능이 보기에는 좋아도 비용이 너무 크면 승격되지 못했습니다.
그 기준선 규율은 나중에 우리가 이음새 아티팩트, 혼합 LOD 전환, 컴퓨트 기반 메싱에 부딪혔을 때 결정적인 역할을 했습니다. 안정적인 기준이 없으면 모든 버그가 실제보다 더 커 보입니다.
2부에서는 렌더링에서 입력 감각으로 넘어갑니다. Worker 물리는 아키텍처 문서에서는 멋지게 들립니다. 하지만 그건 키를 눌렀을 때 캐릭터가 여전히 즉각적으로 느껴질 때에만 의미가 있습니다.
이 장에서 다룬 기술
Heightmap 지형. 각 셀이 높이 값 하나를 저장하는 2D 격자입니다. GPU가 버텍스 셰이더에서 평평한 mesh를 변위시켜 지형 표면을 만듭니다. Heightmap은 작고(65x65 chunk가 16비트에서 약 8 KB), GPU 친화적이며 렌더링이 빠릅니다. 한계는 동굴, 돌출부, 또는 자기 위로 접히는 어떤 표면도 표현할 수 없다는 점입니다. heightmap 제약과 그 이후에 무엇이 오는지에 대한 배경은 지형 생성 가이드를 보세요.
Three.js. 이 프로젝트 전반에서 사용한 렌더링 라이브러리입니다. Three.js는 WebGL 2(이후에는 WebGPU)를 카메라, 조명, 머티리얼, 지오메트리 객체가 있는 씬 그래프로 추상화합니다. 같은 지오메트리의 여러 복사본을 단일 draw call로 렌더링하는 InstancedMesh, 프러스텀 컬링, PBR 머티리얼, 후처리를 제공합니다. GitHub의 Three.js를 보세요. Three.js가 브라우저 오픈 월드 스택에 어떻게 들어맞는지는 브라우저 3D 기술 가이드를 보세요.
InstancedMesh. 같은 지오메트리의 복사본 N개를 단일 draw call로 렌더링하는 Three.js 기능으로, 각각 다른 위치/회전/스케일을 갖습니다. 인스턴스별 변환은 행렬 속성 버퍼에 저장됩니다. 이것이 Spike 1에서 별도의 draw call 500개 없이 객체 500개를 렌더링한 방식입니다. 대규모 식생을 위해서는 GPU 기반 인스턴스 컬링이 이를 한 단계 더 밀어붙입니다. GPU 식생 컬링에 관한 지형 가이드를 보세요.
프레임 예산. 60 fps에서 각 프레임은 모든 것을 위해
12부 중 1부.
다음: 2부 - Worker 물리와 입력 지연에 대한 두려움
시리즈 가이드: /ko/blog/2026-02-25-open-world-browser-series-guide