増井 雄一郎

ブラウザで3Dグラフィックを扱うWebGL、最新版 2.0のドラフト版が公開

2013/9/16、WebGL Working Groupはブラウザで3Dグラフィックを扱うWebGLの最新版 WebGL 2.0のドラフト版が公開しました。

WebGL 2の最大の特徴は、2012年10月に標準化された組み込み向け3DグラフィックAPIのOpenGL ES 3.0の機能をベースにしているところです。

OpenGL ESは3DグラフィックをサポートするためのAPIで、WebGLではこの機能をブラウザ内で使えるようにすることで、ゲーム機の3Dグラフィックのような高度な3D表現をJavascriptから操作することが可能になります。

既に多くのブラウザではWebGL 1をサポートしており、すでにゲームを中心に使われる様になってきました。ChromeのCMでも使われていたChrome World Wide Mazeで使われていたので、実はWebGLを見たことがある人は多いと思います。(本記事ではWebGL 1.0をWebGL 1と表記します)

WebGL 2では、WebGL 1をベースに上位互換性を保ちつつ、さらなるパフォーマンス向上と多くの機能強化を行ってきました。

WebGL 2の特徴

WebGL 2はOpenGL ES 3.0をベースとしているため、その特徴をそのまま引き継いでいます。 大きな特徴は、陰影処理やマッピングなどの高度な表現の最適化です。3Dグラフィックでもリアリティある表現が多く求められるようになり、そのような複雑な処理を行いやすくする機能が充実しています。

Brandon Jones氏は、TojiCode: What’s coming in WebGL 2.0にて、WebGL 2の特徴と新機能を次のようにまとめています。各項目の詳細については元記事を参照してください

特徴

  • Multiple Render Targets – 陰影処理などの遅延を行うDeferred Shadingの基礎技術
  • Instancing – 同じオブジェクトが沢山ある処理を早くする
  • Vertex Array Objects – 頂点計算の処理をまとめて行う
  • Fragment Depth – フラグメントのデプス値をサポート

新機能

  • Multisampled Renderbuffers
  • 3D Texture
  • Sampler Objects
  • Uniform Buffer Objects
  • Sync Objects
  • Query Objects
  • Transform Feedback

実装状況

WebGL 2は、Firefoxで実装が進められており、現在公開されているNightly buildで動かすことができます。

Mozilla WikiのWebGL2ページでは、サンプルコードも掲載されており、自分で試すことができます。

まとまったデモのソースコードなどはまだ公開されていませんが、下記の多くのオブジェクトを影付きで動かすデモがYoutubeで公開されています。

今後、Web上でも3D表現を使ったゲームやコンテンツが増えていくと予想されます。

WebGLの最大の問題は、Internet Explorerではサポートされていないことだと言われてきましたが、現在ベータ版のInternet Explorer 11からWebGL 1のサポートを開始しました。これによりさらにWebGLによる開発が活発化していくでしょう。

3Dグラフィックの分野は、まだまだ発展中の分野で新機能やパフォーマンスの向上が継続的に行われています。

WebGL 2はOpenGL ES 3.0という最新の3Dグラフィック環境を、ブラウザとJavascriptで試すことができるため、3Dプログラミングに興味のある方は注目してみると面白いのではないでしょうか。

Powered byNTT Communications

tag list

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