Swift Playgrounds コードを学ぼう１ の補足

テーマ ＣＧとプログラム

準備： iOSアプリ The MellowRoom を App Store からＤＬ（無料）してインストールしておく。 配信サイト

・ゲーム用CGにおいて、色の調整やエフェクトで重要な技術 GLSL について iOSアプリ The MellowRoom で試す。

演習１

The MellowRoom はカメラ用のエフェクトをCG用プログラム言語 GLSL で自作できるアプリ。サンプルのエフェクトが多数入っているので、サンプルのエフェクトのGLSLコードを改造したり、自作することができる。

コードの制作は、ノードタイプのビジュアルプログラミングで行う。

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

グラフィック性能の高い製品は、このＧＬＳＬの処理能力も高性能である。ゲームの画像エフェクトなどリアルタイムの画像処理で活用されている。

GLSLは、OpenGL Shading Language の略で、C言語に似たシェーディング言語である。シェーディング言語はコンピューターの画像処理装置（グラフィックスチップ GPU）を直接プログラムでコントロールするための専用言語。

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

The MellowRoomのサイト

インカメラでフィルターを選択して撮影している様子。

カメラ切替は 丸矢印をタップ

フィルターは 適当に選択

スライダーの操作と画面タップの操作を試す

例）Hue So Crazy

ペンをタップすると、GLSLのコードを確認できる。

ノードタイプのビジュアルプログラミング

左から右へとカメラ（入力）から画面（出力）へと撮影画像のピクセルのデータが流れて処理される

× をタップしてコードを全消去する。

カメラとビデオを接続する。

緑のチェックをタップしてカメラ画像を確認

エフェクトなしの通常の撮影状態になる

右下隅の ＋ をタップでノードが一覧表示される。

タップして 白黒画像化 B&W のノードを選ぶ。

（ヒント） ノードの種類が多いので、検索欄に ノード名を入力して検索するとよい。

この様に接続する。表示を確認する。

Split と Join を追加する。

以下の様に接続する。表示を確認する。

カメラのピクセルの色情報を、ＲＧＢに分解し（ノードの表記ではＸＹＺ）、Ｒ成分だけを画面に送っている。

この様に接続する。表示を確認する。

青成分と緑成分を交換して表示する。緑色の服は青く表示される。

この様に接続する。表示を確認する。

Slider を操作すると、画面が回転する。

画面をタップした位置を回転の基準軸に設定できる。

色の変更と回転を両方とも適用した例

一つ前の例で作成したコードに色の分離用の Split と Join を加えた。

課題提出（演習１）

The MellowRoomの GLSLのノードプログラムの スクリーンショット と そのエフェクトのカメラ画像（カメラアイコンをタップして撮影） をWebclassにアップロード。

エフェクト用のGLSLは適当に修正したものや、他のエフェクトを改造したものを利用してもＯＫ。

演習２：

・CGソフト Blender のノード機能を利用しShaderよる３ＤＣＧを作成する（今回で扱う）。

Blender はオープンソースのフリーソフトウェアで、無償で利用できる。

・プログラム言語 Python を使用する（次回扱う）。

準備：

スタート メニュー から Blender を起動する。

※ 起動後に言語選択のメニューが現れるが実演は英語メニューのままで進める（言語切り替えで表示が見切れるなどの不具合が出るため）。日本語メニューに切り替えてもよいが英単語と日本語の対応に自信がない受講生は英語メニューで取り組んで欲しい。

