2017年に作ったGrimoire.jsのサンプルを振り返ってみる

この記事は[Grimoire.js Advent Calender 2017](https://qiita.com/advent-calendar/2017/grimoire-js)の３日目の記事です。

## はじめに

[Grimoire.js](https://grimoire.gl) は日本発の WebGL フレームワークです。
この１年を振り返ってみると、[Grimoire.js](https://grimoire.gl) には表現力を強化する仕組みが多く実装された年ではなかったかと思います。
早速ですがサンプルをいくつか紹介したいと思います。

## 2017年にサポートされた主な機能

- シェーダタグ
- インスタンシング
- 複数カメラの設置
- PBR
- glTF 2.0

### シェーダタグ

従来は、シェーダを外部ファイルとして用意する必要がありましたが、本機能により、HTML の `script` タグ（type="text/sort"）としてシェーダを記載できるようになりました。jsdo.it 等で、シェーダを確認しながらコーディングできるので個人的に重宝している機能です。

![image](http://jsdo-static-contents.s3.amazonaws.com/images/capture/e/R/e/eRe9.jpg)
http://jsdo.it/cx20/eRe9

![image](http://jsdo-static-contents.s3.amazonaws.com/images/capture/c/h/h/chhM.jpg)
http://jsdo.it/cx20/chhM

![image](http://jsdo-static-contents.s3.amazonaws.com/images/capture/4/E/z/4EztL.jpg)
http://jsdo.it/cx20/4EztL

### インスタンシング

複数のメッシュを１回のドローコールで描画できるようになる便利機能です。使いこなすにはデータ構造を意識する必要がある為、少し練習が必要かもしれません。

![image](http://jsdo-static-contents.s3.amazonaws.com/images/capture/y/h/s/yhso.jpg)
http://jsdo.it/cx20/u3rD
![image](http://jsdo-static-contents.s3.amazonaws.com/images/capture/u/3/r/u3rD.jpg)
http://jsdo.it/cx20/u3rD

### 複数カメラの設置

もしかしたら、前からある機能だったかも知れません。複数カメラが設定できることを今年知りました。

![image](http://jsdo-static-contents.s3.amazonaws.com/images/capture/K/q/i/Kqig.jpg)
http://jsdo.it/cx20/Kqig

### PBR

[PBR](http://tech.cygames.co.jp/archives/2129/) は 物理ベースレンダリングの略で、あまり詳しくは理解できていないですが、現実のライティングに近い表現ができる仕組みのようです。

![image](http://jsdo-static-contents.s3.amazonaws.com/images/capture/8/9/C/89C8.jpg)
http://jsdo.it/cx20/89C8
![image](http://jsdo-static-contents.s3.amazonaws.com/images/capture/A/T/D/ATDR.jpg)
http://jsdo.it/cx20/ATDR

### glTF 2.0

[glTF](https://www.khronos.org/gltf/) は Khronos の提唱する 3D フォーマットです。glTF 2.0 より PBR に対応し、より表現力が向上したフォーマットになっています。

![image](http://jsdo-static-contents.s3.amazonaws.com/images/capture/Q/u/r/Qurl.jpg)
http://jsdo.it/cx20/Qurl
![image](http://jsdo-static-contents.s3.amazonaws.com/images/capture/o/G/h/oGhR.jpg)
http://jsdo.it/cx20/oGhR

## その他ライブラリ・API の組み合わせ

### Effekseer

[Effekseer](https://github.com/effekseer/Effekseer)はパーティクルなどのエフェクトを制作する為のツールです。エフェクトファイルが WebGL でも利用できるようなので使ってみました。

![image](http://jsdo-static-contents.s3.amazonaws.com/images/capture/Q/3/n/Q3n5.jpg)
http://jsdo.it/cx20/Q3n5

### Draco 形式ファイル

[Draco 形式](https://github.com/google/draco)は Google の提唱する新しい 3D Mesh の圧縮形式です。デコードするライブラリが提供されているので使ってみました。データにもよりますが、かなりの高圧縮が期待できます。下記サンプルで使用しているモデルはobj形式に比べて約1/30に圧縮（6.6MB→212KB）されることを確認しています。

![image](http://jsdo-static-contents.s3.amazonaws.com/images/capture/U/O/J/UOJ0.jpg)
http://jsdo.it/cx20/UOJ0

### Web Audio API

![image](http://jsdo-static-contents.s3.amazonaws.com/images/capture/8/w/g/8wgq.jpg)
http://jsdo.it/cx20/8wgq

### ジャイロセンサー

[ジャイロセンサー](https://developer.mozilla.org/ja/docs/Web/API/Detecting_device_orientation)はスマホ等に内蔵されている傾きセンサーです。これらのセンサーを Grimoire.js と組み合わせて使ってみました。スマホで作品を傾けると模様が変わるようになっています。

![image](http://jsdo-static-contents.s3.amazonaws.com/images/capture/A/J/J/AJJ5.jpg)
http://jsdo.it/cx20/AJJ5

### Oimo.js

[Oimo.js](https://github.com/lo-th/Oimo.js/) は JavaScript による物理演算ライブラリです。軽量かつ高速な動作が特徴です。

![image](http://jsdo-static-contents.s3.amazonaws.com/images/capture/O/E/e/OEes.jpg)
http://jsdo.it/cx20/OEes
![image](http://jsdo-static-contents.s3.amazonaws.com/images/capture/0/f/s/0fsp.jpg)
http://jsdo.it/cx20/0fsp

## おわりに

いかがでしょうか。ここで紹介したサンプル以外にも多数サンプルを投稿していますので興味ある方がいらっしゃいましたら http://jsdo.it/tag/Grimoire.js をご覧ください。