cs-3. パノラマ画像,ストリート
ビュー,3次元コンピュータグラ
フィックス
(コンピューターサイエンス)
URL: https://www.kkaneko.jp/cc/cs/index.html
1
金子邦彦
アウトライン
1. パノラマ画像
2. Google Map のストリートビュー
3. 3次元コンピュータグラフィック
4. Google Earth の3次元地図
5. Blender
6. ポリゴン
2
3-1 パノラマ画像
3
パノラマ画像
パノラマ画像は、広い範囲を撮影した1枚の画像。
4
有志がオンラインで公開していることも
360 Cities のサイト: https://www.360cities.net/
パノラマ画像の動画
有志が、YouTube, Vimeo などで、動画で公開していること
5
https://vimeo.com/203253308
Google Earth を利用して作成された映像作品.
パノラマ画像の技術
パノラマ画像の作成には、複数の写真をつなぎあわせるのが
一般的。自動でつなぎ合わせ技術(イメージ・スティッチン
グ)もある
6
イメージ・スティッチングを行う
プログラム実行
3-2 Google Map のストリート
ビュー
7
Google Map
を開く
Google Map は,無料で利用可能なオン
ラインの地図サービス
ウェブブラウザで次の URL を開く
https://www.google.co.jp/maps
地図表示されるので確認
8
Google Map で,ストリートビューへの切り替
9
右下に,「人型のボタ
ン」がある.これが
Google ストリートビュー
モードへの切り替えボタ
ン.クリックする
表示が変わるので確認す
る.道路沿いにたくさんの
青色の表示が付く
青色の表示のところは,
どこでもクリックできる
Google Map で,ストリートビューへの切り替
10
青色の表示をクリック
ると, その場所のストリー
トビューが表示される
マウス操作見ている向
き(注視方向)を動かす
とができる.
マウスの左ボタンを押し
ながら,マウスを動かす
ストリートビューの操作
11
マウスを道路の上に置く
と,「^」の記号が入った
白丸が表示される
これをクリックすると,
パソコンでの操作を示し
ている.スマートフォンで
も同様の操作.
ストリートビューの操作
12
別の場所のストリート
ビューを見たいときは:
左上の「」をクリック
ると,元の地図に戻る
青色の表示が出ていない
場合がある.
そのときは,右下の「人型
のボタン」をクリックする
住所などでの検索
13
住所など検索もできる
「富士山」と入れて検索しているところ
青い表示をクリッ
クすると,
ストリートビュー
に切り替わる
14
エッフェル塔」と入れて検索した
15
クフ王」と入れて検索した
3-3 3次元コンピュータグラ
フィックス
16
3次元の福山市の再現
17
18
オブジェクトを様々な方向
から撮影
コンピュータでの処理によ
り、3次元データを得る
3次元再構成
19
3次元再構成は Meshroom で実行可能
Meshroom のページ: https://alicevision.org/
・「Images」に、画像をドラッグ&ドロップ
・「Start」をクリック
しばらく待つ
3次元コンピュータグラフィックス
ゲーム開発:リアルなゲーム環境の実現
映画制作:現実を超える特殊効果やアニメーション映画
製造業:デザインの確認、3Dプリンターの活用
医療分野:立体的な人体の撮影
3次元コンピュータグラフィックスは、様々な分野で役立つ
20
3-4 Google Earth の3次元地図
21
Google
Earth の起動
Google Earth は,無料で利用可能なオ
ンラインの地球儀
ウェブブラウザで次の URL を開く
https://earth.google.com
Earthを起動」をクリック
22
23
https://earth.google.com/web/@34.4524151,133.22710341,192.05817929a,48.02713
513d,35y,27.31498228h,77.75385678t,0r
Google Earth の機能
写真
3次元コンピュータグラフィックス
写真+標高
地球儀
ストリートビュー
24
Google Earth Voyager
25
メニューの
Voyager
Google Earth の検索機能
26
メニューの
「検索」
Google Earth で「福山城」を検索したところ
27
28
視点移動は,マウス操作でできる
29
地形,海,空なども再現されている
3-5 Blender
30
3次元データの確認表示(顔の3次元データ)
31
3DDFA_V2 法により
生成された顔の3次元データ
DECA 法による顔の3次元化
Blender でできること
3次元データの確認表示(OpenStreetMap のデータ
32
Blender でできること
OpenStreetMap データを
ダウンロード.表示.
(福山市中心域)
OpenStreetMap データを
ダウンロード.表示.
(福山大学)
3次元データの確認表示(PLATEAU のデータ)
33
Blender でできること
3D都市モデル(Project PLATEAU)福山市(2020年度)
建物のデータ頂点数: 4,321,085, 三角形ポリゴン数: 7,325,872
3次元データの確認表示(PLATEAU のデータ)
34
Blender でできること
3D都市モデル(Project PLATEAU)福山市(2020年度
地形データ (dem)頂点数: 23,682,417, 三角形ポリゴン数: 47,271.932
Blender でできること
3次元のリアルな造形
35
元画像 Blender での
テクスチャマッピング
Blender でできること
3次元のリアルな造形
36
Blender PBR マテリアル
PBRマテリアルを使うと,このようなことも可能
Blender
一定の条件下で,無料で利用できる
使用には,ダウンロードとインストールの操作が必要.
さまざまな機能
3次元データの確認表示
3次元のリアルな造形
光源、反射、質感を設定することによるリアルな映像作成
カメラワーク、キャラクタの動き等のアニメーション
Pythonスクリプトによる自動化、種々のアドオンも
以下、バージョン 2.83 LTS(長期サポート版)の画面で説明
37
Blender の機能概要
38
3D ビュー
テンキーによる視野操作三面図 (1, 3, 7)
右クリック選択
マウスホイールズーム
オブジェクトモード
移動,コピー/ペースト,追加,回転,拡大・縮小
プロパティ
レンダリング
エディットモード
Blender 3D ビュー
39
・テンキーによる視点操作
・マウスホイールによるズーム
・マウス操作
・インタラクティブナビゲー
ションによる操作
・画面分割
(3D ビューの画面端でSplit Area)
・テンキーの 1, 3, 7 で視点移動
・「画面の4分割」のモードへの切り替
えは、[CTRL] [ALT] Q(元に戻すのも
同じ操作)
Blender
オブジェクトモードとエディットモー
40
オブジェクトモード
オブジェクトの移動、回転、拡大・縮小
オブジェクトの選択は左クリック
モード
切り替え
Tab キー
エディット(編集)モード
オブジェクトの形の編集
オブジェクトの選択は左クリック
オブジェクトの選択は,
右上の「アウトライナー
でも簡単にできる
モード表示
オブジェクトを
選択できる
形のあるオブジェクトを
選択できる
41
オブジェクトモードでの操作例
メッシュオブジェクト追加
・「追加 (Add)「メッシュ (Mesh)
・キーボードで SHIFT + A
オブジェクトモードで,
オブジェクトの移動、回転、拡大縮小
移動では、座標軸クリックにより
座標軸方向限定の移動も可能
CTRL + C, CTRL + V
でオブジェクトのコピー,ペースト
移動
回転
拡大縮小
オブジェクトのマテリアルの設定
42
色を設定できる
マテリアル
レンダリング
F12キー)で確認
New
Base Color
のところをクリック
オブジェクトを
選択して
43
オブジェクトの形状変更
頂点,辺,面の押し出しマージ,ループカットなど
面の押し出し
マージ前と後
ループカット操作
オブジェクトの形状変更の例
1.エディットモード(編集モード)で消したい頂点
を選択
2.DeleteEdge Loop
頂点を選択
44
45
オブジェクトの形状変更のバリエーション
頂点,辺,面の押し出しマージなど
面の押し出し
マージ前と後
3-6 ポリゴン
46
ポリゴンは平らな多角形である
ポリゴンは平らなので、平面上の図形の一種であ
47
3次元スキャナで読み込んだ3次元データの
3次元データは,イン
ターネットで,容易に入
手可能
http://sourceforge.net/pr
ojects/pointclouds/files/
PCD%20datasets/
https://github.com/Point
CloudLibrary/data
http://pointclouds.org/m
edia/
48
Lauranaデータ biwi face データ 01
ポリゴンとポリゴンメッシュ
1つ1つの
多角形がポ
リゴン
全体でポリ
ゴンメッ
シュ
49
ポリゴンとポリゴンメッシュ
50
メッシュ表示
面表示
(フラット)
面表示
(シェーディング)
同じオブジェクトを,3種類の表示モード
で表示したところ
ポリゴン
3次元コンピュータグラフィックスでは、ポリゴンは、
次元空間内の平面図形(三角形、四角形、五角形など)
ポリゴンを使用することにより、3次元モデルを精密にも
表現可能
3次元モデルにより、現実世界の物体をデジタルで再現
きる
51
まとめ
パノラマ画像は、複数の画像を合成する「イメージス
ティッチング」という技術で作られる。360度の全方位を
見渡せることができるもの。
Google Earthは、オンラインの地球儀で、視点移動はマウ
ス操作で行え、地形や海、空も再現されている。
3次元コンピュータグラフィックスでは、ポリゴンを使用
することで、3次元モデルを精密にも表現可能
Blenderは、3次元モデルの造形や確認リアルな映像作
品作成アニメーションの機能を持ち、一定の条件下で、
無料で利用できる
52
使用する外部ページ
360 cities
https://www.360cities.net/
Google Earth を利用して作成された映像作品 (Vimeo で公開)(作者; Matteo
Archondis
https://vimeo.com/203253308
Google Map
https://www.google.co.jp/maps
Google Earth
https://earth.google.com/web/@34.4524151,133.22710341,192.05817929a,48.02
713513d,35y,27.31498228h,77.75385678t,0r
Blender のサイト
https://blender.jp/
Blenderインストール手順の記事: https://www.kkaneko.jp/db/win/blenderinst.html
Blender の使い方の記事: https://www.kkaneko.jp/db/cg/index.html
53