GMOクラウド株式会社

PLAYCANVAS運営事務局

アジェンダ

• 事前準備

– アカウント作成

– PlayCanvasの使い方

• オリエンテーション

– WebGLとは

– PlayCanvasとは

• ハンズオン

– PlayCanvasで簡単に3Dモデルを公開しよう！

• さいごに

本日の資料

http://bit.ly/pc3dent

WebGLとは- そもそもグラフィックスAPIって？

- WebGLとは

- WebGLのための開発ライブラリ・フレームワーク

そもそもグラフィックスAPIって

• 2D/3Dの3DCGを描画するためのAPI

– 大きく分けて、DirectXとOpenGLの2つがある

• DirectX:MS向けの高速GL

• OpenGL:クロスプラットフォーム

• WebGLはOpen GLの仲間！

– WebGL 1.0はOpenGL ES 2.0の互換

OpenGL1.3

OpenGL ES 2.0

WebGL 2.0

OpenGL ES 3.0

OpenGL ES 3.2 OpenGL4.5

WebGLとは

• Webブラウザ上で3DCGを表示させる標準仕様

– WebブラウザからGPUアクセスするJavascript API

– 特別なプラグイン必要なし！

• Web上での3D表現のデファクトスタンダード

WebGLのための開発ライブラリ・フレームワーク

• WebGLを簡単に扱うための多くのライブラリ・フレームワークが登場

– Web

• three.js 一番使われているWebGLライブラリ。無料。

• A-FRAME three.jsを利用して開発されたWebVR用フレームワーク

– ゲーム

• Unity

• Unreal Engine emscriptenを利用してJavaScriptにクロスコンパイル

WebGLのための開発ライブラリ・フレームワーク

• 最終的にはJSでWebGLを叩く形になる

Web ゲーム

– WebGLライブラリに深い部分は任せて、アプリの開発に専念。

– 開発者は抽象化されたHLAPIを使用– マークアップや、コードベースで開発していく

スタイルが多く、無料でOSSがほとんど

WebGL(GPU)

WebGL library(JS)

アプリケーション(html,JS)

HLAPI

LLAPI C# IL C++LLVM

IL JS

monoIL2CP

PClang

Binarye

n

– C#およびC++で記述されたコードを、さまざまな技術を利用してJavaScript

にクロスコンパイル

PlayCanvasとは- PlayCanvasとは

- PlayCanvasでできること

- PlayCanvasの開発スタイル

- PlayCanvas事例

PlayCanvasとは

• HTML5 WebGLで動く3Dゲームを

ブラウザ上で開発配信できる統合環境

• Engine ＋ Editor ＋ Community 一体型

「クラウドホスティングゲーム開発環境」

– リアルタイムコラボレーションに焦点を当てた開発・プレイ環境を目指し、日々改善が進められている

PlayCanvas Engine

• MITライセンスで公開されているOSS• JavaScriptだけで記述された軽量なエンジン• 多機能

– 豊富なグラフィックス– 衝突・物理– 音声– リソース管理– Entity/コンポーネントシステム– スクリプティングシステム– 各種I/O

• 軽量なのが特徴– ソースコード8MB

– ランタイムコード2.43MB

– gZip圧縮後 147KB

PlayCanvas Engine

• Engineそのものは、Webの文化にのっとっている

– OSSでエンジン単体なら無料で使用可

– マークアップとJavaScriptを利用してコードベースで開発

WebGL(GPU)

PlayCanvas Engine(JS)

アプリケーション(JS)

HLAPI

LLAPI

PlayCanvas Editor

• ゲーム開発の文化も取り入れ、3Dのビジュアルエディタを搭載

– Web上で完全に動作

– モデルインポーター(FBX,OBJ)

– 直感的なデザイン

– コラボレーション

– 即時反映

PlayCanvas Editor

• ビジュアルエディタを介してエンジンを使用

– Web上で動作するためエンジンのダウンロードやインストール不要URLひとつで開発開始

