連載

2011年11月21日

【第22回 HTML5とか勉強会レポート】 Processing.js、SVG、WebGL。HTML5周辺のグラフィック関連技術：D89クリップ（30）

Processing.js、SVG、WebGLなど、HTML5周辺のグラフィック関連技術を勉強しよう。第22回 HTML5とか勉強会レポート

[@akio0911，拡張現実ライフ] PC用表示関連情報

LINE

Hatena

HTML5による最新Webアプリ

　2011年10月26日、品川グランドセントラルタワーのマイクロソフト品川本社にて、「第22回 HTML5とか勉強会」が開催された。HTML5とか勉強会は、HTML5に関心のあるエンジニアやコーダー、デザイナー向けの勉強会だ。今回のテーマは「グラフィック関連API」。当日の様子をお伝えしよう。

Processing.jsってなんだ？

　まず、ゼロベースの田中氏（@dotimpact）からプレゼンがスタートした。田中氏は美術大学で非常勤講師をしたり、Processingの入門書執筆なども手掛けている。

Processingとは

　田中氏のプレゼンは、Processingの紹介から始まった。田中氏の＠ITでのProcessingの記事「Processingの対話式スケッチプログラミングで遊ぼう」も参照いただきたい。

　Processingは2001年、MITメディアラボ発で、ベン・フライ、ケイシー・リースらが開発したオープンソースプロジェクト。デザイナー・アーティストのためのグラフィック操作に特化したプログラミング環境である。

　特徴として、超簡潔な文法とAPI、Javaベースでステップ実行が可能、そして海外で強力なユーザーコミュニティや活用例があることが挙げられた。

　国内でのProcessing周りの状況としては、入門書がすでに多数出版されており、プログラム授業の教材やホビープログラミングの用途で活用されている。

Processing.jsとは

　Processing.jsは、そんなProcessingのコードをWeb上で実行するJavaScriptライブラリである。2008年、jQueryの作者であるJohn Lessigがプロトタイプを開発。Processing 2.0ではProcessing.jsに正式対応予定だそうっだ。

　ParserがProcessingのコードをJSに変換し、ProcessingのAPIをCanvasでエミュレートするという仕組み。APIについては9割以上が実装済みだ。

　Processing APIは2D描画命令を備えており、Canvas描画のwrapperとなっている。Point、line、 rect、 ellipseなどのAPIが用意されている。

　また、Processing APIは3D描画命令も備えており、size命令で3Dモードを指定すれば使用できる。3D描画命令はWebGLのwrapperになっており、box、 sphere、 camera、 lightsなどのAPIが用意されている。

　画像・ピクセルを操作するAPIも使用できる。@pjsディレクティブで画像をプリロードする。loadImage、 image、filter、 copyなどのAPIが用意されている。

　Processing.jsのメリットとして、Processingの既存ソースコードをそのまま動かせる、Processingコミュニティのビジュアルプログラミングに関する情報を参考にしやすい、APIのみをCanvas描画ライブラリとして使用することも可能、といった点が挙げられた。

　また、Processing.jsのデメリットとして、動かないProcessingコードが一部存在すること、起動時のコード変換コストが掛かること、そして変換コードの実行パフォーマンスなどが挙げられた。

BCCKSの紹介

　田中氏がWeb版リーダーとエディタを開発した電子書籍プラットフォーム「BCCKS」も併せて紹介された。

BCCKS / ブックス

　実は今回のProcessing.jsに関するプレゼンのスライドも、BCCKSによって作られていることが明かされた。

　BCCKSリーダー＆エディタでは、Drag and Drop API、File API、Canvasによるページサムネイル作成などでHTML5が活用されている。

　Processing.jsをインタラクティブ書籍のスクリプト言語にできないか？ということで、あくまで発表用の実験（BCCKSでは実装の予定はなし）としながらも、BCCKS + Processing.jsによる、HTML5を使ったインタラクティブな電子書籍リーダーのデモが行われた。

SVG Overview

　グリーの渡辺氏（@sassy_watson）による発表。

　渡辺氏は今までに組み込みWebブラウザのレンダリングエンジンの開発や、Android版WebKitベースブラウザアプリケーションの開発などを行ってきたとのこと。

