2Dと3Dを連携して、より自分らしい表現をためそう

pixi.js、lottieとbabylon.jsを連携させたデモの紹介です。
※2020/4/10 開催の勉強会で使用した資料になります

Transcript

1. “MORE INTERACTIVE”
2. THEME
3. 2Dと3Dを連携して、より自分らしい表現をめざそう
4. LIBRARIES
5. ２D描画 Pixi.js Create.js Lottie 3D描画 Egret Cocos2d Phaser 2Dゲームエンジン 2D物理演算 Three.js Babylon.js Playcanvas Box2D LiquidFun Matter.js Planck.js Cannon.js Oimo.js ammo.js P5.js Processing.js 3D物理演算 インタラクティブな表現に使えるJSライブラリ（一例）
6. 2D LIBRARY
7. 今回は、自分が使用経験があるPixi.js、Create.js、Lottieから検討します。
8. ActionScript3的な記述が可能 ActionScript3的な記述が可能 基本的なコントロールのみ可能 ※再生・停止など Adobe Animate CCからも出力可能 ※エクステンション Adobe Animate CCから出力可能 ※オフィシャルサポート Adobe AfterEffectsから出力可能 ビジュアル エディティング プログラミング WebGL対応が微妙 • WebGLのみ未対応の機能が多い （2017年時点） • AnimateCCからの出力はCanvas WebGLファースト AnimateCCからの出力が微妙 • どこまでエクスポートできるかは ドキュメント不足のため不明 基本のシェイプやモーションしか出 力できない。エフェクトは対象外 https://airbnb.io/lottie/#/supporte d-features 備考
10. シェーダーの組み込みが簡単。フィルタも多量に用意されています。 https://pixijs.io/pixi-filters/tools/demo/
11. create.jsと比較して処理速度が早いです。 ※2017年時点 https://ics.media/entry/5140/
13. Create.jsはAdobe Animateから出力できるため、タイムラインをベースにした直観的なアニメーション作成が可能です。
14. ラインやシェイプなどの描画については、Create.jsの方がPixi.jsより滑らかです。https://ics.media/entry/5140/
16. LottieはAfterEffectsからHTML5用のアニメーションを出力できるエクステンションです。https://airbnb.design/lottie/
17. TODAY’S DEMO
18. 今回のデモでは、Pixi.jsとLottieを使用します。
19. • ハイレベルなアニメーション編集機能 • 外部からコントロールできる柔軟性 があるが・・・ 「コードがタイムラインにも書けてしまう」 「構造がAnimateからしか確認できない」 • gitで差分がわからない • 作業体制がつくりにくい Create.jsの懸念点 Create.jsはAdobe Animate経由で非常に高機能なアニメーションが作成できますが、Flash時代の課題をそのまま抱えています。
20. フロント開発の一部 として扱う 組み込み用のアニメーションと して扱う • コードはタイムラインにできるだけ書かない • コードを書ける人が命名や構造の規則を策定する • コードを書ける人がアニメーションも作成する • インタラクティブ性はもたせない Create.jsを導入する場合 チーム開発に導入する場合は、コードとアニメーション双方に精通したメンバーが Animateのポジショニングを明確にし、使用ルールを策定するのが望ましいです。※個人の場合はその限りではありません
21. 3D LIBRARY
22. 今回は、自分が使用経験があるThree.js、Babylon.jsから検討します。
23. 3Ｄ描画ライブラリ 現在は圧倒的にthree.jsがメジャーです。用途がWEBのフロントであれば、Three.js一択でも問題ないと思います。 https://medium.com/@hiteshkrsahu/player-2-has-joined-the-game-three-js-vs-babylon-dea49bf00466
24. Babylon.js ただ、マイクロソフトが注力していることもあり、最近になってBabylon.jsが採用されるケースも増えてきています。 特にゲーム関連が多く、日本でもICSが導入しています。https://ics.media/entry/18881/
25. TODAY’S DEMO
26. 今回のデモでは、単なる好みとライブラリの習熟度からBabylon.jsを使用します。（Three.jsではなくすいません） WebGL総本山にBabylon.jsだけで6回掲載 （他に使ってる人が少ないｗ） オフィシャルサイトにも何度か掲載
27. DEMO
28. 今回のテーマ 2Dと3Dを連携して、より自分らしい表現をめざそう
29. デモデータ https://github.com/sretks/200410_sample
30. 全体の動作確認 「reference / master」ブランチで確認します。 「yarn」でパッケージインストール後、「yarn dev」でdev serverを起動します。 ※パーミッションエラーが出た場合は「dist」フォルダの中身を削除してください ブラウザでhttp://localhost:3000を開くと以下の動作が確認できます。 STARTボタンを押すとアニメがはじまります。 キューブを押すとふきだしが現れます。
31. 今回の構造 babylonCanvas pixiContainer startButton lottieContainer HTMLElement 2D 3D • インタラクション（ボタンなど） • 情報 • エフェクトなど • コンテンツ本体
32. 各ライブラリが連携した状態では それぞれの機能を把握しにくいので 個別にみていきましょう
34. Babylon.jsの動作確認 「reference / babylonjs」ブランチで確認します。※Lottie、Pixi.js関連のファイルがない状態です 「yarn」でパッケージインストール後、「yarn dev」でdev serverを起動します。 ブラウザでhttp://localhost:3000を開くと上記の画面になります。 キューブをクリックすると色が変わります。
35. BabylonJs.jsの確認 「src/js/BabylonJs.js」を開いてください。ファイル内部は上記の構成になっています。 BabylonJs.jsの中身 ・constructor →Babylon.jsのエンジンとシーンを準備する ・initCamera →カメラを準備する ・initLight →ライトを準備する ・initMesh →メッシュ（3Dモデル）を準備する
36. Babylon.jsのエンジンとシーンを準備する 今回は、カメラやメッシュを配置するためにエンジンとシーンを準備しています。
37. カメラを準備する 今回は、ターゲットを中心に回転できるAcroRotateCameraを使用しています。 他のカメラはこちら→ https://doc.babylonjs.com/babylon101/cameras
38. カメラを準備する camera.attachControl(this.canvas, true)で、マウスと矢印キーにより視点の回転や移動（カメラ種類による）ができます。
39. ライトを準備する 今回は、Positionを中心として球状に減衰するPointLightを使用しています。 他のライトはこちら→ https://doc.babylonjs.com/babylon101/lights https://docs.unity3d.com/ja/2018.4/Manual/Lighting.html
40. ライトを準備する 「light.diffuse = new BABYLON.Color3(x,x,x)」でライトの色を変更できます。 ※色はRGBで各0～1
41. メッシュ（3Dモデル）を準備する 今回は、縦横5つずつボックスを配置しています。ボックスの生成はBABYLON.MeshBuilder.CreateBoxで実行します。
42. メッシュ（3Dモデル）を準備する BABYLON.MeshBuilder.CreateBoxをCreateSphereに変更すると、球を生成できます。 ※生成できるメッシュの種類はhttps://doc.babylonjs.com/how_to/set_shapesを参考にしてください。
43. メッシュ（3Dモデル）を準備する：マテリアル マテリアルは、メッシュの色や光沢などの質感を設定するために使用します。「EmissiveColor」とは、周囲の環境やライトに影響とは別に 「自身が発光する色」を指します。https://doc.babylonjs.com/babylon101/materials 様々な質感の設定が可能 material.diffuseColor = new BABYLON.Color3(1, 0, 1); material.specularColor = new BABYLON.Color3(0.5, 0.6, 0.87); material.emissiveColor = new BABYLON.Color3(1, 1, 1); material.ambientColor = new BABYLON.Color3(0.23, 0.98, 0.53);
44. メッシュ（3Dモデル）を準備する：マテリアル 「diffuseColor」にランダムな値を入れると、メッシュが様々な色に変わります。
45. メッシュ（3Dモデル）を準備する：クリック メッシュをクリックした場合のインタラクションを作成しています。 クリックしたメッシュのemissiveColorを変更しています。 クリックしたメッシュのY位置を変更しています。
46. メッシュ（3Dモデル）を準備する：クリック メッシュのクリックに対しイベントを返しています。 ここでは戻り値にクリックした位置を入れています。 オブジェクトのIDや状態をいれれば、 より複雑なコントロールが可能なはずです。
48. Pixi.jsの動作確認 「reference / pixijs」ブランチで確認します。※Lottie、Babylon.js関連のファイルがない状態です 「yarn」でパッケージインストール後、「yarn dev」でdev serverを起動します。 ※パーミッションエラーが出た場合は「dist」フォルダの中身を削除してください ブラウザでhttp://localhost:3000を開くと真っ白な画面になりますが・・・ 画面中央をクリックするとふきだしが現れます。
49. PixiJs.jsの確認 「src/js/PixiJs.js」を開いてください。ファイル内部は上記の構成になっています。 「src/images/serif01.png」はふきだし用の画像ファイルです。 PixiJS.jsの中身 ・constructor →Pixi.jsのAppを準備する ・createSerifContainer →ふきだし画像をアニメーションさせるためのコンテナを準備する ・createSerifSprite →コンテナにふきだし画像を配置する ・showSerif →セリフ付きでふきだしを表示する
50. Pixi.jsのAppを準備する new Pixi.Applicationで生成したCanvasをdivにappendしています。
51. ふきだしの構成 今回のふきだしは上記のような構成になっています。実際にアニメーションを設定するのはContainerになります。 Container Sprite HELLO! Text 複数のSpriteやTextなどを配置する 画像データ
52. ふきだし画像をアニメーションさせるためのコンテナを準備する 「new Pixi.Container」でコンテナを生成し、初期の位置やスケールを設定します。 ※ふきだしは拡大して現れるので、初期のスケールはゼロにしています。
53. コンテナにふきだし画像を配置する 画像ファイルからTextureを作成し、さらにTextureを格納するためのSpriteを作成しています。 「pivot」は原点の位置となります。今回はふきだしが下から拡大して現れるので、位置を調整しておきます。 原点が中央（デフォルト）の場合 原点を調整した場合
54. コンテナにふきだし画像を配置する 先ほど生成したコンテナにSpriteを配置しています。
55. セリフ付きでふきだしを表示する 引数のX・Y位置にあわせて、ふきだしを表示するアニメーションを再生しています。 今回はふきだしのアニメーションにTweenMaxを使用しています。
56. セリフ付きでふきだしを表示する ふきだしの上にはランダムでテキストを表示します。テキストは「new Pixi.Text」で生成しています。 HELLO!
57. セリフ付きでふきだしを表示する 最後に、クリック位置を送るためのイベントと関数を「index.js」内に記述しています。
59. Lottieの動作確認 「reference / lottie」ブランチで確認します。※Pixi.js、Babylon.js関連のファイルがない状態です 「yarn」でパッケージインストール後、「yarn dev」でdev serverを起動します。 ※パーミッションエラーが出た場合は「dist」フォルダの中身を削除してください ブラウザでhttp://localhost:3000を開くとスタートボタンが表示されます。 クリックでアニメーションを開始します。
60. LottieJs.jsの確認 「src/js/LottieJs.js」を開いてください。ファイル内部は上記の構成になっています。 「src/datas/data.json」はAfterEffectから出力されたJSONファイルです。 LottieJS.jsの中身 ・constructor →アニメーションを準備する ・run →アニメーションを再生する ・loadComplete →アニメーションの読み込み完了をハンドルする
61. アニメーションを準備する Lottie.loadAnimationでアニメーションの初期設定をしています。autoplayをtrueにすることで自動再生も可能です。 ※今回はSTARTボタンを押したら再生を開始したいため、falseにしています。
62. アニメーションを再生する 「play()」で明示的に再生開始できます。 Index.js LottieJs.js
63. おまけ・Lottieのインストール Lottieのインストールについてはhttps://github.com/airbnb/lottie-webを参考にしてください。 「aescripts + aeplugins」もしくは「adobe store」からダウンロード可能です。（Bodymovinという名前になっています） aescripts + aeplugins adobe store
64. おまけ・AfterEffectsからの出力設定 AfterEffectsのメニューバーにある「エクステンション」から設定画面を表示できます。
65. おまけ・AfterEffectsからの出力設定 用途にあわせて複数の出力方法が用意されています。 Standard ・アニメーションの設定だけdata.jsonに出力される Demo ・html1ファイルにlottieとアニメーションの設定が組み込まれている Standalone ・data.jsonにlottieとアニメーションの設定が組み込まれている （だと思う）
66. SUMMARY
67. 1. インタラクティブな表現ができるライブラリはたくさんある 2. ライブラリごとに強みがあるのでそれぞれの特性を生かす 3. 複数のライブラリを組み合わせれば、よりリッチなコンテン ツが生み出せる（重いかもしれない・・・けど）
68. あとは触って考えよう