n 授業「コンピュータグラフィックス特論」サポートページ (2021年度後期授業)
トップページ支援授業「コンピュータグラフィックス特論」サポートページ (2021年度後期授業)

授業「コンピュータグラフィックス特論」サポートページ (2021年度後期授業)

URL は https://www.kkaneko.jp/a/cg.html

授業名: コンピュータグラフィックス特論

担当者: 金子邦彦

トピックス:マーカーレスのモーションキャプチャ,3次元コンピュータグラフィックス,種々のシミュレーション,人体アニメーション,コンピュータビジョンとコンピュータグラフィックス

1. Blender のインストール,Blender の基本機能

1-1. Blender のインストール

1-2. Blender の概要

Blender の画面構成,立体の新規作成,カメラの調整とレンダリング,マテリアル

【動画で実演している内容】

3Dビュー

【サイト内の参考ページ】

2. Blender の基本操作

2.1 オブジェクトの配置,ローカル座標系,グローバル座標系

【ここで行うこと】

Blender のシーンの中に,さまざまな種類の立体を配置する.

Blender の操作法としては,立体の追加,移動,回転,拡大・縮小の操作を学ぶ. 基礎としては,グローバル座標系とローカル座標系を知る.

[image]

資料: https://www.kkaneko.jp/db/cg/layout.html

【まとめ】

立体には,さまざまな基本的な立体(球,円柱,平面など)がある. 立体は,移動,回転,拡大縮小できる. シーンは,複数の立体を含むことができる. 座標系には,グローバル座標系とローカル座標系がある.グローバル座標系は,シーン全体のもの.ローカル座標系は,オブジェクト個々のもので,オブジェクトが傾くとローカル座標系も傾く

2-2. レンダリング,作業視野とカメラ視野

【ここで行うこと】

Blender のシーンの中に,さまざまな種類の立体を配置し,カメラ視野を調整しながら,レンダリングを行う.

Blender の操作法としては,レンダリング,作業視野とカメラ視野の切り替え,カメラの調整,マテリアル 基礎としては,作業視野とカメラ視野を知る.

[image]

資料: https://www.kkaneko.jp/db/cg/blender.html

【まとめ】

視野には,カメラ視野と作業視野がある. レンダリングは,カメラ視野で行われる. 立体には,マテリアルを設定することができる.

3. 落下や衝突のシミュレーショ,パーティクルアニメーション

3-1. 剛体シミュレーション

【ここで行うこと】

Blender の剛体シミュレーションの機能を使い, 落下や衝突のシミュレーションを行う. オブジェクトをいろいろと配置して,落下や衝突のシミュレーションを行ってみる.

[image]

資料: https://www.kkaneko.jp/db/cg/rigid.html

【まとめ】

Blender にはアニメーションのプレビュー,アニメーションのレンダリングの機能がある.アニメーションのプレビューは,スペースキーで開始,一時中断できる.

Blender での剛体シミュレーションでは,剛体は, アクティブとパッシブの2種類がある. アクティブは普通の剛体である. パッシブは移動しないように設定された剛体である.

3-2. パーティクルアニメーション

【ここで行うこと】

パーティクルアニメーションは,「パーティクル」と呼ばれるたくさんの粒を使うシミュレーション

波,煙,炎,流れの表現などに利用できる.

[image]

Blender を一度終了し、もう一度起動してから行ってください(いままで作ったデータは全て消したい)

資料: Blenderでパーティクルアニメーション

【まとめ】

Blender で,数や寿命や出力速度の設定を行った. 他のオブジェクトで跳ね返る,通り抜けるといったシミュレーションも行った.

4. ブーリアン演算,クロス・シミュレーション

4-1. ブーリアン演算

【ここで行うこと】

Blender で2つの立体のブーリアン演算を行う.ブーリアン演算により,立体に穴をあけたり,2つの立体の交差部分を得ることができる.

[image]

資料: Blender で,ブーリアン演算により,立体を加工(Blender 2.9 系列で説明)

【まとめ】

Blender での立体のブーリアン演算は,差分交差などである.

ブーリアン演算の差分によって,立体に穴をあけることができる.

