← Lab 목록

TOOL / BROWSER

Material Forge

노이즈와 패턴으로 Height·Normal·AO 등 게임용 텍스처 맵을 생성하는 브라우저 도구.

ReactJavaScriptCanvas 2DWeb WorkerProcedural Texture

노이즈와 패턴을 게임용 텍스처로

Material Forge는 Seed와 생성 설정을 조절해 절차적 텍스처를 만드는 브라우저 도구입니다. 기존 Noise Forge에서 이름을 변경했으며, 실행 파일명은 호환성을 위해 noise_forge.html을 유지합니다.

현재는 노이즈·패턴으로 Height를 만들고 Normal·AO 등의 맵을 생성할 수 있습니다. 재질 선택, Base Color·Roughness 생성과 3D 미리보기는 향후 구현 예정입니다.

주요 기능

노이즈와 패턴 생성

Perlin, Worley, Domain Warp 등의 노이즈와 Brick, Checker, Hexagon 등의 패턴을 제공합니다. Seed와 세부 설정으로 결과를 조절합니다.

합성과 보정

두 레이어와 8가지 블렌드 모드로 결과를 합성하고 Levels, Blur, Sharpen 등의 필터를 적용합니다. Seamless 옵션과 2×2 타일 미리보기로 반복 결과를 확인합니다.

맵 출력과 채널 패킹

Height, Normal, AO, Curvature, Edge, Color Ramp를 출력합니다. RGBA 채널별로 맵이나 상수를 지정할 수 있으며, 256~2048px PNG와 선택 맵·설정 ZIP 내보내기를 지원합니다.

작업 저장과 복원

프로젝트 JSON으로 설정을 저장하고 복원합니다. 프리셋과 최대 100단계 Undo/Redo를 지원하며, 사용자 프리셋은 브라우저 저장소에 보관됩니다.

실행 방법

저장소에서 배포 HTML을 내려받아 브라우저로 실행합니다. HTML 이용에는 Node.js나 npm 설치가 필요하지 않습니다.

  1. 저장소의 noise_forge.html을 내려받아 브라우저에서 엽니다.
  2. Source Type을 선택하고 Scale·Seed·세부 설정을 조절합니다.
  3. Output Map과 타일 미리보기로 결과를 확인합니다.
  4. PNG 또는 ZIP으로 결과를 내보내고, 이어서 작업하려면 프로젝트 JSON을 저장합니다.

구현 구성

React와 JavaScript 생성 알고리즘, Canvas 2D 출력을 사용합니다. 생성·PNG 인코딩·ZIP 처리는 Web Worker가 담당하며, 빌드 시 라이브러리와 Worker 코드를 단일 HTML에 포함합니다.

기능과 실행 조건은 공개 저장소 README를 기준으로 정리했습니다.