※ 言語表示の切り替えは Edit -> Preferences -> Transration -> チェックを入れる -> 言語を選択(automatic から切り替え）

Blenderの基本操作：

今回の演習で使用する操作についてのみ実演して説明する。

編集画面の変更

「Shading」をクリックしてShader Editor 画面に切り替える

ツールの表示

Tを押す。または３D編集画面の左枠の「＞」をクリックして編集ツールを表示する

カメラビューに変更

３D編集画面上のカメラアイコンをクリックする

マウスによるビューの操作

中央ホイール：ズーム

中央ボタン：ワールドの回転

ビューが切り替わるのでカメラビューに戻す。

左ボタン：オブジェクト選択

中央に表示されている Cube を選択して操作の練習をする。

オブジェクトの操作

移動・回転・スケール

Cube を脇に移動してよけておく

モデルの追加

add → Mesh → Monkey

Shader の追加

New を押す。デフォルトShader が表示される。Principled BSDF と Material Output の二つ。

以下の画像の様に Shader Node を追加して接続する。

ノード編集画面でのズームとスライド操作もできるので試す。

Add -> Shader -> Refraction BSDF

IOR （屈折率）を調節して効果を確認する

Material Output への接続を以下のShaderに切り替える

Add -> Shader -> Glossy BSDF

Add -> Texture -> Checker Texture

Shaderの合成を行う。

Add -> Shader -> Mix Shader

Fac を調整して効果を確認する。

アニメーションの設定：

表示フレームの確認

フレームの再生・移動

スペースキー 再生のOn・Off

矢印 ← → フレームの移動。 Shift ← 先頭フレームへ移動。Shift→ 最終フレームに移動。

初期状態で 250フレームのアニメーションフレームが設定されている。最終フレームは 250 になっている。

先頭フレームに移動する

プログラムを使用せずにBlenderのアニメーション機能で Mix Shader の Fac の値を時間変化（アニメーション）させる。

操作のポイント：

アニメーション キー の設定をする。その際に、Mix Shader をマウスでクリックして選択し、さらに Fac をクリックして選択する。

Facの値を 0.0にする。

次に 「I」を押す（または右クリックから Insert Keyframe）

※アニメーションキーが設定された部分は色が変化する。さらにアニメーションを再生すると別の色に変化する。

最終フレームに移動する

Mix Shader の Fac を 1.0に設定する。その後、キーフレームを挿入する。

アニメーションの確認

左右矢印キーで Fac が変化することを確認。

※ ここで次のステップに備え Mix Shaderノードをマウスで選択しておくこと。

Dope Sheet の表示：

ウインドウを切り替える。 Animation -> Dope Sheet

最終フレームのキーフレームをマウスで選択して、左の方に移動する（時間が前の方）

※ ここで最終フレームのみを選択することに注意する。先頭フレームと最終フレームの両方を選択したままフレームを移動すると、両方とも移動してしまう。

Dope Sheetをズームアウトしてフレーム全体を確認するとよい。

Graph Editor の表示：

ウインドウを切り替える。 Animation -> Graph Edior

※ここでアニメーションカーブが表示されない場合は、Shader Editorで Mix Shaderが選択されていないのでEditorを切り替えて選択して戻ってくる。

アニメーションパラメータの選択： 左のパネルの▽を開いて行き

Default Value(Fac) を選択する。

メニューを表示させる（Nを押す。またはGraph Editorの右枠の「＜」ボタンをクリック）

Modifierの設定

Modifiers タブを開く。 → Add Modifier から Cycles を選択

Shader Editorに戻す：

ウインドウを切り替える。 General -> Shader Editor

アニメーションの再生を確認する。その後、フレーム１に戻しておく。

プログラムによるアニメーションの設定：

編集対象のオブジェクトを切り替える。 Cube を選択する。

Add -> Color -> Bright Contrast

Add -> Input -> Value

アニメーションを設定する：

Value の 1 フレーム目に 0 を、最終フレーム 250 に 3.141592 を設定しキーを挿入する。

Add -> Converter -> Math

Multiply に切り替える

Add -> Converter -> Math

Sine に切り替える

Multiply の Value を変更して点滅間隔を調整する。値は２０～を設定して様子を見る。

課題２の提出：

ここで作成したBlenderのシェーダー ノード の画面をスクリーンショットして Webclassにアップロードする。

スクリーンショットは、Windows Ink ワークスペースの機能を利用するとよい。

Windowsのタスクバーに Windows Inkのアイコンが表示されていない場合は、タスクバーを右クリックしてWindows Ink ワークスペース ボタンを表示 にチェックを入れる。

グラデーションやその他のテクスチャーの設定：

時間に余裕がある場合、以下も試みる。

３D編集ウィンドウで

Add -> Mesh -> UV Sphere

Shader Editor で

New を押して Shader を新規作成

画像を参考に Shader Nodeを組んでみよう。