前の記事 ≪:8KBで完結するモダンUIライブラリ「Oat 」
次の記事 ≫:classを付与するだけで気持ちいいアニメーションを実装する「AliveUI」

heerich.js — SVGで3Dボクセルが描けるエンジン

2026年04月22日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法

GitHub - meodai/heerich: Tiny engine for 3D voxel scenes rendered to SVG ? boolean ops, oblique/perspective cameras, zero dependencies. Inspired by the geometric cardboard sculptures of Erwin Heerich. GitHub


 

積木みたいにボクセルを足し引きして、出力はただのSVG。WebGLを使わないのがポイント。
ここが便利

拡大してもぼやけない → ポスターにも刷れる
ペンプロッターで描ける → 隠れ線を消す機能つき
各ボクセルがDOM要素 → CSSでホバー、JSでクリック判定が普通に書ける
カメラ4種類(斜投影/透視/正投影/アイソメ)を一行で切り替え

こんな用途に

ジェネラティブアート
ドット絵風だけど無限に拡大できるイラスト
インタラクティブなインフォグラフィック
プロッター作品
ゲームのプロトタイプUI

WebGLを立ち上げるほどじゃないけど、2Dイラストじゃ物足りない??そんな中間ゾーンを埋める道具です。

 

スポンサード リンク

By.KJ : 2026年04月22日 09:00 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)