Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
The Web-First Game Engine
Collaboratively build stunning HTML5 visualizations and games
Webで3Dモデルはどう扱う?
PLAYCANVAS:3Dモデルディ...
はじめに
• 本プレゼンを聞いていただきたい主なターゲット
– UnityやUE4等を使ったゲーム開発経験がある
– HTML5ゲームがなんだか今アツそうだと思っている
– アプリストアにはもううんざりだ
– いまWebがむしろいいと思っている...
登壇者の自己紹介
• 宗形 修司
– 2018年よりPlayCanvas運営事務局
デザイナー目線でPlayCanvasを広める
ために活動中
• 津田 良太郎
– 2016年よりPlayCanvas運営事務局
デベロッパー目線でPlayCan...
本日のアジェンダ
• Webと3D
• PlayCanvasとは
• PlayCanvas 3D Feature
• PlayCanvas 3D オブジェクト&マテリアル ディープダイブ
• PlayCanvas新機能
• まとめ
PlayCanvasとは
一言で PlayCanvasとは
ゲームエンジン
です!!
PlayCanvasとは
• WebGLゲーム開発エンジン
3D要素に強く、カジュアルゲームから、
リッチコンテンツまで幅広く開発が可能
• クラウド型の開発エンジン
エンジンのインストールや
プラグインのダウンロードが不要
• 中身はオールJ...
一貫した開発ワークフロー
PLAYCANVAS 開発グループ
検
証
会
社
配
信
先
作成作業
開発キット
検証版
最新データ
配信版
PC/スマホでのクオリティ比較
PC Firefox 63.0.1 iPhone6
HTML内のcanvasに
• 基本的には1枚のcanvas
HTML
CSS
主要ブラウザでの対応状況
• ブラウザ上で動作/HTML5ゲームプラットフォームも対応
– モバイル/PC/Oculusなどでも動作
– WebGL(v1/v2)に対応したブラウザなら大体動く
– エンジン自体の多くはES5ベースで記述
※20...
軽くまとめ
• クラウドサービスとして提供
• 開発環境の構築必要なし!
• メールアドレス一つで登録、開始可能
• ブラウザ上で動くビジュアルエディタ!
• 初めての人でもHTML5ゲームが
簡単に作れる環境が整っています!
PlayCanvas 3D Feature
PlayCanvas 3D Feature
⚫ 特徴的な3D機能
– 3Dモデルアニメーションの
自動ブレンディング
– コリジョン/リジットボディを
ワンクリックで設定
物理シミュレーション可能
– フィジカルベースドレンダリング
(PBR)...
3Dモデルインポート
FBX/OBJはドラック&ドロップで自動的にJSONに変換
テクスチャも用途に応じた圧縮が設定可能
取り込み可能な画像データ
• 画像データの話
• JPG/PNG/GIF/TGA/BMP/TIF/HDR/EXRが読み込み可能
– インポートされたJPGとPNGファイルは元の形式のまま保たれる
透過情報を含む画像はPNGに自動変換される
• ...
テクスチャデータの圧縮
• テクスチャ圧縮の話
– PlayCanvasでは3つのテクスチャ圧縮形式に対応
• DXT: 全てのデスクトップデバイス及び一部のAndroidデバイス
• PVR: 全てのiOSデバイス及び一部のAndroidデバ...
PlayCanvas 3Dオブジェクト&マテリアル ディープダイブ
3Dオブジェクト ディープダイブ
Poly△16433
Bone 135
Blendshap(morphing) 20
Material
カラー
スペキュラ
エミッシブ
ノーマルマップ
アニメーション
60fps
※
PlayCanvasはデフォルトで
アニメフレームレートが
...
注意点
ベースの3Dモデルと同じメッシュ
情報を持つモデルをコピーして各
アニメーションを作成。
同一メッシュから作成しないとア
ニメーションがエディター上で反
映されない。
PlayCanvasのVisual Editorへドラック&ドロップ
デモします。
https://playcanv.as/b/iJwOeAD8/
シーンを見てみよう
Chromのコンソールで中
身を見てみると…
meshInstances
morphInstances
skinInstances
Material等々、maya上で
設定したボーン構造やブレ
ンドシェイプ(morph)が格
納されている。
※...
ボーン/モーフの格納
ボーン構造 モーフターゲット
アニメーション ディープダイブ
MAYA上でのアニメ―ション
• MAYAで作成したパス/オブジェクト/ボーンアニメーション
• PlayCanvas上でのパス/オブジェクト/ボーンアニメーションの違い
オブジェクトアニメ―ションのポイント
シンプルな直線移動や回転はオブジェクトの
キーアニメーションでも問題ないが、急激な
カーブや複雑な動きになるとアニメーションが
意図しない動きをする。
回避策としてはジョイントを対象オブジェクトに
バインドし、ジョイントをアニメーションさせる
...
マテリアル ディープダイブ
PlayCanvasのマテリアルの特徴
• オブジェクト1つに対して
1つのマテリアルを生成
主要な3DCG制作ソフトの
Rambert /Phongシェーダーで
テクスチャを設定。
FBXへ書き出し、PlayCanvas上へ
ドラック&ドロッ...
マテリアルの格納場所
model._material.parameters.material_xxx
MAYA → PlayCanvas 実際の工程を見てみよう!
MAYAのphongシェーダーを使用
カラー(deffuse)
バンプマッピング(nomalmap)
スペキュラ
のテクスチャを設定。
FBX書き出しで組み込みメディア
にチェックを...
用意したテクスチャ
Diffuse Anbient Normal Parallax Specular Grossness
Alpha
MAYA→PlayCanvas実際の工程を見てみよう!
• FBXの大部分の内容が”json”として変換される!
• 複雑なアニメーションを作成する時はスキンアニメーションで!
• 標準マテリアルで思いのままに質感をコントロール可能!
3Dディープダイブまとめ
PlayCanvas新機能
ついに出ました!
バージョン管理機能!!
えっ!なかったの?
えっ!なかったの?
• そうなんです。。。
• GitHubと連携
– このころは共同開発力が低かった
↓
• Script2.0になってから利用不可に
– 声の掛け合いが重要な開発スタイルへ
↓
• REST APIで独自でCIが組めるように...
バージョンコントロールシステム 基本機能
• チェックポイント
• ブランチ
• マージ
使い方
バージョンコントロールEditor
DIFF/レストア/マージ
• DIFFをみたり
レストアしたり
マージしたり
バージョンコントロールまとめ
• 基本的にGUIからいろいろ実行することができる
• 無料プランでも利用可能
• REST API開発中
バージョンコントロール注意点
• 容量をとても食う
– ブランチ・チェックポイントetc…
– ブランチを削除してもブランチ分で利用した容量は減らない仕
様(2019年7月現在)
– 容量でお困りの際はお問い合わせください
– https://...
まとめ
• ブラウザ向け3Dライブラリの中では非常に効率的なワークフロー
– FBXの大部分の内容が”json”として反映される!
– 複雑なアニメーションを作成する時はスキンアニメーションで!
– 標準マテリアルで思いのままに質感をコントロー...
お知らせ
ハンズオンやってます!
• 3D/2D/LP作成/CIなどなど!
• ゲーム開発に限らず、Web制作や開発フローについて教えます!
• 詳しくは
https://playcanvas.jp へ!
事例紹介ページ作りました!
• PlayCanvasでいったいどんな事例があるんだろう。。
– そんな声にお答えすべく、事例紹介ページを公開しました!
https://playcanvas.jp/casestudy/
紹介事例大募集中です!取り...
ベンチマーク公開しました!
• PlayCanvasって結局、パフォーマンスどのくらい出るの。。。?
– という声にお応えして、ベンチマークアプリケーションを
公開しました!!!
– https://playcanvas.jp/benchmar...
コミュニティあります!
• PlayCanvas日本デベロッパー向けコミュニティ運営中!
– https://support.playcanvas.jp/hc/ja/community/topics
– 「PlayCanvas コミュニティ」で...
Thank you !
The Web-First Game Engine
Collaboratively build stunning HTML5 visualizations and games
Nächste SlideShare
Wird geladen in …5
×

