2015年01月27日

ブラウザ界の仲間外れ「Internet Explorer」

 先日サイトに載せた以下の3DCGバージョンの共感覚データベースについて、プログラムをいじっている時から薄々分かっていたことなのだが、案の定、多くのブラウザがある中、Internet Explorerだけで動作しない。厳密には、バージョン11では「動作」はするのだが、「3D」にならないので、「3D」のプログラムとして書く意味がない。しかし・・・。

岩崎純一の共感覚データベース(3D映像操作版)

 このプログラムは、Three.jsの公式サイトで紹介されている色々なプログラムの組み合わせだが、本来はWebGLを使っておらずcss3dを使っているので、IEのバージョン11だけでなく、10以前でも最新パッチを入れていれば、それなりに動くはずなのだ。

WebGL_logo.png WebGLを使って作ってみた共感覚3Dゲーム(サイトに載せているので遊べます)も、IE11では動くのだから(10以前のIEではWebGLは動かない)、今回の3D共感覚データベースは綺麗に動いてもおかしくないはずなのだが・・・。嫌な予感が当たった例である。

 しかし、これまでも書いてきたように、私のサイトも今はほとんどの方がスマホで見ていらっしゃるし、パソコンで見て下さるほどの熱心な方はすでにGoogle ChromeやMozilla Firefoxを入れる作業はできる方だろうと踏んで、かなり身勝手なのだが、とりあえずこのまま様子を見ようかと思う。

 おまけの話だが、現在のマークアップ言語とクライアントサイドの種々のプログラム(JavaScriptや、その応用のjQueryやWebGL)の流れからして、おそらく数年うちには、HTMLとCSSとJavaScriptだけで、共感覚者が見ている知覚世界の3D表現(しかも、閲覧者がいじって遊覧できるもの)ができるようになるだろう。YouTubeに重い動画を上げなくとも。

 今回私は、それをやろうとしたわけだが、今でもWebGLに敵対心というかトラウマのありそうなIE(マイクロソフト)の対応の遅さだけがネックなのだった。

 Windows 10を無償提供するよりも前に、今あるものを有効利用し、今できることから対応してくれないものかな・・・。


【関連ブログ記事】

●当サイトの3Dゲームで遊んでいただく前の準備
http://iwasaki-j.sblo.jp/article/97556956.html

●WebGLによる3DCGについての技術的な話
http://iwasaki-j-ict.sblo.jp/article/93504698.html

●アクセス解析データ書庫を公開
http://iwasaki-j.sblo.jp/article/83132560.html

●ウェブサイト管理者・閲覧者双方の責任と使命、スマホ・PDA機器の扱い、サーバーの浄化
http://iwasaki-j-ict.sblo.jp/article/81291993.html


【画像出典】

WebGL(Wikipedia)
https://en.wikipedia.org/wiki/WebGL
posted by 岩崎純一 at 21:14| Comment(0) | TrackBack(0) | 3DCG

2014年04月19日

WebGLによる3DCGについての技術的な話

WebGL_logo.png メインブログでも書いたように、3DCGをSketchfabに載せてみた。(グルグル回したり近づいたり遠ざかったりして遊べる。)

Sketchfabのマイページ
https://sketchfab.com/iwasaki_j

自分の共感覚などを3Dグラフィックスで閲覧・操作可能にしてみました
http://iwasaki-j.sblo.jp/article/93504345.html

(WebGLに対応していないモバイル端末・モバイルOS・モバイルブラウザでは、閲覧・操作ができないか、できても描画処理が遅いことがある。)


◆作業過程の概要

 3DCGの制作からWebGLとしての公開までの手順は、ざっと以下のようになる。

3DCG制作(.blendや.skpなど)
→モデルファイル(.3ds、.obj、.daeなど)とマテリアル・テクスチャファイル(.mtlなど)を作成
→WebGLソースに変換(Three.jsなどのJavaScriptでHTML5内に読み込みを記述)


◆制作過程

 3DCGの制作は、BlenderやSketchUpの最新バージョンを中心に、他のCADソフトを混ぜて使用。共感覚の文字なども、建築設計の要領で「建築」していく、という発想で制作すると面白い。

 ファイル形式が、Blenderは.blend、 SUは.skpなどと違うが、.objファイルや.3dsファイルでやり取りしたり、交換用ファイルフォーマットの.dae(Collada)ファイルでやり取りすればよい。


◆公開過程

 ウェブ上での公開方法には、FlashやJavaなど、いくらでもあるが、閲覧者側で余計なプラグインのいらないWebGLとして公開することにした。

 ただ、WebGLとなると、日本に特有の事情が絡んでくることに・・・。

 日本はInternet Explorerユーザーが多分9割以上を占めているが、IEはバージョン10以前はWebGLに対応していない。つまり、今のところ11のみが対応している。

