edom18

# CSS Shaderを使ってみる。

このデモは[CSS custom filter](http://adobe.github.com/web-platform/samples/css-customfilters/)を使っています。  
現状対応してるのは *Chromeのみ* です。  
さらに、*chrome://flags から 「CSS Shaderを使う」をオンにしないと正常に表示されません*。

調べたり、分かったことは[Qiitaで記事にしてまとめる](http://qiita.com/items/0a976320d057aff259cc)予定。

edom18

#自作ライブラリでデモ

自作した[Canvas context 2Dで座標変換を実装してみる](http://jsdo.it/edo_m18/9Xku)を元に、ちょっとしたデモを作ってみました。

※動画の読み込みが途中で止まることがあるので、画面が真っ白な状態から進まない場合はリロードしてみてください。

edom18

function easing(time, begin, change, de) {
   var s = 2.5;

    if (t / d >= 1) {
        return b + c;
    }

    return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; 
}

edom18

#CSS+JSでルービックキューブを描いていきます。

* オートクリア機能を追加。
* 回転方向の履歴を保持するよう機能追加。
* ルービックキューブ完成時に完成のイベントを発火するよう修正。
* 初期状態をランダムな状態からスタートするよう修正
* パフォーマンス・チューニング。iPhone5でだいぶ快適に動作するように。
* ルービックキューブのキューブ間の間隔を指定できるよう修正。
* DEMOモードを追加。
* パフォーマンス・チューニングを若干。

edom18

#CSS ShaderでGoogle Mapを地球儀風にしてみる

参考: [Getting started with CSS custom filters](http://alteredqualia.com/css-shaders/article/)

edom18

#CSS ShaderでMac OSXのジニーエフェクトを実装してみる

「-」ボタンを押すことでジニーエフェクトが実行されます。  
Shiftキーと同時押しで、Mac同様スローモーションになるようにしてみました。

ただ、とりあえず動きだけそれっぽくしてるので、  
アニメーション管理とかだいぶ適当ですｗ

でもShader部分はすごいシンプルなので、  
改めてCSS Shaderのすごさを思い知った。

edom18

#簡易3D表現

まだ製作途中です。
行列を使わずに、比較的簡単な方法で3D的表現ができるように目指します。

edom18

function makeQuaternion(radian, vector) {
    var ret = new Quaternion(),
        ccc = 0,
        sss = 0,
        axis = new Vector3(vector.toArray()),
        norm = vector.norm();

    if (norm <= 0.0) {
        return ret;
    }

edom18

#Three.jsでトゥーンシェーダの実装の実験をしていきます。

実装については以下の記事を参考にさせてもらいました。  
[トゥーンレンダリング | wgld.org](http://wgld.org/d/webgl/w048.html)

##更新履歴

* 2013.08.06 - シェーダ切り替えスイッチを追加。

##現状の問題点

edom18

#WebGLで物理演算

WebGLライブラリの代表格、[Three.js](https://github.com/mrdoob/three.js/)と、  
それにインスパイアされて作られた[Cannon.js](https://github.com/schteppe/cannon.js)を組み合わせて物理演算させるデモ。

Three.jsにインスパイアされただけあって、メソッド名とか使い方がかなり似ているので使いやすいです。