琴線に触れる

IFRAME を使うと閉じた環境でブラウザのテクノロジを思う存分発揮して、ブログに埋め込む事ができます。記事内に直接貼り付ける事も可能ですが、その記事だけにしか使わない javascript をブログの環境に設定するのは意味無いですし、したとしても他の環境の影響で動作しない場合か結構な確率で発生します。
( この記事では、記事内から IFRAME に 対して JavaScript を書き込んでいるので、ブログパーツのようなものです )

IE10 もリリースされたし、Opera も Webkit になるそうですし、『ブラウザ元年』というか、やっと高確率で HTML5 等のテクノロジを使えます。

※ とは言っても、Opera 動かなかったです。
※ WebGL は IE で動きません。これははっきり言って『最低の所業』です。

操作
左ドラッグ : 回転
中央ドラッグ : 拡大・縮小
右ドラッグ : 移動 ( IEとSafari では動作しませんでした )

上で回っているのは、HTML5( Canvas ) です。Three.js 的に言うと、できる事は Canvas ではとってもとっても『しょぼい』です。WebGL で実行するスピードとは雲泥の差で、リアルに動くゲーム作るなら Canvas では無理があります(可能ですが、テクニックでカバーしなきゃいけませんし、描画するオブジェクトが増えるとアウトです)。

今後、そういう 3D コンテンツが増えれば、正直 IE を誰も使わなくなります。ですが、今はまだ Google Chrome や Firefox では『可能』ではありますが、技術的な敷居が高すぎて、誰もが作れるような状態ではありません。

この 3D 表示は Three.js で行っていますが、２か月に一回はアップデートされて、仕様変更が起こりまくりで、一線の人達がたくさん集まって試行錯誤している段階なので、一般に影響するのはまだまだ先のお話。

でも、プログラマが関係しない一般的な WEB ページは『ブラウザ元年』のおかげで一般のところまでやってきています。もっともっと簡単に WEB ページが華やかでかっこよくなるのです。

ここで実行しているソースコードは

http://toolbox.winofsql.jp/tool_html_links.htm で、青い『サンプル』ボタンをクリックして表示されるウインドウの中の『二つのCubeとOrbitコントロール』をクリックして下さい。ソースコードが表示されて、実行状態になります。

描画能力を比較すると

場合によって優劣変わりますが、Google Chrome と Firefox が良い状態です。速度やレスポンスは Google Chrome が上です。WebGL が可能なのは、Google Chrome と Firefox ですが、WebGL になると、その差が顕著になって、Google Chrome がおすすめになります。

IEは、IE10 になってやっとスタートラインに立ったところで、IE9 よりはスピードが上がりましたが、WebGL が動作しません。実は、IEWebGL という ActiveX のオブジェクトがあって、それをインストールした上でプログラマが専用のコードを書いてバインドすると Three.js の 3D コードも動くようにはなります。

ですが、こんな面倒な事が一般的に行われる事は無いので、IE10 の立ち位置は現在とっても微妙です。そもそも、IE と一口に言っても、現在 IE6、IE7、IE8、IE9、IE10 が存在していて、そのうちIE10 のみがスタートラインに立ってるんですが、結構対応するほうは嫌気がさしていて、IE10 ですらなんだかうさんくさいです。

この Three.js の Canvas 表示にしても、一番表示クオリティが悪いのがはっきりしています( 透過の端にゴミのような線が見えます )

Opera は Webkit に変わるそうなので、そうなればそれなりなクオリティは期待できますが、Windows の Safari は、Webkit　なのにやたら遅いです。Mac 版はたぶん WebGL が動くと思うんですが( 良くしらない )、Windows では動かないので Apple は Windows ベースのアプリにやる気が殆ど無いようです。

そんな、いろいろな事情が交錯する中、使う側は一番いいものを使えばいいのであまり気にしなくていいですが、夢のような WEBスタイルが発現するのは、もうすこし未来になるでしょう。


使用している画像


※ 背景透過です


関連する記事

『初音ミクを群れで飛ばす』-- Three.js の Canvas サンプルで『鳥が群れで飛ぶ』という凄いのがあるんですが、平面の画像をテクスチャとして差し替えてブログに貼れるようしました。
Three.js で『画像を群れで飛ばす』- 背景画像を設定したら結構素敵になりました