WebGLのブラウザサポート状況
http://caniuse.com/#search=webgl

 Windows XPやVistaで閲覧する場合は、そもそも11がインストールできないので、古くからWebGL対応済みのGoogle ChromeやFirefoxが必要だ。

 しかし、一番厄介なのは、IE11はWindows 7と8.1には入るが、8には入らないという点だ。OSとブラウザのバージョンの逆転が発生したのはWindows史上初なので、なかなか興味深い。スタートボタン削除問題もそうだが、Microsoftも8は早いところ忘れ去りたいのだろうか。今は、8ユーザーはほとんど8.1に無償アップデートしたとは思うが。

 そもそも、WebGL及びその元となったOpenGLは、Microsoft社にとって自社のSilverlightやDirectXと競合関係にあるので、今後もIEはWebGLに対応しないかと思われた。

 そういうわけで、日本でWebGLによる共感覚3DCGを公開しても、ほとんど意味を成さなかったのだが、いよいよIEも11から対応したということで、公開してみた。

 そうは言っても、IE11が対応したWebGLのバージョンは未だ0.92で、ChromeやFirefoxやOperaはとっくに1.0に対応しているので、もしかしたら、私の3DCGも環境によっては映らなかったりグルグル回したりできない方がいらっしゃるかもしれない。(一応、私のパソコンではどのブラウザでもうまく閲覧・操作可能。)

 Mac OSの場合も、10.6 Snow Leopard以降が必要という制約がある。

 HTMLに関しては、今存在するウェブサイトなるもののほとんどはHTML4.01止まりの記法で書かれていて、そのままHTML5を冒頭で宣言すればほぼHTML5で書いたことになるのではないか(「HTML5で新規に追加された要素を使用していないに過ぎないHTML5文書だ」と言えば済むのではないか)という問題もあるし、HTML4.01にWebGLを混ぜ書きしたとして、ブラウザが対応していれば映るので、多分ほとんど気にされていないと思う。

 それよりも、HTML5からは、HTML自体がいわゆる従来のマークアップ言語ではなくなったということではないかな。それも結局、CSSやjQuery、WebGLがHTMLをそうしたと言ってよいと思うけれど。

140419.jpg さて、長くなったが本題。

 余裕がある場合は、WebGLを一から自作する手もある。一番に考えられるのは、よく使われているThree.jsのリポジトリを以下からDLし、3DCGソフトから書き出した.daeや.blendを読み込んでから操作法(一人称視点など)を記述する方法。これはこれで、やってみると楽しい。(結局、書いているのはJavaScriptそのもの。)

Three.jsリポジトリ
http://threejs.org/

Colladaファイルのエクスポート・インポート方法
https://github.com/mrdoob/three.js/wiki/Using-SketchUp-Models

こんなレッスンサイトもある
http://dotinstall.com/lessons/basic_threejs

 あるいは、3DCGソフトに以下のページなどからプラグインをインストールして、直接WebGLソースを書き出す方法もある。ただ、これだと、後から操作法を好きなように調整しにくい。

http://akitenh.dip.jp/blog/2006/12/sketchup_2.html
http://note.chiebukuro.yahoo.co.jp/detail/n192606
http://gimpresso.jimdo.com/
https://dl.dropboxusercontent.com/u/105583324/index.html

 Sketchfabを利用すれば、ソースを書く手間が省けるので、便利。今回はこれを使った。(他にも、http://3dfile.io/などの3DCG共有サイトがある。)

 ただ、Sketchfabなどのクラウドストレージに上げる場合、簡単かと思いきや、上げ方に工夫がいるので要注意。最新のBlenderや SketchUpなら、拡張ギャラリーからSketchfabアップ用のプラグインが簡単にインストールできるのだが、インストールが簡単だからと甘く見て使うと、うまくアップできず、苦戦することに・・・。

プラグイン画面には、ソフト内からも到達可能。
http://sketchup.google.com/download/plugins.html

 アップロードした時、テクスチャが表示されなかったり、モデル(頂点・面など)がおかしな表示になったりすることがある。これは、プラグインを使った場合だけでなく、プラグインを使わず、ソフトから.daeで書き出した後、手動でSketchfabのアップロード画面からアップロードした場合にも起きうる。

 こういう時は、ソフトから.objや.3dsで書き出しておいて、同時に書き出された画像ファイルと共に.zipで固めてからアップロードすると、うまく表示される場合が多い。

 現状はそんなところだが、まだまだモデルファイルを軽くできるようなら、軽くして再アップしていきたい。


【画像出典】

WebGL(Wikipedia)
https://en.wikipedia.org/wiki/WebGL
posted by 岩崎純一 at 20:24| Comment(0) | TrackBack(0) | 3DCG