|
|
【WebGLを使ってみよう!】~『テキスト編集だけでリアルタイム3次元グラッフィックスが楽しめる』~ |
||
【リンクフリー】 私設研究所ネオテックラボ Neo-Tech-Lab.co.uk 【記載者】 私設研究所Neo-Tech-Lab 上田智章 |
作成日 2011/07/01 更新 2011/07/07 最終更新 2011/07/08 |
|
ここにチェックボックス型外部コンテンツ・メニューが入ります。 | ||
|
|
【目次】●WebGLとは?●事前準備:利用できるウェブブラウザは? ●事前準備:FireFox5でWebGLが動作しない場合には? ●WebGLのサンプル集(Lesson1~Lesson21) ●WebGLのデモ ●クロスドメインテクスチャーを将来も利用できる方法 セキュリティー問題やサイバー攻撃に対する反撃の一手法もご参考まで。 ●物理エンジンBulletの実装デモ ●クロス(Cloth)の実装デモ |
●クロスドメインテクスチャーを将来も利用できる方法 ●ローカルにあるMikuMikuDanceのPMDモデルをドラッグドロップで読込、3次元表示 (JSON形式に変換したvertex, normal vector, texture uv, index, materialも表示します) ●【物理エンジン】Bullet.jsによるデモ ●【μ-iVoice】プラグイン不要 JavaScriptだけで実装できる音声合成エンジン ■その他、【Audio Data API】等のデモもあります。 |
【WebGLとは?】 ■■■記載日2011年7月1日■■■13:15頃記載『WebGL』とは、ウェブブラウザでリアルタイム3次元グラフィックス表示を実現するために現在開発中の標準仕様の名称です。記述言語は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要素を使っており、いつでもクロスドメインで自由に動的に読み込めるからです。 そもそもshaderスクリプトはJSONPで読み込んだテキストでもコンパイルできてしまう仕様なので、クロスドメイン・テクスチャーだけ禁止してもセキュリティー上は全く意味はないのです。 しかしデメリットばかり見ていてもキリがないと思います。セキュリティーホールなど他にもっとあるからです。私は1つのブレークスルーとして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)をアクセスする部分に何か問題があるのでしょう。試行錯誤の末、以下の2つの原因があることがわかりました。 1)scriptタグの中で、fragmentやshaderのソース部分に日本語のコメントを入れると、FireFox5では文字化けによりエラーが発生します。 2)デフォルトで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にする。 以上で、サンプルを動作させることができました。 だが中にはそもそもJavaScriptを許可していない人もいるようだ。 メニューのオプション⇒オプションで許可を忘れないでね。 |
【WebGLのサンプル】 ■■■記載日2011年7月1日■■■21:50頃記載WebGLを初めて体験するのに手頃なサンプルがないかと検索で探してみました。彷徨った挙句に次のページに辿りつくことができました。(閲覧は最新版Google Chrome12か、Mozilla FireFox5で。) WebGLはJavaScriptで記述されているので、ブラウザの『ソースを表示する』でソースの閲覧を行うことができますし、Windowsのメモ帳でソースの編集を行うことができます。この場合、utf-8形式で保存し、*.htmあるいは*.htmlと名前を付けるようにしてください。 Google Chrome12あるいはFireFox5の場合にはローカルでダブルクリックすればプログラムを起動してブラウザでグラフィックスを表示することができますが、HTML5の仕様上の問題で使えない機能も一部存在します。ご注意ください。 もし、起動できないWebGLソースに出会ったら、ApacheサーバーをインストールしてLAN上で閲覧することをお薦めします。 『Hack The WebGL (WebGL勉強会)』日本語のWebGLチュートリアルページ。Lesson1からLesson16までサンプルコード有。ちょっと修正かけたりしてみました。【追記】数日前に気が付いたのですが、Google ChromeとFire Fox共にクロスドメインからのテキスト読込(擬似JSONP)速度が異常に遅くなり、 途中で停止してしまう問題が発生しています。 このため一部のサンプルプログラムが途中で固まるものがあるかもしれません。 ブラウザ側でJavaScriptコンパイル部分でメモリ・リーク問題の対策がなされたのが悪影響しているようです。 (ローカルではこの問題は発生しないので、セキュリティーホールが塞がれた可能性もありますが。) base64形式でのクロスドメイン・バイナリデータ転送ではこの問題は発生しない事を確認しました。 動作しないサンプルは随時書き換えの予定です。 /2011/12/31/ 上田 |
■【WebGL】Lesson1 三角形と四角形の単色描画 【内容】 WebGLで三角形と四角形を単色(黄色: [R,G,B,A] = [1.0,1.0,0.0,1.0])で描画する。 四角形の描画方法はTRIANGLE_STRIPで実施。 3次元グラフィックスの描画処理で透視変換、平行移動を行っている。 canvasに割り当てたフレームバッファはα=0.1でクリアしているので、透過性がある。 関数webGLStart()内のgl.clearColorでA(アルファ値)を0.0に設定すれば透明になる。 |
■【WebGL】Lesson2 三角形と四角形のシェーディング描画 【内容】 Lesson1では単色で図形を描画した。 WebGLで三角形と四角形を各頂点座標毎に色を指定して描画する。 途中の画素値は直線補間される。 3次元グラフィックスの描画処理で透視変換、平行移動を行っている。 canvasに割り当てたフレームバッファはα=0.1でクリアしているので、透過性がある。 |
|
■【WebGL】Lesson3 三角形と四角形の回転処理 【内容】 WebGLで三角形と四角形だけを各頂点毎に色を指定して描画する。 3次元グラフィックスの描画処理で透視変換、回転も含めた移動を行っている。 1/60秒毎に呼び出されるtick関数で回転処理を行い、animationに対応している。 三角形はy軸回りに、四角形はx軸回りに回転させている。 canvasに割り当てたフレームバッファはα=0.1でクリアしているので、透過性がある。 |
■【WebGL】Lesson4 三角錐と立方体の回転処理 【内容】 WebGLで三角錐と立方体を各頂点の色を指定して描画する。 立方体の描画では描画対象の頂点番号を指定するインデックスバッファを使っている。 3次元グラフィックスの描画処理で透視変換、移動を行っている。 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エンコードを実装しているのでJSONPの利用は容易だ。 デモでは原理実証の為だけなので普通のレンタルサーバー上に、予めbase64に変換済みデータにcallbackパディングを行ったファイルを置いている。ブラウザに読込時には普通のテキスト情報として読込んでおり、ブラウザ内でbase64形式のオブジェクトに加工しているので、同一ドメイン内に存在するイメージの加工と同じ取り扱いになっているので、セキュリティーの制約を逃れることができる。 この手法はimageだけでなく、audio, videoにも適用することができる。また、デモ内でも例示しているように2DのCANVASでも有効だ。 【対象ブラウザ】 Mozilla FireFox5, Google Chrome12 【参考Webware】 ●任意のローカルファイルをドラッグドロップするだけでBase64形式に変換するツールを自作しましたので公開します。利用できるブラウザはGoogle Chrome12とMozilla FireFox5です。ブラウザが対応しているイメージ形式ファイルの場合はBase64形式オブジェクトを表示します。 |
|
■【WebGL】Lesson18 MikuMikuDanceのPMDデータをJSON形式に変換して3次元表示 【内容】 MikuMikuDanceのPMD形式データ(『ちびミクver.1.3(改)』)を予めJSON形式に変換しておき、これを読み込んで表示する。インデックスの個数はDirectXの制約でunsigned shortになっているので、材質毎にindexだけ分割している。JSON変換の際の注意点は頂点データと法線ベクトルのz座標を正負反転させること。(ローカルPMDからの読込ではx座標が反転していた。後でよく考える必要あり。) キー入力による回転、拡大/縮小にちょっとだけ対応。DirectXのような注視点、上方ベクトル、視点座標と言ったカメラの位置を特定するような記述がないので、変換を工夫しなければならないことが分かった。 ローカルのPMDファイルをドラッグ/ドロップで読み込んだ場合に、JSON化したPMDの表示機能を加えたが、Mozilla FireFox5ではtextareaが不安定要因となるようなので、divタグ内に書き出すようにした。 【対象ブラウザ】Mozilla FireFox5, Google Chrome12 【参考】 ●MikuMikuDanceのポリゴンモデルデータ(PMD)のフォーマットに関しては、このページを参考にしてください。 ●ローカルに存在するMikuMikuDanceのPMDファイルをドラッグ/ドロップしてJSON形式に変換するWebwareを製作中。現在、表情ベクトル移植中。対応ブラウザはGoogle Chrome12のみ。 |
■【WebGL】Lesson19 MikuMikuDanceのPMDデータに表情処理をインプリメント(予定) 【内容】 Lesson12にキー入力で回転と拡大/縮小機能を入れました。現在、感情ベクトルをJSON化するためにツールを改良中。 【対象ブラウザ】Mozilla FireFox5, Google Chrome12 【メモ】 ●現在、ローカルのPMDファイルをドラッグ/ドロップしてJSON形式に変換するWebwareを製作中。最終的にはPMD全ての項目を変換可能なツールとしたいが、shift-jis⇒utf-8に変換するJavaScriptを自前で用意する必要がありそうだ。 ●readAsArrayBufferはMozilla FireFOx5に未だ実装されていないので、readAsBinaryStringを使うように方針を変更。また、Google Chromeにはバイト・オフセットが変換型のバイト数の整数倍でなければならないという変な制約が付いており、バイトオフッセットが4の倍数で始まらないとFloat32ArrayやUint32Arrayなどが使えない場合がある。なので処理速度は低下するが自力で型変換の部分をコーディング。ネックはshift-jis⇒utf-8変換の部分。取り敢えず先送りで動かす。 結果としては、Lesson18のプログラムに実装したPMDリーダーの方が動作が良好。まだローカルTextureファイルの読込にも対応する必要があるが、MikuMikuDanceの標準モデルの形状読込が可能になった。Textureは読み込めないので未だ眼等おかしな所はある。 |
|
■【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は、内部的には基本図形で物体を定義しているようで、最終的には構成要素のポリゴンの3次元座標を得る事ができる。入力データ構造さえわかれば使えるかもしれない。 【物理演算bullet.jsによる『ragdoll』のCANVAS 2D版デモ】 【対象ブラウザ】 Mozilla FireFox5, Google Chrome12 |
『WebGLのデモ』 |
【利用できるブラウザ】 Google Chrome12, FireFox5, InternetExplorer9 【非対応】OperaやSafariには非対応です |
【クロスドメインテクスチャーを将来も利用できる方法】
【FireFox5.0ではWebGLでCross-DomainイメージをTextureにできなくなった件】2011年5月にWebGLに『重大な』セキュリティー問題が指摘されました。所謂『クロスドメイン問題』で、Google Chrome12及びFireFox4では外部ドメインのイメージ画像をテクスチャーとして使えてとても便利だったのですが、なんとFireFox5.0ではクロスドメインテクスチャーを利用できないように塞がれてしまいました。(-_-;)きっと将来的にはGoogle ChromeでもVersion13あたりで完全に塞がれてしまう運命なのでしょう。orz..... なんて事をしてくれるんだ? めちゃくちゃ不便になってしまったじゃないかぁ? GPUから一旦フレームバッファに書き込んでまた読み出すと、データの出所に関する情報が消え、それでPCの遠隔操作などの悪い事をしようと思えばできるからという理由からなのですが。 【簡単に塞げないセキュリティーホールを探す】.....でも『必要は発明の母』です。簡単には塞ぐ事のできない別のルートを探しましょう。........scriptタグは実はどんなファイル形式でも使えることに気付きました。 『Base64』というエンコード方式があります。『Base64』とは元々は7bitしか伝送することができない通信路を用いてバイナリーデータを送信する方法として誕生したエンコード方式です。詳しくはリンク先のWikiに記載されていますのでここでは説明は省略いたしますが、A-Z,a-z,0-9の62文字と記号(+, /)の64文字を使って、3バイトを6ビットずつに分割して4文字単位として変換する方法です。バイト数が3の倍数でないときはデータを0詰めしたり、'='を追加して4文字単位に変換します。 ハイパーテキストプロセッサ(PHP)にはbase64エンコーダが実装されていますが、コーディングしてもかなり短い処理で済みます。『Base64』エンコードを行えば、mp3, ogg, png, gif, jpgなどどんな型のデータでも全てテキストに変換することができます。即ち、上記Lesson14A, Lesson16Aで紹介したクロスドメインからのデータ取得方法で一旦テキストとして読み込んで、それから型を変換してそれぞれのオブジェクトに入れることでaudioタグやimgタグで同一ドメイン内のデータとして取り扱えるのです。結果、2次元のcanvasでもgetImageDataで読み出したり、WebGLでテクスチャとして取り扱うことに成功しました。 Base64のエンコーダのコード例はLesson18やLesson19のメモに記載されたリンク先にありますので参考にしてください。 |
【WebGL】Lesson 17『クロスドメインイメージのテクスチャーマッピング』【対象ブラウザ】 Mozilla FireFox5, Google Chrome12 |
【試作したクロスドメインデータの利用方法】左欄左上隅のボタンをクリックすると、外部の2ドメインからaudioデータと、imageデータを読み込みます。HTML5のaudioタグで音楽を再生。canvas(2D)にイメージを表示し、一部をgetImageDataで切り取り、putImageDataで貼り付けます。canvas(2D)でも仕様的には外部ドメインイメージの再加工は行えないように塞がれていますが、ちゃんと再加工に成功しています。内部にテキストとして取り込んでから、型変換を行ったので同一ドメインのデータと同じ扱いになっているのです。 今回利用した方法はJSONPの通信原理を利用しているので、広く利用されているだけに、これを塞ぐ事は不可能でしょう。 (デモではハイパーテキストプロセッサは未使用で、データは普通のレンタルサーバー上にあります。しかし、技術的にはサーバー側にちょっと細工をすれば、サーバー側にjpg, png, mp3等の生データを置いて送出時にbase64形式で出力することができます。これは単なる実験です。1例に過ぎません。) 【結論】本手法で、FireFox5においても問題無くクロスドメインイメージをテクスチャーとして利用する事ができた。同一ドメイン内で作製したBase64形式のオブジェクトの再加工が可能である限り、本手法の適用が可能である。即ち、Mozilla FireFox5の対策は有効ではない。本質的にshaderに外部から任意コードを書き込めることが原因なのであるからクロスドメインイメージのテクスチャー利用を禁止しても意味がないのである。 |
【実験ソース】以下に上段の項で実施したセキュリティーホールを利用したクロスドメイン実験のJavaScriptのソースを示します。JavaScriptなのでブラウザの『ソースを表示』で閲覧できるし、 ブラウザに実装されたデバッガーツールでbreakpoint付けたりして動作は確認できるんですけどね。 このページに来る人の15%の人が興味を持っているようなのでコピペしておきます。 【追記】 Google Chromeですが、単なるバグなのか、セキュリティーホール対策なのかわかりませんが、 JSONPで1回あたり1MBを超えるテキストの取得は現状制限されハングするようになりました。 このハングアップは改行コードで発生しているので、改行コードを持たないBase64形式のDataSchemeには影響を受けません。 JSONPで巨大データをやり取りしていて、最近ハングアップで苦労されている方がおられるようですが、 改行コードを削除して、代替文字を行区切りコードに使いましょう。もしくはBase64でバイナリ送信しましょう。 こんな状態ではセキュリティーホールを塞いだとは言えないので、Googleの3流プログラマのバグなのだと思います。 (現状で100以上のホールがある。せいぜい頑張ってください。実験コードの追加の度に増えるばかりですが。) その他、Googleはあちらこちらで劣化現象を引き起こしているので、 世代交代による単なるノウハウ消滅が引き起こしたグループ劣化現象だと思います。(笑) //****************************************************** //【demo】これは幾らセキュリティーの問題でも絶対塞げないでしょうね。だってJSONPが使えなくなるもんね。 //****************************************************** function demo() { var NTL_ImageFile = "http://www.neo-tech-lab.com/Web3D/Web3D_Chibimiku.bmp.js"; NTL_RequestDataFromURL(NTL_ImageFile); //【動的にJavaScriptをdocument.bodyに子としてappend】 //【'NTL_cbGetImage'がcallbackされる】==> NTL_cbImageData var ua = navigator.userAgent; //【ブラウザのユーザーエージェントを取得】 if (ua.match(/Chrome\/([\.\d]+)/) || ua.indexOf("MSIE") != -1) { //【Google Chrome12】 var NTL_MP3File = "http://phosmega.net/Web3D/TheSecretGarden.mp3.js"; // } else { //【FireFox5.0】 var NTL_MP3File = "http://phosmega.net/Web3D/TheSecretGarden.ogg.js"; // } NTL_RequestDataFromURL(NTL_MP3File); //【動的にJavaScriptをdocument.bodyに子としてappend】 } //*************************************************** //【NTL_RequestDataFromURL】指定URLからbase64形式のテキストデータを読み込む //*************************************************** function NTL_RequestDataFromURL(url) { var s = document.createElement("script"); s.type = "text/javascript"; s.src = url; document.body.appendChild(s); } //*************************************************** //【NTL_cbGetImage】指定URLからbase64でイメージデータを読み込む //*************************************************** var NTL_cbImageData = new Image(); //【受信された】 function NTL_cbGetImage(img) { NTL_cbImageData.src = "data:image/bmp;base64," + img; //【ここで外部scriptの文字列がイメージデータになる】 NTL_cbImageData.onload = function() { //【Web3DをScreen3に読み込む】 var canvas1 = document.getElementById("Screen1"); var context1 = canvas1.getContext('2d'); context1.drawImage(NTL_cbImageData, 0, 0); var img = context1.getImageData(100,20,50,50); context1.putImageData(img, 200,200); } } //*************************************************** //【NTL_cbGetMP3】Google Chromeならmp3形式で、FireFox5.0ではogg形式で、読み込む //*************************************************** function NTL_cbGetMP3(mpd) { var ua = navigator.userAgent; //【ブラウザのユーザーエージェントを取得】 if (ua.match(/Chrome\/([\.\d]+)/) || ua.indexOf("MSIE") != -1) { //【Google Chrome】 var op = "data:audio/mpeg;base64," + mpd; //【ここで外部scriptの文字列がmp3データになる】 } else { //【FireFox】 var op = "data:audio/ogg;base64," + mpd; //【ここで外部scriptの文字列がoggデータになる】 } var ss = "<audio controls='true' autoplay='true' loop='true' src='" + op + "' width='300px' height='50px'>IEには非対応です。</audio>"; document.getElementById("Audio1").innerHTML = ss; } 【セキュリティーの問題】クロスドメインテクスチャーは本質ではない。WebGLのLesson xxのソース中で関数getShaderの部分が本質的な問題だと思う。 クロスドメインから入手したテキスト情報をshaderにプログラムとして組み込むことが可能であることがこの関数を読めばわかるだろう。 ガンブラーのようにどこかにJavaScriptを混入させられたら後はもう自由自在というわけだが、 それはアカウント名をありきたりのroot, admin, John, Mary等ありきたりの名前にして、 しかもパスワードを誕生日(4桁だがたったの365通りしかない)なんて設定にしているウェブサイト管理者が後を絶たないからだし、 そもそも対策の施されていない素のftpなんか使うからだ。 サーバー側にWeb Agentを常駐させてリアルタイム保護をかけるとか、ウェブ更新はカプセル化したファイルで行うとか対策は山のようにある。 性能重視で開発を進めた方がいいと思う。 セキュリティーの欠点を指摘しているのはセキュリティーソフトウェアで儲けようとしている連中なのだ。振り回されるべきではない。 具体的にセキュリティー業者の能力限界について記述する。 外からGPUに対するScriptを放りこめるということは、ユーザーのパソコン画面のキャプチャを取得したり、 キーボードから入力されたデータを外部に送信可能であることを示す。 外部隠蔽送信の手法としては、Google Analyticsでも使用されているウェブ・ビーコン技術の応用によりJavaScriptだけで実装可能だ。 僅か数行で任意のドメイン、IPアドレスに情報を送信することができる。 隠蔽送信の具体的なコーディング方法を知りたい方は、 本ページに実装されたBGM Playerのスクリプト中にアクセス解析用のWeb Sensor Probeが実装されているので参考にしていただきたい。 まあ簡単に書くと、受信要求のときにパラメータを付けて情報をサーバーに送信するわけです。 この手法を使えばApacheサーバーのログに情報蓄積を容易に行うことができる。 つまり、IPアドレス、ドメイン、リファラ、アクセスページ等と関連付けて情報取得が行えるわけだ。 ここで下にWeb Sensor Probeのコードを示す。 KeyCodeにより、サーバーは特定IPアドレス(個別閲覧者)に対してのみ、個別のJavaScriptを追加ロード&実行させることが可能となる。 所謂個別サービスがハイパーテキストプロセッサなんか使わなくても簡単に実現できる。 ここまでは一般的なテクニックなので公開しておく。 なお、ここで紹介する技術はNeo-Tech-Labが独自に開発したもので、 既存コードに類似のものが存在することは、Web Agentによる検索で判明した。 従って、リバースエンジニアリングではない。 //%%% Web Sensor Probe %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% //【変数】 // NTL_WebSensor : 通信用イメージのプリロードオブジェクト // NTL_KeyCode : Web Agent認識の為のKeyCode //******************************************************* //【Web Sensor Probe】【Public】 //******************************************************* //■ NTL_WebSensor : 外部object変数 Image() //● url : 1画素画像ファイルが最適。クロスドメイン可能。 // 例:NTL_ProbeURL, 'b/p.bmp' or 'http://www.neo-tech-lab.co.uk/b/p.gif' //● id : 識別用ID (最初は'none'、2回目以降はNTL_KeyCodeを使用) //● message : 送信情報 区切りコードは半角'&' //【利用方法】例: SendWebSensorInfo(NTL_ProbeURL, NTL_KeyCode, 'param=Size&value=Big'); function SendWebSensorInfo(url, id, message) { var number = new Date().getTime(); //【Web Agent 'Miku'のNTL_KeyCodeとしても利用】 NTL_WebSensor = new Image(); //【Imageオブジェクトのpreload機能を利用する】 NTL_WebSensor.src = url+"?dummy="+number+"&id="+id+"&"+message; //【preload開始⇒送信】 return(number); //【戻り値】NTL_KeyCodeとして使う。 }海外の怪しいサイトには、上述のこのテクニックを悪用して (IPやドメインから簡単にわかる)特定日本企業のアクセス履歴や情報収集を行っているサイトがあるので注意をされたい。 これはトレンドマイクロなどが実施しているウェブサイトの巡回チェックが全く機能していない事を示す。 つまり、特定閲覧者を除いて追加Scriptを見せないからだ。これがアンチウィルス業者の技術限界なのだ。 Googleはブラウザにユーザートラッキング名目で調査用コードを実装しているようだ。 特定の閲覧者のアクセス直後にサイトに出現するクローラーが確認できている。 有名な企業の人ばかりなのでかなりグレーゾーンに位置する行為なのではないだろうか。 というより何故、一般人のアクセス後には出現しないのか? 最近、Googleはプライバシーポリシーの変更を行った。 収集した個人情報の一元化を行うためだ。 これはかなりまずいよね。 【サイバー攻撃に対する反撃の一手法】悪い事ばかり書いたが、この技術の良い利用方法を紹介しよう。上記の技術を利用すれば、素のブラウザでサイトに高負荷をかけてくる3流攻撃者さんらだけに反撃JavaScriptを実行させることができる。(^_^;) Web Agentはサイト公開用サーバとは別の監視用Apacheサーバーのログ・ファイルから攻撃を断定することができる。 ログファイルのサイズだけを一定時間毎に監視すれば攻撃開始を知る事ができるので、普段は殆ど負荷を要しない。 そのIPアドレスとKeyCodeを使って、攻撃者に対してのみ反撃用Scriptファイルを用意して相手のパソコン上で実行することができるのだ。 勿論、インターネット上に多数存在するウィルスに汚染されたウェブサイトから読み込ませたりなんていうシビアな反撃もいろいろ可能だが、 インターネット上のそこらじゅうのサイトから同時に重いファイルをダウンロードさせるだけでも十分かと..... Panoramioとかの写真サイトからimageオブジェクトに写真ファイルを数千枚規模で読み込ませるとか簡単ですよね。 まぁ、個別対策の方はいちいち書くまでもないですよね。 |
【物理エンジン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の部分はどんどん変わっていってます。 MikuMikuDanceに実装された物理エンジンBulletでは、プリミティブ(基本図形)として球体、箱、カプセルの3種類が使用されています。bullet.jsを少し読んでみるとbtBoxShapeとbtCapsuleShapeのみ見つけることができましたので、球体のみ長さ0のカプセルと考えれば置き換え可能かもしれません。ただちょっとbullet.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頃記載★WebAudioの出現と、Base64で意味がなくなったので消去WebGLによってJavaScriptに型付き変数が導入されたことでいろいろ便利になりつつある。その一つがAudioオブジェクトが動的に扱えるようにAudio Data APIが採用検討されつつある。FireFox5ではデフォルトで利用可能だ。以下のデモはFireFox専用です。 ■【Audio Data API】Lesson1 『再生中のオーディオのスペクトルを表示する』 ■【Audio Data API】Lesson2 『指定周波数の波形を計算して出力する』 ■【Audio Data API】Lesson3 『ボーカルキャンセラー:ステレオ録音の左右の差を演算して中央の音を消す』 |
|
【μ-iVoice】【プラグイン不要 JavaScriptだけで実装できる音声合成エンジン】■μ-iVoiceは漢字交じりの文章を読み上げるプラグイン不要の音声合成エンジンです。IEを除く、主要ブラウザ(Google Chrome, Fire Fox, Safari)で利用することができます。 抑揚を制御するスクリプトも実装しており、シンセサイザやボーカロイド(歌唱)機能も実装しています。 Audio Data APIやWeb Audioは使わず、Data URI(データ・スキーム)を使っています。 所定書式の音声ファイルを用意すれば、ローカル音声ファイルの組み込みも可能です。 漢字辞書も分離していますので、追加調教が可能です。 Version 0.009C体験版を下に用意いたしました。是非、一度お試しください。 スタンダード・ドラムも実装した演奏デモも用意しています。(『ら』や『な』でフィンランド民謡Ieavan Polkkaを歌わせてみました。) 将来的には、『あいうえお』の5音登録だけでの、ものまね(ターミネーター音声ハック)実現を目指しています。 また、開発中のサイボーグ・インターフェースにより、発声せずに通話を可能(翻訳エンジンとも連携)にする電脳化長期目標を掲げています。 |
||
【μ-iVoice】『JavaScriptだで音声合成/シンセサイザをサイトに実装するAPI』(第2次試作2011/12/29/~2012/01/09/)μ-iVoiceはプラグインに頼らずにJavaScriptだけでシンセサイザ/音声合成/ボーカロイドをホームページに実装するAPIです。 ハードウェア技術であるDDS(Direct Digital Synthesizer)の変形アルゴリズムで実現しました。Version0.06では、音声データをAI学習させたデータを使用していましたが、Version0.07以降は音声データをブラウザ上で加工する方式に変更しました。今後は音質改善に取り組みます。 現状はひらがな入力のみに対応しています。抑揚を付けるための簡単な制御文字も持っています。自動抑揚変換も開発中です。 対応ブラウザは、Google Chrome、Mozilla Fire Fox、Apple Safariです。IEは.wav形式オーディオファイル再生に対応していないので利用できません。将来的には、ブラウザにNaCl(Native Client)+Pepperが標準実装されるようですから、漢字入力から発音させるまでを全部ブラウザ上で行うことも可能でしょう。テキスト化したMIDIデータから演奏する機能も備えています。近いうちにAltera社のCPLD(MaxII)で音声合成チップを製作する予定です。 【μ-iVoice体験ページ】●【web.fc2.com】【μ-iVoice】●【geocities.jp】【μ-iVoice】 ●【sites.google.com】【埋め込みμ-iVoice】 【埋め込み方法の例】 <iframe width="850" height="1150" src="http://neotechlab.web.fc2.com/index.htm?wait" border="0" ></iframe> 【備考】 ●Google Chromeのバグのため、BGM playerとμ-iVoiceを同時使用するとフリーズする可能性があるので、 現在、このページへの埋め込み停止中です。μ-iVoiceの体験は各リンク先でお願いいたします。 原因はGoogle Chromeに埋め込まれているAdobe Flash PlayerのGPU利用にあるようだ。 |
|
|
BGM停止 Google Chromeの改悪バージョン改訂により、BGM player(Adobe Flash Player)との相性が良くないようなので、一時埋め込み停止中です。体験はリンク先に飛んでお楽しみください。 |
【ここから下はまだ編集中です】 |
|