pg08

テーマ ＣＧとプログラム

demo1 demo2

外部サイト： Blender入門

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

・CGソフト Blender のスクリプト機能を利用し、プログラムによる３ＤＣＧを作成する。

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

・プログラム言語 Python を使用する。

Python は、テキスト処理にに優れ、Ｗｅｂサービスの開発（サーバサイド）に利用されています。

また、ＡＩの研究分野で、機械学習用のツールを利用する際のスクリプト言語としても利用されています。

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

Blenderの起動： 解説動画（演習１の内容１部含む）

スタート → コンピュータ → ボリューム（Ｄ：） → Blender を開き、 blender.exe をダブルクリック。

今回は、Blenderの操作方法についてはほとんど触れずに、Python スクリプトによるCG作成を中心に演習をする。

Blenderによる３ＤＣＧ作成に興味のある受講者は、入門サイトを検索するか、関連資料をみて取り組んでみよう。（旧科目 デジタルエンタテインメントの 資料１ 資料２）

演習１

Blenderのスクリーンレイアウトを Python Scripting に変更

コンソールで以下のコマンドを試す。

1+1
bpy.data.objects['Cube'].location.x += 1
bpy.data.objects['Cube'].location.y += 1
bpy.data.objects['Cube'].location.z += 1

※ コンソールのキーボード操作

上下矢印キー↓↑ で入力履歴の呼び出し

３Ｄビューの add メニューから Mesh -> Ico Sphere で球体モデルを追加する。

bpy.data.objects['Icosphere'].location.z += 10

３Ｄビューの表示範囲をマウスで調整する。

・マウスホイール ズームイン・アウト

・ミドルボタン（ホイール）でドラッグ シーン回転

カメラ操作ボタンの確認

※数値入力ＰＡＤのキーを使用する

１ ３ ７ フロント サイド トップ

５ パースの ＯＮ ＯＦＦ

０ カメラ視点

２ ４ ６ ８ シーン回転

HOME シーン全体を表示

解説動画（つづき）

アウトライナーパネルのシーンツリーを確認

Icosphere を選択

プロパティパネルの表示内容をオブジェクトに変更

bpy.data.objects['Icosphere'].location = [ -10 , 0 ,  0]
bpy.data.objects['Icosphere'].scale = [2,2,2]

Cubeを回転操作する。回転にはオイラー角（euler）を使用して、Ｘ軸、Ｙ軸、Ｚ軸の順番で回転させる。

上から順に、 約１８０度回転、約９０度回転、約４５度回転

bpy.data.objects['Cube'].rotation_euler = [0,0,3.14]
bpy.data.objects['Cube'].rotation_euler = [0,0,3.14/2]
bpy.data.objects['Cube'].rotation_euler = [0,0,3.14/4]

回転の角度指定は、 度（degree）ではなく、ラジアン（radian）を使う。 π＝３．１４１…＝１８０度

マテリアル（色）を作成し、オブジェクトに設定する

※ diffuse_color 散乱ｊ光（物に光を当てたときに見える、物質の色）

color0 = bpy.data.materials.new('mycolor')
color0.diffuse_color = [1, 0, 0]

# マテリアルが未設定のオブジェクトに対して、マテリアルを追加する場合。

bpy.data.objects['Icosphere'].data.materials.append( color0 )

# マテリアルが設定済みのオブジェクトに対して、マテリアルを上書きする場合。

bpy.data.objects['Cube'].material_slots[0].material = color0

スクリプトでオブジェクトを生成して、場所を移動し、色を設定する。

bpy.ops.mesh.primitive_ico_sphere_add()
bpy.context.object.location = [1, 2, 3]
bpy.context.object.data.materials.append(color0)

※ bpy.context.object は、現在操作中のオブジェクトを示す。↑の例では、新規作成したico sphere が操作対象。

演習２

解説動画

レイヤーを２へ切り替える

マウス操作 or 数字キー２（数値入力PADではないほう）

Blenderの Text Editor 画面のメニュー new を押す。

Python スクリプトの入力と実行

import bpy
import math
materials = []
for i in [0, 1, 2, 3, 4, 5, 6]:
    materials.append(bpy.data.materials.new('Color' + str(i)))
materials[0].diffuse_color = [1,0,0]
materials[1].diffuse_color = [0,1,0]
materials[2].diffuse_color = [0,0,1]
materials[3].diffuse_color = [0,1,1]
materials[4].diffuse_color = [1,0,1]
materials[5].diffuse_color = [1,1,0]
materials[6].diffuse_color = [1,1,1]
for i in [0, 1, 2, 3, 4, 5, 6]:
    t = 2.0 * math.pi * i / 7
    x = 1.0 * math.cos(t)
    y = 1.0 * math.sin(t)
    bpy.ops.mesh.primitive_ico_sphere_add()
    bpy.context.object.location = [x, y, 0]
    bpy.context.object.scale = [0.5, 0.5, 0.5]
    bpy.context.object.data.materials.append(materials[i % 7])

スクリプトの実行には Run Script ボタンを押す。

※マウス操作で、手動でオブジェクトを削除してみる。

右クリックで削除するオブジェクトを選択 → deleteキー → delete OK を選択

オブジェクトの配置半径を変更する。

    x = 4.0 * math.cos(t)
    y = 4.0 * math.sin(t)

