01
NASU HACKATHON
ハッカソンをしに、那須までいった。
現地で撮ったものを、どうやってWebへ持ってくるか。まずは那須で、撮影から表示までを一気に試しました。
Field NotesNASU HACKATHON / 2026
GawaTech / Nasu Hackathon
ハッカソンをしに、那須までいった。
現地で撮ったものを、どうやってWebへ持ってくるか。Luma AIで見える形にし、3D Tilesで配信し、forkしたライブラリをメンテしながら、最後はWebXRまで試しました。
runtime: ready
local tileset / eggplant
B3DM in the browser.
Next.js App RouterTypeScriptThree.js3D Tiles / B3DMNASA AMMOS rendererNYTimes 3D Tiles samplesWebGPU → WebGL 2WebXR
04
story experiences
02
local tilesets
01
camera editor
XR
immersive mode
The actual pipeline
撮れた。でも、そこからが長かった。
Luma AIでモデルは生成できました。ただ、Luma AIのCaptureと、メッシュ＋テクスチャを前提にする3D Tilesでは、データの持ち方が違います。単純なファイル変換だけでは、見えていた質感や細部をそのまま保てませんでした。
02
LUMA AI
スキャンして、モデルを生成する
Luma AIで現地の様子からモデルを生成できました。撮ったものがすぐに見える、共有できるところまで持っていけるのは素晴らしい。
03
CAPTURE TO 3D TILES
でも、ファイル変換で詰まった
Luma AIのCaptureはGaussian SplattingやNeRF系の表現として見た目を再現します。一方、3D Tilesはメッシュやテクスチャをタイル単位で配信する仕組み。単純に変換すると、見えていた質感や細部をきれいに保てませんでした。
04
NASA AMMOS / 3D TILES
今回は、NASA AMMOSでナスを出す
変換の別ルートとして、NASA AMMOSの3d-tiles-rendererをThree.jsに接続。那須ハッカソンでは、ローカルのB3DMをブラウザへ出しました。
05
IMMERSIVE WEB
最後は、WebXRへ
Lumaで残したもの、3D Tilesで配信したものを、最後はヘッドセットの中へ。見る・読む・触るを同じ流れで試します。
Forks are part of the product
ライブラリも、自分で面倒を見る。
4〜5年メンテナンスされていなかったライブラリをforkし、自分の作品に必要なところから直しています。Three.jsの新しいバージョンや3D Tilesの新しい機能を使えるようにして、次の実験へ持っていける状態を保ちます。
GitHub profile@kagawa0710/three-story-controls
three-story-controls
4〜5年メンテナンスされていなかったライブラリをfork。CameraRig、ScrollControls、CameraHelperを、Three.jsの新しいバージョンで使えるように整えています。
@kagawa0710/three-loader-3dtiles
three-loader-3dtiles
3D Tiles loaderも同じようにforkしてメンテしています。新しい3D Tilesの機能を追いかけていますが、今回は那須ハッカソンなのでNASA AMMOSのrendererを利用しました。
How the eggplant appears
ただのモデル表示を、ストーリーにする。
Tilesetを読むだけでは終わらせず、カメラの位置・向き・画角を記録。スクロール、ポインター視差、VR自動再生を同じCameraRigに載せています。
story.ts
const tilesRenderer = new TilesRenderer(
"/nasu/eggplant/tileset.json"
);
tilesRenderer.registerPlugin(
createTilesGltfPlugin(renderer)
);
const rig = new CameraRig(camera, scene);
rig.setAnimationClip(storyClip);
const scroll = new ScrollControls(rig, {
scrollElement,
cameraStart: "0%",
cameraEnd: "100%",
});the next experiment
ナスを、ヘッドセットの中へ。
WebGPUで通常表示。WebXRに入るとWebGL 2へ切り替え、カメラストーリーを自動で走らせます。まずはブラウザで試せます。