ICS MEDIA

先日開催したAway3D勉強会の発表のﾌｫﾛｰｱｯﾌﾟ記事となります｡

写真をRGB3原色に分解して3次元で表示するHTML5 + WebGLのﾃﾞﾓを作ってみました｡ｽﾃｰｼﾞをﾄﾞﾗｯｸﾞすると写真が赤･青･緑の3原色に分解されて表示されます｡ﾗｲﾌﾞﾗﾘはJSﾗｲﾌﾞﾗﾘの｢Away3D TypeScript｣を使っています｡
[rgb_demo+]

• ﾃﾞﾓ
• ｿｰｽｺｰﾄﾞ (TypeScript 1.0)

このﾃﾞﾓを通して紹介したいのは次の3つです｡

1. 色分解のﾛｼﾞｯｸ
2. Flashﾗｲｸで高機能なHTML5版BitmapDataｸﾗｽの紹介
3. Flash Stage3Dにﾌｫｰﾙﾊﾞｯｸ可能なAway3D TypeScriptのﾚﾝﾀﾞﾗｰ

以下で､それぞれについて詳しく紹介します｡

実装方法

このﾃﾞﾓでは､img要素で画像を読み込み､それを色分解し､3D空間に表示しています｡

[140804_s...+]

1. 色分解のﾛｼﾞｯｸ

Web上の多くの画像は赤･青･緑の光の3原色(8bit深度)を使って構成されています｡これを確認するにはPhotoshopが便利で､[ﾁｬﾝﾈﾙ]ﾊﾟﾈﾙを使えば赤･青･緑それぞれのﾋﾟｸｾﾙ情報を確認できます｡

[140804_rgb+]

今回のﾃﾞﾓにおいては写真をRGB(赤･緑･青)のﾚｲﾔｰに分解し､それぞれ描画ﾓｰﾄﾞ｢ｽｸﾘｰﾝ｣(もしくはﾋﾟｸｾﾙのｶﾗｰ情報を加算するもの)に設定して黒背景に重ねています｡そうすることで元の画像が復元されます｡参