(cache) 【WebGLを使ってみよう】私設研究所Neo-Tech-Lab.com


	【ブラウザはGoogle Chrome】 ●最新版ダウンロードはこちら【お知らせ】現在、特にお知らせする事項はありません。

【WebGLとは？】　　■■■記載日2011年7月1日■■■13:15頃記載

　『WebGL』とは、ウェブブラウザでリアルタイム３次元グラフィックス表示を実現するために現在開発中の標準仕様の名称です。記述言語はJavaScriptが採用されており、HTMLのcanvas要素をフレームバッファに対応付けて使います。パソコンに実装されたGPUを用いてOpenGLによる描画をハードウェアで高速に実行することができます。Google ChromeではJavaScriptエンジンとして『v8』が採用され、JavaScriptを高速に実行することが可能になりました。浮動小数点形式やバイト型に対応するために型付き変数が導入されています。また、OpenGLの実行は実質的にDirectXを用いているそうです。
　詳細は【ウィキペディア】『WebGL』をご覧ください。

　2011年5月に深刻なセキュリティー問題(Google Chrome12及びMozilla FireFox4でクロスドメイン・イメージをテクスチャーとして取り扱うことができるが、データ中に不正なスクリプトを含んだイメージデータを読み込むことも可能なので、外部からのGPU操作が可能になるという問題)が指摘されていますが、基本的にshaderスクリプトをJavaScript中に持っていることが本質となっている問題なので、今後はある程度できあいの設定でshaderが使われることになるのではないかと想像します。　現在、Mozillaはこの対策として外部テクスチャーの利用を禁止したFireFox5を提供していますが、これはクロスドメインのテクスチャーが問題なのではなく、不正なshaderスクリプトの混入が問題なのでセキュリティーホール対策にはなっていません。shaderスクリプトもscript要素を使っており、いつでもクロスドメインで自由に動的に読み込めるからです。
　しかしデメリットばかり見ていてもキリがないと思います。セキュリティーホールなど他にもっとあるからです。私は１つのブレークスルーとしてWebGLは主流になるように思えます。

【利用できるウェブブラウザは？】　　■■■記載日2011年7月1日■■■13:15頃記載

　Google Chrome12, Mozilla FireFox5だけでなく、開発版ではSafariやOperaで利用できるそうです。
　ここでは、最新版のGoogle Chrome12か、Mozilla FireFox5の利用をお薦めします。

　　●最新版Google Chromeのダウンロード
　　●最新版Mozilla FireFoxのダウンロード

【FireFox5でWebGLが動作しない場合には？】　　■■■記載日2011年7月1日■■■13:15頃記載

　Vistaではデフォルト状態でもMozilla FireFox5でWebGLを使うことができたのですが、Windows7のノートパソコン(CPUはIntel core i3、OSは64bit版)ではちょっと深みにはまってしまいましたので、メモを残しておきます。現象としては、FireFox5でWebGLサンプルを動作させようとすると、コンテクスト取得に失敗したり、shaderの初期化に失敗してしまうのです。同じパソコン上でGoogle Chrome12の方は正常に動作しました。きっとFireFox5がGMA(Graphic Media Acceralator)をアクセスする部分に何か問題があるのでしょう。
　試行錯誤の末、以下の２つの原因があることがわかりました。

　１）scriptタグの中で、fragmentやshaderのソース部分に日本語のコメントを入れると、FireFox5では文字化けによりエラーが発生します。

　２）デフォルトでGMA(Graphics Media Accelerator)関連で禁止されている項目が影響する機種があります。
　　　検索で彷徨った挙句に、Google検索で『FireFox5 WebGL GMA』で検索トップに出てくるページに解決策が載っていました。

　　●【MozillaWiki】『Blocklisting/Blocked Graphics Drivers』　【英文のページです。】
　　　■FireFox5のアドレスバーに『about:config』と入力します。
　　　■『最新の注意を払って使用する』ボタンをクリック
　　　■フィルタ欄にwebglと入力。⇒ webgl.force-enabledの値をダブルクリック。値をtrueにする。
　　　■フィルタ欄にlayersと入力。⇒ layers.acceleration.force-enabledの値をダブルクリック。値をtrueにする。
　　　■フィルタ欄にgfxと入力。⇒ gfx.direct2d.force-enabledの値をダブルクリック。値をtrueにする。

