PlayCanvasで作るバーチャルコンテンツの紹介

PlayCanvas Meetup #4 登壇資料
株式会社CGworks 企画開発部 田村誠さん・村上雅也さん

【イベント詳細】
PlayCanvas Meetup は PlayCanvas の技術の普及、開発者同士の交流を目的としたイベントです。
2023/07/21(金) 18:30 〜 21:00
https://playcanvasjp.connpass.com/event/286349/

【PlayCanvas とは？】
PlayCanvas はオープンソースのゲームエンジンで、HTML と WebGL を使ってブラウザゲームや 3D のコンテンツを作ることのできる JavaScript のライブラリです。豊富な機能を揃えた 3D エンジンとクラウドホスティングされた開発環境およびツールセットを備えています。

【PlayCanvas 公式サイト】
https://playcanvas.jp

【Twitter】
https://twitter.com/playcanvasJP

【日本 PlayCanvas ユーザ会 - Slack】
日本の PlayCanvas 開発者が集まったSlackコミュニティワークスペースがございます。 PlayCanvas での開発に興味がある方はぜひこちらご参加ください。
https://playcanvas.jp/joincommunity

Transcript

1. Playcanvasで作る
 バーチャルコンテンツの紹介
 株式会社 CGworks　
 
 企画開発部
 田村 誠 / 村上 雅也
 PLAYCANVAS Meet up
2. 自己紹介
 名前
 田村 誠
 Makoto Tamura 経歴 TMS → CGworks 企画開発部(4年目) 
 出身地 山口県
 趣味 美味しいコーヒー探し 
 仕事内容 3DCG業務全般
 PLAYCANVAS Meet up
3. 自己紹介
 名前
 村上 雅也
 Masaya Murakami 経歴 立命館大学大学院 → CGworks 企画開発部(2年目) 
 出身地 大阪府
 趣味 スポーツ観戦（野球・サッカー）, ゲーム 
 仕事内容 モデリング、動画制作、ゲームエンジン、プログラミング 
 PLAYCANVAS Meet up
4. COPYRIGHT ©2019-2022CGWORKS INC. ALL RIGHTS RESERVED. PLAYCANVAS Meet up
5. 会社概要
 名称　　株式会社CGworks 設立　　2019年3月 所在地　東京都渋谷区代々木 2-1-1 新宿マインズタワー 19F 代表者　金澤 勇輝 資本金　20,000,000円 
 3DCG×〇〇で世の中に驚きと感動を届ける 事業内容
 1. 3DCGを活用したパース制作 2. ウォークスルー動画制作 3. 360°VRパース制作 4. VR制作 5. WebGL制作 6. Cinema4Dプラグイン開発 7. Cinema4Dトレーニング 8. CGパースに関するコンサルティング 上記に付帯する一切の業務 PLAYCANVAS Meet up
6. 事業内容　3DCG×〇〇
 CGworksでは3D×〇〇という形での開発のご相談が増えております。 
 PLAYCANVAS Meet up
7. 3DCG×Visualize 「プレゼンテーション」 CGパース PLAYCANVAS Meet up
8. 3DCG×Visualize 「カタログ・広告」 CGパース PLAYCANVAS Meet up
9. 3DCG×Visualize コンセプトアート PLAYCANVAS Meet up
10. 3DCG×Metaverse/VR/AR Playcanvasでの事例紹介 • ワコール「Yue」 • ADORE バージョン管理ツール 今後に期待したい機能 WebGL PLAYCANVAS Meet up
11. Playcanvas 事例紹介
 ワコール「Yue」 ADORE PLAYCANVAS Meet up
12. ワコール「Yue」
13. 当初はUnity WebGLで制作するも、公開後半年で iPhoneで開かないとの連絡が入る。 確認するとSafari上でWASMエラーが発生し、Loading 99％でフリーズ…。 Unity公式フォーラムで ・ iOS 15.4 + Safari WebGLで起動しない問題のスレッドを発見。 ・Unity Editorで対応策通りに修正しビルド。 ワコール「Yue」　Playcanvasへ切り替えた理由
 しかし… PLAYCANVAS Meet up
14. まだ開かない…。 PlayCanvasに移行しよう！！ PLAYCANVAS Meet up
15. ADORE
16. ADOREの制作における課題
 服の品質に関して 課題 服の見た目・質感のクオリティを保ちつつ、 WebGLとして動作が重くならないようにする。 解決策 • ポリゴン数の削減 • AOマップ作成 • ライトマップの使用 PLAYCANVAS Meet up
17. ポリゴン数の削減
 ポリゴンリダクションによって形を崩さずにポリゴン 数を削減しています。 また見えない部分のポリゴンを削除することでポリ ゴン数をさらに削減しています。 メリット fbxのデータ容量の縮小により、 ロード時間の短縮、動作の軽さに影響を与え る。 PLAYCANVAS Meet up
18. AOマップ作成
 Substance PainterにてAOマップをベイクし、書き だして使用しています。 AOマップを使用することにより、隙間など陰 影の表現がより強調されることで、 リアル感が 増します。 AOなし AOあり メリット PLAYCANVAS Meet up
19. ライトマップの使用
 本案件では、ライトのCast Shadowsは使用せず、 空間のライトの描写、影ともにライトマップを使用し ています。 ※右画像のライトマークは服の明るさ用で、影に は影響を与えていません。 ライトマップを使用することで、リアルタイムレン ダリングを使用した場合より、 負荷を軽くするこ とができ、パフォーマンスを向上させることがで きます。 メリット PLAYCANVAS Meet up
20. 1. 圧倒的な開発スピード 2. Javascriptで開発できる 3. バージョン管理 PLAYCANVAS Meet up Playcanvasの開発上のメリット 

21. PLAYCANVAS Meet up プロジェクトを複数人同時開発でき、ビルドが不要 なので実機での動作検証、レビュー、修正のス ピードが劇的に改善できました。 複数人同時作業ができるため、各自担当領域を作 業しながら、開発を進めることができます。 1. 圧倒的な開発スピード 

22. PLAYCANVAS Meet up 2. Javascriptで開発できる 
 webGLプロジェクトをJavascriptで直接開発できる のも大きなメリットでした． ビルドが不要なのですぐに動作検証ができます。 Playcanvas内のオブジェクトだけでなく、 DOMや CSSによるレイアウト調整もJavascript側で調整し たりするので、web開発者にとっては開発しやすい と思います。
23. PLAYCANVAS Meet up 3. バージョン管理
 バージョン管理ツールが最初からついているので、開 発や検証が行いやすいのも助かっています。 使い方がシンプルで簡単なのも◎ 作成したブランチも他の作業者にすぐ共有できるの で、機能別のレビューなども素早くおこなえます．
24. 1. 圧倒的な開発スピード 2. Javascriptで開発できる 3. バージョン管理 PLAYCANVAS Meet up Playcanvasの開発上のメリット 

25. PLAYCANVAS Meet up 最後に...今後に期待する部分 
 アセットストアの充実 ローカル環境で使用できるエディタ 簡易LOD webGPU最適化
26. PLAYCANVAS Meet up 最後までご清聴・ご視聴いただき ありがとうございました！