簡単！軽くてカラフルな Voxelized Game Engine

このプロジェクトはボクセル化ゲームエンジンと 3D オブジェクトボクセライザーの両方を提供します。ボクセライザーは 3D モデルを効率的なボクセル表現に変換し、ゲームエンジンは Web ブラウザ上で大規模なボクセル化された世界をリアルタイム描画可能にします。両コンポーネントは最小限の依存関係で Web 展開に最適化されています。 This project provides both a voxelized game engine and a 3D object voxelizer. The voxelizer converts 3D models into efficient voxel representations, while the game engine enables real-time rendering of large-scale voxelized worlds in web browsers. Both components are optimized for web deployment with minimal dependencies.

従来の 3D モデル配布では複雑な Unity SDK と専用形式が必要で Web デプロイに不適切でした。このプロジェクトは、ブラウザで直接動作する npm 配布ライブラリによりこれらの障壁を除去します。データは標準 PNG 画像として配布され、CDN 配信とブラウザキャッシュに最適化され、専門ツールや環境なしで即座にデプロイできます。 Traditional 3D model distribution requires complex Unity SDKs and proprietary formats that are unsuitable for web deployment. This project eliminates these barriers by providing npm-distributed libraries that work directly in browsers. Data is distributed as standard PNG images optimized for CDN delivery and browser caching, enabling immediate deployment without specialized tools or environments.

座標系変換問題は、PLATEAU 座標系（EPSG:6677 - JGD2011）、Web メルカトルタイルシステム、WebGL ワールド空間という 3 つの異なる空間参照系を扱うことを含みます。各システムは異なる単位、原点、軸の向きを持ち、正確な変換を極めて複雑にします。このプロジェクトは、1 ピクセル=1 メートル=1 ブロックという画像ピクセル座標にすべての座標を標準化することでこれを解決し、複雑な数学的変換なしで直接的な空間相関を可能にします。 The coordinate system transformation problem involves handling three distinct spatial reference systems: PLATEAU coordinate system (EPSG:6677 - JGD2011), Web Mercator tile system, and WebGL world space. Each system has different units, origins, and axis orientations, making accurate transformation extremely complex. This project solves this by standardizing all coordinates to image pixel coordinates where 1 pixel = 1 meter = 1 block, enabling direct spatial correlation without complex mathematical transformations.

従来の 3D モデルは複雑な三角形メッシュとして配布され、洗練された衝突検出アルゴリズムと複数のマテリアル管理システムが必要でした。ボクセル手法はこれを単純な 3 次元バイナリ配列に変換し、空間クエリが定数時間操作になり、レンダリングが単一の draw call に統合され、計算オーバーヘッドと実装複雑性を劇的に削減します。 Traditional 3D models distribute as complex triangle meshes requiring sophisticated collision detection algorithms and multiple material management systems. The voxel approach converts this to simple 3D binary arrays where spatial queries become constant-time operations and rendering consolidates to single draw calls, dramatically reducing computational overhead and implementation complexity.

配布される 3D モデルは通常、異なるマテリアルとテクスチャのために数千の個別 draw call を必要とし、ブラウザが大規模な都市データの描画に失敗する原因となります（36,872 の draw call が観測されました）。このボクセライザーは、すべてのマテリアルを単一テクスチャアトラスに統合し、インスタンスレンダリング技術を使用することで問題を解決し、視覚的忠実性を維持しながら数千の draw call を 1 つに削減し、120fps のパフォーマンスを実現します。 Distributed 3D models typically require thousands of individual draw calls for different materials and textures, causing browsers to fail rendering large-scale urban data (36,872 draw calls observed). This voxelizer eliminates the problem by unifying all materials into single-texture atlases and using instanced rendering techniques, reducing draw calls from thousands to one while maintaining visual fidelity at 120fps performance.

このシステムは PNG 形式でのデータ配信を使用し、sparse voxel directed acyclic graphs（SVDAGs）、空間充填曲線を用いた run-length encoding（RLE）、空間予測符号化手法などの高度な圧縮技術の開発を進めています。これらの新しい最適化アプローチは、視覚品質を維持しながら大幅な画像ファイルサイズ削減を実現するために実装中です。 This system utilizes PNG format for data distribution and is actively developing advanced compression techniques including sparse voxel directed acyclic graphs (SVDAGs), run-length encoding (RLE) with space-filling curves, and spatial predictive coding methods. These emerging optimization approaches are being implemented to achieve significant image file size reduction while maintaining visual quality.