以上で、サンプルを動作させることができました。

【WebGLのサンプル】　　■■■記載日2011年7月1日■■■21:50頃記載

　WebGLを初めて体験するのに手頃なサンプルがないかと検索で探してみました。彷徨った挙句に次のページに辿りつくことができました。
　（閲覧は最新版Google Chrome12か、Mozilla FireFox5で。）

『Hack The WebGL (WebGL勉強会)』

日本語のWebGLチュートリアルページ。Lesson1からLesson16までサンプルコード有。ちょっと修正かけたりしてみました。


■【WebGL】Lesson1 三角形と四角形の単色描画　【内容】　　WebGLで三角形と四角形を単色(黄色: [R,G,B,A] = [1.0,1.0,0.0,1.0])で描画する。　　四角形の描画方法はTRIANGLE_STRIPで実施。　　３次元グラフィックスの描画処理で透視変換、平行移動を行っている。　　canvasに割り当てたフレームバッファはα=0.1でクリアしているので、透過性がある。　　関数webGLStart()内のgl.clearColorでA(アルファ値)を0.0に設定すれば透明になる。		■【WebGL】Lesson2 三角形と四角形のシェーディング描画　【内容】　　Lesson1では単色で図形を描画した。　　WebGLで三角形と四角形を各頂点座標毎に色を指定して描画する。　　途中の画素値は直線補間される。　　３次元グラフィックスの描画処理で透視変換、平行移動を行っている。　　canvasに割り当てたフレームバッファはα=0.1でクリアしているので、透過性がある。

■【WebGL】Lesson3 三角形と四角形の回転処理　【内容】　　WebGLで三角形と四角形だけを各頂点毎に色を指定して描画する。　　３次元グラフィックスの描画処理で透視変換、回転も含めた移動を行っている。　　1/60秒毎に呼び出されるtick関数で回転処理を行い、animationに対応している。　　三角形はy軸回りに、四角形はx軸回りに回転させている。　　canvasに割り当てたフレームバッファはα=0.1でクリアしているので、透過性がある。		■【WebGL】Lesson4 三角錐と立方体の回転処理　【内容】　　WebGLで三角錐と立方体を各頂点の色を指定して描画する。　　立方体の描画では描画対象の頂点番号を指定するインデックスバッファを使っている。　　３次元グラフィックスの描画処理で透視変換、移動を行っている。　　animation対応でtick関数で一定速度で回転する処理も行っている。　　canvasに割り当てたフレームバッファはα=0.1でクリアしているので透過性がある。

■【WebGL】Lesson5 立方体へのテクスチャーマッピング処理　【内容】　　WebGLで立方体にテクスチャーマッピングを行い、回転させる。　　canvasに割り当てたフレームバッファはα=0.1でクリアしているので透過性がある。　　Google Chromeではテクスチャ指定で'http://xxx.yyy.com/img/sample.jpg'のように　　クロスドメイン指定が可能だが、将来的にはセキュリティー問題の為に使用できなく　　なる可能性が高い。		■【WebGL】Lesson5_A 立方体へのテクスチャーマッピング処理(テクスチャのみ変更) 　【内容】　　Lesson5のテクスチャーを『nehe.gif』(256×256画素)から『3Dworld2s.jpg』に変更したもの。　　テクスチャーのサイズには制約がある模様。　　2のn乗画素単位にしなければならない制約が存在するかもしれない。　　WebGLで立方体にテクスチャーマッピングを行い、回転させる。

■【WebGL】Lesson5_B 登録図形を多数複製して描画する　【内容】　　バッファに登録済みの基本図形の位置を変更しながら多数複製して表示する。		■【WebGL】Lesson6 立方体へのテクスチャーマッピング処理(キー入力の例) 　【内容】　　Lesson5にキー入力による操作を加えたもの。　　キー入力によって、拡大・縮小や回転速度を変更する。　　Fキーでテクスチャーマッピングフィルタも順次変更する。

