blendi-remade/dioramas

解決する課題

高品質な 3D ランディングページを構築するには、通常 3D アーティスト、ウェブ開発者、そして多くの時間が必要です。Dioramas は、テキスト記述から 3D ヒーローオブジェクトを生成し、ウェブ用に最適化し、映画のような体験をすぐに提供する完全なフレームワークを提供することで、これを手軽にします。視覚的な品質を損なうことなく、3D ウェブサイトを手頃な価格で迅速に構築できるようにするという問題を解決します。

仕組み

Dioramas には 3 つの層があります：

1. アセットパイプライン：AI を使用してプロンプトから 3D モデルを生成します。まず、テキストから画像へのモデルがクリーンな製品画像をレンダリングし、次に画像から 3D へのモデルがそれをテクスチャ付きの 3D メッシュに変換します。スクリプトがメッシュとテクスチャをウェブ用に最適化し、ファイルサイズを大幅に削減します。README には、アセットを生成および最適化するためのコマンド例が含まれています。

2. エンジン：視覚的な仕上げを追加する小さな three.js レイヤー：アンビエントオクルージョン、ブルーム、トーンマッピング、グレイン、ビネットなどのポストプロセッシング効果。また、ボリューメトリックスポットライト、平面反射、プロシージャルテクスチャ、スクロール駆動アニメーション、カスタムカーソルとプリローダーも含まれています。

3. メソッド：各サンプルサイトは 1 ページのブリーフから始まり、AI コーディングエージェントがエンジンに対してそれを構築します。ヘッドレス GPU スクリーンショットによるレビューシステムにより、すべてのスクロール位置が美しく見えることを保証します。

README には、ランタンで博物館を探索したり、11 km 潜水したり、潜水艇を操縦したりするなど、さまざまなインタラクティブ体験を示す 20 の完全なサンプルサイトが含まれています。

対象読者

これは、3D アーティストでなくても没入感のある映画のような 3D ランディングページを作成したいウェブ開発者やデザイナー向けです。また、高品質な 3D ウェブ体験を迅速に制作したい代理店やクリエイターにも役立ちます。無料でオープンソースなので誰でも使用できますが、スムーズなパフォーマンスにはデスクトップ GPU が推奨されます。

ハイライト

• さまざまなインタラクションとスタイルを示す 20 の完全なサンプルサイト。
• テキストプロンプトから AI 生成された 3D モデル。テクスチャ付きモデルあたり約 1.20 ドル。
• 最適化されたアセット：25 MB の生モデルが 3–8 MB になり、高速読み込みを実現。
• 映画のようなポストプロセッシング効果を備えた、小さくても強力な three.js エンジン。
• アセット生成、最適化、自動ビジュアルレビューのためのスクリプト。
• MIT コードライセンス、生成アセットは CC BY 4.0。