Download as PDF, PPTX
Uploaded byGame Tools & Middleware Forum
Webで3Dモデルはどう扱う？PlayCanvas：3Dモデルディープダイブ+新機能紹介！
デバイスの高性能化、次世代通信網５Gの普及を見据え、アプリではないブラウザベースのコンテンツが徐々に増え始めてきました！ WebGLベースのクラウド型ゲームエンジン「PlayCanvas」はカジュアルコンテンツ、リッチコンテンツ問わず高品質なコンテンツをビジュアルエディターから作成することができます。今回は、PlayCanvas内で3Dオブジェクトやマテリアルがどの様に扱われているかについてと、新しくリリースされたバージョン管理機能，ローディングスクリーンの実装等、すこし深い内容をお届けします！
More Related Content
Webで3Dモデルはどう扱う？PlayCanvas：3Dモデルディープダイブ+新機能紹介！
- 1. The Web-First GameEngine Collaboratively build stunning HTML5 visualizations and games Webで3Dモデルはどう扱う？ PLAYCANVAS：3Dモデルディープダイブ +新機能紹介！ PlayCanvas運営事務局 宗形 修司 津田 良太郎
- 2. はじめに • 本プレゼンを聞いていただきたい主なターゲット – UnityやUE4等を使ったゲーム開発経験がある –HTML5ゲームがなんだか今アツそうだと思っている – アプリストアにはもううんざりだ – いまWebがむしろいいと思っている – ゲーム資産をアプリ以外(Webとか)で使いたい – 使われずにお蔵入りした3Dモデルがある！！ • Yesが1つでもある人にオススメ！
- 3. 登壇者の自己紹介 • 宗形 修司 –2018年よりPlayCanvas運営事務局 デザイナー目線でPlayCanvasを広める ために活動中 • 津田 良太郎 – 2016年よりPlayCanvas運営事務局 デベロッパー目線でPlayCanvasを広める ために活動中 utautattaro.com
- 4. 本日のアジェンダ • Webと3D • PlayCanvasとは •PlayCanvas 3D Feature • PlayCanvas 3D オブジェクト＆マテリアル ディープダイブ • PlayCanvas新機能 • まとめ
- 5.
- 6.
- 7. PlayCanvasとは • WebGLゲーム開発エンジン 3D要素に強く、カジュアルゲームから、 リッチコンテンツまで幅広く開発が可能 • クラウド型の開発エンジン エンジンのインストールや プラグインのダウンロードが不要 •中身はオールJSの軽量なエンジン コンパイルをはさむ必要がなく、 即時性が高いのが特徴 • メールアドレス一つで登録、開始可能 サインアップしたら即PlayCanvasの ビジュアルエディタが機能制限無しで使用可能
- 8.
- 9.
- 10.
- 11. 主要ブラウザでの対応状況 • ブラウザ上で動作/HTML5ゲームプラットフォームも対応 – モバイル/PC/Oculusなどでも動作 –WebGL(v1/v2)に対応したブラウザなら大体動く – エンジン自体の多くはES5ベースで記述 ※2019/07時点
- 12. 軽くまとめ • クラウドサービスとして提供 • 開発環境の構築必要なし！ •メールアドレス一つで登録、開始可能 • ブラウザ上で動くビジュアルエディタ！ • 初めての人でもHTML5ゲームが 簡単に作れる環境が整っています！
- 13.
- 14. PlayCanvas 3D Feature ⚫特徴的な3D機能 – 3Dモデルアニメーションの 自動ブレンディング – コリジョン/リジットボディを ワンクリックで設定 物理シミュレーション可能 – フィジカルベースドレンダリング (PBR） – フィジカルシェーダーベースの 高品質マテリアル。各設定項目も豊 富 – イメージベースドライティング (IBL) – シェーダーもGLSLで書ける
- 15.
- 16. 取り込み可能な画像データ • 画像データの話 • JPG/PNG/GIF/TGA/BMP/TIF/HDR/EXRが読み込み可能 –インポートされたJPGとPNGファイルは元の形式のまま保たれる 透過情報を含む画像はPNGに自動変換される • BMP/TGA/TIFはJPGに自動変換される
- 17. テクスチャデータの圧縮 • テクスチャ圧縮の話 – PlayCanvasでは3つのテクスチャ圧縮形式に対応 •DXT: 全てのデスクトップデバイス及び一部のAndroidデバイス • PVR: 全てのiOSデバイス及び一部のAndroidデバイス • ETC: 大部分のAndroidデバイス • 1024×1024/VRAM4.19MBのテクスチャを 圧縮した場合 • DXT • PVR • ETC チェックボックス入れてCompressをクリックでOK! VRAM699KB
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32. MAYA → PlayCanvas実際の工程を見てみよう！ MAYAのphongシェーダーを使用 カラー(deffuse) バンプマッピング(nomalmap) スペキュラ のテクスチャを設定。 FBX書き出しで組み込みメディア にチェックを入れてエクスポート
- 33. 用意したテクスチャ Diffuse Anbient NormalParallax Specular Grossness Alpha
- 34.
- 35. • FBXの大部分の内容が”json”として変換される！ • 複雑なアニメーションを作成する時はスキンアニメーションで！ •標準マテリアルで思いのままに質感をコントロール可能！ 3Dディープダイブまとめ
- 36.
- 37.
- 38.
- 39. えっ！なかったの？ • そうなんです。。。 • GitHubと連携 –このころは共同開発力が低かった ↓ • Script2.0になってから利用不可に – 声の掛け合いが重要な開発スタイルへ ↓ • REST APIで独自でCIが組めるように – 全部落として全部上げる ↓ • 内部バージョン管理機能リリース ← いまここ – ようやく人間らしい開発スタイルへ
- 40. バージョンコントロールシステム 基本機能 • チェックポイント •ブランチ • マージ
- 41.
- 42.
- 43.
- 44.
- 45. バージョンコントロール注意点 • 容量をとても食う – ブランチ・チェックポイントetc… –ブランチを削除してもブランチ分で利用した容量は減らない仕 様(2019年7月現在) – 容量でお困りの際はお問い合わせください – https://playcanvas.jp • Exportはブランチ指定不可 – Project Exportは強制的にmasterブランチのみダウンロード
- 46. まとめ • ブラウザ向け3Dライブラリの中では非常に効率的なワークフロー – FBXの大部分の内容が”json”として反映される！ –複雑なアニメーションを作成する時はスキンアニメーションで！ – 標準マテリアルで思いのままに質感をコントロール可能！ • バージョンコントロールシステムリリース🎉 – ようやく人間らしい開発スタイルへ！ – チェックポイント，ブランチ，マージ等々、PlayCanvasの即時開 発を殺さない独特なバージョンコントロールシステム！ – 用法容量を守って正しくお使いください。
- 47.
- 48. ハンズオンやってます！ • 3D/2D/LP作成/CIなどなど！ • ゲーム開発に限らず、Web制作や開発フローについて教えます！ •詳しくは https://playcanvas.jp へ！
- 49.
- 50. ベンチマーク公開しました！ • PlayCanvasって結局、パフォーマンスどのくらい出るの。。。？ – という声にお応えして、ベンチマークアプリケーションを 公開しました！！！ –https://playcanvas.jp/benchmark/ – どの端末からも実行可能です 是非お試しください！！
- 51. コミュニティあります！ • PlayCanvas日本デベロッパー向けコミュニティ運営中！ – https://support.playcanvas.jp/hc/ja/community/topics –「PlayCanvas コミュニティ」で検索 • 技術フォーラムから雑談まで – PlayCanvas運営事務局メンバーも滞在しています – 技術相談やつくったもの紹介などなんでもどうぞ！ • 最新情報はTwitterから！ – https://twitter.com/playcanvasJP
- 52. Thank you ! TheWeb-First Game Engine Collaboratively build stunning HTML5 visualizations and games