– 開発者はマークアップや描画APIを気にすることなく3DWebアプリ開発可能

– 内部ではJavaScript製のエンジンが走っているため、リロード、コンパイル不要で即時的に反映されるリアルタイム感

– コラボレーションも可能。プッシュ,コミットといったワークフローを排除

PlayCanvas Community

• サービスサイトにコミュニティも統合

– 開発物の紹介や相談等活発

• 無料から使える公開環境

– 200MBまで無料で使える

– 人気プロジェクトはExploreに

– 他ゲームのシーンやコードは閲覧可能

PlayCanvasでできること

• ブラウザゲーム開発

• スマホブラウザゲーム

• リッチメディア広告

• WebVR

• プロダクトビジュアライゼーション

ブラウザゲーム開発

• Webブラウザ上で動作するゲームを開発可能

• ブラウザ上でネイティブレベルのグラフィックが表現可能です。

TANX

MOANA Wayfinding with code

スマホブラウザゲーム開発

• PlayCanvas製アプリはモバイルブラウザでも動作します。

• touchやdevicemotion等のモバイル向けイベントも実装。モバイルブラウザゲームが手軽に開発が可能です。

Master ArcherTANX

リッチメディア広告

• Webで動作するPlayCanvas製アプリは手軽にリッチメディア広告が作成できます。

• ゲームのアセットをそのまま利用して広告を作成

• 体験版をWeb上で展開などなど・・・

TRANSFORMERS THE LAST KNIGHT

WebVR

• Webブラウザ上でVRアプリケーションを楽しむWebVRにも対応

– ハイエンドWebVR (ハイエンドPCとHMDで楽しむもの)

– スマホブラウザVR (スマホブラウザからアクセスして汎用ゴーグルで楽しむもの)

• 天球画像のビューワーなどもノンプログラミングで実装可能！

WebVR Lab

360 lookaround camera

プロダクトビジュアライゼーション

• モデルデータを手軽に読み込んで公開することが可能なのでモデルビューワーとしても最適。

• Model Viewer Starter Kitを利用すると、ノンプログラミングでモデルの公開ができます。

BMW i8

Black Diamond

PlayCanvasの開発スタイル

• ワークフロー

• モデルインポート

• スクリプティング

• 外部ライブラリの使用

• デバッグ

• コラボレーション

• REST API

PlayCanvasで変わるワークフロー

• 開発環境の構成比較：一般的な開発

開発環境提供元

検証版配置先

バージョン管理ツール

情報共有ツール

配信先

開発グループ検証会社

開発キット作業成果

最新データ

配信版

検証版

検証

クラウドホスティングゲーム開発環境

• 開発環境の構成比較：PlayCanvasでの開発

開発に必要なものはPC，ネット，ブラウザのみ！

PlayCanvas

配信先

開発グループ

検証会社

開発キット

作業

最新データ

配信版検証版

検証

配信版

配信版

PlayCanvas

配信先

開発グループ

検証会社

開発キット

作業

最新データ

配信版検証版

検証

配信版

配信版

開発序盤～中盤

PlayCavnasは全てWeb上で動作- エンジンのインストール不要- URLひとつで開発開始

- データは常に最新の状態

PlayCanvas

配信先

開発グループ

検証会社

開発キット

作業

最新データ

配信版検証版

検証

配信版

配信版

開発中盤～終盤

- 無料から使える公開環境- 数クリックでデプロイ可能- URLを共有するだけで公開可能

PlayCanvas

配信先

開発グループ

検証会社

開発キット

作業

最新データ

配信版検証版

検証

配信版

配信版

開発終盤

- 最後に作成したアプリケーションをzipダウンロード可能- エンジンごとダウンロードされるので、依存関係はなし- スクリプトは連結され、短縮化・難読化される

モデルインポート

• PlayCanvasではFBX, OBJ等の3Dモデルが扱えます

– ボーンアニメーションにも対応