※オブジェクトを 全選択 するには a キーを押す。 前回作成したオブジェクトが不要なら、全削除する。

配置するオブジェクト数の増加、半径の拡大、１つあたりの角度の変更

for i in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]:

t = 2.0 * math.pi * i / 7 / 2

x = 6.0 * math.cos(t)

y = 6.0 * math.sin(t)

提出物１（演習１と２）

Python スクリプト と ３Ｄビューを収めたスクリーンショット を Webclass の第１０回課題に提出

３Ｄビューは、SHIFTキー を押しながら、 キー 1 と 2 を順に押して、レイヤー１と２が表示（重なる）されている状態にしておくこと。

HOMEボタンを押して、全てのオブジェクトが表示されるようにすること。

例）

提出期限 来週まで。

以下の応用にチャレンジしてみよう。

・ 色の設定は [1,0,0] のほか、 [0.5, 0.5, 0.5] （この数値は灰色になる）など、 0.0 から 1.0 までの値が指定できる。

・ 色の数や、順番を入れ替えてみる

・ オブジェクトの変更

bpy.ops.mesh.primitive_ico_sphere_add()

を

bpy.ops.mesh.primitive_cube_add()

へ変更すると 球体 から 立方体に オブジェクトを変更できる。

他の種類の立体を使いたい場合は、

３Ｄビューメニューの Add -> Mesh からオブジェクトの種類を表示して、使用するコマンドを確認できる。

・for ループの部分をコピーして、 オブジェクトを表示する座標や サイズ を変更する

※ location = (x, y, 0) を location = (x, y, 2) と変更すると、表示位置のＺ座標を変更できる。

・for ループを２重にする。

例） Python は、インデント（コードの表示位置）の高さで、ループ範囲（ブロック）を表現するので、↓のコードを使用する際は、左側の空白部分も正確に入力すること。

for z in [0, 2, 4]:
    for i in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]:
        t = 2.0 * math.pi * i / 7 / 2
        x = 6.0 * math.cos(t)
        y = 6.0 * math.sin(t)
        bpy.ops.mesh.primitive_ico_sphere_add()
        bpy.context.object.location = [x, y, z]
        bpy.context.object.scale = [0.5, 0.5, 0.5]
        bpy.context.object.data.materials.append(materials[i % 7])

※↑このコードには、 インデントが ２レベル ある。外側が ｚ座標を変化させるループ、 内側が円周に配置するループ。

・ ランダムの利用。 コメント欄のリンク先を参照

・range の応用。

range(0,10) で、 [0,1,2,3,4,5,6,7,8,9,10]

range(0,10,2 ) で、 [0, 2, 4, 6, 8] 2つおき

range(10,0,-1)で、 [10, 9, 8, 7, 6, 5, 4, 3, 2, 1] の逆順をリストを作成できる。

例）

for i in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]:

は

for i in range(0,13):

と同じ動作。 range は丸括弧 ( ) を使うので注意。

・Python の リスト内包表記 を利用して、複雑な数列を作成し、利用する。コメント欄のリンク先を参照

例） ２乗の数列の生成

[i*i/10 for i in range(0, 10)]

↑で、↓を生成

[0.0, 0.1, 0.4, 0.9, 1.6, 2.5, 3.6, 4.9, 6.4, 8.1]

作成例１）

高さ ｚ の 値に反比例（1/z）するように半径をすぼめるコード。

for z in [1, 2, 3, 4, 5, 6, 7]:
    for i in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]:
        t = 2.0 * math.pi * i / 7 / 2
        x = 6.0 * math.cos(t)
        y = 6.0 * math.sin(t)
        bpy.ops.mesh.primitive_ico_sphere_add(size = 0.5, location = (x/z, y/z, z*2))
        bpy.context.object.data.materials.append(materials[i % 7])

作成例２）

高さｚに比例して半径を拡大するコード。

for z in [1, 2, 3, 4, 5, 6, 7]:
    for i in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]:
        t = 2.0 * math.pi * i / 7 / 2
        x = 6.0 * math.cos(t)
        y = 6.0 * math.sin(t)
        bpy.ops.mesh.primitive_ico_sphere_add(size = 0.5, location = (x*z/7, y*z/7, z*2))
        bpy.context.object.data.materials.append(materials[i % 7])

作例３）

２種類のオブジェクト(cube ico_sphere) を使用。５色に減色。上下の段で、色を連続して使用。

for i in [0, 1, 2, 3, 4, 5, 6]:
    t = 2.0 * math.pi * i / 7
    x = 6.0 * math.cos(t)
    y = 6.0 * math.sin(t)
    bpy.ops.mesh.primitive_cube_add()
    bpy.context.object.location = [x, y, 0]
    bpy.context.object.data.materials.append(materials[i % 7])
c = 0
for z in [12, 10, 8, 6, 4, 2, 0]:
    for i in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]:
        t = 2.0 * math.pi * i / 7 / 2
        x = 4.0 * math.cos(t)
        y = 4.0 * math.sin(t)
        bpy.ops.mesh.primitive_ico_sphere_add()
        bpy.context.object.location = [x*z/12, y*z/12, 12 - z]
        bpy.context.object.scale = [0.5, 0.5, 0.5]
        bpy.context.object.data.materials.append(materials[c % 5])
        c += 1

演習２

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 + スクリプト