松田光秀

HTML5の技術だけで実装!「YouTubeみたいなWebGLプレーヤー」とは?

この記事では、HTML5 Japan Cup 2014で優秀賞を頂いた「YouTubeみたいなWebGLプレーヤー」で利用されている技術を解説します。

はじめに

YouTubeみたいなWebGLプレーヤー」はコンテンツそのものとは分離された、オープンソースJavaScriptライブラリ「jThree」のプラグインです。オープンソースとして公開していますので、誰でも自身の作品に差し替えてブログなどに掲載することができます。WebGLの描画部分は全てjThreeで管理しています。この記事では、プレーヤーで採用している2つのHTML5 APIとjThreeの概要をご紹介します。

プレーヤーの機能

このプレーヤーは、まるで動画のごとくWebGLコンテンツを楽曲付きで再生できます。動画との違いはコンテンツ内のオブジェクトを自由に操作できることです。私が作ったものはカメラのアングルを操作するだけですがJavaScriptでできることなら実装可能です。 Oculus Rift表示に切り替えるボタンが標準搭載されておりVR体験を楽しむこともできます。

SVGで作成した再生ボタン

プレーヤーの中央に表示される赤い再生ボタンは、インラインSVGで描画しています。CSSを合わせても600バイト以下で画像よりデータ量を抑えられたのがポイントでした。WebGLに対応しているブラウザは、全てSVGをサポートしているので惜しみなく使うことができます。

1

再生ボタンのHTMLは以下の通りです。

Fullscreen APIで全画面表示機能を実現

プレーヤー右下の全画面表示ボタンを押すと、Fullscreen APIによってブラウザの枠も越えて、PC画面いっぱいにコンテンツが表示されます。プレーヤーはVRデバイスのOculus Riftにも対応しているため、より高い没入感を得るために必須の機能です。

2

全画面表示を切り替えるJavaScriptのコードは以下のとおりです。

オープンソースJavaScriptライブラリ「jThree」

今回の作品のベースとなっているオープンソースJavaScriptライブラリ「jThree」についてご紹介します。今回紹介したプレーヤーとそれで再生するコンテンツ(WebGL)は「jThree」を使うことで、jQueryによく似た記法で操作・作成することができます。

「jThree」は8/31に「jThree v2」をリリースしました。これまで外部XMLファイルに記述していたWebGL描画タグをHTMLに埋め込めるようになりました。つまり、jThree v2は「インラインWebGL」を実現したのです。外部ファイルに頼らずHTMLファイル1つだけで描画することが可能で、当然アニメーションさせる前段階の静的な描画処理にはJavaScriptを一行も書く必要がありません。

jQuery関数の代わりにjThree関数を使ってDOMを操作することにより、動的な描画処理ができる点は従来通りです。さらに、これまでjThreeはMMD(.pmx/.vmd)のデータにしか対応していませんでしたが、v2からはプラグインによってあらゆるファイル形式を読み込めるようにもなりました。

jThree v2公開と同時にthree.js用JSON(.json/.js)・DirectX(.x)・Collada(.dae)・STL(.stl)の各ファイルに対応したプラグインを公式で用意しています。OBJ(.obj)とMTL(.mtl)ファイルにも順次対応予定です。

街

詳しい「jThree」の解説は、私が執筆したCodezineさんの記事をご覧ください。

※ jThree v2に対応したプレーヤーはありません。公式サイトでの配布も終了するのでプレーヤーを使ってみたい方はCodezineさんの第6回記事からサンプルファイルをDLしてお使いください。 jThreeプレーヤープラグインの使い方

最後に

今回は、「jThree」のプラグインとして開発した「YouTubeみたいなWebGLプレーヤー」の要素技術について解説しましたしました。最優秀賞を獲れなかったことは非常に残念ですが、誰もがこのプレーヤーのように手軽にWebで3DCGを楽しめる世界を実現することを目指し、開発を続けていきます。

3

まだデータがありません。

Powered byNTT Communications

tag list

アクセシビリティ イベント エンタープライズ デザイン ハイブリッド パフォーマンス ブラウザ プログラミング マークアップ モバイル 海外 高速化 Angular2 AngularJS Chrome Cordova CSS de:code ECMAScript Edge Firefox Google Google I/O 2014 HTML5 Conference 2013 html5j IoT JavaScript Microsoft Mozilla Node.js PhoneGap Polymer React Safari SkyWay TypeScript UI UX W3C W3C仕様 Webアプリ Web Components WebGL WebRTC WebSocket