– Webではそのまま解釈できないのでインポートするとPlayCanvasが解釈できるjson形式に自動的に変換

– マテリアルが内包されていた場合も自動でコンバート

スクリプティング

• 開発言語はJavaScript

– プロトタイプチェインで基本的には一般的なJS

– コンポーネントとなるスクリプトはpc.createScript()で作成

– 基本的なメソッド

• initialize … 初期化時に実行

• update … 毎フレーム実行

• swap … 後述

var Script = pc.createScript('script');

Script.prototype.initialize = function()

{ };

Script.prototype.update = function(dt)

{ };

Script.prototype.swap = function(old)

{ };

外部ライブラリの使用

• jQueryなどの外部ライブラリも使用可能

– ライブラリをプロジェクトにアップロードすれば使用可能

– 仕様上、playcanvas.comからの外部参照はできない

• QRコード作成：jQuery.qrcode.js

• PCスマホ間同期通信：photon-JSSDK

VR Flight Simulator

デバッグ

• URLを渡すだけで即時的に全端末で実行！

– JavaScriptのみで動作しているため、コンパイルをはさまず即時同期

– 従来のようなワークフローを排除

コラボレーション

• 複数人で同一コードのリアルタイム編集が可能

– コミット，プッシュ，プルといったワークフローを排除

– コンフリクトを回避

REST API

• ダウンロード→デプロイの流れをシームレスに

– API経由でダウンロードファイルの生成を要求

– JobIDが指定されるのでポーリングしてステータスを確認

– パラメータでアプリの名前やリリースノート，バージョン等入力

– ビルド終了後、DLリンクが発行される

• Organizationプランのみに提供

PlayCanva

sクライアント

API経由でリクエスト

jobID ビルド

jobステータスを確認アプリのパラメータ指定

応答 download_urlにlink

新規プロジェクト作成

• 新規プロジェクトを作成します

– 右上の をクリック

– [Model Viewer Starter Kit]を選択し、名前を[ModelViewer]としてをクリックします

プロジェクトの作成

• プロジェクトが作成されると、overviewページに変わります

– Editorをクリックしてエディタ画面へ飛びます

Model Viewer Starter Kitの概要

• Model Viewer Starter Kitは3Dモデル公開に適して作られたキットです。

– アセット

• orbit-camera.js, keyboard-input.js, mouse-input.js, touch-input.js

• PlayCanvasの3Dモデル, キューブマップ

– 機能

• カメラ制御, 各種インタフェース対応(マウス, タッチ, キーボード)

実行してみよう

• デフォルトで実装済み

– 左クリックでドラッグ：回転移動

– 右クリックでドラッグ：水平移動

– ホイール：近づく/遠ざかる

– スペース：リセット

スマートフォンでも実行してみよう

• 同じURLでスマホからアクセスします。

– ログインすると実行可能

• デフォルトで実装済み

– スワイプ：回転移動

– 2本指でスワイプ：水平移動

– ピンチ：近づく/遠ざかる

パラメータを調整してみよう

• Cameraのインスペクターから調整が可能

– Inetia Factor 加速係数

– Focus Entity フォーカスする対象のエンティティを指定可能

– Frame on start スタート時にフレームに収める

Distance Max

Distance min

Pitch Angle Max

Pitch Angle Min

スクリプトを覗いてみよう

• 全ての挙動はスクリプトで定義されています

– Editを選択してCode Editorを起動します

– スクリプトもブラウザ上から編集可能

即時反映を体感してみよう

• エディタでの作業は即時的に反映されます

– launchを別のウィンドウに切り分け、2画面表示

– エディタを編集すると即時的に反映することが確認

アセットストアを使ってみよう

• PlayCanvasには気軽に使えるアセットストアもあります！

– モデル,スクリプト,シェーダー,Cubemap等を無料配布

– Asset > Libraryをクリック

アセットストアからのインポート

• アセットストアのモデルを使用

– Medieval Houseを選択

