コンピュータグラフィックス

コンピュータグラフィックス 第 13 回 リアルタイム CG 理工学部 兼任講師藤堂英樹

CG 制作の主なワークフロー 3DCG ソフトウェアの場合 モデリング カメラ シーン アニメーション テクスチャ 質感 ライティング 画像生成 2015/12/21 コンピュータグラフィックス 2

リアルタイム CG CG をリアルタイムにする必要性 インタラクティブなユーザーとのやり取り 映像制作 モデリング,, ライティングの編集中の表示 ゲーム ユーザーがキャラクターを操作 なるべくクオリティが高い物を高速に表示したい 2015/12/21 コンピュータグラフィックス 3

ダブルバッファ方式 画像の生成には時間がかかる 1 枚の画面をクリアして描画するとちらつく ダブルバッファ方式 2 枚のバッファを切り替えてちらつきを回避 2015/12/21 コンピュータグラフィックス 4

ダブルバッファはリアルタイム CG の基本 OS の UI 一番身近なインタラクティブ CG ダブルバッファ機能は標準で搭載されている 最近の OS の UI は 3D API を使用している 3D API OpenGL, DirectX にはダブルバッファ機能が標準搭載 3DCG ソフトウェアにおいても標準搭載 2015/12/21 コンピュータグラフィックス 5

リアルタイムシェーダー GPU を利用した高速な描画処理 3 次元 CG 用に特化された演算装置 専用のビデオメモリ NVIDIA Shader Library NVIDIA 社が開発した GPU で動作するデモコンテンツ nvidia QUADRO GPU NVIDIA Corporation 2015/12/21 コンピュータグラフィックス 6

NVIDIA Shader Library デモコンテンツの概要 タイトル スナップショット 動作する GPU 3DCG の API 各種ダウンロード シェーダーのサンプルコード 技術内容の簡単な説明 デモビデオ 2015/12/21 コンピュータグラフィックス 7

GPU 処理を行うプログラム言語 HLSL: Microsoft 社の DirectX 上で動作する GPU 言語 ゲームで使われることが多い Cg OpenGL と DirectX の両方に対応した GPU 言語 Autodesk Maya や Unity でも利用されている GLSL OpenGL 専用の GPU 言語 研究の現場で用いられることが多い 2015/12/21 コンピュータグラフィックス 8

リアルタイムシェーダー開発ツール FX Composer NVIDIA HLSL, Cg での開発が可能 UI の自動生成 シーン, テクスチャの表示 NVIDIA Shader Library との連携 RenderMonkey AMD HLSL, GLSL での開発が可能 UI の自動生成 シーン, テクスチャの表示 2015/12/21 コンピュータグラフィックス 9

Unity 上でのシェーダー開発 開発言語 ShaderLab: Unity 独自の開発言語 HLSL / Cg: GPU 処理部分 シェーダーの種類 固定機能シェーダー ShaderLab で記述 サーフェスシェーダー ShaderLab で大枠を記述し,HLSL / Cg を補助的に使用 頂点シェーダー, ピクセルシェーダー 通常の HLSL / Cg の使い方にかなり近い ShaderLab を Unity とのやり取りに利用 2015/12/21 コンピュータグラフィックス 10

3 次元ハードウェア上での処理 2014/10/13 コンピュータグラフィックス 11

頂点 ピクセルシェーダー 頂点シェーダー 頂点毎の処理を記述 主な処理 : 頂点の座標変換, 各種頂点データの計算 計算した頂点データはピクセルに補間され, ピクセルシェーダーに転送される ピクセルシェーダー 画素毎の処理を記述 主な処理 : ライティング, テクスチャマッピング 頂点から送られてきたデータの利用し, 最終的な画素の色を計算する 2015/12/21 コンピュータグラフィックス 12

一番シンプルな例 Unity の公式マニュアル Vertex and Fragment Shader Examples 2015/12/21 コンピュータグラフィックス 13

拡散反射のシェーディング 頂点シェーダー 色を塗る位置 法線ベクトル 光源方向 拡散反射の計算に必要なデータ ピクセルシェーダーに転送 2015/12/21 コンピュータグラフィックス 14

拡散反射のシェーディング ピクセルシェーダー 法線ベクトル 光源方向で陰影計算を行う 2015/12/21 コンピュータグラフィックス 15

より複雑な GPU 処理 GPU Gems Randima Fernando 様々なリアルタイム CG 手法を紹介 デモ解説ページ アニメーションの GPU による高速化 サブサーフェススキャッタリング 2015/12/21 コンピュータグラフィックス 16

リアルタイム CG システム ゲームエンジン ゲーム作成に有用なデータ インタラクティブな CG 処理 WebGL Web 上で動作する CG システム Unity Unreal Engine MikuMikuDance 初音ミクのダンス CG に特化 3 Dreams of Black Google 2014/10/13 コンピュータグラフィックス 17

Unity のリアルタイム CG インタラクティブな CG 処理 デザイン時にユーザーにシーン情報を提示 ゲームプレイ時にダイナミックなシーンを演出 Web Palyer で体感が可能 Unity 公式のデモページ http://japan.unity3d.com/gallery/demos/ 2015/12/21 コンピュータグラフィックス 18

Web 上のデモで利用される Unity Unity Web Player 現在は非推奨に WebGL のサポート Leonardo da Vinci のバーチャルミュージアム Esimple 2015/12/21 コンピュータグラフィックス 19

WebGL Web 上で 3DCG を表示 OpenGL,GLSL を利用した描画処理 主要なブラウザはほぼ対応 カメラでリアルタイムにモーションをトラッキング mathajie レーシングカーのリアルタイム CG HelloEnjoy 2015/12/21 コンピュータグラフィックス 20

WebGL 山岳地形のリアルタイム CG mathajie ストームの可視化 Callum Prentice 2015/12/21 コンピュータグラフィックス 21

WebGL 水のリアルタイムシミュレーション Evan Wallace リアルな皮膚の質感のレンダリング AlteredQualia 2015/12/21 コンピュータグラフィックス 22

Miku Miku Dance (MMD) 樋口優 初音ミクのダンス CG に特化したシステム モーションデザイン 再生 音声 動画ファイルとの連携 シンプルな描画処理でインタラクティブにデザイン 再生が可能 ニコニコ動画の説明動画 LaRenuille MMD を使用して作られた PV LaRenuille 2015/12/21 コンピュータグラフィックス 23

MMD のリアルタイム CG WebGL に移植された MMD ビューアー edvakf ニコニ立体 MMD+Unity によるモデル共有システム時雨 ぼんぷ長 2015/12/21 コンピュータグラフィックス 24

Live2D システムと Unity の連携 前回の授業で紹介した Live2D の Unity 連携 Live2D の立体表現でインタラクティブな CG 処理 ゲーム作成への応用が可能 Live2D 2D を活かした立体表現 Live2D システムと Unity の連携 Live2D 2015/12/21 コンピュータグラフィックス 25

SIGGRAPH とは? 世界最大の CG の祭典 8/10~14 Vancouver convention center 14,045 人の参加者 (75 ヶ国 ) 127 論文 / 550 論文投稿 35 セッション 2015/12/21 コンピュータグラフィックス 26

Ke-Sen Huang による論文リスト 各論文がセッション毎にまとめられたサイト http://kesen.realtimerendering.com/sig2014.html 2015/12/21 コンピュータグラフィックス 27

論文の Web ページ Abstract( 概要 ) 技術の新規性部分 キーとなるアイデア 実験結果から得られる効果 論文の PDF 技術の詳細が記述されている 画像だけからでもある程度内容がわかる 2015/12/21 コンピュータグラフィックス 28