PlayCanvas v1.25.0アップデート内容【追記】

<img width="821" alt="スクリーンショット 2020-02-26 12.49.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/27f28d12-8377-6eb9-9857-bb3fa48f89af.png">
PlayCanvasのアップデートについて
昨日PlayCanvas Engineがバージョン 1.24.7から 1.25.0にアップデートされました。

このアップデートでは、WebXRのサポートの追加、examplesの追加、ドキュメントの修正、バッチングに対してのアップデートが入りました。

## 機能追加

### WebXRサポート
[こちら](https://github.com/playcanvas/engine/commit/64410ef87d2d641019b5609f724118a89d7052b6)のコミットで`WebXR`のソースコードが追加されました

### Particle System コンポーネントについて
[こちら](https://github.com/playcanvas/engine/commit/9bfcac742ba804a88e52cb3b4438590ec3160350)のコミットで`Particle texture atlas start frame property`の[デモ](http://playcanvas.github.io/#graphics/particles-start-frame.html
)とソースコードが追加されました


この変更により`Particle System`コンポーネントに対して`animStartFrame`のプロパティを追加できるようになりました。


### 使ってみる

作成したプロジェクトはこちらです
[https://playcanvas.com/project/667962/](https://playcanvas.com/project/667962/)
このテクスチャをパーティクルとして使用する場合する際に`animStartFrame `を設定します。

##### 1. Particle Systemコンポーネントをを持つエンティティを作成する

a. Particle Systemを追加
<img width="306" alt="スクリーンショット 2020-02-26 12.19.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/9d52f93a-e796-7e3b-f0a0-5b5af0caa0d4.png">

b. Color Map, Normal Mapにテクスチャを追加

この画像を使用します

![particles-numbers.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/8dc4f652-cf6d-2a1f-5237-f89f1fa89665.png)


|属性名|値|
|---|---|
|Color Map| particles-numbers.png|
|Normal Map| particles-numbers.png|


<img width="300" alt="スクリーンショット 2020-02-26 12.19.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/3fac3748-96cb-f52b-82f7-319b9095f386.png">

c. 各種プロパティを設定
今回適用するテクスチャアトラスは4x4のものなのでそれに沿った設定をしていきます。

|属性名|値|
|---|---|
|Horizontal Tiles| 4|
|Vertical Tiles Tiles| 4|



##### 2. animStartFrameを設定するParticleSystemコンポーネントを持つエンティティを４つ複製

<img width="250" alt="スクリーンショット 2020-02-26 12.11.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/f486e217-2660-a2ac-b07c-c5d3fcc7af43.png">


##### 3. animStartFrameを設定するスクリプトを追加

PlayCanvasのattributesを指定する方法でエディタから`animStartFrame `を設定できるようにします。

```javascript

/*jshint esversion: 6, asi: true, laxbreak: true*/
const Particle = pc.createScript('particle');
Particle.attributes.add("animStartFrame", {"type": "number"})

Particle.prototype.initialize = function() {
    this.entity.particlesystem.animStartFrame = this.animStartFrame
};
```

#### 3.それぞれ値を設定する

それぞれのエンティティに対して、`animStartFrame`を設定します。

##### エンテティ1

|属性名|値|
|---|---|
|animStartFrame| 0|
<img width="301" alt="スクリーンショット 2020-02-26 12.12.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/dcdad5d8-389f-5137-3a09-81aebcbb3bb0.png">

##### エンテティ2 
|属性名|値|
|---|---|
|animStartFrame| 4|

<img width="306" alt="スクリーンショット 2020-02-26 12.12.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/bb855e98-e5cb-51e0-6212-82100afafacd.png">

##### エンテティ3

|属性名|値|
|---|---|
|animStartFrame| 8|

<img width="303" alt="スクリーンショット 2020-02-26 12.13.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/ce9fd5dc-9929-f949-21e1-7c0649f7546f.png">

##### エンテティ4

|属性名|値|
|---|---|
|animStartFrame| 12|

<img width="310" alt="スクリーンショット 2020-02-26 12.13.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/aeea2c19-a137-6aa0-7bdc-987e1fdca222.png">



#### 実行する


<img width="1033" alt="スクリーンショット 2020-02-26 12.08.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/58e7beb4-1aae-45f2-020b-be4f7d8bb55d.png">

実行をすると、パーティクルとして表示されているものがそれぞれ異なる位置から開始されました。
<img width="114" alt="スクリーンショット 2020-02-26 12.22.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/817acbe1-5390-f3db-c3fb-5d3084ede961.png">

このスクリプトを設定したプロジェクトはこちら
https://playcanv.as/p/9bfxB3nU/

### GPU Instancing

[こちら](https://github.com/playcanvas/engine/commit/5f7c50102082cae250af8abf47d70b8636b1ccaa)のコミットで`GPU Instancing`の[デモ](http://playcanvas.github.io/#xr/xr-picking.html
)とソースコードが追加されました。

GPU Instancingについてはこちらの記事が参考になりました。
https://github.com/playcanvas/engine/commit/5f7c50102082cae250af8abf47d70b8636b1ccaa
> GPU Instancingは、複数の「同一メッシュ」かつ「同一マテリアル」なオブジェクトがあった場合に、GPU側で一括で描画してくれる技術みたいです。
http://tsubakit1.hateblo.jp/entry/2016/06/28/233000


## 色々Examplesが追加
ARとVRのデモが多く追加されました。

- [Basic AR](http://playcanvas.github.io/#xr/ar-basic.html)
- [Basic VR](http://playcanvas.github.io/#xr/vr-basic.html)
- [VR Controller](http://playcanvas.github.io/#xr/vr-controllers.html)
- [VR Movement](http://playcanvas.github.io/#xr/vr-movement.html)
- [XR Picking](http://playcanvas.github.io/#xr/xr-picking.html)
- [Point cloud example](http://playcanvas.github.io/#graphics/point-cloud.html)

※ 以上がv1.25.0のアップデート内容ですが、v1.25.1に今朝アップデートされていたのでそちらも追記致します


※ v1.25.1

```
[FIX] Remove confusing WebXR debug warnings that are shown by Chrome 79 in debug build
[FIX] Batching without an index buffer
[EXAMPLES] Improved hardware instancing example
[EXAMPLES] Tweak WebXR examples
```
※ v1.25.2

```
[NEW] Add render-to-texture and dynamic batching examples.
[FIX] on and once called on the same object for different events.
[FIX] Disable culling for batched UI elements.
```
※ v1.25.3

```
[FIX] Decompress Basis normal maps to 565 for PVR-devices to improve quality
[DOCS] Document APIs related to morph animations
[DOCS] Document APIs related to the scene's skybox
[DOCS] Document API properties related to skinned mesh animations
```


<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)