• DOWNLOAD -> 対象のプロジェクト(ModelViewer)を選択

• Asset > root内にいろいろインポートされたら完了

モデルの公開

• ドラッグ&ドロップで簡単公開

– Asset内の[Medieval House]をViewportへドラッグ&ドロップ

• Viewportに表示される

– もともとあったViewportのcube

は削除しよう

モデルデータの詳細

• [Medieval House]を選択してInspectorからModelをクリック

– モデルの詳細情報が表示

– 名前の変更やpreloadの設定

– メタデータの取得

– マテリアル郡 が閲覧可能

マテリアル

• Inspectorから[Concrete Dirt]をクリック

– 壁のマテリアル

• Diffuse

• Specular

• Normalが設定済み

• 反射やバンプマッピングタイリング等マテリアルで表現

• OPACITY > Blend Type”Alpha”で透明度も設定可能

さらにモデルをインポートしてみよう

• Santa & Sleighをインポート

– 同様にシーンに配置

– デフォルトだと家と重なってしまうので、Positionを[-6,0,0]にしよう

アニメーション

• PlayCanvasは3Dのボーンアニメーションに対応

– モデルと同様、jsonに変換される

• アニメーションの適用も簡単

– HIERARCHYからSanta_sleighを選択

– ADD COMPONENT > ANIMATION

– アニメーションファイルをドラッグ&ドロップ

アニメーション モデル

背景を変更してみよう

• 全天球画像を背景に

– 360度カメラで撮影した全天球画像を簡単に組み込み可能

• Milky Way HDR Cubemapをインポート

• Milky WayをASSETからシーンにドラック&ドロップ

ローカルからモデルをインポートしてみよう(任意)

• fbx, Objをインポートできます。

– アップロードするとすぐ使える形に変換

– マテリアル，アニメーションも展開されます

パブリッシュしてみよう

• 完成したら最後に公開！

– Manage Scene > PUBLISH > PUBLISH

– PUBLISH NOW で公開！

– リンクが発行されます

パブリッシュ

• 発行されたURLからビューワーが実行できます。

– iframeで既存のページに組み込むことも可能• 例：PlayCanvas ヘルプセンター https://support.playcanvas.jp/hc/ja

• たくさんシェアしてより多くの人に見てもらいましょう！

いかがでしたか？

• PlayCanvasの手軽さ、パワフルさを体感していただければ幸いです。

• まだまだ紹介し切れていない機能も！

– エクストリームプログラミング

– リアルタイム通信

– モバイル対応

– 2D / スプライトアニメーション

– WebVR

• ブースも出展していますので詳しく聞きたい方はブースまでどうぞ！

今後の予定

• 9/5(火) PlayCanvas × NCMB勉強会ハンズオン！ ＠渋谷

– バックエンド機能をサーバーレスで実装可能なNCMBとコラボ

• 9/13(水) PlayCanvas × Photon ソーシャルVRハンズオン！ ＠渋谷

– ネットワークエンジンPhotonと組み合わせてソーシャルVRアプリをつくります！

• 全国行脚勉強会を実施予定！

– 予定地)札幌，福岡，名古屋，大阪

• この後も勉強会・ワークショップ続々開催予定！

日本語ヘルプセンターやってます

• ナレッジベースや、コミュニティ(フォーラム)機能のあるヘルプセンター

– 本家ブログ記事の翻訳，技術的なTips，日本での事例記事やイベント告知等の最新情報盛りだくさん！

• こんなものがほしい、ここを教えてほしい等のご要望はお気軽に！

• コンテンツの充実化を図って行きますので、ぜひご利用ください！

• https://support.playcanvas.jp/hc/ja

お問い合わせ

• メールアドレス

– info@playcanvas.jp

• ヘルプセンター

– https://support.playcanvas.jp/hc/ja

• 最新情報はtwitterで！

– ＠playcanvasJP

最後に..

一緒に働ける仲間を

大募集中！！

詳細はこちら↓