Webで3Dモデルはどう扱う?PlayCanvas:3Dモデルディープダイブ+新機能紹介!

527 Aufrufe

Veröffentlicht am

デバイスの高性能化、次世代通信網5Gの普及を見据え、アプリではないブラウザベースのコンテンツが徐々に増え始めてきました!
WebGLベースのクラウド型ゲームエンジン「PlayCanvas」はカジュアルコンテンツ、リッチコンテンツ問わず高品質なコンテンツをビジュアルエディターから作成することができます。今回は、PlayCanvas内で3Dオブジェクトやマテリアルがどの様に扱われているかについてと、新しくリリースされたバージョン管理機能,ローディングスクリーンの実装等、すこし深い内容をお届けします!

Veröffentlicht in: Technologie
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Gehören Sie zu den Ersten, denen das gefällt!

Webで3Dモデルはどう扱う?PlayCanvas:3Dモデルディープダイブ+新機能紹介!

  1. 1. The Web-First Game Engine Collaboratively build stunning HTML5 visualizations and games Webで3Dモデルはどう扱う? PLAYCANVAS:3Dモデルディープダイブ +新機能紹介! PlayCanvas運営事務局 宗形 修司 津田 良太郎
  2. 2. はじめに • 本プレゼンを聞いていただきたい主なターゲット – UnityやUE4等を使ったゲーム開発経験がある – HTML5ゲームがなんだか今アツそうだと思っている – アプリストアにはもううんざりだ – いまWebがむしろいいと思っている – ゲーム資産をアプリ以外(Webとか)で使いたい – 使われずにお蔵入りした3Dモデルがある!! • Yesが1つでもある人にオススメ!
  3. 3. 登壇者の自己紹介 • 宗形 修司 – 2018年よりPlayCanvas運営事務局 デザイナー目線でPlayCanvasを広める ために活動中 • 津田 良太郎 – 2016年よりPlayCanvas運営事務局 デベロッパー目線でPlayCanvasを広める ために活動中 utautattaro.com
  4. 4. 本日のアジェンダ • Webと3D • PlayCanvasとは • PlayCanvas 3D Feature • PlayCanvas 3D オブジェクト&マテリアル ディープダイブ • PlayCanvas新機能 • まとめ
  5. 5. PlayCanvasとは
  6. 6. 一言で PlayCanvasとは ゲームエンジン です!!
  7. 7. PlayCanvasとは • WebGLゲーム開発エンジン 3D要素に強く、カジュアルゲームから、 リッチコンテンツまで幅広く開発が可能 • クラウド型の開発エンジン エンジンのインストールや プラグインのダウンロードが不要 • 中身はオールJSの軽量なエンジン コンパイルをはさむ必要がなく、 即時性が高いのが特徴 • メールアドレス一つで登録、開始可能 サインアップしたら即PlayCanvasの ビジュアルエディタが機能制限無しで使用可能
  8. 8. 一貫した開発ワークフロー PLAYCANVAS 開発グループ 検 証 会 社 配 信 先 作成作業 開発キット 検証版 最新データ 配信版
  9. 9. PC/スマホでのクオリティ比較 PC Firefox 63.0.1 iPhone6
  10. 10. HTML内のcanvasに • 基本的には1枚のcanvas HTML CSS
  11. 11. 主要ブラウザでの対応状況 • ブラウザ上で動作/HTML5ゲームプラットフォームも対応 – モバイル/PC/Oculusなどでも動作 – WebGL(v1/v2)に対応したブラウザなら大体動く – エンジン自体の多くはES5ベースで記述 ※2019/07時点
  12. 12. 軽くまとめ • クラウドサービスとして提供 • 開発環境の構築必要なし! • メールアドレス一つで登録、開始可能 • ブラウザ上で動くビジュアルエディタ! • 初めての人でもHTML5ゲームが 簡単に作れる環境が整っています!
  13. 13. PlayCanvas 3D Feature
  14. 14. PlayCanvas 3D Feature ⚫ 特徴的な3D機能 – 3Dモデルアニメーションの 自動ブレンディング – コリジョン/リジットボディを ワンクリックで設定 物理シミュレーション可能 – フィジカルベースドレンダリング (PBR) – フィジカルシェーダーベースの 高品質マテリアル。各設定項目も豊 富 – イメージベースドライティング (IBL) – シェーダーもGLSLで書ける
  15. 15. 3Dモデルインポート FBX/OBJはドラック&ドロップで自動的にJSONに変換 テクスチャも用途に応じた圧縮が設定可能
  16. 16. 取り込み可能な画像データ • 画像データの話 • JPG/PNG/GIF/TGA/BMP/TIF/HDR/EXRが読み込み可能 – インポートされたJPGとPNGファイルは元の形式のまま保たれる 透過情報を含む画像はPNGに自動変換される • BMP/TGA/TIFはJPGに自動変換される
  17. 17. テクスチャデータの圧縮 • テクスチャ圧縮の話 – PlayCanvasでは3つのテクスチャ圧縮形式に対応 • DXT: 全てのデスクトップデバイス及び一部のAndroidデバイス • PVR: 全てのiOSデバイス及び一部のAndroidデバイス • ETC: 大部分のAndroidデバイス • 1024×1024/VRAM4.19MBのテクスチャを 圧縮した場合 • DXT • PVR • ETC チェックボックス入れてCompressをクリックでOK! VRAM699KB
  18. 18. PlayCanvas 3Dオブジェクト&マテリアル ディープダイブ
  19. 19. 3Dオブジェクト ディープダイブ
  20. 20. Poly△16433 Bone 135 Blendshap(morphing) 20 Material カラー スペキュラ エミッシブ ノーマルマップ アニメーション 60fps ※ PlayCanvasはデフォルトで アニメフレームレートが 60fps 3Dモデルの作成(MAYAの場合)
  21. 21. 注意点 ベースの3Dモデルと同じメッシュ 情報を持つモデルをコピーして各 アニメーションを作成。 同一メッシュから作成しないとア ニメーションがエディター上で反 映されない。 PlayCanvasのVisual Editorへドラック&ドロップ
  22. 22. デモします。 https://playcanv.as/b/iJwOeAD8/ シーンを見てみよう
  23. 23. Chromのコンソールで中 身を見てみると… meshInstances morphInstances skinInstances Material等々、maya上で 設定したボーン構造やブレ ンドシェイプ(morph)が格 納されている。 ※ 補助ロケーターは meshInstance内に入るが、 コンストレイン系は無視さ れ、オブジェクトは原点で 固定される。 コンソールの中は… HTMLで描画
  24. 24. ボーン/モーフの格納 ボーン構造 モーフターゲット
  25. 25. アニメーション ディープダイブ
  26. 26. MAYA上でのアニメ―ション • MAYAで作成したパス/オブジェクト/ボーンアニメーション
  27. 27. • PlayCanvas上でのパス/オブジェクト/ボーンアニメーションの違い オブジェクトアニメ―ションのポイント
  28. 28. シンプルな直線移動や回転はオブジェクトの キーアニメーションでも問題ないが、急激な カーブや複雑な動きになるとアニメーションが 意図しない動きをする。 回避策としてはジョイントを対象オブジェクトに バインドし、ジョイントをアニメーションさせる と正しくアニメーションが再生される。 • パス/オブジェクト/ボーンアニメーションの違い 車体/前輪/後輪 全て同じキーフレームを打っ てある オブジェクトアニメ―ションのポイント
  29. 29. マテリアル ディープダイブ
  30. 30. PlayCanvasのマテリアルの特徴 • オブジェクト1つに対して 1つのマテリアルを生成 主要な3DCG制作ソフトの Rambert /Phongシェーダーで テクスチャを設定。 FBXへ書き出し、PlayCanvas上へ ドラック&ドロップ。 設定した内容が反映された状態で マテリアルが生成される。
  31. 31. マテリアルの格納場所 model._material.parameters.material_xxx
  32. 32. MAYA → PlayCanvas 実際の工程を見てみよう! MAYAのphongシェーダーを使用 カラー(deffuse) バンプマッピング(nomalmap) スペキュラ のテクスチャを設定。 FBX書き出しで組み込みメディア にチェックを入れてエクスポート
  33. 33. 用意したテクスチャ Diffuse Anbient Normal Parallax Specular Grossness Alpha
  34. 34. MAYA→PlayCanvas実際の工程を見てみよう!
  35. 35. • FBXの大部分の内容が”json”として変換される! • 複雑なアニメーションを作成する時はスキンアニメーションで! • 標準マテリアルで思いのままに質感をコントロール可能! 3Dディープダイブまとめ
  36. 36. PlayCanvas新機能
  37. 37. ついに出ました! バージョン管理機能!!
  38. 38. えっ!なかったの?
  39. 39. えっ!なかったの? • そうなんです。。。 • GitHubと連携 – このころは共同開発力が低かった ↓ • Script2.0になってから利用不可に – 声の掛け合いが重要な開発スタイルへ ↓ • REST APIで独自でCIが組めるように – 全部落として全部上げる ↓ • 内部バージョン管理機能リリース ← いまここ – ようやく人間らしい開発スタイルへ
  40. 40. バージョンコントロールシステム 基本機能 • チェックポイント • ブランチ • マージ
  41. 41. 使い方
  42. 42. バージョンコントロールEditor
  43. 43. DIFF/レストア/マージ • DIFFをみたり レストアしたり マージしたり
  44. 44. バージョンコントロールまとめ • 基本的にGUIからいろいろ実行することができる • 無料プランでも利用可能 • REST API開発中
  45. 45. バージョンコントロール注意点 • 容量をとても食う – ブランチ・チェックポイントetc… – ブランチを削除してもブランチ分で利用した容量は減らない仕 様(2019年7月現在) – 容量でお困りの際はお問い合わせください – https://playcanvas.jp • Exportはブランチ指定不可 – Project Exportは強制的にmasterブランチのみダウンロード
  46. 46. まとめ • ブラウザ向け3Dライブラリの中では非常に効率的なワークフロー – FBXの大部分の内容が”json”として反映される! – 複雑なアニメーションを作成する時はスキンアニメーションで! – 標準マテリアルで思いのままに質感をコントロール可能! • バージョンコントロールシステムリリース🎉 – ようやく人間らしい開発スタイルへ! – チェックポイント,ブランチ,マージ等々、PlayCanvasの即時開 発を殺さない独特なバージョンコントロールシステム! – 用法容量を守って正しくお使いください。
  47. 47. お知らせ
  48. 48. ハンズオンやってます! • 3D/2D/LP作成/CIなどなど! • ゲーム開発に限らず、Web制作や開発フローについて教えます! • 詳しくは https://playcanvas.jp へ!
  49. 49. 事例紹介ページ作りました! • PlayCanvasでいったいどんな事例があるんだろう。。 – そんな声にお答えすべく、事例紹介ページを公開しました! https://playcanvas.jp/casestudy/ 紹介事例大募集中です!取り上げてほしいユーザー様は、ぜひご連絡下さい!
  50. 50. ベンチマーク公開しました! • PlayCanvasって結局、パフォーマンスどのくらい出るの。。。? – という声にお応えして、ベンチマークアプリケーションを 公開しました!!! – https://playcanvas.jp/benchmark/ – どの端末からも実行可能です 是非お試しください!!
  51. 51. コミュニティあります! • PlayCanvas日本デベロッパー向けコミュニティ運営中! – https://support.playcanvas.jp/hc/ja/community/topics – 「PlayCanvas コミュニティ」で検索 • 技術フォーラムから雑談まで – PlayCanvas運営事務局メンバーも滞在しています – 技術相談やつくったもの紹介などなんでもどうぞ! • 最新情報はTwitterから! – https://twitter.com/playcanvasJP
  52. 52. Thank you ! The Web-First Game Engine Collaboratively build stunning HTML5 visualizations and games

×