4-2. クロス・シミュレーション

【ここで行うこと】

Blender でのメッシュの作成,メッシュの編集,クロス・シミュレーションの実行

[image]

資料: Blender で,クロス・シミュレーション(Cloth Simulation)を行う(Blender 2.9 系列で説明)

【まとめ】

布を,多数のポリゴンから構成されるメッシュで表現できる.

メッシュとは,1つあるいは複数のポリゴンの集まりである.

5. マテリアル,スムースシェード

5-1. マテリアル入門,スムースシェード

【ここで行うこと】

ポリゴンのフラットシェーディングとスムースシェーディングの違いを見る. オブジェクトの色,透明度,粗さなどのマテリアルを設定する.

[image]

資料: Blender のマテリアル,スムースシェード (smooth shade)(Blender 2.9 系列で説明)

ここで作成した Blender のデータは,次で使用する.Blender を閉じずに次に進むこと.

【まとめ】

5-2. PBR マテリアル

【ここで行うこと】

Blender で PBR マテリアルのインストールを行い,使ってみる. さまざまな種類の材質を設定してみる.

前準備: Blender で,PBR マテリアルのインストールを行うこと.

https://www.kkaneko.jp/db/cg/pbrmaterials.html

[image]

資料: Blender の PBR Materials アドオン(Blender 2.9 系列で説明)

【まとめ】

5-3. テクスチャ座標,バンプマッピング

【ここで行うこと】

Blender のシェーダーの機能により, テクスチャ座標,バンプマッピングなどを試してみる.

[image]

[image]

資料: Blender のシェーダー・エディタ(Shader Editor)(Blender 2.9 系列で説明)

【まとめ】

6. ライティング,テクスチャペインティング

6-1. Blender のライト

【ここで行うこと】

Blender の 4種類のライト(ポイント,サン,スポット,エリア)を見る. Blender で Eevee と Cycle のレンダーエンジンを見る. Blender でライトの追加や移動を行う.

[image]

[image]

使用する Blender ファイル:02e.blend を使用する.

資料: Blender のライト(Blender 2.9 系列で説明)

参考資料(さらに,いろいろな機能を使いたい人のため): Blender で,レンダリングを行う(Blender 2.9 系列で説明)

【まとめ】

6-2. 画像テクスチャ

【ここで行うこと】

Blender で画像ファイルを用いた画像テキスチャを行う. 画像テクスチャのテクスチャ座標系を見る.

[image]

資料: 画像テクスチャ

【まとめ】

6-3. テクスチャ・ペインティング

【ここで行うこと】

画像ファイルの中の必要な部分だけを,画像テクスチャとして用いたいときに便利なテクスチャ・ペインティングを行う.

[image]

資料: Blender で,テクスチャ・ペインティング (Texture Painting) を行う (Blender 2.9 系列で説明)

使用する画像: door.png

【まとめ】

7. 人体アニメーション

人体のポーズについてのアニメーション

7.1 人体のソフト MakeHuman のインストールと機能,Blender 2.93 との連携

【ここで行うこと】

Windows パソコンで,MakeHuman のインストールを行う. MakeHuman は人体の造形等の機能を持つソフトウェアである. MakeHuman のデータを,Blender で取り込んで,Blender で人体画像のレンダリングを行う.

[image]

資料: 人体アニメーションのソフト MakeHuman 1.2 のインストールと機能,Blender 2.93.4 との連携(Windows 上)

説明ビデオ: ビデオ(音声つき)が YouTube にもある.4分14秒.https://www.youtube.com/watch?v=qlNpFrnaAmo

【まとめ】

7.2 逆力学(IK)の機能を用いて人体を動かす.

【ここで行うこと】

MakeHuman のデータを,Blender で取り込む. そして,Blender の逆力学(IK)の機能を用いて,人体を動かす.

[image]

資料: 逆力学(MakeHuman 1.2, Blender 2.93.4 を使用)(Windows 上)

【まとめ】

7.3 モーションデータ

【ここで行うこと】

[image]

資料:

【まとめ】

8. OpenCV によるコンピュータビジョン

OpenCVを用いた種々の処理

8.1 前準備(OpenCV 及び関連ソフトのインストール)

