blendi-remade/dioramas

해결하는 문제

고급 3D 랜딩 페이지를 구축하려면 일반적으로 3D 아티스트, 웹 개발자, 그리고 많은 시간이 필요합니다. Dioramas는 텍스트 설명에서 3D 히어로 객체를 생성하고, 웹에 맞게 최적화하며, 영화적인 경험을 즉시 제공하는 완전한 프레임워크를 제공하여 이를 접근 가능하게 만듭니다. 시각적 품질을 희생하지 않으면서 3D 웹사이트를 저렴하고 빠르게 구축할 수 있게 하는 문제를 해결합니다.

작동 방식

Dioramas에는 세 가지 계층이 있습니다:

1. 에셋 파이프라인: AI를 사용하여 프롬프트에서 3D 모델을 생성합니다. 먼저 텍스트-이미지 모델이 깨끗한 제품 이미지를 렌더링한 다음, 이미지-3D 모델이 이를 텍스처가 있는 3D 메시로 변환합니다. 스크립트가 메시와 텍스처를 웹 사용에 맞게 최적화하여 파일 크기를 크게 줄입니다. README에는 에셋을 생성하고 최적화하는 예제 명령이 포함되어 있습니다.

2. 엔진: 시각적 광택을 추가하는 작은 three.js 레이어: 앰비언트 오클루전, 블룸, 톤 매핑, 그레인, 비네트 같은 후처리 효과. 또한 볼류메트릭 스포트라이트, 평면 반사, 절차적 텍스처, 스크롤 기반 애니메이션, 사용자 정의 커서와 프리로더를 포함합니다.

3. 방법: 각 예제 사이트는 한 페이지 브리핑에서 시작하며, AI 코딩 에이전트가 엔진에 맞춰 구축합니다. 헤드리스 GPU 스크린샷을 사용한 검토 시스템은 모든 스크롤 위치가 좋아 보이도록 보장합니다.

README에는 랜턴으로 박물관 탐험, 11km 잠수, 잠수정 조종 등 다양한 인터랙티브 경험을 보여주는 20개의 완전한 예제 사이트가 포함되어 있습니다.

대상 사용자

이것은 3D 아티스트가 아니어도 몰입감 있고 영화적인 3D 랜딩 페이지를 만들고자 하는 웹 개발자와 디자이너를 위한 것입니다. 또한 고품질 3D 웹 경험을 빠르게 제작하려는 에이전시나 크리에이터에게도 유용합니다. 무료이고 오픈소스이므로 누구나 사용할 수 있지만, 원활한 성능을 위해 데스크톱 GPU가 권장됩니다.

하이라이트

• 다양한 상호작용과 스타일을 보여주는 20개의 완전한 예제 사이트.
• 텍스트 프롬프트에서 AI 생성 3D 모델, 텍스처 모델당 약 $1.20.
• 최적화된 에셋: 25MB 원본 모델이 3–8MB로 줄어 빠른 로딩.
• 영화적인 후처리 효과를 갖춘 작지만 강력한 three.js 엔진.
• 에셋 생성, 최적화 및 자동 시각 검토를 위한 스크립트.
• MIT 코드 라이선스, 생성 에셋은 CC BY 4.0.