Hakoniwa Vault

★ Featured

VRM や GLB を含む 3D モデルを「収集・整理・展示・撮影」できる統合管理ソフト。

An integrated 3D asset manager for collecting, organizing, displaying, and capturing VRM, GLB, FBX, and OBJ models.

tool_3d active paid Web / Windows 2025-12 — 2026-03

概要

Hakoniwa Vault は、GLB / GLTF / FBX / OBJ / VRM 形式の 3D モデルを一元管理するためのソフトウェアです。タグ・評価・メモを使ったコレクション管理に加えて、複数のモデルを自由に配置して自作のジオラマを組めるワークスペース、SSAO・被写界深度・カラーグレーディング等の描画機能を備えるショーケースモード、キーフレームでカメラワークを組めるシネマティック・パスファインダーまでを一本にまとめています。VRM モデルは表情・ポーズ・スプリングボーン(髪揺れ)まで対応し、コレクション目的でも撮影目的でも使えます。

Overview

Hakoniwa Vault is a desktop and web application that brings 3D model collecting, organizing, displaying, and creative composition into a single workflow. It handles GLB, GLTF, FBX, OBJ, and VRM models, with rich metadata (tags, rating, notes), a free-form workspace for building dioramas from multiple models, and a "showcase" mode with SSAO, depth-of-field, and color grading for high-quality renders. VRM is supported end-to-end, including facial expressions, poses, and spring-bone hair physics, so the same library works for both archival and photography use cases.

動機・経緯

とあるシミュレーションゲームを作っているとき、ゲームで使用するアセットが数百種類まで溜まっていることがありました。それらを「どういうモデルなのか、大きさや角度はどうなっているか」を一目で確認したかったのですが、既存の 3D モデルビューワには求めるものがなく、自作することにしました。

技術的なポイント

レンダリングは Three.js で行い、VRM の表情・ポーズ・スプリングボーン物理は VRM 公式ライブラリ群(pixiv 社が公開している three-vrm 系)に委譲する構成です。Three.js は描画 API なのでそのままではテストにかけづらく、Three.js 側を差し替え可能なモック層を別途用意してロジックだけを安定して単体テストできるようにしています。アセット管理は独自のメタデータレイヤー(タグ・評価・メモ・テクスチャバリエーション)を持ち、元モデルファイルを書き換えずに差分情報として保存します。プロモードの描画機能(SSAO・被写界深度・カラーグレーディング)と、ポアソン・ディスク配置やフラクタル・インスタンシングといったプロシージャル配置機能を持つ点が、単なるビューワーとの差別化要素です。

苦労した点・学んだこと

Three.js 自体が初めてだったので、一から仕様を理解するところに労力を割きました。特に苦労したのは、さまざまな 3D モデル拡張子の対応です。これらを適切に変換したり、古いバージョンで作成されたものでも正しく表示されないといけない、今後のことを考えると保守性も担保しなければならない、という多面的な要件が絡んでくる中で、アーキテクチャの重要性を非常に学びました。

現状とこれから

2026 年 3 月時点のバージョン 0.7.5 が最新で、テクスチャバリエーション機能とサムネイル更新挙動の改善が直近の変更内容です。シネマティック・パスファインダー、プロシージャル配置、GIF 録画 UI などの拡張がここ数バージョンで連続して入っており、開発はアクティブに継続中です。今後の追加機能の方針は配布ページにあるロードマップを参照してください。

技術スタック

  • Three.js
  • @pixiv/three-vrm
  • @pixiv/three-vrm-animation
  • Jest
  • JavaScript

関連プロジェクト

作品一覧に戻る