だいぶ久しぶりに更新になります。
プライベートでも仕事でも言い意味でも悪い意味でも大変な事あったこの頃です！！
今回久々に興味をもったWebGLをちょっと触ってみました。
といってもthree.jsというめちゃくちゃ便利なjavascriptを利用して、３Dモデリングツールを使ってつくった何かわからんウニみたいなものを表示するサンプルです。
ちなみになんど自分が持っている結構古いAndroid2.3の標準ブラウザでも動作しました！
スマホすご！
↓↓↓
WebGL3Dモデルくるくる
※本サンプルはwebGLを利用しているので、chromeブラウザ推奨です！
three.js
https://github.com/mrdoob/three.js/
追記：
上記デモの端末キャプチャ
Xperia acro(AU)
Android OS:2.3.4
標準ブラウザ
ネットサーフィン中にいいもの見つけたのでピックアップ！
WebGLを使ったブラウザ上で人が動く３Dの世界！
上記URLより見れます！（chrome推奨かと)
a/w/s/d で移動
spaceでジャンプなどできます。
またマウスで視点を替えたり、ブロックを消したり、選んだりできましたｗ
最近はgoogle先生のMapsGLなどWebGlを使ったサービスを良く目にするようになったので、
今後他のブラウザもwebGLをブラウザに標準装備していってほしいです！
いいもの見つけたので、久々の更新ｗ！
WEBGLを利用した刻々と変化する３Dアニメーション！すごすぎ！
http://lights.elliegoulding.com/
上記から見れます！Chromeブラウザ推奨かと！
※音楽が流れます
↓↓↓
このリアルさ半端ないです、blurを使った遠近間や、反射の光具合など、、、
すごすぎます！
ちなみにnキーを押すとナイトモードに切り替わり！12345キーで視点を切り替えられます！
↓↓↓
下記から見れます！これ作った人ホントすごい！（chrome推奨かと）
http://alteredqualia.com/three/examples/webgl_cars.html
先週の休みにせっかくこのブログをリニューアルしたので、
ＴＯＰのヘッダー画像にギミックを入れてみました！
画面上部の画像の上でマウスを動かすと奥ゆきがあるように動きます。
最近googleのトップロゴもよくギミックがつかわれていますが、まけじと何か新しいのを入れようと思い色々さがしたところ『jquery.smart3d』というライブラリを発見！
『jquery.smart3d』
http://4coder.info/en/code/jquery-plugins/smart3d/
奥ゆきを出し３Ｄっぽくみせることができるライブラリです。
いくつか用意した画像を何枚もかさねています。png画像を利用して、blurをかけてそれっぽくしてます。
インスパイアされたのはバイオハザード４のこのシーン↓（汗
ただ背景が白くて奥ゆきがあるというだけですが、、（汗
・・・・・利用方法も簡単で、下記ライブラリとjqueryを読んで
<script type="text/javascript" src="/js/jquery_smart3d/jquery.smart3d.js"></script>
あとは、jqueryで下記のように記述し
<script type="text/javascript">
$(document).ready(function() {
$('#smart3d-head').smart3d({ last_is_static: true });
});
</script>
htmlで下記のように表示した画像を指定する。とてもシンプルにできています。
<ul id="smart3d-head" style="display:none">
<li><img src="/images/headers3d/back1160.jpg" /></li>
<li><img src="/images/headers3d/matsudapresslogo3d.png" /></li>
</ul>
一応ＩＥにも対応してます。
またmedia queriesでスマホなどの画面サイズ小にも対応するため、
画面サイズが大きくないとこのギミックが表示されないようにしました。
※onloadで読み込んでいるので、読み込みが完了してから上部画像みていただけると幸いですｗ
ずっとプログラマーとしてやってきたので、
最近デザインももっと勉強しなきゃと日々危機感を感じている今日この頃。。