8.2 濃淡画像,動画

9. OpenCV でのグラフィックス,マウスイベント,Unreal Engine のインストール

9.1 グラフィックス

OpenCV で点や線の描画(OpenCV,Python を使用)

説明資料: OpenCV で点や線の描画(OpenCV,Python を使用)

9.2 マウスイベント

説明資料:マウスイベント

9.3 ゲームエンジン

説明資料: ゲームエンジン[PDF], [パワーポイント]

9.4 Unreal Engine のインストール

説明資料: Unreal Engine 4.27 のインストール [PDF], [パワーポイント]

10. 3次元ゲームエンジン Unreal Engine 入門

Unreal Engine のアクター,レベルブループリント,イベント,物理シミュレーション

11. 3次元ゲームエンジン Unreal Engine 4 を用いたゲーム作成演習

12. 顔情報処理

説明資料: Dlib の機能概要 [PDF], [パワーポイント]

内容

演習

次のページを,各自 WEB ブラウザで開き,上から,説明を読みながら,コードセルを上から順に実行することができる. https://colab.research.google.com/drive/1S55yEFiQpdIRdjWbdH0zzEYD5VAfklHd?usp=sharing

自分で画像ファイルをアップロードし,画像ファイル名を「5」のプログラムに書き, 最初から実行しなおすことにより, 自分で新しい画像を試すことができる.

Google Colaboratory に,自分の手持ちの画像をアップロードするなどで試してみたいと思った人のために, Google Colaboratory へのファイルのアップロードの実演を,次の動画で行っている.

(右側のメニューの「ファイル」をクリック.そして,手元のファイルをドラッグ&ドロップ).

https://www.youtube.com/watch?v=rBBwNB3iS8w

取り組む上での注意点