■【WebGL】Lesson6_A ちびミク箱(キー入力の例)(テクスチャのみ変更) 　【内容】　　Lesson6のテクスチャーを『crate.gif』(256×256画素)から『ChibiMiku.png』に変更したもの。		■【WebGL】Lesson6_B はちゅねミク(キー入力の例) 　【内容】　　Lesson6のモデルデータをJSON(JavaScript Object Notation)形式で『Hachune2.js』に記述したものです。　　頂点座標バッファ、テクスチャ座標バッファ、頂点インデックスバッファとテクスチャー名称をJSON形式で記述し引き渡しています。

■【WebGL】Lesson7 光源計算の方法　【内容】　　環境光と平行光の光源計算を行っている。		■【WebGL】Lesson8 αブレンディング　【内容】　　Lesson7に加え、αブレンディングによる透過処理を行っている。

■【WebGL】Lesson9 ブレンディング　【内容】　　煌めく光を表現する方法のサンプルです。		■【WebGL】Lesson10A Textデータ読込　【内容】　　Lesson10では動的にscriptタグを発生してcallback先を固定したJSONPで読み込んでいる。　　この方法は、XMLHttpRequestと異なり、クロスドメインでデータを取得するために使用することができる。scriptタグには本来はsrcのURLにcallback関数や乱数をパラメータとして付与しておくべきである。乱数をパラメータとして与えればキャッシュが無効となり、常に読込を行うことができる。本サーバーはハイパーテキストプロセッサ(PHP)を実装していないので、callback関数を予め記載した。

■【WebGL】Lesson11 月とマウスのドラッグで回転		■【WebGL】Lesson12 月と箱と光源計算

■【WebGL】Lesson13 月と箱と点光源		■【WebGL】Lesson13 月と弱音ハク箱と点光源

■【WebGL】Lesson14A ティーポット　【内容】　　Lesson14Aでは動的にscriptタグを発生してcallback先を固定したJSONPで読み込んでいる。　　この方法は、XMLHttpRequestと異なり、クロスドメインでデータを取得するために使用することができる。scriptタグには本来はsrcのURLにcallback関数や乱数をパラメータとして付与しておくべきである。乱数をパラメータとして与えればキャッシュが無効となり、常に読込を行うことができる。本サーバーはハイパーテキストプロセッサ(PHP)を実装していないので、callback関数を予め記載した。		■【WebGL】Lesson15 拡散光や鏡面反射項の光源計算

■【WebGL】Lesson16A パソコン画面にテクスチャー　【内容】　　Lesson16Aでは動的にscriptタグを発生してcallback先を固定したJSONPで読み込んでいる。　　この方法は、XMLHttpRequestと異なり、クロスドメインでデータを取得するために使用することができる。scriptタグには本来はsrcのURLにcallback関数や乱数をパラメータとして付与しておくべきである。乱数をパラメータとして与えればキャッシュが無効となり、常に読込を行うことができる。本サーバーはハイパーテキストプロセッサ(PHP)を実装していないので、callback関数を予め記載した。		■【WebGL】Lesson 17『クロスドメインイメージのテクスチャーマッピング』【内容】　FireFox5においても、クロスドメインのイメージをテクスチャーとして利用する方法の紹介。　本来はクロスドメインサーバーにはJSONPを実装することが好ましい。　デモでは普通のレンタルサーバー上に、予めbase64に変換済みデータにcallbackパディングを行ったファイルを置いている。ブラウザに読込時には普通のテキスト情報として読込んでおり、ブラウザ内でbase64形式のオブジェクトに加工しているので、同一ドメイン内に存在するイメージの加工と同じ取り扱いになっているので、セキュリティーの制約を逃れることができる。　この手法はimageだけでなく、audio, videoにも適用することができる。また、デモ内でも例示しているように2DのCANVASでも有効だ。【対象ブラウザ】 Mozilla FireFox5, Google Chrome12

■【WebGL】Lesson18 MikuMikuDanceのPMDデータをJSON形式に変換して表示　【内容】　　MikuMikuDanceのPMD形式データ(『ちびミクver.1.3(改)』)を予めJSON形式に変換しておき、これを読み込んで表示する。インデックスの個数はDirectXの制約でunsigned shortになっているので、材質毎にindexだけ分割している。JSON変換の際の注意点は頂点データと法線ベクトルのz座標を正負反転させること。【対象ブラウザ】 Mozilla FireFox5, Google Chrome12		■【WebGL】Lesson19 MikuMikuDanceのPMDデータに表情処理をインプリメント(予定)

