PlayCanvas v1.26.0アップデート内容

## PlayCanvas v1.26.0アップデート内容

```
[NEW] glTF 2.0 support
[NEW] WebXR AR hit test support (@Maksims)
[NEW] Particle system randomized sprite animations + example
[NEW] Add support for ES6 script classes (@aidinabedi)
[NEW] Add pc.drawTexture to render a texture to a target using a shader (@aidinabedi)
[NEW] Integration with SpectorJS markers
[FIX] Correctly update particle system local bounds
[FIX] Optimize grab-pass under WebGL 2 and fix when using anti-aliased render target (@aidinabedi)
[FIX] Mouse wheel events on element components
[FIX] Recompile Basis with latest Emscripten to fix IE11
[FIX] WebXR: Avoid using deprecated vec3.data internally (@Maksims)
[DOCS] Document drawQuadWithShader and copyRenderTarget (@aidinabedi)
[DOCS] Fix pc.ModelComponent#type docs (@mast4461)
```

3月24日にPlayCanvasのアップデートがありました。
`1.26.0`ということで多くの変更点があります。
大きく変わった点として、`glTF 2.0`と`ES6のclass構文`に対応しました。
他にも複数のバグ修正や、Exampleの拡充、新機能が加わりました。

https://github.com/playcanvas/engine/releases

## 新機能

## ES6のclass構文対応
[NEW] Add support for ES6 script classes
ES6のclass構文に対応する`pc.registerScript`がこちらの[プルリクエスト](https://github.com/playcanvas/engine/pull/1908
)で、PlayCanvasエンジンに組み込まれました。

### ES5 example
こちらがv1.25までのPlayCanvasでのスクリプトの書き方となります。

```javascript
var CameraController = pc.createScript('CameraController');

CameraController.attributes.add('myAttrib', { type: 'boolean', default: false });

CameraController.prototype.initialize = function() {
    // initialize code called once per entity 
};

CameraController.prototype.update = function(dt) {
    // update code called every frame
};

```


### ES6 example

v1.26.0からは`pc.registerScript`を使用してclass構文でPlayCanvasのスクリプトの定義をできるようになりました。

```javascript
class CameraController extends pc.ScriptType {

    initialize() {
        // initialize code called once per entity 
    }

    update(dt) {
        // update code called every frame
    }
}

CameraController.attributes.add('attribute', { type: 'boolean', default: false });

pc.registerScript(CameraController);

```



こちらは現在Engineのみでのサポートとなっておりエディタでの使用はまだできません

※ 現在はエディタ対応済みです
https://github.com/playcanvas/engine/issues/1934


## glTF2.0対応

glTF2.0の読み込みにエンジン本体で対応をしました。

今まではglTFを読み込む際には、別のライブラリを事前に[playcanvas-gltf](https://github.com/playcanvas/playcanvas-gltf)を読み込む必要がありましたが今回のアップデートでエンジン本体でglTFを使えるようになりました。


https://github.com/playcanvas/engine/commit/cca7be0cc3bd37f8e0e434501828176ed581c5d0


glTF 2.0 support
https://github.com/playcanvas/engine/pull/1904

### 使ってみる

まだ（※3月31日現在)
エディタはgltfのファイル形式のアップロードには対応をしていないのでエンジンから使用します。


1. リポジトリをクローン

```bash
git clone git@github.com:playcanvas/engine.git
```

2. engineのリポジトリへ移動
```bash
cd engine
```
4. PlayCanvasをビルド

```bash
npm install
npm build
```

3. Glb Viewerを起動

デフォルトの設定の場合、127.0.0.1:8080にサーバーが立ち上がります。

```
npx http-server
```

4. ローカルのGlb Viewerへアクセス

http://127.0.0.1:8080/tools/glb-viewer/

5. Glbファイルをドラックアンドドロップアップロード

今回は`.vrm`の拡張子のファイルを`.glb`に変換して読み込ませています。
![](https://i.imgur.com/vkCNgn2.jpg)


他のライブラリなしでGlbのファイルを読み込めるようになりました





### 追加されたexamples
いくつかの使用例が追加されています。

- [Particles Random Sprites](http://playcanvas.github.io/#graphics/particles-random-sprites.html) [ソースコード](https://github.com/playcanvas/engine/blob/master/examples/graphics/particles-random-sprites.html)

- [Render To Texture](http://playcanvas.github.io/#graphics/render-to-texture.html)
[ソースコード](https://github.com/playcanvas/engine/blob/master/examples/graphics/render-to-texture.html)

# 追記

# v1.26.1

```
[NEW] Anisotropic specular and reflection approximation using GGX distribution and bent normals + example
[NEW] Model outline post effect example
[NEW] Allow pc.AnimController to support any target
[NEW] Add pc.ScriptComponent#get (allows TS developers to get scripts from script components in a type safe way)
[NEW] Add pc.Application#fillMode and pc.Application#resolutionMode getters
[NEW] Make pc.Application#loadScene public
[NEW] Make pc.BoundingBox methods: copy, clone, setMinMax and compute public
[DOCS] Fix incorrect naming syntax for pc.ScriptType.attributes
[FIX] Fix parsing of ES6 scripts
[FIX] Include urlBase when loading unpacked glTF
[FIX] Simplify pc.Light#mask and pc.Light#enabled code
```

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