Anime AR Stock

Tech Blog

Vol.1

We started with server inference — how anime-ar-stock moved fully into the browser

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

Vol.2

The camera is not just “open it and it works” — Chrome’s 300×150, Center Stage, and OBS virtual cameras

  • getUserMedia
  • iOS Safari
  • Chrome
  • macOS

Vol.3

All 21 landmarks collapsed to one point on Chrome — moving from legacy Hands to Tasks Vision

  • MediaPipe
  • Tasks Vision
  • Chrome
  • landmarks

Vol.4

Classifying the twelve hand signs with a CNN — from RandomForest to a 6,267-image CNN

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

Vol.5

When a sign actually “counts” — a 350 ms hold, a 1.5 s wind-up, and speech-recognition lag

  • state machine
  • debounce
  • Call Studio

Vol.6

Layering Three.js on the camera feed — an ortho camera, root.scale = 17, and bloom resolution

  • Three.js
  • overlay
  • Bloom

Vol.7

One table for quality presets — and the trap in auto detection

  • quality
  • mobile GPU
  • auto detection

Vol.8

Particles via Points + shaders, lightning via object pools — the full-pool waste we found in Chidori

  • particles
  • WebGL
  • object pool

Vol.9

Casting by voice and getting the sound into recordings — when mic and speaker fight over one audio session

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

Vol.10

Depth from a person mask — never start Selfie Segmentation at the same time as Hands

  • Selfie Segmentation
  • occlusion
  • WASM

Vol.11

Keeping the main thread alive — a model load that froze for 10 minutes, 120 fps rendering, and a HUD in the recording

  • main thread
  • Web Worker
  • perf HUD
  • OBS

Vol.12

A custom model for the wand tip — from 59 to 397 images, and the 0.08 threshold that rejected real wands

  • custom model
  • keypoints
  • Web Worker
  • training data