旧課題GLSL

演習２

2017.2 にアプリFiltersが配信終了につき２０１６年度までの課題

https://www.kayac.com/service/other/1207

予習＆準備： iPhoneアプリ FILTERS を App Store からＤＬ（無料）してインストールしておく。（iPad 専用アプリではないので、ＤＬする際に検索先を変更する）。

iOS アプリ のカメラアプリ ＋ OpenGL GS シェーダー言語 「FILTERS」で学ぶ GLSL （制作 カヤック）

iPhone アプリ FILTERS を App Store からＤＬ（無料）してインストールしておく。

（iPad 専用アプリではないので、ＤＬする際に検索先を変更する）。

ＧＬＳＬとは： 画像処理（ＣＧ作成、やカメラ）で、画像の全ての画素（ピクセル）の色を、プログラムにより修正・加工するための専用言語

組み立てパソコンやゲーム機などグラフィック性能の高い製品は、このＧＬＳＬの処理能力も高性能である。

（ゲームのエフェクト処理、モーションブラーなどで活躍）

操作方法をデモするので、いっしょに操作してみましょう。

提出物２

FILTERS で撮影した写真を Webclass にアップロードする。（問題２）

方法：

iPad から Webclass を開いて、ログイン。提出課題を選択して、 ファイルをカメラロールからアップロード。

応用（チャレンジャー求む）：

Twitter か Facebook のアカウントを所有している受講生は、 パソコンと Filters を連携させて、

オリジナルのフィルターを作成

することができます。

自作したフィルターで撮影した写真をアップロードしてみてください。

Filterのサンプルにあるような面白いフィルターの自作はある程度の勉強が必要です。

提出課題としては、練習用のシンプルなものでＯＫです。

作成例） 赤の世界

下記のGLSLコードでは、

color 変数にカメラで撮影したピクセルの色が記録されている。

color.r は red

color.g は green

color.b は blue

の各色の値になる。

次のコマンドで、画面上の色を決める。

gl_FragColor = vec4( 赤色の値, 緑色の値, 青色の値, 1.0);

次の例は、カメラで撮影した色をそそまま画面の色として設定している。

gl_FragColor = vec4( color.r, color.g, color.b, 1.0);

例） 赤色だけカメラ画像を使用し、緑と青の色は使用しない。 → 赤色だけの世界

void main()

{

vec2 uv = iScreen;

vec4 color = texture2D(iCamera, uv);

gl_FragColor = vec4(color.r,0.0, 0.0, 1.0);

}

例） RGB の色成分を GBRの順に入れ替える。 → 色の狂った世界

void main()

{

vec2 uv = iScreen;

vec4 color = texture2D(iCamera, uv);

gl_FragColor = vec4(color.g,color.b, color.r, 1.0);

}

以下の演習テーマは、時間が余れば、次回以降で扱う予定。

SVGフォーマットの画像をWebに埋め込み。 inkscape + スクリプト