SVGとは何か？

　SVGは、Scalable Vector Graphicsの略で、拡大縮小可能なベクター画像のフォーマットである。ピクセルの情報ではなく、位置や線の引き方に関する情報を持っていて、計算してから描画する仕組みとのこと。

　拡大・縮小しても同じ画像品質を保てるので、さまざまなデバイスに対応でき、大抵のブラウザでサポートされているとのこと。

　SVGはXMLで記述され、ルートの要素は<svg>。名前空間は http://www.w3.org/2000/svg である。

SVGをHTML5で使う方法

　HTML5ではSVGを使用することができる。インラインで記述、<object>要素で記述、<img>要素/background-imageプロパティを使うという3つの方法で使用が可能とのことである。

　SVGは画像なので、<img>要素やbackground-imageプロパティでも指定することができる。また、list-style-imageプロパティでマーカーにも指定可能である。ただし、scriptが動かないので、注意が必要とのことだった。

　また、SVGの中でHTMLのような他のマークアップを使いたいときは<foreignObject>を使えば良いとのことだ。

SVGの仕様について

　今回のプレゼンでは、グラフィック要素、座標変換、アニメーション、グラデーションなどの仕様について説明がなされた。

　SVGが扱うグラフィックス要素としては、ベクター画像、ラスタ画像、テキストなどが存在するとのこと。

　基本図形として、rect、circle、ellipse、line、polyline、polygonなどが用意されており、これらを用いることで簡単に図形を描画することが可能だそうだ。

　画像は<image>要素で指定可能、PNG、 JPEG、 SVGが使用できるとのこと。位置(x,y)と幅(width)、高さ(height)を指定し、画像はxlink:hrefで指定するとのことだ。

　テキストは<text>要素で指定できる。位置(x,y)を必ず指定する必要がある。rotate属性でテキストを回転させることも可能で、<tspan>要素で文字の一部の位置やスタイルを変えることが可能である。

　座標系の変換は、transform属性で行うことができる。translate、scale、rotate、skew、matrixなどの変換が可能である。

　transform(scale)では、scale(倍率)で拡大・縮小を指定でき、transform(rotate)では、rotate(回転角度)で回転を指定することができる。transform(skew)では、skewX(X軸ズレの角度)でX方向変形、skewY(Y軸ズレの角度)でY方向変形をさせることができる。

SVGのアニメーション

　SVGでは、SMIL Animation、そしてSVG DOMによる値の書き換えという2つの方法でアニメーションを行うことができる。

SMIL Animation

　SMIL Animationでは、マークアップで値の変化を記述してアニメーションをさせることができる。SMIL AnimationはSMILの一部を拡張したものであり、animate、set、animateColor、animateMotion、animateTransformといった要素が使用できる。

　animate要素では、アニメーションしたい要素の属性を指定し、属性の値の変化を記述する。beginで開始時間、durでアニメーションを行う時間、fromでアニメーション開始の値、toでアニメーション終了の値、fillでアニメーションが終わった後の状態を指定できる。また、fillにfreezeを指定するとアニメーション終了の状態のまま、removeを指定するとアニメーション開始の状態に戻る。

　set要素は、値を補完する必要がないときに使用する。

　animateMotion要素を使用すると、パスを指定して、パスに沿って動作させることができる。

　animateColor要素では、色を変化させることができる。

　animateTransform要素では、平行移動・拡大縮小・回転などの変換のアニメーションを行うことができる。

DOMを使ったアニメーション

　DOMを使ったアニメーションでは、setAttribute()で値を書き換えてアニメーションを行う。

SVGに関するその他の仕様

　SVGではグラデーションを掛けることができる。linearGradientは線形グラデーション、radialGradientは放射型グラデーションで使用する。

　また、filter要素を使って、グラフィックスオブジェクトに特殊な効果を設定することができる。

　他にもpattern（あるオブジェクトを繰り返し描画）、mask（アルファマスク、透明度による合成）、clipPath（クリップするパスを定義）などが用意されているとのことだ。

WebGLで箱を回してみよう

　にゃまだん氏（@nyamadan）による発表。

　にゃまだん氏は、WebGL、CoffeeScript、MikuMikuDanceなどに興味がある。

