More than 5 years have passed since last update.

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

Last updated at 2018-10-29Posted at 2018-10-29

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.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 など任意のタイミングで