一般的なゲームエンジンは、複雑な依存関係ツリーを持つ数百メガバイトから数ギガバイトのコードを必要としますが、このプロジェクトは最小限の依存関係のないコードで完全な機能を実装します。エンジンにはフラスタムカリング、グリーディメッシング、インスタンスレンダリングなどの高度なレンダリング最適化が含まれています。WebGL API 以外の外部ライブラリを避けることで、アップデートメンテナンスのオーバーヘッドを排除し、技術的負債を削減し、最適なユーザーエクスペリエンスのための高速初期読み込みを可能にします。 Common game engines require hundreds of megabytes to gigabytes of code with complex dependency trees, but this project implements complete functionality with minimal dependency-free code. The engine includes advanced rendering optimizations such as frustum culling, greedy meshing, and instanced rendering. By avoiding external libraries beyond WebGL API, it eliminates update maintenance overhead, reduces technical debt, and enables rapid initial loading for optimal user experience.

色情報を持つ高詳細 3D モデルは極めて限定された都市部でのみ利用可能で、簡素化されたモデルでは視覚的魅力に欠けます。このプロジェクトは、3D 建物ジオメトリと航空写真を含む様々なテクスチャソースを組み合わせて視覚品質を向上させる技術フレームワークを提供します。デモ実装では測量機関からの航空写真を使用してこの機能を実証し、様々な都市データセットに適用された際のリッチな視覚レンダリングの可能性を示しています。 High-detail 3D models with color information are only available for extremely limited urban areas, while simplified models lack visual appeal. This project provides a technical framework that can combine 3D building geometry with various texture sources including aerial photography for enhanced visual quality. The demo implementation showcases this capability using aerial photography from mapping agencies, demonstrating the potential for rich visual rendering when applied to various urban datasets.

航空写真には撮影時に建物が落とした影が含まれており、独立して見ると説明のつかない視覚ノイズとして現れます。しかし 3D 建物ジオメトリと組み合わせると、ユーザーが建物の高さを理解し影を構造物の自然な結果として認識するため、これらの影は文脈的意味を得ます。これにより計算負荷の高いシャドウキャスティングアルゴリズムの必要性を排除しながら、最高品質のリアルな影を提供します。 Aerial photographs contain shadows cast by buildings at the time of capture, which appear as unexplained visual noise when viewed independently. However, when combined with 3D building geometry, these shadows gain contextual meaning as users understand building heights and recognize shadows as natural consequences of the structures. This eliminates the need for computationally expensive shadow casting algorithms while providing the highest quality realistic shadows.

ボクセルデータの離散的な性質は、ユーザーが環境を変更できるインタラクティブアプリケーションに理想的です。変更に複雑なアルゴリズムを必要とする三角形メッシュとは異なり、ボクセルデータは整数座標での直接操作と即座の視覚フィードバックを可能にします。これにより都市地理を教える教育ツールから協調的なバーチャルワールド構築体験まで、様々なアプリケーションを可能にします。 The discrete nature of voxel data makes it ideal for interactive applications where users can modify the environment. Unlike triangle meshes that require complex algorithms for modification, voxel data allows direct manipulation at integer coordinates with immediate visual feedback. This enables applications from educational tools that teach urban geography to collaborative virtual world building experiences.

## Brush up ### hierarchical pathfinding A-star（`HPA*`） - slide: [plateau.glre.dev](https://plateau.glre.dev) - service: [navigator.glre.dev](https://navigator.glre.dev) - require: [navigator.glre.dev/claude/ja](https://navigator.glre.dev/claude/ja) - proposal: [navigator.glre.dev/readme/ja](https://navigator.glre.dev/readme/ja) - schedule: [docs.google.com/spreadsheets](https://docs.google.com/spreadsheets/d/1HLuEUU5CTvMhOYZFNg4IE8dtlqicwMc-EzXwbWefWcU) ### morton curve space filling （z-order） - hilbert, morton, original ### binary greedy meshing （貪欲法） - demo: [here](https://cloudflare-partyserver-test.tseijp.workers.dev/) ### multiple program instancing - demo: [here](https://glre.dev/instance/multiples) ### priority queue multi threading （web worker） > - ja: [CLAUDE.ja.md](./CLAUDE.ja.md) > - en: [CLAUDE.md](./CLAUDE.md) ### realtime multiple user playing （partyserver）