Show HN: ASCII 3Dレンダリングエンジン

ロード中… glyphcss > DOM内でASCIIを使ってテクスチャ付き3Dメッシュをレンダリングします。WebGLも<canvas>も不要です。各シーンは単一の<pre>要素であり、検査、ホバー、クリックが可能です。 > UVテクスチャとマテリアルカラーを含むOBJ、glTF、GLB、MagicaVoxel VOXに対応しています。Vanilla JS、React、Vueで動作します。 [ GitHubで見る ★ … ] [ ギャラリーを見る ] ランタイム: vanilla js react vue\n[ インストール ]\n┌─ パッケージマネージャー ─┐\nterminal $ npm install glyphcss\nterminal $ npm install @glyphcss/react\nterminal $ npm install @glyphcss/vue\n┌─ CDN ─┐\nindex.html <script type="module" src="https://esm.sh/glyphcss/elements"></script>\n[ 仕組み ]\n> glyphcssはOBJ、glTF、GLB、STL、VOXメッシュファイルを読み込みます。各シーンは単一の<pre>にレンダリングされます。ラスタライザーはすべてのポリゴンを投影し、cols × rowsの文字グリッドを埋め、レンダリングごとに一つの文字列をtextContentに書き込みます。ポリゴンごとのDOMノードやmatrix3dは存在しません。 > インタラクティビティはオプトインであり、疎結合です。<GlyphHotspot>を任意の3Dアンカーに配置すると、glyphcssは投影されたセル上に絶対位置指定された<div>を一つ出力します。これにより、ポリゴンごとにDOMノードを必要とせず、実際のDOMイベント、実際の:hoverスタイル、実際のrole="button"アクセシビリティが実現されます。 [ → コアコンセプト ]\n[ ハローワールド ]\n> glyphcssはカスタム要素（<glyph-scene>、<glyph-mesh>）、命令型createGlyphScene API、およびオプションのReact / Vueバインディングを提供します。ご自身のスタックに合ったエントリポイントを使用してください。 ~/project/ vanilla js React Vue <script type="module" src="https://esm.sh/glyphcss/elements"></script> <glyph-camera rot-x="23" zoom="1.3"> <glyph-scene> <glyph-orbit-controls drag wheel></glyph-orbit-controls> <glyph-mesh geometry="dodecahedron"> <glyph-hotspot at="0,1,0"></glyph-hotspot> </glyph-mesh> </glyph-scene> </glyph-camera>import { GlyphCamera, GlyphScene, GlyphOrbitControls, GlyphMesh, GlyphHotspot } from "@glyphcss/react"; export function App() { return ( <GlyphCamera rotX={23} zoom={1.3}> <GlyphScene> <GlyphOrbitControls drag wheel /> <GlyphMesh geometry="dodecahedron"> <GlyphHotspot at={[0, 1.2, 0]} onClick={() => alert("vertex")} /> </GlyphMesh> </GlyphScene> </GlyphCamera> ); }<template> <GlyphCamera :rot-x="23" :zoom="1.3"> <GlyphScene> <GlyphOrbitControls drag wheel /> <GlyphMesh geometry="dodecahedron"> <GlyphHotspot :at="[0, 1.2, 0]" @click="onVertex" /> </GlyphMesh> </GlyphScene> </GlyphCamera> </template> <script setup lang="ts"> import { GlyphCamera, GlyphScene, GlyphOrbitControls, GlyphMesh, GlyphHotspot } from "@glyphcss/vue"; function onVertex() { alert("vertex"); } </script> [ → APIリファレンス ]