Introduction
Imagine a world where you can create complex 3D renders directly in your DOM without ever touching WebGL or <canvas>. That's exactly what GlyphCSS offers, an ASCII 3D rendering engine that uses standard HTML tags like <pre> to project 3D scenes. Simple and elegant, it integrates seamlessly with popular frameworks like React and Vue.
How GlyphCSS Works
GlyphCSS stands out for its ability to render 3D meshes using only ASCII characters. Each scene is encapsulated in a <pre> tag, allowing developers to inspect, hover, and click on elements. This means there are no per-polygon DOM nodes or complex 3D matrices to manage.
Format Support
GlyphCSS is compatible with a variety of mesh file formats, including OBJ, glTF, GLB, and MagicaVoxel VOX. This significantly broadens the range of 3D models you can integrate into your project. Additionally, it supports UV textures and material colors, adding an extra dimension to your scenes.
Easy Integration
Whether you're using vanilla JS, React, or Vue, integrating GlyphCSS is simple. Here's a code example for each environment:
Vanilla JS
``html <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> ``
React
```jsx 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> ); } ```
Vue
```vue <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> ```
Use Cases and Potential
One of the main advantages of GlyphCSS is its lightweight nature and ease of integration. For developers looking to add interactive 3D elements to their websites without the overhead of WebGL, GlyphCSS offers an innovative alternative. Imagine 3D product presentations, lightweight games, or animated data visualizations.
Conclusion
GlyphCSS is not just a technical curiosity; it's a powerful tool for developers looking to enrich user experiences with simple and efficient 3D graphics. Ready to transform your projects? Let's discuss your project in 15 minutes.