Pythonで動く3次元ゲームエンジン Panda3d

  1. Panda3d のインストール

    Windows パソコンで, コマンドプロンプト管理者として実行する.次のコマンドを実行する.

    python -m pip install --pre --extra-index-url https://archive.panda3d.org/ panda3d
    

    [image]
  2. 画面を開くだけの Python プログラム

    プログラム実行により,画面が開く.

    結果を確認したら,右上の「x」をクリックして終了. 

    from direct.showbase.ShowBase import ShowBase
    
    class HelloWorld(ShowBase):
        def __init__(self):
            ShowBase.__init__(self)
    
    app = HelloWorld()
    app.run()
    

    [image]

    [image]
  3. マウス操作

    Panda3d には,マウス操作の機能がある.

    このことを確認するために,次のプログラムを動かす.

    プログラム実行の後,マウスを動かしてみる.

    結果を確認したら,右上の「x」をクリックして終了. 

    from direct.showbase.ShowBase import ShowBase
    from direct.showbase.Loader import Loader
    
    class HelloWorld(ShowBase):
        def __init__(self):
            ShowBase.__init__(self)
            self.scene = self.loader.loadModel("models/environment")
            self.scene.reparentTo(self.render)
            self.scene.setScale(1, 1, 1)
            self.scene.setPos(0, 0, 0)  
    
    app = HelloWorld()
    app.run()
    

    [image]
  4. 複数の3次元オブジェクトを置く

    プログラム実行の後,マウスを動かしてみる.

    結果を確認したら,右上の「x」をクリックして終了. 

    from direct.showbase.ShowBase import ShowBase
    from direct.showbase.Loader import Loader
    
    class HelloWorld(ShowBase):
        def __init__(self):
            ShowBase.__init__(self)
            self.scene = self.loader.loadModel("models/environment")
            self.scene.reparentTo(self.render)
            self.scene.setScale(1, 1, 1)
            self.scene.setPos(0, 0, 0)
            self.cube = self.loader.loadModel("models/misc/rgbCube")
            self.cube.reparentTo(self.render)
            self.cube.setScale(1, 1, 1)
            self.cube.setPos(0, 20, 0)
    
    app = HelloWorld()
    app.run()
    

    [image]
  5. キーボードのイベントハンドラ

    プログラム実行の後,「aキー」を押す.

    結果を確認したら,右上の「x」をクリックして終了. 

    from direct.showbase.ShowBase import ShowBase
    from direct.showbase.Loader import Loader
    
    class HelloWorld(ShowBase):
        def __init__(self):
            ShowBase.__init__(self)
            self.scene = self.loader.loadModel("models/environment")
            self.scene.reparentTo(self.render)
            self.scene.setScale(1, 1, 1)
            self.scene.setPos(0, 0, 0)
            self.cube = self.loader.loadModel("models/misc/rgbCube")
            self.cube.reparentTo(self.render)
            self.cube.setScale(1, 1, 1)
            self.cube.setPos(0, 20, 0)
            self.accept( "a", self.a_key )    
        def a_key(self): 
            self.cube.setScale(2)
    
    app = HelloWorld()
    app.run()
    

    [image]
  6. マウスのイベントハンドラ

    プログラム実行の後,マウスの右ボタン,左ボタンを押す.

    結果を確認したら,右上の「x」をクリックして終了. 

    from direct.showbase.ShowBase import ShowBase
    from direct.showbase.Loader import Loader
    
    class HelloWorld(ShowBase):
        def __init__(self):
            ShowBase.__init__(self)
            self.scene = self.loader.loadModel("models/environment")
            self.scene.reparentTo(self.render)
            self.scene.setScale(1, 1, 1)
            self.scene.setPos(0, 0, 0)
            self.cube = self.loader.loadModel("models/misc/rgbCube")
            self.cube.reparentTo(self.render)
            self.cube.setScale(1, 1, 1)
            self.cube.setPos(0, 20, 0)
            self.accept( "mouse1", self.mouse1 )
            self.accept( "mouse3", self.mouse3 )
        def mouse1(self): 
            self.cube.setScale(2)
        def mouse3(self): 
            self.cube.setScale(0.5)
    
    app = HelloWorld()
    app.run()
    

    [image]
  7. 矢印キーでオブジェクトを動かす

    プログラム実行の後,4つの矢印キーでオブジェクトが動くことを確認する

    結果を確認したら,右上の「x」をクリックして終了. 

    from direct.showbase.ShowBase import ShowBase
    from direct.showbase.Loader import Loader
    
    class HelloWorld(ShowBase):
        def __init__(self):
            ShowBase.__init__(self)
            self.scene = self.loader.loadModel("models/environment")
            self.scene.reparentTo(self.render)
            self.scene.setScale(1, 1, 1)
            self.scene.setPos(0, 0, 0)
            self.cube = self.loader.loadModel("models/misc/rgbCube")
            self.cube.reparentTo(self.render)
            self.cube.setScale(1, 1, 1)
            self.cube.setPos(0, 20, 0)
            self.accept( "arrow_up", self.up_key )    
            self.accept( "arrow_down", self.down_key )    
            self.accept( "arrow_right", self.right_key )    
            self.accept( "arrow_left", self.left_key )    
        def up_key(self): 
            self.cube.setZ( self.cube.getZ() + 1 )
        def down_key(self): 
            self.cube.setZ( self.cube.getZ() - 1 )
        def right_key(self): 
            self.cube.setX( self.cube.getX() + 1 )
        def left_key(self): 
            self.cube.setX( self.cube.getX() - 1 )
    
    app = HelloWorld()
    app.run()
    

    [image]

InsightFace を用いた顔情報処理(顔検知,顔認識,年齢推定,性別推定)

姿勢推定について


参考資料

強化学習ツールキット

強化学習 ML-Agents ツールキットを動かしてみる

顔や目の動き,肌色

説明資料: 虹彩について

頭部の姿勢推定

頭部の姿勢推定

瞳孔の検出

眼球の運動(eye motion)

http://gazecapture.csail.mit.edu/download.php

Python 基礎

Python 基礎のまとめと体現学習

モーションデータ

  • 公開されているbvh データファイルのビューワ BVHPlay を動かす
  • bvh データファイルのビューワ BVHPlay を動かす

    マーカーレスのモーションキャプチャ

    OpenPose のセットアップ

    8.1 MakeHuman, モーションデータ, Blender を用いた人体アニメーションの作成

    【ここで行うこと】

    資料: