Show HN: VoxCSS – A DOM based voxel engine

Japanese Translation:

## Summary
VoxCSSは軽量で CSS ベースのボクセルエンジンです。WebGL を必要とせず、ブラウザの DOM 内に直接 3‑D グリッドベースの HTML キューブをレンダリングし、対話できるようにします。**色**、**テクスチャ**、複数の **形状**（`cube`、`ramp`、`wedge`、`spike`）および **領域**（任意で `x2, y2` を指定）をサポートしています。

このライブラリは Vue、React、Svelte、またはプレーン JavaScript 用に再利用可能な `<VoxCamera>` と `<VoxScene>` コンポーネントを同梱しています。これらのコンポーネントは一貫したプロパティセットを公開します：カメラコントロール（`zoom`、`pan`、`tilt`、`rotX`、`rotY`、`perspective`、`interactive`、`invert`、`animate`）、シーン設定（`voxels`、グリッド境界 `rows/cols/depth`、`show-walls`、`show-floor`、投影プリセット `cubic` または `dimetric`、および `mergeVoxels`）。

VoxCSS は自動的に見えない隣接ボクセルをカリングし、連続するボクセルをマージして DOM サイズを小さく保ちます。これにより、**2,000 ボクセル以上**のシーンでも効率的なレンダリングが可能です。また、組み込みの MagicaVoxel パーサー（`parseMagicaVoxel`）を備えており、`.vox` ファイルを `renderScene` 用に準備されたボクセルオブジェクトへ変換します。

ライブラリは npm (`@layoutit/voxcss`) または unpkg 経由で入手でき、**MIT ライセンス**の下で公開されています。今後のリリースでは投影プリセットを拡張し、より多くの形状タイプを追加し、マージアルゴリズムをさらに最適化する予定です。これにより、パフォーマンスへの影響を最小限に抑えつつ、さらに大規模なシーンが実現可能になります。

複雑なグラフィックス API を使わずにボクセル作成を簡素化することで、VoxCSS はウェブ開発者やインディー スタジオの参入障壁を下げ、ブラウザ内でリッチな 3‑D 環境を迅速にプロトタイピングできるようにします。

VoxCSS – CSSベースのボクセルエンジン

DOM上に3Dグリッドを構築し、レイヤーを積み重ねて変形させることでHTMLキューブを描画します。
色・テクスチャ・インタラクション・カリング・形状・領域・投影などをサポートし、Vue、React、Svelte、またはプレーンJavaScriptとも互換性があります。

詳細とモデル例は voxcss.com をご覧ください。

インストール

npm install @layoutit/voxcss

Unpkg から直接読み込むことも可能です。以下に最小構成のサンプルを示します。

<div id="voxcss"></div>

<script type="module">
  import { renderScene } from "https://unpkg.com/@layoutit/voxcss@latest/dist/index.js";

  renderScene({
    element: document.getElementById("voxcss"),
    camera: { interactive: true },
    scene: {
      voxels: [
        { x: 3, y: 3, z: 0 },
        { x: 3, y: 3, z: 1 }
      ],
      showFloor: true
    }
  });
</script>

フレームワーク用コンポーネント

Vue、React、Svelte 向けラッパーは同一のプロパティを持つ同等のコンポーネントを公開します。

```
<VoxCamera>
```
– ビューポイント（ズーム・パン・チルト・回転・透視）の制御。
```
<VoxScene>
```
– ボクセル配列を受け取り、3Dグリッドを管理。

import { VoxCamera, VoxScene } from "@layoutit/voxcss/react";

export default function App() {
  const voxels = [{ x: 1, y: 1, z: 0, color: "#f00" }];

  return (
    <VoxCamera interactive>
      <VoxScene voxels={voxels} />
    </VoxCamera>
  );
}

APIリファレンス

VoxCamera

のプロパティ

Prop	説明
`zoom` , `pan` , `tilt`	カメラの前後移動、上下・左右の平行移動。
`rotX` , `rotY`	X/Y軸回転。
`perspective`	CSS透視深度を制御（無効化も可）。
`interactive`	ポインタドラッグで操作可能にする。
`invert`	ドラッグ方向を反転。
`animate`	カメラの自動回転。 `true` 、数値（速度）、または `{ axis, speed, pauseOnInteraction }` を指定可。

VoxScene

のプロパティ

Prop	説明
`voxels`	ボクセルオブジェクトの配列（デフォルト：空）。
`rows` , `cols` , `depth`	推定範囲を上書きし、グリッドサイズを明示的に設定。
`show-walls` , `show-floor`	構造面（壁・床）の表示切替。
`projection`	`"cubic"` または `"dimetric"` のプリセットでレイヤー間隔を変更（50/25 px）。
`mergeVoxels`	隣接するキューブを大きな領域にまとめてパフォーマンス向上。 `true` 、 `false` 、または数値閾値を指定可。デフォルトでは 2000 ボクセル以上のシーンで自動マージが有効。

ボクセルデータモデル

各ボクセルは1セルを記述します。

```
x, y, z
```
– 必須整数座標（領域足跡用に
```
x2/y2
```
は任意）。
```
shape
```
–
```
"cube"
```
（既定）、
```
"ramp"
```
、
```
"wedge"
```
、または
```
"spike"
```
。
```
color
```
/
```
texture
```
– 単色塗りつぶしまたは画像URL。
```
rot
```
– 角度（°）。ランプ/ウェッジ/スパイクは90°単位でスナップ。

例

const voxels = [
  { x: 2, y: 2, z: 0, color: "#f97316" },
  { x: 3, y: 2, z: 0, shape: "ramp", rot: 90, color: "#94a3b8" },
  { x: 3, y: 3, z: 0, texture: "/example.png" }
];

パフォーマンス

VoxCSS は全てを DOM 上に描画します。パフォーマンスはブラウザが管理すべき要素数に依存します。エンジンは隣接情報とカメラ回転に基づいてカリングし、可視面のみを描画することで負荷を軽減します。

mergeVoxels

は重要です。各キューブを個別に描画する代わりに、レイヤーごとに隣接ボクセルをスキャンし、X/Y方向で大きな長方形へまとめます。自動マージは 2000 ボクセル超のシーンで有効になり、DOM サイズを劇的に削減できます。

MagicaVoxel (.vox) ファイルの読み込み

import { parseMagicaVoxel, renderScene } from "@layoutit/voxcss";

const rootEl = document.getElementById("voxcss");

fetch("/models/example.vox")
  .then(r => r.arrayBuffer())
  .then(buffer => parseMagicaVoxel(buffer))
  .then(({ voxels }) => {
    renderScene({
      element: rootEl,
      camera: { interactive: true },
      scene: { voxels, showFloor: true }
    });
  });

Show HN: VoxCSS – A DOM based voxel engine

Japanese Translation:

インストール

フレームワーク用コンポーネント

APIリファレンス

`VoxCamera`
のプロパティ

`VoxScene`
のプロパティ

ボクセルデータモデル

パフォーマンス

MagicaVoxel (.vox) ファイルの読み込み

関連プロジェクト

ライセンス

同じ日のほかのニュース