キドユウタ / Kido Yuta
GMOクラウド株式会社 GSP事業部 PlayCanvas推進室
2019年4⽉よりPlayCanvasの⾮ゲームへの展開に向けて、
PlayCanvas推進室に参画。
それまでの前職ではweb制作会社で制作を⼀任。
主にマークアップとWordPressによる開発をメインとしていた。
Webの知識をPlayCanvasで活かす要素を模索。
Web以外にも映像やフライヤーなどデザインの制作なども⾏なっている。
以下の4⼈で構成(2019/07現在)
- ゲームエンジニア(Tsuda)
- 3DCGデザイナー(Munakata)
- Webデザインエンジニア(Kido)
- フロントエンドエンジニア(Haga)
PlayCanvas運営事務局のアカウントページ
( https://playcanvas.com/playcanvasjp )
PlayCanvas運営事務局
アジェンダ
- PlayCanvas とは
- PlayCanvasをWebへ導⼊
- HTML5/WebGLの登場
- WordPressで使う
- それら実装のコスト
- Flashの終了
- Webへの組み込む
Flashが2020年で終わります!
Flashって?何があったの?
- リッチコンテンツ制作ソフト (アプリ開発、Webコンテンツ、アニメ制作)
- ブロードバンドが普及する前の2000年前半、Flash⻩⾦時代 (.swfが重宝)
- Flash Player の普及
- ブロードバンドが普及し、環境としてのFlashが⽀持 (Youtubeやニコニコ動画など)
- iPhoneやスマートフォンの登場で環境が変わる (Flash対応させず)
- パフォーマンスの問題やセキュリティ⾯でのリスクが発覚
- ついに2020年でサポート終了
なぜ Flash は使われなくなったのか
- 頻発するセキュリティの脆弱性
- 読み込みに時間がかかるためブラウザがクラッシュする原因となる
- プラグインがないと再⽣できない (Adobe Flash Player)
- 2010年、「Thoughts on Flash」の発表
- 主要ブラウザでFlash Playerが有効になっていない (Chromeは警告バナーが現れる)
Webの移り変わり
- 1990年代 - アニメーションgif
- Vanilla JavaScript
- 2000年代前半 - Flash
- Action Script
- 2000年代後半 - jQuery, prototype.js
- スマホ登場 (Flash衰退, Thoughts on Flash)
- 2010年代 - HTML5, CSS3, WebGL
- Virstual DOM (React, Vue, etc…)
Flashの使⽤率は3%に
(2019/11/25現在)
参照 : https://w3techs.com/technologies/details/cp-flash
HTML5/WebGL
- HTML5 2014年〜
2015年以降、主要ブラウザでHTML5をデフォルトに
- WebGL2.0 2017年〜
オープンソースのグラフィックWeb API
平⾯のWebに3D空間表現ができるように
WebGLとは
- OpenGLのWeb版で、GPUへのアクセスを可能にするグラフィクスAPI
- 3DゲームもWeb上で実現可能 (OpenGL ES相当の描画処理)
- FlashやUnityのように別途インストールの必要なし (JSのAPIとして実装)
- 2011年から対応ブラウザが増加 (モバイルを含む多くのブラウザで対応)
- HTML5のcanvas要素を通してブラウザだけで動作
- WebGL 2.0
- 豊富なライブラリ (Three.js, BabylonJS, PIXI.js, etc…)
WebGLの描画
HTML WebGL
- シェーダーコンパイル (glsl)
- 頂点情報, ⾊, 法線
- IBO⽣成・通知
- 座標変換⾏列
<canvas></canvas>
canvasを更新してレンダリング
学習コスト
- HTML5, CSSといったWebの知識
- Vanilla JavaScriptのコード理解
- GLSL( OpenGL Shading Language)の理解
- 3Dモデル環境のレンダリング⽅法
- 描画処理におけるモデル・ビュー・プロジェクションの理解
コンテンツを作る上では、Webコーディング・フロントエンド・
3Dモデリングなどの知識が必要になってくる
学習コストはかけたくない…
もっと簡単に作れないかな
PlayCanvas とは
WebGL/HTML5
ゲームエンジン
- 3D要素に開発プラットフォーム
- クラウドホスティング
→ インストールやダウンロード不要
- JavaScriptオンリーのエンジン
→ 他と⽐べてもとても軽量
- マルチプラットフォーム対応
ゲームエンジンでWebサイトや広告も
- WebGL/HTML5製のためWebへの展開が可能
- WebGLが動く環境なら使⽤可能
- 独⾃Editorにより学習コストを軽減
→ WebGLの知識がなくても開発可能
- Web広告をよりリッチなものに
→ Flashに変わるコンテンツになる
Case Study - Game -
-ROBOSTORM:https://robostorm.io/
-MASTERARCHER:https://playcanv.as/p/JERg21J8/
-BLASTARENA:http://blastarena.io/
-KLab株式会社
-株式会社CMサイト
-株式会社ボトルキューブ
PlayCanvas.com
https://playcanvas.com/industries/games
PlayCanvas.jp
https://playcanvas.jp/casestudy/
Case Study - Web -
-BMWi8:https://playcanv.as/p/RqJJ9oU9/
-WEBVRLAB:https://playcanv.as/p/sAsiDvtC/
-DABMOTORS:https://dabmotors.com/configurator/
-株式会社スーパーワークス
PlayCanvas.com
https://playcanvas.com/industries/vr
https://playcanvas.com/industries/configurators
PlayCanvas.jp
https://playcanvas.jp/casestudy/
Case Study - 運営事務局 -
-3DWebSite:https://pcpo.sabo.jp/3dwebsite/
-VRPlanet:https://pcpo.sabo.jp/vr-planet/
-Sandyフォト:https://twitter.com/playcanvasJP/status/1174154333178351616
-マルチプレイゲーム:https://support.playcanvas.jp/hc/ja/articles/115012165987
-AR/VRコンテンツ
-Youtubeチャンネル:https://bit.ly/340Vw1L
必要なスキルセット
-Web知識
-マークアップ(HTML5、CSS)
-Webページが作られるフローの理解
-JavaScript(できればVanillaJavaScript)
-3D知識
-モデリング知識(マテリアル、テクスチャ)
-物理エンジン・アニメーション
-WebGL(OpenGL)
必要なスキルセット
-3Dエディターなどのツールを抵抗なく使える
-やりたいことをググって実装・実⾏することができる
初めての⼈、Webや3Dの知識がない⼈でも
簡単にリッチコンテンツを作れる環境が整っている
Hands on
PlayCanvas運営事務局でご⽤意しているハンズオン資料
-3Dハンズオン
-2Dハンズオン
-3Dwebハンズオン
-実践ハンズオン(https://playcanvas-cedec.gitbook.io/coin-dozer/)
-3Dwebハンズオン×Vue.js
[https://support.playcanvas.jp/hc/ja/categories/360001402374]
Hands on
connpassというIT勉強会⽀援プラットフォームにて、参加者を募っています
[https://playcanvasjp.connpass.com/]
PlayCanvasについて - まとめ
- SaaS型のクラウドサービス
- 開発環境の構築は必要なし!
- メールアドレス⼀つで登録、利⽤開始が可能
- ブラウザ上で動く独⾃のビジュアルエディター
- ブラウザ⼀つで開発から公開まで可能
- 初めての⼈でも簡単に開発できる環境が整っている
休憩
PlayCanvasのWeb導⼊
PlayCanvasをwebへ組み込む
- そもそもHTML5のcanvas要素にPlayCanvasは書き出される
- PublishされたプロジェクトはPlayCanvasサーバーに置かれる
固有のURLで共有することが可能
( https://playcanv.as/p/~~ )
- PublishされたURLをiframe要素で展開することが可能
- ParsonalとOrganizationプランならセルフホスティングが可能
PlayCanvasをwebへ組み込む
PUBLISH TO PLAYCANVAS
iframe index.html
DOWNLOAD .ZIP
PlayCanvasPlayCanvas
iframeでの⽅法 セルフホスティングでの⽅法
開発元(イギリス)のサーバーから実⾏
PlayCanvasをwebへ組み込む
iframeでの⽅法 セルフホスティングでの⽅法
実⾏URL発⾏
PlayCanvasをwebへ組み込む
iframeでの⽅法 セルフホスティングでの⽅法
開発元のサーバーから実⾏ (イギリス)
実⾏URL: https;//playcanv.as/~~~~
任意のサーバーから実⾏
実⾏URL: ⾃⾝のドメイン
PlayCanvas内でDOMを動かす
- PlayCanvasの中でDOMを使う
- canvas要素の中ではなく、canvas要素の隣にDOMを追加する
PlayCanvasのcanvas要素
隣に追加したDOM
PlayCanvas内でDOMを動かす
- PlayCanvasの中でDOMを使う
- canvas要素の中ではなく、canvas要素の隣にDOMを追加する
PlayCanvasのcanvas要素
隣に追加したDOM
厳密にはPlayCanvasの
実⾏環境の中でDOMを使う
[ DEMO ]
https://pcpo.sabo.jp/wptopc/
[ Hands on ] ↓
https://support.playcanvas.jp/hc/ja/articles/360025298433
https://support.playcanvas.jp/hc/ja/articles/360038048173
PlayCanvas内でDOMを動かす
DOMの中でPlayCanvasコンテンツを動かす
- PlayCanvasの実⾏プロジェクトを.zipでダウンロード
- セルフホスティングはParsonalプランから可能
DOMの中でPlayCanvasコンテンツを動かす
PlayCanvasの
情報を⼊⼒
今回のデモについて
今回のデモについて - 構成
PlayCanvas
実⾏URL(iframe)
PlayCanvas
セルフホスティングWordPress
カスタムフィールド ショートコード
テンプレートファイル
Nginx
今回のデモについて - 構成
WordPress
- バージョンは問わない
- cssのスタイルは調整 (Twenty Nineteen のスタイルデザインを微修正)
PlayCanvas
- 実⾏URLはiframeで実⾏ (カスタムフィールドとショートコードで反映)
- セルフホスティングはTOPページの背景に透過canvasで反映
iframeでの実装について - PUBLISH
カスタムフィールド
- PlayCanvasの実⾏URLを⼊⼒するフィールドを作成
- 該当するテンプレートファイルにカスタムフィールドの値を受け取る
- 今回はプラグイン Advanced Custom Fields を使⽤
iframeでの実装について - PUBLISH
ショートコード
- functions.phpで実⾏URLを読み込むためのショートコードを作成
iframeのsrcでURL読み込み、
PlayCanvasコンテンツを反映
iframeでの実装について - PUBLISH
セルフホスティングでの実装について - .ZIP
.zipでダウンロードしたデータ⼀式でcanvas要素に表⽰させる
セルフホスティングでの実装について - .ZIP
- playcanvasエンジンのスクリプト
- シーンID、アセットID
- __start__.js 実⾏するスクリプト
- __loading__.js 読み込み完了まで
実⾏するローディングスクリプト
セルフホスティングでの実装について - .ZIP
PlayCanvasのコンテンツを表⽰するためのcanvas要素を⽤意しておく
セルフホスティングでの実装について - .ZIP
__start__.js を使って⽤意したcanvas要素を取得する
取得したcanvas要素にダウンロードしたPlayCanvasのコンテンツを描画する
PUBLISH TO PLAYCANVAS と .ZIPは
何が違うのか
PUBLISH TO PLAYCANVAS と .ZIPは
何が違うのか
- 書き出しているデータは⼀緒
( 開発元のサーバで展開されているデータは、.ZIPのデータとほぼ同様 )
- 読み込んでいるファイルは同じ index.html で表⽰している
- ホスティングされている場所が違う
( PUBLISHは開発元のサーバ、.ZIPは任意のサーバに置ける )
PlayCanvasでリッチコンテンツを作ってみる
アカウント作成から3Dモデルビュワーの作成
https://academy.gmocloud.com/other/20191023/7804
PlayCanvasで開発をスムーズに
- 3DコンテンツのWebへ展開が容易になる
- WebGLの学習コストの削減
- 事務局によるサポート対応も
- ⽇本のWebサイトをより豊かに
ご静聴ありがとうございました

WordPressのリッチコンテンツを簡単に作れるPlayCanvasセミナー