LittleJS Engine is 2D and 3D now
LittleJS 엔진, 2D와 3D를 함께 지원
LittleJS가 2D와 3D를 한 엔진에서 다루는 대규모 업데이트를 공개했습니다. 내장 레벨 편집기와 파티클 효과, 렌더링 성능 개선, AI 코딩 도구도 추가했으며 성능 비교 결과는 작성자의 한 기기와 두 장면에서 측정한 값입니다.
- 주제
에디터 노트
성능 개선은 새 렌더링 구조와 함께 제시됐지만, 공개된 비교에서 확인한 조건은 작성자의 기기 한 대와 두 장면입니다. 작성자도 다른 환경에서 직접 실행해 보라고 안내하므로 엔진 전반의 우열로 확대하기보다 재현 가능한 벤치마크의 출발점으로 보는 편이 정확합니다. 다른 엔진 유지관리자에게 결과와 장면 개선을 요청했다는 점도 측정 범위를 넓히려는 제안입니다. 2D 객체 모델과 같은 물리 및 게임 루프에 3D를 넣고 편집기와 예제까지 묶은 것이 이번 업데이트의 구체적인 변화입니다. 반면 Reddit에서 확인되는 반응은 마음에 든다는 짧은 의견 하나뿐이라 사용성이나 성능을 뒷받침하는 경험담은 없습니다. AI 도구는 프로젝트 생성과 코드 없는 제작 경로를 제시하지만, 본문에는 생성 결과의 품질을 비교한 자료가 없습니다.
AI 요약
LittleJS가 기존의 작고 빠르며 의존성이 없는 HTML5 게임 엔진에 3D 렌더러와 제작 도구를 더했습니다. 2D와 3D 객체는 같은 물리, 자식 객체, 타이머를 사용하므로 2D UI를 3D 장면 위에 놓거나 2D 게임을 3D 세계 안에 배치할 수 있습니다.
2D와 3D 기능
메시와 도형 생성, 지형과 복셀 맵 충돌, 그림자 맵, 색 조명과 스포트라이트, 안개, 반사, 입자 효과, 카메라, 사용자 셰이더를 지원합니다. 2D에는 동적 조명, 단방향 플랫폼, 탄환의 연속 충돌 검사, 패럴랙스 레이어와 충돌 성능 개선이 추가됐습니다. 렌더링에 Three.js를 쓰는 플러그인도 제공합니다.
제작 도구와 성능
디버그 빌드에서 Escape 키를 누르면 게임을 멈추고 실행 중인 레벨을 편집할 수 있습니다. 편집기에는 실행 취소, 자동 저장, 프리팹 기능이 있으며 2D 레벨은 Tiled JSON으로 저장하고 불러옵니다. 불, 연기, 폭발, 비 등 파티클 효과는 한 줄로 호출하고 전용 디자이너에서 조정할 수 있습니다. 예제 브라우저에는 편집과 공유 기능을 갖춘 단일 파일 예제 100개 이상이 있습니다.
렌더링 코어를 다시 구성해 WebGL2 기반 2D 스프라이트 배치와 인스턴스 방식 3D 렌더링을 적용했습니다. 작성자는 LittleJS와 PixiJS, Three.js, PlayCanvas, Phaser, Babylon.js를 비교하는 브라우저 벤치를 공개했습니다. 본인 기기에서 움직이는 스프라이트와 조명이 있는 큐브, 두 장면을 측정했을 때 LittleJS가 가장 빠른 경로와 맞먹거나 일부에서 앞섰다고 설명합니다. 작성자도 측정 결과가 한 기기와 두 작업 부하에 한정된다고 밝혔습니다.
AI 제작 도구
AI 코딩 도구용 템플릿과 보조 모듈, 에이전트 지침을 제공합니다. Claude Code 플러그인은 두 명령으로 설치하며 서버나 npm 설치 없이 실행하는 게임 프로젝트를 생성한다고 설명합니다. ChatGPT에서 코드를 직접 작성하지 않고 게임을 만드는 LittleJS GPT와 오픈소스 게임 50개 이상을 모은 LittleJS Arcade도 공개했습니다.
Reddit 반응
- @WhatEverOkFine — 마음에 듭니다!
원문: Frank Force / 번역·요약: Trawling