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 で２つの立体のブーリアン演算を行う．ブーリアン演算により，立体に穴をあけたり，２つの立体の交差部分を得ることができる．

[image]

資料: Blender で，ブーリアン演算により，立体を加工

【まとめ】

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

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

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

【ここで行うこと】

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

[image]

資料: Blender で，クロス・シミュレーション（Cloth Simulation）を行う

【まとめ】

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

メッシュとは，１つあるいは複数のポリゴンの集まりである．

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

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

【ここで行うこと】

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

[image]

資料: Blender のマテリアル，スムースシェード (smooth shade)

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

【まとめ】

5-2. PBR マテリアル

【ここで行うこと】

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

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

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

[image]

資料: Blender の PBR Materials アセット

【まとめ】

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

【ここで行うこと】

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

[image]

[image]

資料: Blender のシェーダー・エディタ（Shader Editor）

【まとめ】

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

6-1. Blender のライト

【ここで行うこと】

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

[image]

[image]

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

資料: Blender のライト

参考資料（さらに，いろいろな機能を使いたい人のため）: Blender で，レンダリングを行う

【まとめ】

6-2. 画像テクスチャ

【ここで行うこと】

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

[image]

資料: 画像テクスチャ

【まとめ】

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

【ここで行うこと】

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

[image]

資料: Blender で，テクスチャ・ペインティング (Texture Painting) を行う

使用する画像: 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. ３次元ゲームエンジン Unreal Engine 入門

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

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

12. 顔情報処理

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

内容

演習

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

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

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. 複数の３次元オブジェクトを置く

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

    結果を確認したら，右上の「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. 矢印キーでオブジェクトを動かす

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

    結果を確認したら，右上の「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 を用いた人体アニメーションの作成

    【ここで行うこと】

    資料:

    本サイトは金子邦彦研究室のWebページである．

    資料等の公開では，原則，「クリエイティブコモンズ BY NC SA」として公開するようにしている． PDFファイル，パワーポイントファイルなどには， 「クリエイティブコモンズ BY NC SA」を明記するとともに，ロゴを記載するようにしている（作業が間に合っていない分もあるのでご容赦ください）．

    公開している資料をご利用になる場合の，再配布の条件，剽窃の防止などについて，別ページ »で説明 再配布や資料改変の際には，そのページをご確認ください．

    サイトマップは，サイトマップのページをご覧下さい． 本サイト内の検索は，サイト内検索のページをご利用下さい．

    問い合わせ先： 金子邦彦（かねこ くにひこ） [image]