PlayCanvas v1.30.0 新しいAPIの追加と、WebXR関係のバグが修正された。



### アップデート内容

PlayCanvasのエンジンがv1.30.0にアップデートされました。
[Release - v1.30.0](https://github.com/playcanvas/engine/releases/tag/v1.30.0)

```
What's New
- Unlimited morph blending using a new texture-based morphing system + example
- Implemented pc.Color#equals
- Added glTF parser callbacks to perform custom processing during glTF loading
- Remove fs-extra from package.json and update package dependencies
- Clean up of SkinInstance classes
Bug Fixes
- WebXR restored (broken in 1.29.0)
- Fix image resampling path that was setting pc.Texture#width/height that have no setters
- Change particle system texture sampling precision to highp (fixes particle animation on iOS)
- Add localization fallback zh-MO to zh-HK
- Update pc.BatchManager#prepare JSDoc return type to be array of arrays
```

### 1. [Color.js](https://github.com/playcanvas/engine/blob/2c6bfd7959240c314ca0fabf244f9cca3ad11c6b/src/core/color.js)に色が同じか確認するメソッドが追加されました。

利用方法はこのような形で使うことができます。

```jsx
const color1 = new pc.Color(1, 1, 1, 1); // Color {r: 1, g: 1, b: 1, a: 1}
const color2 = new pc.Color(1, 1, 1, 1); // Color {r: 1, g: 1, b: 1, a: 1}
color1.equals(color2) // true
```

- [Added glTF parser callbacks to perform custom processing during glTF loading](https://github.com/playcanvas/engine/pull/2207)

### 2.  gltfのファイルを読み込む際に、それぞれの値のロード前、ロード後にコールバックを設定できるようになりました。

```jsx
global
node
animation
material
texture
buffer
```

#### 【動作】 アニメーションを含むGLTFのファイルを読み込むときのコールバックの呼ばれる流れ

![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/f79943d6-7cc0-211e-2526-fdea1224812b.png)


gltfファイルを読み込む際にOptionとして指定をすることで使用できます。

```jsx
const options = {
    buffer: {
      preprocess: function (e) {
        console.log('preprocess: Buffer', e)
      },

      postprocess: function (e) {
        console.log('postprocess: Buffer', e)
      }
    }
    // global...
    // node...
    // animation...
    // material...
    // texture...
}
const asset = new pc.Asset(
    'model',
    'container',
    {
      url:url        
    },
    null,
    options
  )
  this.app.assets.add(asset)
  this.app.assets.load(asset)
```

### 3. `fs-extra`のパッケージがpackage.jsonから削除や、SkinInstanceのリファクタリングが行われました

### 4. モーフターゲットに新しいAPI・サンプルが追加

使い方

[http://playcanvas.github.io/#graphics/mesh-morph-many.html](http://playcanvas.github.io/#graphics/mesh-morph-many.html)

ソースコード

[https://github.com/playcanvas/engine/blob/a3a27423a897e8c679656aabe6ad823fb20f74e1/examples/graphics/mesh-morph-many.html](https://github.com/playcanvas/engine/blob/a3a27423a897e8c679656aabe6ad823fb20f74e1/examples/graphics/mesh-morph-many.html)



### 主要なバグ修正

1. WebXR Device APIを使用した際に`xr.isAvailable("immersive-ar")`のAPIが常に`false`を返してしまう問題が修正されました。

[https://github.com/playcanvas/engine/issues/2209](https://github.com/playcanvas/engine/issues/2209)


<font color="OrangeRed">
PlayCanvas開発で参考になりそうな記事の一覧です。
</font>
<font color="OrangeRed">
入門

- [PlayCanvas入門- モデルの作成～ゲームに入れ込むまで](https://qiita.com/yushimatenjin/items/2a2c35fe7b1d08f9e361)
- [JavaScriptでスロットを実装する。【PlayCanvas】](https://qiita.com/yushimatenjin/items/e84c42da74df1eb07386)
- [3Dモデルのビューワーを3分で作る【初めてのPlayCanvas】](https://qiita.com/yushimatenjin/items/4b09c9e2076a0b2a6933)
</font>
<font color="OrangeRed">
応用
</font>

- [PlayCanvasのコードエディターでes6に対応する](https://qiita.com/yushimatenjin/items/a61a21c64c1c1a550dd4)
- [Gulpのプラグインを書いたらPlayCanvasでの開発がめちゃくちゃ便利になった](https://qiita.com/yushimatenjin/items/5f0f178e8a4ba4a5ee57)
- [PlayCanvas Editorに外部スクリプトを読み込む新機能が追加されたので開発方法を考える。- Reduxを組み込む](https://qiita.com/yushimatenjin/items/7a64220cceac66843d7d)
</font>
<font color="OrangeRed">
その他の記事はこちらになります。

- [React Native + PlayCanvasを使ってスマートフォンゲームを爆速で生み出す](https://qiita.com/yushimatenjin/items/7c7ad5d35473c11f32f2)
- [PlayCanvasのエディター上でHTML, CSSを組み込む方法](https://qiita.com/yushimatenjin/items/814b4a32db53397219df)
- [【iOS13】新しくなったWebVRの使い方 ](https://qiita.com/yushimatenjin/items/344d86b3d193e0a88567)
</font>

<font color="OrangeRed">
その他関連
- [PlayCanvasタグの付いた記事一覧](https://qiita.com/tags/playcanvas)
</font>


### PlayCanvasのユーザー会のSlackを作りました！
少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！

[日本PlayCanvasユーザー会 - Slack](https://t.co/IdSRIfJhN5?amp=1)