Anime AR Stock

テックブログ

Vol.1

最初はサーバーで推論していた — anime-ar-stock がブラウザ完結に移るまで

  • Architecture
  • TF.js
  • Firebase Hosting
  • Cloud Run

Vol.2

カメラは「開けば映る」では済まない — Chrome の 300×150、Center Stage、OBS 仮想カメラ

  • getUserMedia
  • iOS Safari
  • Chrome
  • macOS

Vol.3

Chrome で 21 点が 1 点に潰れた — Legacy Hands から Tasks Vision への移行

  • MediaPipe
  • Tasks Vision
  • Chrome
  • landmarks

Vol.4

十二支の印を CNN で分類する — RandomForest から 6,267 枚の CNN まで

  • TF.js
  • CNN
  • Keras
  • on-device

Vol.5

印が「通った」と判定するまで — 350ms の保持、1.5 秒の溜め、音声認識の遅れ

  • state machine
  • debounce
  • Call Studio

Vol.6

カメラ映像に Three.js を重ねる — 直交カメラ、root.scale = 17、Bloom の解像度

  • Three.js
  • overlay
  • Bloom

Vol.7

品質プリセットを 1 つのテーブルにする — そして auto 判定の落とし穴

  • quality
  • mobile GPU
  • auto detection

Vol.8

粒子は Points + Shader、雷はオブジェクトプール — 千鳥で見つけた満杯プールの無駄

  • particles
  • WebGL
  • object pool

Vol.9

声で発動し、音を録画に残す — マイクとスピーカーが同じ音声セッションを取り合う

  • Web Speech API
  • Web Audio
  • iOS Safari
  • screen recording

Vol.10

人物マスクで前後関係を作る — Selfie Segmentation を Hands と同時に起動してはいけない

  • Selfie Segmentation
  • occlusion
  • WASM

Vol.11

メインスレッドを止めない — 10 分固まるモデル読み込み、120fps の描画、録画に映る HUD

  • main thread
  • Web Worker
  • perf HUD
  • OBS

Vol.12

杖の先端を推定する独自モデル — 59 枚から 397 枚、閾値 0.08 が本物を弾いていた話

  • custom model
  • keypoints
  • Web Worker
  • training data