2012/08/26

色の分布を3Dで表示するJavaScriptをThree.jsで作った

画像の色の分布を3Dで表示するJavaScriptをThree.js(WebGL)を使って作った。

(WebGLが利用できるブラウザでないと動かないので、FireFoxやChromeでみてください)

サーバーに送信されることなく好きな画像の分布も表示できるので、遊べるんじゃないかと思います。

色空間について

使っている技術としては、まず3Dで表したときに人間の近くに近いらしいL*a*bという色の表し方へRGBをある程度決めうちしつつ変換してます。

ちょっと調べた限りでは、本当はRGBの情報だけではLabに変換できないと思いますが、本物との差は分布を出すだけなら無視していいと思ったのでそのままです。

それで、その変換した分布をJavaScriptのライブラリThree.jsのParticleの親玉のようなParticleSystemオブジェクトにパーティクルをいっぱい置いて表示してます。

WebGLなのでパーティクルが数万あっても軽い。

画面をマウスでグリグリ動かす

3Dをマウスでグリグリ回して見られるのは、Three.jsのTrackballControlsオブジェクトのおかげです。→詳しく記事を書きました。

そもそもの発端


そもそも絵を描くときに色が単純だと安っぽくなるけど、グラデーションをどうかけたらいいかがわからなかった。

そこで色の分布が出せたらわかるんじゃないか?と思って作った。

3DPlotColorで実際に表示させてみると、自分の絵は非常に単純な形で色が置かれていることがわかる。プロの人は色が複雑で写真に近い。

というわけで色を変化させるときはここに注意しながら、また絵を描いみようと思う。

参考にさせてもらったサイト様

色空間の変換(3)
RGBからLabへの変換はこちらのサイトの変換式を参考にしました。
Creating Particles with Three.js | Aerotwist(英語)
Three.jsでのパーティクルのチュートリアルがあります。
写真素材 足成【フリーフォト、無料写真素材サイト】
綺麗な画像のサンプルは一部ここからいただきました。著作権表示やリンクも必要ない画像の素材サイトです。(おおぶちゃんも教えてくれてありがとう)

追記

@yoyaさんにいろんなバージョンを作ってもらいました。(ブログ記事はこちら

RGB色空間バージョン
HSV色空間バージョン

追記2

色空間を選べるようにしました。dat.GUIというjsのライブラリを使ってあります。Three.jsのデモでも使われているライブラリで、画面の邪魔をしないので相性がいい気がします。基本的なGUIや、階層表示もあって、プリセット機能もつけられるっぽいです。→サンプル(dat.GUIの公式サイト)

軸もみやすくなりました。@yoyaさんの軸を虹色にするコードも取り入れさせてもらいました。


コメントを投稿