Guide

ブラウザで動く映像技術

WebGL・Three.js・p5.js・Hydra・ISF の系譜

Hydra や AUTOVJCLUB のように「ブラウザを開くだけで動く VJ」が 2020 年代に成立しているのは、10 年以上かけて整備されたオープンソース技術スタックのおかげです。このページでは WebGL・Three.js・p5.js・Hydra・ISF という主要レイヤを、リリース年と作者を添えて系譜順に並べます。技術者向けの入口記事です。

読了時間
約6分
目的
ブラウザ映像技術の系譜を把握
対象読者
エンジニア・開発に興味がある VJ
前提知識
JavaScript の基礎があると理解が早い
ブラウザで動く映像技術

主要レイヤと代表ライブラリ

WebGL — 2011 年 3 月正式公開
Khronos Group が策定した、ブラウザから GPU にアクセスする OpenGL ES 2.0 ベースの API。WebGL 2(2017 年公開)で OpenGL ES 3.0 相当に。現在のブラウザ映像処理の土台。後継 WebGPU が 2023 年 Chrome で安定版化。
Three.js — 2010 年 Mr.doob(Ricardo Cabello)
WebGL を抽象化する 3D エンジン。シーン/カメラ/ライト/マテリアルという Unity / Unreal ライクな API で、3D 映像の制作ハードルを一気に下げた。GitHub スター 10 万超のデファクト。
p5.js — 2013 年 Lauren McCarthy
Processing(Ben Fry + Casey Reas, 2001〜)を JavaScript に移植した教育寄りのクリエイティブコーディング環境。アートスクール/ワークショップでの採用が多く、Hydra 以前の "ブラウザで映像" の定番。
Hydra — 2017 年 Olivia Jack
ブラウザでライブコーディング VJ ができる環境。WebGL framebuffer をアナログモジュラーシンセ風にチェーンし、WebRTC でピア配信可能。International Conference on Live Coding(2017)でワークショップ公開。オープンソース、URL を共有するだけで即パフォーマンスが成立する軽さで、ライブパフォーマンスの敷居を一段下げた。
ISF (Interactive Shader Format) — 2013 年 VIDVOX 策定
GLSL フラグメントシェーダに JSON メタを付けたオープン規格。現行 2.0。VJ ソフト/メディアサーバ/NLE 間でシェーダを共通フォーマットとして渡せる。200+ の公式シェーダがオープンソースで利用可能。VDMX / Resolume / MadMapper などが対応。

周辺の Web API

映像以外にも VJ を支える Web API が揃っています。Web Audio API(2011 年)はオーディオ解析のエンジン。AnalyserNode で FFT を取り、リアルタイムで音量・周波数スペクトル・オンセット検出を行えます。WebMIDI API(2015 年)で Launchpad や APC Mini を直接叩けるようになり、WebRTC(2013 年)でピアツーピアの映像ストリーミングが可能に。これらが揃って初めて「ブラウザ 1 枚で VJ」が完結します。

AUTOVJCLUB の技術スタックもこの系譜に乗っています。WebGL で映像描画、Web Audio API で曲認識用オーディオを取得(ACRCloud へ送信)、WebMIDI でコントローラー対応、ブラウザ間通信で別デバイスからの遠隔操作——Hydra の思想と地続きの設計です。