|
カッコいい画像検索みたいのを作りたくて、javascriptを使ってやってみた。
http://imgsearch.selfip.com/test/3dimg.php <- ココで動きます（度々更新してます）。
↓キャプチャした画面はこんな感じ。
やっぱり重いです。
３２枚くらいの画像を動かすので精一杯な感じ。
3D空間に画像が浮かんでて「クリック」するとそのページへ飛べる検索みたいなイメージだったのだが、とにかく重過ぎ…。
困ったなぁ～。コレくらいでこの重さではなぁ～。
違う見せ方でないとダメなのかなぁ～。
通信レースゲームみたいなやり方（点を滑らかに結ぶ）でやってみるかな…。
…と、調べてみると、空間計算に時間取られてるのではなく、描画時間がネックだった。数多いだけで重くなる。これは対処しようがないなぁ。
~~~~
どうやら、半透明処理が重い様子。
・最初から半透明を使わなければ４倍くらい早い（感覚的に…）。
・１００％をセットしても重くなる（IE）。これで２倍くらいに落ちる。
・最初だけにしても、毎回セットする様にしても、同じ。
・値は１００％でも何でも同じだが、個々で別々の値だと激重になる。
どうしようか考えたが、それぞれの画像に半透明値を与えない事にはどうにもならないので、やり様がないかなという感じ。
空間の表現は半透明が最適だし『範囲を狭める』という対策しかないかな。
新しくしました。
http://imgsearch.selfip.com/test/3dimg.php <- ココで動きますよ。
~~~~
ジンバルロック発生！
真上＆真下を向くとカメラベクトルが急激に変化する。
オイラー角制御だからなぁ～。
回避するにはクォータニオンか…。
ゲームライブラリとかDirectXとかOpenGLなら、あらかじめ関数用意されてるけど、javascriptなので自分で理解して組むしかない…。
段々辛くなってきた…。
ココ↓を参考にしたら呆気なく出来た！
http://marina.sys.wakayama-u.ac.jp/~tokoi/?date=20040321
これで『アポロ１３号』も苦しんだジンバルロックから解放。
さて、次、移動処理（クォータニオンだと移動に癖があるんだっけ？）。
移動も完成。
マウスホィールで前後動きます。
手間取った…。
よくよく考えてみれば、変換行列は求まってるんだからスクリーンの奥の位置をその逆行列と掛け合わせて実際の座標を求めるだけ（クォータニオンをどうにかして座標に変換しようとしていた）。
それにしても、この得体の知れないクォータニオンという数、誰が考えたのかなぁ？と調べてみたら『ハミルトン』という人だった。
こんなの思い付くなんて凄い。調べるとやっぱり神童として知られて図抜けた才能の持ち主だったらしい。
でも、晩年にはアルコール中毒に溺れて、死んだ時の部屋には『酒と肉汁にまみれた二百数十冊のノートで埋め尽くされていた』とか…。
何もかもが凄い数学者だな。
『ジンバルロック』でふと思い出した。中学生の頃PC-6001で円を描画した時にXからYを求めて円を書いたが、実は「角度からXYを求めた方がいいんだなぁ～」と思った同じ感覚だな。
ZERO3でも動くのかやってみた。
マウスのホィールが無いので移動は出来ないけど、動くぞ！
激重だけど…。
~~~~
↓実際にこの3Dを使って公開しているサイトはコチラです。
http://imgsearch.selfip.com
使ってみてくださいね。
※ 『javascript』に繋がる関連物を 視覚的に探しだせるサイトを作ってみました（よろしければクリックしてみてくださいね）。
リンク元：
(2) : http://cgi.search.biglobe.ne.jp/cgi-bin/search_bl_top?start=20&ie=utf8&num=10&q=%E3%82%A2%E3%83%88%E3%83%A0%E3%81%AE%EF%BC%93D&lr=lang_ja
(1) : http://www.google.co.jp/search?hl=ja&q=JavaScript+quaternion&btnG=%E6%A4%9C%E7%B4%A2&lr=&aq=f&oq=
(1) : http://www.google.co.jp/search?hl=ja&safe=off&client=firefox-a&rls=org.mozilla%3Aja%3Aofficial&hs=lvB&q=javascript+%E3%82%AF%E3%82%A9%E3%83%BC%E3%82%BF%E3%83%8B%E3%82%AA%E3%83%B3&btnG=%E6%A4%9C%E7%B4%A2&lr=lang_ja&aq=f&oq=
(1) : http://www.google.co.jp/search?hl=ja&q=javascript+3d+vector+quaternion&btnG=%E6%A4%9C%E7%B4%A2&lr=&aq=f&oq=
(1) : http://www.google.co.jp/search?hl=ja&rlz=1C1GGLS_jaJP295JP301&q=%E3%82%AF%E3%82%A9%E3%83%BC%E3%82%BF%E3%83%8B%E3%82%AA%E3%83%B3+javascript&btnG=%E6%A4%9C%E7%B4%A2&lr=&aq=f&oq=
ページ閲覧者数：15人
[ javascript ] 一覧へ
|
RSS2.0
