Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ARVRを始める前の3Dの基本的な事~3つの壁に挑もう!!~

552 views

Published on

3DやVR、ARを始める前に基本的な事を学びましょう!!

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

ARVRを始める前の3Dの基本的な事~3つの壁に挑もう!!~

  1. 1. 2019年9月12日 AR/VRを始める前の3Dの基本的な事 ~3つの壁に挑もう!!~ バルテス・モバイルテクノロジー株式会社
  2. 2. バルテス・モバイルテクノロジーの紹介 2 バルテス・モバイルテクノロジー株式会社(略称:VMT) VALTES MOBILE TECHNOLOGY CO.,LTD. 設立 2012年10月17日 代表取締役 田中 真史 株主 バルテス株式会社(100%) 資本金 5,000万円 拠点 大阪本社、東京本社 業務内容 ソフトウェア開発、セキュリティ診断 コンセプト 高品質でセキュアなアプリケーションの開発・提供 テスト専門会社である親会社と連携し、開発へテスト力を付加し、 「高品質」で「セキュア」をキーワードに、サービス提供を行う。
  3. 3. 自己紹介 3 名前 山下大輔(やました だいすけ) 所属 開発部 マネージャー 出身 横浜市青葉区(たまプラーザ) 住まい 宝塚市(兵庫県) 趣味 競馬、陸上 得意分野 3D全般(OpenGL、DirectX、Unity) 得意だった言語 C++/C# ※プログラミングはみりゃわかる。 資格 Android技術者Basic、JSTQB FL Monacaソムリエ
  4. 4. 4 自己紹介
  5. 5. 5 早速始めたいと思います。 自己紹介-終わり
  6. 6. 6 • 今日のテーマ • 今日のゴール • 3つの壁について • 折角なのでMonacaで3Dやってみます。 • 最後に アジェンダ
  7. 7. 7 今日のテーマ 今日のテーマ
  8. 8. 8 今日のテーマ 3D/VR/ARは皆さん、 だいぶ一般的に聞くように なってきました。
  9. 9. 9 今日のテーマ Unreal EngineやUnity等を使 えば比較的簡単にアプリや ゲームを作れるようになった と言われています。
  10. 10. 10 今日のテーマ 簡単?
  11. 11. 11 今日のテーマ そう、簡単にしか作れない。 凝ったものが作れない。
  12. 12. 12 今日のテーマ なぜ?
  13. 13. 13 今日のテーマ 結局どうやって、3Dが動い ているかが理解できていない のでは?
  14. 14. 14 今日のゴール どういう知識を持てば活用、 応用そして理解できるか? っを話していきます。
  15. 15. 15 3Dを始める上で立ちはだ かる3つの壁について 3つの壁について
  16. 16. 16 今日のテーマ 初めに言っておきますが、 3Dの概念は非常に 敷居が高いです。
  17. 17. 17 第1の壁 ウォール・マリア ~言語の壁~ 3つの壁について グラフィックスAPIはC/C++が基本 WebGLだけがJavaScript
  18. 18. 18 ウォール・マリア ~言語の壁~ 【3Dを動かすにはグラフィックス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. 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. 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. 21 ウォール・マリア ~言語の壁~ ■つまり何かしらAPIを使っている - Vulkan - 次世代のクロスプラットフォームAPI - 先発のDirectX、Metalと競合になる - 対応言語:C/C++(やっぱりC言語) - まだ詳しいことはわからないので、ここではおいておきます。 ガチでやろうと思ったら、C/C++ 言語習得が必須
  22. 22. 22 ウォール・マリア ~言語の壁~ 結論 第1の壁 ウォール・マリア ~言語の壁~ 今からC言語習得無理!! あきらめよう!!
  23. 23. 23 ウォール・マリア ~言語の壁~
  24. 24. 24 はい、終わり! ウォール・マリア ~言語の壁~ じゃなくて。。。
  25. 25. 25 ウォール・マリア ~言語の壁~ MonacaやWebでやろうと思ったら WebGL(JavaScript)をター ゲットにして、アプローチしましょう。
  26. 26. 26 第2の壁 ウォール・ローゼ ~データ構造の壁~ ウォール・ローゼ ~データ構造の壁~ 3Dデータってどう構成されるの? SceneGraphって何?
  27. 27. 27 3D/AR/VRをやる上でデータ構造 の理解は非常に重要です。 ウォール・ローゼ ~データ構造の壁~
  28. 28. 28 ウォール・ローゼ ~データ構造の壁~ ■SceneGraph(シーン・グラフ)とは? - 各要素の位置関係をツリー構造で表現 - つまりデータ間で親子関係を構築し、位置連動を簡潔に表現 - 3Dでよく使われる、描画要素を管理する為のデータ構造 - 要素=ノード(Node)と言う単位で扱い、データの親子関係を構築 もちろん簡潔に親子関係構築は出来ません。
  29. 29. 29 ウォール・ローゼ ~データ構造の壁~ ■SceneGraph(シーン・グラフ)とは?続き - シーン全体 ・・・ 光源、カメラ - 形状 ・・・ 頂点、法線、UV座標、オフセット情報 - マテリアル ・・・ 色、テクスチャ - どういうデータが入るか? オフセットとは、位置=Translate、回転=Rotate、大きさ=Scale がそれぞれ、x,y,z座標の要素からなる 実際の絵にしてみます。 頂点/マテリアル情報はSceneGraph上で親子関係は無いが、それ ぞれテーブル構造になっており、データ構築の際に参照される。
  30. 30. 30 ウォール・ローゼ ~データ構造の壁~ ■SceneGraph(シーン・グラフ)とは?続き Root Light Camera Node Node Node Node Node Node Node 親階層 子階層 孫階層 Vertex (Normal、UV) Material (Color,Texture)
  31. 31. 31 ウォール・ローゼ ~データ構造の壁~ ■SceneGraph(シーン・グラフ)とは?続き 理解出来ましたか?? 大まかには理解できましたよね!! まだ挫折しないでくださいね。W
  32. 32. 32 ウォール・ローゼ ~データ構造の壁~ 結論 第2の壁 ウォール・ローゼ ~データ構造の壁~ 概念は理解出来た!! 次は最後の壁だ!!
  33. 33. 33 ウォール・ローゼ ~データ構造の壁~
  34. 34. 34 第3の壁 ウォール・シーナ ~計算の壁~ ウォール・シーナ ~計算の壁~ 座標系とか何? どんな計算してるの?
  35. 35. 35 ウォール・シーナ ~計算の壁~ 【高校の教科書を掘り返してください。】 ■座標系って何? - OpenGLは右手系、DirectXは左手系が採用されています。 - APIや3DCGツールによって異なる為、ここの座標計算でハマる人が多い。 - 3Dの世界では右手座標系、左手座標系があります。 - 赤:X軸、緑:Y軸、青:Z軸 X軸 Y軸 Z軸 左手座標系 X軸 Y軸 Z軸 右手座標系
  36. 36. 36 ウォール・シーナ ~計算の壁~ 【どんな計算しているの?】 ■どのようなところでとういう計算が必要か? - 3D形状作成 - ポリゴン(三角形の集合体)を作成する為に頂点情報(x,y,z) を設定します。(基本的に時計回りです) - 次に光を色を反射させる為の法線を計算します。 - 法線とは、面(ここで言うポリゴン)に垂直なベクトル(向き) - AB、ACのベクトルを求めて、その外積を計算します。 頂点A 頂点C 頂点B 法線ベクトル=単位ベクトルにする必要あり
  37. 37. 37 ウォール・シーナ ~計算の壁~ 【どんな計算しているの?】 ■どのようなところでとういう計算が必要か?続き - 親子関係 - 3Dデータの一部を動かした時にデータその物を移動させる為には親 子関係を作らないといけません。 - 親子関係のデータを作ります。(親階層、子階層) - それぞれ、形状情報、位置情報を持っています。 - 親・子階層を動かすには親階層に対して、移動命令をする必要があります。 - ここで親子関係が無いと、親だけ動いてしまって子がついてきません。 親階層 子階層 親子関係あるとき~ 親階層移動 親階層 子階層 親階層 子階層 親子関係ないとき~ 親階層移動 親階層
  38. 38. ウォール・シーナ ~計算の壁~ 【どんな計算しているの?】 ■どのようなところでとういう計算が必要か?続き - 親子関係どうすればいい? - マトリクスの座標計算をして、位置関係を保つ必要があります。 - マトリクス? - 親、子のオフセット情報を4x4の行列(マトリクス)で表現し、それ を合成する(かけ合わせる)事によって位置関係を保ちます。 人のモデルで肩を動かすと腕が全部回転するのは 内部的に、この計算がされているからです。
  39. 39. 39 ウォール・シーナ ~計算の壁~ 【どんな計算しているの?】 ■どのようなところでとういう計算が必要か?続き - 視点移動 - ゲームで言うとキャラクターが移動したりデータを見まわしたりします。 - カメラには大きく2つのモードがあります。 - トラックボールモード ・・・ くるくるモデルを見回すように動かす - ウォークスルーモード ・・・ 自分が歩いているように動かす ここからちょっとしんどくなります。
  40. 40. 40 ウォール・シーナ ~計算の壁~ 【どんな計算しているの?】 ■どのようなところでとういう計算が必要か?続き - 視点移動(トラックボールモード) - モデルを中心として、3Dモデルが中心に回っているように見せる。 - 実際にはモデルが回っているのではなく、カメラが動いている。 - 極座標系の球座標と言う方法を使う - 3Dモデル位置から、視点位置までの距離を半径とする。 - 注視点(焦点位置)を3Dモデルの中心とし、仰角と方向角を球の方程式に 代入し、視点位置を計算します。
  41. 41. 41 ウォール・シーナ ~計算の壁~ 【どんな計算しているの?】 ■どのようなところでとういう計算が必要か?続き - 視点移動(ウォークスルーモード) - 自分の位置を中心(軸)にして回転し、3D空間上を移動する - バ○オハザード等の視点移動はこれにあたります。 - ウォークスルーはクォータニオン(4元数)を使って計算します - クォータニオンは3D空間内の軸と、その軸を中心とする回転を表します。 - 原点から任意の方向に引っ張った回転軸を中心としたオブジェクトの回転を表現 できる。 このあたりは天才がクラス(ライブラリ)化してく れているのでググってそれを使いましょう!!
  42. 42. 42 ウォール・シーナ ~計算の壁~ 結論 第3の壁 ウォール・ローゼ ~計算の壁~ 計算は天才に任せて、使い方 だけ理解すればいい。
  43. 43. 43 折角なのでMonacaで3Dやってみます。 Powered by Three.js and PlayCanvas
  44. 44. 44 折角なのでMonacaで3Dやってみます。 ソースここに置いてます。 https://github.com/MonacaSommelierOsaka/PlayCanvas-VR ちなみに今日初めてMonacaとGitHubと連 携してソースをアップしました。
  45. 45. 45 最後に 【最後に】 - 基本的に3Dの計算はしんどい - 計算は天才がライブラリ化してくれているので、それを使う - 基本概念(特にデータ構造)は理解しておいた方がいい - うまくライブラリを使って、汎用的に作ればビジネスには活用できる - 基本的にベテランはチャレンジせずに、頭が柔軟で吸収力のある若者 にやらせる - Monacaでの活用やそれ以外で聞きたい事、事例を聞きたい方はこ の後の懇親会で聞いてください。
  46. 46. 46 最後に 終わり?
  47. 47. ご清聴ありがとうございました。 47

×