WebGLとは

　WebGLは、OpenGL ES 2.0をそのままブラウザに持ってきたような仕様で、JavaScriptによってCanvas要素上で扱えるようになっている。

　OpenGL ES 2.0は組み込み向けの3Dライブラリであり、WebGLを使うと、GPUを使った高速な描画が可能になるそうだ。

動作するブラウザ

　WebGLが動作するブラウザは、Mozilla Firefox、 Google Chrome、 Safari、 Operaなど。IEではIEWebGL、 JebGL、 ChromeFrameなどを使うことで動作させることができる。

ブラウザ上で扱える3D技術

　似たようなものとして、Unity、Flashなどがあり、HelloRacerというサイトで、Flash、Unity、WebGLの動作を確認することができる。WebGLの特徴としては、Unity・Flashと違い、プラグインが不要であることが挙げられる。

WebGLは扱いが難しい？

　WebGLの一般的な印象として、「Webで3Dができるらしい」「GPUが使えるから軽いらしい」「プラグインが必要ないらしい」などが挙げられた。

　また、一般にWebGLは扱いが難しいといわれているが、その理由として、「手続きが多い。三角形を1つ描画するだけでも苦労する」「3Dの数学を理解しなければならない」などが挙げられた。

　しかし、3Dの数学については、基本的に行列とベクトルの四則演算あたりを押さえておけばよく、行列演算については交換法則が成り立たないということを理解しておけばOKとのことだった。

箱を回すだけのプログラム

　今回は色々と省略しつつ、箱を回すだけのプログラムについて解説が行われた。

　まずは、頂点データを渡す必要がある。見掛け上は四角形でも、三角形の組み合わせで表現する必要があるとのことだった。

　次は頂点シェーダによる変換。回転や拡大、カメラ処理を行っていく。

　ラスタライズ処理では、面の内部となるピクセルを塗りつぶしていく。

　最後にフラグメントシェーダ。色を塗る処理を行う。

　以上のように、WebGLでは、HTML(Canvas)、JavaScript(WebGL)、頂点シェーダ(GLSL)、フラグメントシェーダ(GLSL)などを記述していく必要がある。

初期化処理

　初期化処理では、HTML5のCanvasからWebGLコンテキストを取得する。以降、ここで取得したWebGLコンテキストのメソッドを使用していく。

シェーダ

　頂点シェーダとフラグメントシェーダは、GLSLというC言語ライクな言語で記述する。ソース（テキスト）をコンパイルして使用する。Scriptタグに記述されることが多いが、外部ファイルにしてXHRしてもよい。

　頂点シェーダは頂点の集合に対して作用し、出力位置ベクトルの計算を行い、色ベクトルをフラグメントシェーダに渡す。

　フラグメントシェーダはピクセルごとに呼び出され、色を出力する。

　頂点シェーダとフラグメントシェーダをコンパイルしたら、コンパイルしたシェーダを引数に渡してリンクする。これでシェーダプログラムは使用可能になる。

バッファ

　次はバッファを作成する。頂点バッファ(X,Y,Z)、カラーバッファ(R,G,B)、インデックスバッファ(頂点インデックスx3)を使用する。

　頂点バッファには座標の位置、カラーバッファには座標の色、インデックスバッファには面の情報を格納する。

レンダリング

　レンダリングでは描画の初期設定として、クリアする色を決めて、物体の前後関係を有効にし、DOM中のどの位置にレンダリングするのかを設定する必要がある。

　ループ処理では一般的にsetTimeout関数が使われるが、requestAnimationFrameの方が画面が隠れているときにループしないのでオススメである。

まとめ

　やはりWebGLを使うのは結構しんどいが、複雑な処理で真価を発揮するとのことだった。また、今回のプレゼンスライドはThree.jsで作ったとのことだった。

IEでのCanvasと SVGの描画

　日本マイクロソフトの物江修氏による発表。

Internet Explorer 9、CanvasとSVGのサポート状況

　まず、Canvasについて。Canvas 2DはBasic support、Text API for Canvasが使用でき、GPUアクセラレーションも有効であるとのことだった。

　次にSVGについて。SVG 1.1(第2版)、ただしFilters、Fonts、Animationのみ未サポートとのこと。また、GPUアクセラレーションが有効であるとのことだ。

