Download as PDF, PPTX
![Hands on
PlayCanvas運営事務局でご⽤意しているハンズオン資料
-3Dハンズオン
-2Dハンズオン
-3Dwebハンズオン
-実践ハンズオン(https://playcanvas-cedec.gitbook.io/coin-dozer/)
-3Dwebハンズオン×Vue.js
[https://support.playcanvas.jp/hc/ja/categories/360001402374]](https://image.slidesharecdn.com/gmocloudplaycanvas-191203101723/85/WordPress-PlayCanvas-23-320.jpg)
![Hands on
connpassというIT勉強会⽀援プラットフォームにて、参加者を募っています
[https://playcanvasjp.connpass.com/]](https://image.slidesharecdn.com/gmocloudplaycanvas-191203101723/85/WordPress-PlayCanvas-24-320.jpg)
![[ 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を動かす](https://image.slidesharecdn.com/gmocloudplaycanvas-191203101723/85/WordPress-PlayCanvas-34-320.jpg)
Uploaded byPlayCanvas運営事務局
WordPressのリッチコンテンツを簡単に作れるPlayCanvasセミナー
2019/12/03にGMOクラウド主催で行なったPlayCanvasのセミナーになります。 https://partner.gmocloud.com/seminar/2019/1203.html
WordPressのリッチコンテンツを簡単に作れるPlayCanvasセミナー
- 2. キドユウタ / KidoYuta GMOクラウド株式会社 GSP事業部 PlayCanvas推進室 2019年4⽉よりPlayCanvasの⾮ゲームへの展開に向けて、 PlayCanvas推進室に参画。 それまでの前職ではweb制作会社で制作を⼀任。 主にマークアップとWordPressによる開発をメインとしていた。 Webの知識をPlayCanvasで活かす要素を模索。 Web以外にも映像やフライヤーなどデザインの制作なども⾏なっている。
- 3. 以下の4⼈で構成（2019/07現在） - ゲームエンジニア（Tsuda） - 3DCGデザイナー（Munakata） -Webデザインエンジニア（Kido） - フロントエンドエンジニア（Haga） PlayCanvas運営事務局のアカウントページ ( https://playcanvas.com/playcanvasjp ) PlayCanvas運営事務局
- 4. アジェンダ - PlayCanvas とは -PlayCanvasをWebへ導⼊ - HTML5/WebGLの登場 - WordPressで使う - それら実装のコスト - Flashの終了 - Webへの組み込む
- 5.
- 6. Flashって？何があったの？ - リッチコンテンツ制作ソフト (アプリ開発、Webコンテンツ、アニメ制作) -ブロードバンドが普及する前の2000年前半、Flash⻩⾦時代 (.swfが重宝) - Flash Player の普及 - ブロードバンドが普及し、環境としてのFlashが⽀持 (Youtubeやニコニコ動画など) - iPhoneやスマートフォンの登場で環境が変わる (Flash対応させず) - パフォーマンスの問題やセキュリティ⾯でのリスクが発覚 - ついに2020年でサポート終了
- 7. なぜ Flash は使われなくなったのか -頻発するセキュリティの脆弱性 - 読み込みに時間がかかるためブラウザがクラッシュする原因となる - プラグインがないと再⽣できない (Adobe Flash Player) - 2010年、「Thoughts on Flash」の発表 - 主要ブラウザでFlash Playerが有効になっていない (Chromeは警告バナーが現れる)
- 8. 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…)
- 9.
- 10. HTML5/WebGL - HTML5 2014年〜 2015年以降、主要ブラウザでHTML5をデフォルトに -WebGL2.0 2017年〜 オープンソースのグラフィックWeb API 平⾯のWebに3D空間表現ができるように
- 11. 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…)
- 12. WebGLの描画 HTML WebGL - シェーダーコンパイル(glsl) - 頂点情報, ⾊, 法線 - IBO⽣成・通知 - 座標変換⾏列 <canvas></canvas> canvasを更新してレンダリング
- 13. 学習コスト - HTML5, CSSといったWebの知識 -Vanilla JavaScriptのコード理解 - GLSL( OpenGL Shading Language)の理解 - 3Dモデル環境のレンダリング⽅法 - 描画処理におけるモデル・ビュー・プロジェクションの理解 コンテンツを作る上では、Webコーディング・フロントエンド・ 3Dモデリングなどの知識が必要になってくる
- 14.
- 15.
- 16. WebGL/HTML5 ゲームエンジン - 3D要素に開発プラットフォーム - クラウドホスティング →インストールやダウンロード不要 - JavaScriptオンリーのエンジン → 他と⽐べてもとても軽量 - マルチプラットフォーム対応
- 17. ゲームエンジンでWebサイトや広告も - WebGL/HTML5製のためWebへの展開が可能 - WebGLが動く環境なら使⽤可能 -独⾃Editorにより学習コストを軽減 → WebGLの知識がなくても開発可能 - Web広告をよりリッチなものに → Flashに変わるコンテンツになる
- 18. Case Study -Game - -ROBOSTORM:https://robostorm.io/ -MASTERARCHER:https://playcanv.as/p/JERg21J8/ -BLASTARENA:http://blastarena.io/ -KLab株式会社 -株式会社ＣＭサイト -株式会社ボトルキューブ PlayCanvas.com https://playcanvas.com/industries/games PlayCanvas.jp https://playcanvas.jp/casestudy/
- 19. 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/
- 20. 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
- 21.
- 22.
- 23.
- 24.
- 25. PlayCanvasについて - まとめ -SaaS型のクラウドサービス - 開発環境の構築は必要なし！ - メールアドレス⼀つで登録、利⽤開始が可能 - ブラウザ上で動く独⾃のビジュアルエディター - ブラウザ⼀つで開発から公開まで可能 - 初めての⼈でも簡単に開発できる環境が整っている
- 26.
- 27.
- 28. PlayCanvasをwebへ組み込む - そもそもHTML5のcanvas要素にPlayCanvasは書き出される - PublishされたプロジェクトはPlayCanvasサーバーに置かれる 固有のURLで共有することが可能 （https://playcanv.as/p/~~ ） - PublishされたURLをiframe要素で展開することが可能 - ParsonalとOrganizationプランならセルフホスティングが可能
- 29. PlayCanvasをwebへ組み込む PUBLISH TO PLAYCANVAS iframeindex.html DOWNLOAD .ZIP PlayCanvasPlayCanvas iframeでの⽅法 セルフホスティングでの⽅法 開発元(イギリス)のサーバーから実⾏
- 30.
- 31. PlayCanvasをwebへ組み込む iframeでの⽅法 セルフホスティングでの⽅法 開発元のサーバーから実⾏ (イギリス) 実⾏URL:https;//playcanv.as/~~~~ 任意のサーバーから実⾏ 実⾏URL: ⾃⾝のドメイン
- 32.
- 33.
- 34. [ 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を動かす
- 35.
- 36.
- 37.
- 38. 今回のデモについて - 構成 PlayCanvas 実⾏URL(iframe) PlayCanvas セルフホスティングWordPress カスタムフィールドショートコード テンプレートファイル Nginx
- 39. 今回のデモについて - 構成 WordPress -バージョンは問わない - cssのスタイルは調整 (Twenty Nineteen のスタイルデザインを微修正) PlayCanvas - 実⾏URLはiframeで実⾏ (カスタムフィールドとショートコードで反映) - セルフホスティングはTOPページの背景に透過canvasで反映
- 40. iframeでの実装について - PUBLISH カスタムフィールド -PlayCanvasの実⾏URLを⼊⼒するフィールドを作成 - 該当するテンプレートファイルにカスタムフィールドの値を受け取る - 今回はプラグイン Advanced Custom Fields を使⽤
- 41. iframeでの実装について - PUBLISH ショートコード -functions.phpで実⾏URLを読み込むためのショートコードを作成
- 42.
- 43.
- 44. セルフホスティングでの実装について - .ZIP -playcanvasエンジンのスクリプト - シーンID、アセットID - __start__.js 実⾏するスクリプト - __loading__.js 読み込み完了まで 実⾏するローディングスクリプト
- 45.
- 46. セルフホスティングでの実装について - .ZIP __start__.jsを使って⽤意したcanvas要素を取得する 取得したcanvas要素にダウンロードしたPlayCanvasのコンテンツを描画する
- 47. PUBLISH TO PLAYCANVASと .ZIPは 何が違うのか
- 48. PUBLISH TO PLAYCANVASと .ZIPは 何が違うのか - 書き出しているデータは⼀緒 ( 開発元のサーバで展開されているデータは、.ZIPのデータとほぼ同様 ) - 読み込んでいるファイルは同じ index.html で表⽰している - ホスティングされている場所が違う ( PUBLISHは開発元のサーバ、.ZIPは任意のサーバに置ける )
- 49.
- 50.
- 51. PlayCanvasで開発をスムーズに - 3DコンテンツのWebへ展開が容易になる - WebGLの学習コストの削減 -事務局によるサポート対応も - ⽇本のWebサイトをより豊かに
- 52.