■【WebGL】Lesson20 物理演算bullet.jsによる積み木の衝突　【内容】　　Pl4n3氏(ドイツハンブルグ在住)のブログ(英文)に公開されていた物理演算ライブラリbullet.jsの動作を理解するために、積み木の落下・衝突のCANVASデモをWebGLに変更してみた。ソースはまだ汚い。【対象ブラウザ】 Mozilla FireFox5, Google Chrome12		■【WebGL】Lesson21 物理演算bullet.jsによる『ragdoll』　【内容】　　Pl4n3氏(ドイツハンブルグ在住)のブログ(英文)に公開されていた物理演算ライブラリbullet.jsの動作を理解するために、『ragdoll』デモをWebGLに変更してみた。ソースはまだ汚い。 bullet.jsは、内部的には基本図形で物体を定義しているようで、最終的には構成要素のポリゴンの３次元座標を得る事ができる。入力データ構造さえわかれば使えるかもしれない。　　【物理演算bullet.jsによる『ragdoll』のCANVAS 2D版デモ】【対象ブラウザ】 Mozilla FireFox5, Google Chrome12

『WebGLのデモ』

【利用できるブラウザ】
Google Chrome12, FireFox5, InternetExplorer9
【非対応】OperaやSafariには非対応です

【クロスドメインテクスチャーを将来も利用できる方法】

■■■記載日2011年7月2日■■■04:15頃記載

【FireFox5.0ではWebGLでCross-DomainイメージをTextureにできなくなった件】

　2011年5月にWebGLに『重大な』セキュリティー問題が指摘されました。所謂『クロスドメイン問題』で、Google Chrome12及びFireFox4では外部ドメインのイメージ画像をテクスチャーとして使えてとても便利だったのですが、なんとFireFox5.0ではクロスドメインテクスチャーを利用できないように塞がれてしまいました。(-_-;)
きっと将来的にはGoogle ChromeでもVersion13あたりで完全に塞がれてしまう運命なのでしょう。orz.....
なんて事をしてくれるんだ？　めちゃくちゃ不便になってしまったじゃないかぁ？
GPUから一旦フレームバッファに書き込んでまた読み出すと、データの出所に関する情報が消え、それでPCの遠隔操作などの悪い事をしようと思えばできるからという理由からなのですが。

【簡単に塞げないセキュリティーホールを探す】

.....でも『必要は発明の母』です。簡単には塞ぐ事のできない別のルートを探しましょう。
........scriptタグは実はどんなファイル形式でも使えることに気付きました。
『Base64』というエンコード方式があります。『Base64』とは元々は７bitしか伝送することができない通信路を用いてバイナリーデータを送信する方法として誕生したエンコード方式です。詳しくはリンク先のWikiに記載されていますのでここでは説明は省略いたしますが、A-Z,a-z,0-9の６２文字と記号(+, /)の６４文字を使って、３バイトを６ビットずつに分割して４文字単位として変換する方法です。バイト数が３の倍数でないときはデータを0詰めしたり、'='を追加して４文字単位に変換します。
ハイパーテキストプロセッサ(PHP)にはbase64エンコーダが実装されていますが、コーディングしてもかなり短い処理で済みます。『Base64』エンコードを行えば、mp3, ogg, png, gif, jpgなどどんな型のデータでも全てテキストに変換することができます。即ち、上記Lesson14A, Lesson16Aで紹介したクロスドメインからのデータ取得方法で一旦テキストとして読み込んで、それから型を変換してそれぞれのオブジェクトに入れることでaudioタグやimgタグで同一ドメイン内のデータとして取り扱えるのです。結果、２次元のcanvasでもgetImageDataで読み出したり、WebGLでテクスチャとして取り扱うことに成功しました。

【WebGL】Lesson 17

『クロスドメインイメージのテクスチャーマッピング』
【対象ブラウザ】
Mozilla FireFox5, Google Chrome12

【試作したクロスドメインデータの利用方法】