マイクロソフトが提供するCanvas、SVG関連のツール

　Visual Studio向けHTML5ツールとして「Web Standards Update for Microsoft Visual Studio 2010 SP」、SVGの記述を補完するツールとして「SVG Intellisense schema for Visual Studio 2010 and 2008」が用意されているとのこと。

　ここでSVG Intellisense schemaを使用したライブコーディングが披露され、SVGを素早くラクにコーディングしていく様子がデモされた。

HTML5な開発環境のお話

　クックパッドの太田氏（s@os0x）による発表。

Flashとの比較

　Flashと比べてHTML5ではあれこれできない（Webカメラにアクセスできない、音を動的生成できない、3Dが弱いなど）といわれてきたが、WebカメラはDevice API、音の動的生成はAudio Data API(Mozilla) / Web Audio API(Google)、3DはWebGLで実現されてきていると指摘。

　Flashに実装されていて便利といわれている機能は、ブラウザベンダからすればそれらに需要があることが分かっているので、まったく新しいAPIよりも実装しやすい。

　現時点でFlashにしかできないことはあるが、ライセンス周りの問題がある動画や音声の再生などを除き、将来的にFlashでしかできないことはほとんどないだろうとのことだ。○Flashのアドバンテージ

　しかし、現時点でFlashはHTML5より優れている点が多くあり、その一つが互換性、そのもう一つが開発環境であると指摘。

　Flashは、プログラムを書かないで作品を作るためのツールとして、強力なオーサリングツールを持っている。

　FlashにおけるFlash IDEの存在は非常に大きく、プログラムを書いたことがないデザイナーでも、簡単なアニメーションを手軽に作ることができる。

　また、言語の違いとして、ActionScriptはクラスや型があり、多人数での開発がJavaScriptよりは容易であることも指摘した。

　さらに、Flashはドキュメントが整備されている（JavaScriptはMozilla Developer Networkくらいしかドキュメントがない）ことも併せて指摘し、Flashから学べることは非常に多いとした。

　Flashライクな分かりやすいAPIを備え、ドキュメントも完備したライブラリとして、Flash界の超有名人Grant Skinner氏が作っているcanvasライブラリ「EaselJS」を挙げたが、やはりJavaScriptの知識（プログラミングスキル）は必須となってしまう。

SVG/canvas/WebGLの特徴と使い分け

　SVGはベクターグラフィックなので、地図やグラフに向いている。canvasは画像にエフェクトを掛けるなど、ビットマップ操作もできる。WebGLはハイパフォーマンスだが、サポート状況が厳しい。

SVGのライブラリ

　RaphaelはjQueryライクな書式でコードを書けるが、動的生成がメインでSVGを画像ファイルとしては扱えない。

　SVG Webは、IEではFlashで対応。SVGを画像として表示する。

　SIEは作者が日本人であり、IEはVMLで対応。SVGを画像として表示する。

WebGL対応のライブラリなど

　Processing.jsは、Processing互換でコードを書けて一部WebGLにも対応している。

　three.jsはWebGL対応の3D Engineライブラリであり、WebGLの知識がなくてもJavaScriptの知識だけでそこそこ扱える。

　three.jsのほか、J3D、A3、PhiloGLなど、WebGLのライブラリもいろいろ出てきているとのことだった。

まとめ

　Processing.js、SVG、WebGLなど、HTML5周辺におけるグラフィック関連技術の扱い方がよく分かる勉強会であった。

　HTML5の中でも今回のように特定の分野に絞った勉強会が今後も開催されていくことで、HTML5の普及も加速していくのではないかと思う。

筆者紹介

拡張現実ライフ

akio0911（ブロガー・iPhoneアプリ開発者）

AR(拡張現実)・iOSアプリ開発・書評・グルメがメインのブログ「拡張現実ライフ」の中の人。cocos2d for iPhoneレッスンノートを執筆（共著）。世田谷ものづくり学校の自由大学にてアプリクリエイター道場の講師を担当。アプリクリエイターにメイキングストーリーをインタビューしていく番組「ハイパーアプリクリエイターズ」も手掛ける

「次回」へ

「D89クリップ」バックナンバー