openworld.js의 역사를 간략히 소개

발행: (2025년 12월 31일 오후 11:42 GMT+9)
3 min read
원문: Dev.to

Source: Dev.to

Introduction

지난 며칠 동안 저는 멀티‑모델 작업을 진행하며 가능한 한 많은 대규모 모델을 구현하려고 했습니다. WebGL은 약 80 000개의 인스턴스 모델을 넘으면 지연이 발생하기 시작하므로, 메인 캐릭터가 멀리 이동할 때만 먼 콘텐츠를 동적으로 로드하도록 구현하고 있습니다.

Early Development

  • First publication – 저는 2025년 10월 18일경에 이 프로젝트를 중국의 Q&A 사이트인 Zhihu에 처음 공개했습니다. 원본 글은 여기에서 확인할 수 있습니다: https://www.zhihu.com/question/389957213/answer/1962681678376984942.
  • Idea – 많은 건물을 수용할 수 있는 3차원 세계를 만들고 싶었습니다.
  • Research period – 2025년 12월까지 간헐적으로 연구를 진행했으며, 그때 비로소 기능적인 프로토타입을 완성했습니다.

Technical Foundations

  • WebGL – 프로젝트는 WebGL을 사용해 작성되었습니다.
  • Initial framework – “코드‑골프” 전문가가 만든 프레임워크(https://xem.github.io/W)에서 시작했으며, 이 프레임워크는 단 2 KB만으로 세계를 렌더링한다는 점에 놀랐습니다.
  • Physics engine – cannon.js 물리 엔진을 추가하고 크게 압축했습니다; 현재 프로젝트에 사용되는 버전은 단 29 KB에 불과합니다.

Optimizations and Releases

  • May 2025 – JavaScript 초보자로서 연구를 시작하고 점진적으로 학습했습니다.
  • July 2025 – 온라인 필기 시스템 예시를 공개했습니다: https://git.ccgxk.com/myWorkSpace/webgl_show/cyber_city/cbcity.html.
  • August 2025 – 블록을 추가하는 간단한 프로그램을 만들었습니다.
  • September 2025 – 작업을 재사용 가능한 라이브러리로 전환하는 방안을 고민하기 시작했습니다.
  • October 2025 – 라이브러리를 완성했습니다.

Current Status

  • Domain – 2025년 11월 중순에 브랜드화를 위해 openworld.zone 도메인을 등록했습니다.
  • Progress – 미루는 시간도 있었지만, 지난 6개월 동안 프로젝트는 순조롭게 진행되고 있습니다.

Demo

프로젝트의 현재 상태는 여기에서 확인할 수 있습니다: https://ow.ccgxk.com/demo/dev001/

Back to Blog

관련 글

더 보기 »

Next js에서 번들 크기를 줄이는 방법

제가 처음 Next.js를 사용하기 시작했을 때, 기본 설정만으로도 얼마나 빠른지 정말 좋았습니다. 프로젝트가 커지면서 bundle size가 계속 증가해 로드가 느려졌습니다.

웹을 3D로 열다: Three.js 입문

Three.js가 실제로 하는 일 WebGL은 브라우저가 3D 그래픽을 렌더링할 수 있게 해주는 기본 기술입니다. 강력하지만 매우 저수준입니다. Three.js는 ...

3D로 웹을 열다: Three.js 입문

Three.js는 현대 웹 개발에서 가장 영향력 있는 라이브러리 중 하나가 되었습니다. 그것은 WebGL의 원시적인 힘과 접근성 사이의 간극을 메워줍니다…