マトリックス風「トロン」をリアルタイムで実現するHTML5デモのスゴイところ【@maskin】

• About
• Latest Posts

maskin

Editor In Chief at TechWave.jp

1990年代初頭から記者としてまた起業家としてITスタートアップ業界のハードウェアからソフトウェアの事業創出に関わる。シリコンバレーやEU等でのスタートアップを経験。日本ではネットエイジ等に所属、大手企業の新規事業創出に協力。ブログやSNS、LINEなどの誕生から普及成長までを最前線で見てきた生き字引として注目される。通信キャリアのニュースポータルの創業デスクとして数億PV事業に。世界最大IT系メディア（スペイン）の元日本編集長、World Innovation Lab(WiL)などを経て、現在、スタートアップ支援側の取り組みに注力中。

Latest posts by maskin (see all)

• 「ソラコム」がスイングバイIPOを実現、東証グロース市場上場承認 - 2024-02-22
• （更新）結果速報 LAUNCHPAD SEED#IVS2023 #IVS #IVS @IVS_Official - 2023-03-09
• 「始動 Next Innovator 2022」締め切りは9月5日（月）正午ー経産省・JETRO主催のイノベーター育成プログラム #始動2022 - 2022-09-01

[読了時間:2分]

　トップページで強制的にFlashムービーを再生させる最低の手法を筆頭にFlashコンテンツがどんどん減り、HTML5を中心とした技術に取って代わりつつある。現状では「FlashのほうがCPU能力を消費しにくい」というレポートがあるなど全面的に優位性があるわけではないが、このデモのようにマシンパワーを浪費しつつも、今まではできないとされていた表現の壁を崩しつつある。

　冒頭のスナップショットは、最近リメイクされた映画「トロン レガシー」の旧作版「トロン」（1982年製作）の映像をリアルタイム画像処理にかけているところ。大層なサーバー群で演算→ストリーミングで配信しているのではなく、再生している端末上でHTML5ビデオを変換してCANVAS要素に表示させている。

　このHTML5ビデオは1秒あたり30フレームを表現しており、筆者のMac Book (Core2Duo 2GHz、4GBメモリー）ではマトリックス風視覚効果をかけてもスムーズに再生されるものの、CPUの消費率は100％と全開だった。この点は、デモページにも注記されている。

　しかしながら、このようなシステムをフロントエンド側（サーバー側をバックエンドととらえたHTMLコーディング側）だけで実現してしまうとなると、クリエイティブの現場のみならず、最近シンクライアント的なスペックが多い消費者向けパソコンの世界にも大きな影響を及ぼすのは必至と言えるだろう。

■ 関連URL
・Real-time video processing with html5 video + canvas + javascript + css.
http://www.barbafan.de/html5video?video=tron

蛇足：僕はこう思ったッス

デモサイトのソースを見てもらえればわかる通り、変換制御はJavaScriptだけで行っている。サーバーサイドであれこれやってないということにプチ感動。ハードディスク上のデータをクラウド（サーバー）に置く流れがある一方、アプリケーションや各機能をHTML5によってクライアント（端末）側に構築する流れが生まれている模様。このように或る種の統一的な流れが生まれると、パソコンを筆頭としたネット端末向けのアプリマーケットの勢力が拡大するように思える。「データ」「コンテンツ」「アプリ」が分離しつつ融合するマーケット。これは20年くらい前に多くの人が夢見た「ハイパーコンテンツ」的構図のように思える。すでにiPhoneで実施しているAppleのみならずAndroid、Mozillaなども参入してくるだろうが、ここに日本発の流れが出てきてもいいと思う。