左欄左上隅のボタンをクリックすると、外部の２ドメインからaudioデータと、imageデータを読み込みます。HTML5のaudioタグで音楽を再生。canvas(2D)にイメージを表示し、一部をgetImageDataで切り取り、putImageDataで貼り付けます。
canvas(2D)でも仕様的には外部ドメインイメージの再加工は行えないように塞がれていますが、ちゃんと再加工に成功しています。内部にテキストとして取り込んでから、型変換を行ったので同一ドメインのデータと同じ扱いになっているのです。
今回利用した方法はJSONPの通信原理を利用しているので、広く利用されているだけに、これを塞ぐ事は不可能でしょう。
(デモではハイパーテキストプロセッサは未使用で、データは普通のレンタルサーバー上にあります。)

【結論】

本手法で、FireFox5においても問題無くクロスドメインイメージをテクスチャーとして利用する事ができた。
同一ドメイン内で作製したBase64形式のオブジェクトの再加工が可能である限り、本手法の適用が可能である。即ち、Mozilla FireFox5の対策は有効ではない。本質的にshaderに外部から任意コードを書き込めることが原因なのであるからクロスドメインイメージのテクスチャー利用を禁止しても意味がないのである。

【物理エンジンBulletの実装デモ】　　■■■記載日2011年7月2日■■■04:15頃記載

検索していたら、MikuMikuDanceでおなじみの物理エンジンBulletが、Javaに移植され、そこからさらにJavaScriptにも移植(bullet.js)されたようで、WebGLとbullet.jsを組み合わせて作られたゲームを公開されている個人サイトを見つけました。ブログには製作されたゲームが公開されていました。
開発途上の初期のデモも発見できました。ざっと読むと、Vecmathというベクトル演算ライブラリ(Vecmath.js)と、物理エンジンBullet本体(Bullet.js)、この方のライブラリ(Pl4n3.js)、及びWebGLに分かれていましたので勉強のためダウンロードいたしました。ソースを眺めているところです。
Vecmath.jsはともかく、Bullet.jsはすさまじいですね。これ全部理解しないと使えないのかなぁ？(-_-;)
No.1は、初期のものなので、VecMath.jsとBullet.jsの内容が現在のものと少し違うようです。
Pl4n3.jsの部分はどんどん変わっていってます。
追加の情報をお求めの場合は、製作者のPl4n3氏(ドイツハンブルグ在住)のブログ(英文)の記述やコメントをお読みください。

　　　　　【No.1】(canvas2D)直方体の板が落下するデモ
　　　　　【No.2】(canvas2D)ヒューマンモデルのデモ
　　　　　【No.3】(WebGL)Game用にテクスチャを貼りつけたデモ


【クロス(Cloth)の実装デモ】　　■■■記載日2011年7月2日■■■04:15頃記載以前にO3Dのときに発見したClothの実装デモが、WebGLに移植されていました。【ブログ】『WebGLつかってみました：Cloth Simulation』。 ■『クロス(Cloth)の実装デモ』


【型付き変数】 ■■■記載日2011年7月3日■■■16:10頃記載 JavaScriptでもWebGLに関係して型が使えるようになったとのことで、これは便利だ。【符号付き整数】　　■Int8Array　　■Int16Array　　■Int32Array 【符号無し整数】　　■Uint8Array 　■Uint16Array 　■Uint32Array 【浮動小数点形式】　　■Float32Array（単精度）　　■Float64Array（倍精度）		【Audio Data API】　　■■■記載日2011年7月5日■■■06:10頃記載 WebGLによってJavaScriptに型付き変数が導入されたことでいろいろ便利になりつつある。その一つがAudioオブジェクトが動的に扱えるようにAudio Data APIが採用検討されつつある。FireFox5ではデフォルトで利用可能だ。以下のデモはFireFox専用です。 ■【Audio Data API】Lesson1 　　『再生中のオーディオのスペクトルを表示する』 ■【Audio Data API】Lesson2 　　『指定周波数の波形を計算して出力する』 ■【Audio Data API】Lesson3 　　『ボーカルキャンセラー：ステレオ録音の左右の差を演算して中央の音を消す』

【WebGLを使ってみよう！】

【ブラウザはGoogle Chrome】

【お知らせ】

【目次】

【WebGLとは？】　　■■■記載日2011年7月1日■■■13:15頃記載

【利用できるウェブブラウザは？】　　■■■記載日2011年7月1日■■■13:15頃記載

【FireFox5でWebGLが動作しない場合には？】　　■■■記載日2011年7月1日■■■13:15頃記載