3천 개 잎사귀를 코드로 생성, Three.js 전용 Copilot 플러그인 공개

KEY POINT: 웹 브라우저 3D 그래픽 구현의 난제였던 외부 메시 파일 의존성을 탈피하고, GitHub Copilot 플러그인을 통해 코드로 복잡한 3D 구조물을 생성하는 절차적 모델링 환경이 구축되었다. Sculpt DNA와 Coverage Curator 메커니즘을 도입해 조형의 정밀도와 제어 가능성을 확보했다.

#Threejs #GitHubCopilot #절차적모델링 #웹그래픽 #코딩에이전트

웹 브라우저 3D 모델링의 효율적 전환

웹 브라우저에서 3D 모델을 구현하기 위해 개발자는 그동안 일일이 좌표를 수정하거나 무거운 외부 메시(Mesh) 파일을 불러와 최적화하는 번거로운 과정을 거쳐야 했다. RePolis 프로젝트는 이러한 수동 작업의 병목을 해결하기 위해 Three.js(웹 기반 3D 그래픽 라이브러리) 환경의 오브젝트 조형 과정을 일반화하여 GitHub Copilot 플러그인 형태로 구현했다. 개발자는 Vinh Hiển이 공개한 Three.js Object Sculptor 프로젝트를 기반으로 이미지 분석, 구조 분해, 단계별 조형, 브라우저 내 비교 흐름을 자동화했다. 이 플러그인은 단순히 이미지를 3D로 변환하는 도구가 아니라, 자동 스펙 및 변형 탐색을 거친 뒤 오브젝트별 조형과 시각 검수 과정을 지원한다. 실제 RePolis 세계수 구현 사례에서는 15개의 macro branch(주요 가지), 56개의 secondary branch(보조 가지), 112개의 fine branch(세부 가지)와 3,016개의 instanced leaf(인스턴스화된 잎사귀)를 사용하여 외부 파일 없이 코드로만 복잡한 3D 구조물을 완성했다. 최종 결과물은 deterministic seed(결정론적 시드) 20260711 값을 적용하여 생성되었으며, 이는 3D 조형의 문법이 파일 임포트 방식에서 실시간 코드 생성 방식으로 전환되었음을 의미한다.

Sculpt DNA와 Coverage Curator를 통한 조형 제어

개발팀은 조형의 정밀도를 높이기 위해 Sculpt DNA와 Coverage Curator라는 두 가지 핵심 메커니즘을 도입했다. Sculpt DNA는 비율, 재질, 팔레트, 반복 밀도를 의미 있는 파라미터로 제한하여 조형의 구조를 보호하고, component ID(구성 요소 식별자), parent link(부모 연결), attachment root(부착 루트), socket(소켓), collider(충돌체)와 같은 구조적 속성을 불변(invariant) 상태로 유지한다. Coverage Curator는 무작위 결과물을 나열하는 대신, 24개의 안전한 후보군을 먼저 생성한 뒤 서로 충분히 다른 3개의 중간 콘셉트를 추출하는 방식으로 작동한다. 이번 세계수 프로젝트에서는 Golden Canopy, Solar Archive, Aurora Index가 중간 콘셉트로 도출되었으며, 그중 Solar Archive를 선택하여 수동 아트 디렉션과 최적화 과정을 거쳐 라이브 환경에 적용했다. 이러한 절차적 모델링 방식은 외부 메시 파일 없이도 복잡한 3D 구조물을 생성할 수 있는 효율성과 제어 가능성을 동시에 확보했다. 개발자는 자동화된 탐색으로 후보군을 좁히고, 이후 수동 조형으로 정밀도를 높이는 하이브리드 방식을 통해 웹 환경에서의 3D 구현 한계를 극복했다. 결과적으로 이 플러그인은 복잡한 3D 모델을 코드로 정의하고 관리함으로써, 웹 브라우저 내에서 고성능 그래픽을 구현하는 새로운 표준을 제시한다.

[IMG_1]

사용법

> 공식 저장소 기준 설치·실행 방법이다.

bash

mkdir -p ~/plugins
git clone REPOSITORY_URL ~/plugins/threejs-object-sculptor

json

{
  "name": "threejs-object-sculptor",
  "source": {
    "source": "local",
    "path": "./plugins/threejs-object-sculptor"
  },
  "policy": {
    "installation": "AVAILABLE",
    "authentication": "ON_INSTALL"
  },
  "category": "Productivity"
}

json

{
  "name": "local",
  "interface": {
    "displayName": "Local Plugins"
  },
  "plugins": [
    {
      "name": "threejs-object-sculptor",
      "source": {
        "source": "local",
        "path": "./plugins/threejs-object-sculptor"
      },
      "policy": {
        "installation": "AVAILABLE",
        "authentication": "ON_INSTALL"
      },
      "category": "Productivity"
    }
  ]
}

3천 개 잎사귀를 코드로 생성, Three.js 전용 Copilot 플러그인 공개

웹 브라우저 3D 모델링의 효율적 전환

Sculpt DNA와 Coverage Curator를 통한 조형 제어

사용법

관련 기사