Unity WebGL UnityStreamingMovieTexture(WebGLMovieTexture)が動画再生を実現している仕組み

Unity 5の頃の話なので、今は他の手法が取れると思います

https://github.com/jtothebell/UnityStreamingMovieTexture を Unity に組み込むときに調べたことをメモしています
せっかく調べて、「面白い仕組みだな」と思ったので供養しておこうと思います

当時は WebGL 上で MovieTexture が利用できない、という状況でした。それらを踏まえて読んでいただけると幸いです

やったこと

• WebGL では動画再生のために EasyMovieTexture は使えない (Unity 5.x の頃)
• ので、 WebGLMovieTexture というものを利用した
  • 2018/10/29 現在は https://github.com/jtothebell/UnityStreamingMovieTexture にコードがある
  • EasyMovieTexture は再生制御はいい感じにやってくれるのだが、WebGLMovieTexture は若干クセがある
    • WebGLMovieTexture の時だけ、Update 関数内で texture の Update を実施するように実装してあげる必要がある
    • なぜ、こんなことをしたかというと、下記の「WebGLMovieTexture の仕組み」を読んでもらえればわかると思う

WebGLMovieTexture の仕組み

• WebGLMovieTexture.jslib (ソースコードはこちら) というものと、Unity 側で jslib を利用するための cs ファイルが入っている
• 描画の仕組みは以下の通り
  • WebGLMovieTexture は HTML5 の video タグを利用していて、そこに描画された画像を Unity 側に通知することで機能を実現している
    • video タグ自体には display: none あたりが設定されているためユーザには見えない
  • WebGLMovieTexture インスタンスによって video タグが生成される
  • WebGLMovieTextureUpdate は、テクスチャとしてマッピングしたい texture と video インスタンスが引数に渡される
    • ここで、 video インスタンスから OpenGL で video タグにレンダリングされている画像を読み込み、引数で渡された texture にレンダリングする
    • GLctx.textImage2D や GLctx.pixelStorei とかを使っている
  • WebGLMovieTextureUpdate を連続して実行することで動画（っぽく）見せている
    • ちなみに、この関数を呼ぶタイミングは Unity の Update のタイミングにするとよい。
    • WebGLMovieTexture インスタンス生成自体は Awake など任意のタイミングで