Recommandé
Contenu connexe
Similaire à ARVRを始める前の３Dの基本的な事~３つの壁に挑もう！！~
Similaire à ARVRを始める前の３Dの基本的な事~３つの壁に挑もう！！~ (20)
ARVRを始める前の３Dの基本的な事~３つの壁に挑もう！！~
- 2. バルテス・モバイルテクノロジーの紹介 2 バルテス・モバイルテクノロジー株式会社（略称：ＶＭＴ） VALTES MOBILE TECHNOLOGY CO.,LTD. 設立 2012年10月17日 代表取締役 田中 真史 株主 バルテス株式会社（100％） 資本金 5,000万円 拠点 大阪本社、東京本社 業務内容 ソフトウェア開発、セキュリティ診断 コンセプト 高品質でセキュアなアプリケーションの開発・提供 テスト専門会社である親会社と連携し、開発へテスト力を付加し、 「高品質」で「セキュア」をキーワードに、サービス提供を行う。
- 3. 自己紹介 3 名前 山下大輔（やました だいすけ） 所属 開発部 マネージャー 出身 横浜市青葉区（たまプラーザ） 住まい 宝塚市（兵庫県） 趣味 競馬、陸上 得意分野 ３D全般（OpenGL、DirectX、Unity） 得意だった言語 C++/C# ※プログラミングはみりゃわかる。 資格 Android技術者Basic、JSTQB FL Monacaソムリエ
- 4. 4 自己紹介
- 6. 6 • 今日のテーマ • 今日のゴール • 3つの壁について • 折角なのでMonacaで３Dやってみます。 • 最後に アジェンダ
- 10. 10 今日のテーマ 簡単？
- 12. 12 今日のテーマ なぜ？
- 18. 18 ウォール・マリア ～言語の壁～ 【３Dを動かすにはグラフィックスAPIと言うものがあります。】 ■主なグラフィックスAPI - DirectX - Microsoftが開発したゲーム・マルチメディア処理用のAPI - 対応OS：Windows、Xboxシリーズ（いわゆるMS商品） - 対応言語：C/C++ - OpenGL同様にラッパー経由でC#でも呼出せる - OpenGL - クロノス・グループが作成しているクロスプラットフォームAPI - 対応OS：Windows/Linux/Unix/MacOS - 対応言語：C/C++ - Javaもありますが、遅いと評判でほとんど使っている人見たこと無い - ラッパーとか作ればもちろんC#からでも呼出せる
- 19. 19 ウォール・マリア ～言語の壁～ ■主なグラフィックスAPI（続き） - Metal - アップル社のOS状でサポートされているAPI - 対応OS：MacOS、iOS - 対応言語：C++11 - iOS12からアップルはOpenGL ESを非推奨 - OpenGL ESよりMetalの方がパフォーマンスは良い - OpenGL ES(OpenGL for Embedded Systems) - 主に携帯電話などの組込みシステムで使用されているAPI - 対応OS： Windows、Android、iOS、MacOS等 - 対応言語：C/C++、Java（Android SDK） - PS3やニンテンドー3DSにも採用されている
- 20. 20 ウォール・マリア ～言語の壁～ ■主なグラフィックスAPI（続き） - WebGL - Webブラウザで3Dを表示させるための標準仕様 - HTML5のCanvas要素に描画する - 対応ブラウザ - PC - Edge/Chrome/IE11/Firefox/Opera/Safari - モバイル - Androidブラウザ、Chrome for Android - Firefox for Mobile - Safari 8 - iOS 8 以降 etc… - 対応言語：JavaScript（お待たせしましたWeb言語です） - 当初はChromeしか動かなかった。 - 他のブラウザで見るとブルスクリーンになった。（経験談
- 21. 21 ウォール・マリア ～言語の壁～ ■つまり何かしらAPIを使っている - Vulkan - 次世代のクロスプラットフォームAPI - 先発のDirectX、Metalと競合になる - 対応言語：C/C++（やっぱりC言語） - まだ詳しいことはわからないので、ここではおいておきます。 ガチでやろうと思ったら、C/C++ 言語習得が必須
- 28. 28 ウォール・ローゼ ～データ構造の壁～ ■SceneGraph（シーン・グラフ）とは？ - 各要素の位置関係をツリー構造で表現 - つまりデータ間で親子関係を構築し、位置連動を簡潔に表現 - ３Dでよく使われる、描画要素を管理する為のデータ構造 - 要素＝ノード（Node）と言う単位で扱い、データの親子関係を構築 もちろん簡潔に親子関係構築は出来ません。
- 29. 29 ウォール・ローゼ ～データ構造の壁～ ■SceneGraph（シーン・グラフ）とは？続き - シーン全体 ・・・ 光源、カメラ - 形状 ・・・ 頂点、法線、UV座標、オフセット情報 - マテリアル ・・・ 色、テクスチャ - どういうデータが入るか？ オフセットとは、位置＝Translate、回転＝Rotate、大きさ＝Scale がそれぞれ、x,y,z座標の要素からなる 実際の絵にしてみます。 頂点/マテリアル情報はSceneGraph上で親子関係は無いが、それ ぞれテーブル構造になっており、データ構築の際に参照される。
- 30. 30 ウォール・ローゼ ～データ構造の壁～ ■SceneGraph（シーン・グラフ）とは？続き Root Light Camera Node Node Node Node Node Node Node 親階層 子階層 孫階層 Vertex （Normal、UV） Material （Color,Texture）
- 35. 35 ウォール・シーナ ～計算の壁～ 【高校の教科書を掘り返してください。】 ■座標系って何？ - OpenGLは右手系、DirectXは左手系が採用されています。 - APIや3DCGツールによって異なる為、ここの座標計算でハマる人が多い。 - ３Dの世界では右手座標系、左手座標系があります。 - 赤：X軸、緑：Y軸、青：Z軸 X軸 Y軸 Z軸 左手座標系 X軸 Y軸 Z軸 右手座標系
- 36. 36 ウォール・シーナ ～計算の壁～ 【どんな計算しているの？】 ■どのようなところでとういう計算が必要か？ - ３D形状作成 - ポリゴン（三角形の集合体）を作成する為に頂点情報（x,y,z） を設定します。（基本的に時計回りです） - 次に光を色を反射させる為の法線を計算します。 - 法線とは、面（ここで言うポリゴン）に垂直なベクトル（向き） - AB、ACのベクトルを求めて、その外積を計算します。 頂点A 頂点C 頂点B 法線ベクトル＝単位ベクトルにする必要あり
- 37. 37 ウォール・シーナ ～計算の壁～ 【どんな計算しているの？】 ■どのようなところでとういう計算が必要か？続き - 親子関係 - ３Dデータの一部を動かした時にデータその物を移動させる為には親 子関係を作らないといけません。 - 親子関係のデータを作ります。（親階層、子階層） - それぞれ、形状情報、位置情報を持っています。 - 親・子階層を動かすには親階層に対して、移動命令をする必要があります。 - ここで親子関係が無いと、親だけ動いてしまって子がついてきません。 親階層 子階層 親子関係あるとき~ 親階層移動 親階層 子階層 親階層 子階層 親子関係ないとき~ 親階層移動 親階層
- 38. ウォール・シーナ ～計算の壁～ 【どんな計算しているの？】 ■どのようなところでとういう計算が必要か？続き - 親子関係どうすればいい？ - マトリクスの座標計算をして、位置関係を保つ必要があります。 - マトリクス？ - 親、子のオフセット情報を4x4の行列（マトリクス）で表現し、それ を合成する（かけ合わせる）事によって位置関係を保ちます。 人のモデルで肩を動かすと腕が全部回転するのは 内部的に、この計算がされているからです。
- 39. 39 ウォール・シーナ ～計算の壁～ 【どんな計算しているの？】 ■どのようなところでとういう計算が必要か？続き - 視点移動 - ゲームで言うとキャラクターが移動したりデータを見まわしたりします。 - カメラには大きく２つのモードがあります。 - トラックボールモード ・・・ くるくるモデルを見回すように動かす - ウォークスルーモード ・・・ 自分が歩いているように動かす ここからちょっとしんどくなります。
- 40. 40 ウォール・シーナ ～計算の壁～ 【どんな計算しているの？】 ■どのようなところでとういう計算が必要か？続き - 視点移動（トラックボールモード） - モデルを中心として、３Dモデルが中心に回っているように見せる。 - 実際にはモデルが回っているのではなく、カメラが動いている。 - 極座標系の球座標と言う方法を使う - ３Dモデル位置から、視点位置までの距離を半径とする。 - 注視点（焦点位置）を３Dモデルの中心とし、仰角と方向角を球の方程式に 代入し、視点位置を計算します。
- 41. 41 ウォール・シーナ ～計算の壁～ 【どんな計算しているの？】 ■どのようなところでとういう計算が必要か？続き - 視点移動（ウォークスルーモード） - 自分の位置を中心（軸）にして回転し、３D空間上を移動する - バ○オハザード等の視点移動はこれにあたります。 - ウォークスルーはクォータニオン（4元数）を使って計算します - クォータニオンは３D空間内の軸と、その軸を中心とする回転を表します。 - 原点から任意の方向に引っ張った回転軸を中心としたオブジェクトの回転を表現 できる。 このあたりは天才がクラス（ライブラリ）化してく れているのでググってそれを使いましょう！！
- 43. 43 折角なのでMonacaで３Dやってみます。 Powered by Three.js and PlayCanvas
- 45. 45 最後に 【最後に】 - 基本的に３Dの計算はしんどい - 計算は天才がライブラリ化してくれているので、それを使う - 基本概念（特にデータ構造）は理解しておいた方がいい - うまくライブラリを使って、汎用的に作ればビジネスには活用できる - 基本的にベテランはチャレンジせずに、頭が柔軟で吸収力のある若者 にやらせる - Monacaでの活用やそれ以外で聞きたい事、事例を聞きたい方はこ の後の懇親会で聞いてください。
- 46. 46 最後に 終わり？