この記事はGrimoire.js Advent Calender 2017の３日目の記事です。
はじめに
Grimoire.js は日本発の WebGL フレームワークです。
この１年を振り返ってみると、Grimoire.js には表現力を強化する仕組みが多く実装された年ではなかったかと思います。
早速ですがサンプルをいくつか紹介したいと思います。
2017年にサポートされた主な機能
- シェーダタグ
- インスタンシング
- 複数カメラの設置
- PBR
- glTF 2.0
シェーダタグ
従来は、シェーダを外部ファイルとして用意する必要がありましたが、本機能により、HTML の script タグ（type="text/sort"）としてシェーダを記載できるようになりました。jsdo.it 等で、シェーダを確認しながらコーディングできるので個人的に重宝している機能です。
インスタンシング
複数のメッシュを１回のドローコールで描画できるようになる便利機能です。使いこなすにはデータ構造を意識する必要がある為、少し練習が必要かもしれません。
http://jsdo.it/cx20/u3rD
http://jsdo.it/cx20/u3rD
複数カメラの設置
もしかしたら、前からある機能だったかも知れません。複数カメラが設定できることを今年知りました。
PBR
PBR は 物理ベースレンダリングの略で、あまり詳しくは理解できていないですが、現実のライティングに近い表現ができる仕組みのようです。
http://jsdo.it/cx20/89C8
http://jsdo.it/cx20/ATDR
glTF 2.0
glTF は Khronos の提唱する 3D フォーマットです。glTF 2.0 より PBR に対応し、より表現力が向上したフォーマットになっています。
http://jsdo.it/cx20/Qurl
http://jsdo.it/cx20/oGhR
その他ライブラリ・API の組み合わせ
Effekseer
Effekseerはパーティクルなどのエフェクトを制作する為のツールです。エフェクトファイルが WebGL でも利用できるようなので使ってみました。
Draco 形式ファイル
Draco 形式は Google の提唱する新しい 3D Mesh の圧縮形式です。デコードするライブラリが提供されているので使ってみました。データにもよりますが、かなりの高圧縮が期待できます。下記サンプルで使用しているモデルはobj形式に比べて約1/30に圧縮（6.6MB→212KB）されることを確認しています。
Web Audio API
ジャイロセンサー
ジャイロセンサーはスマホ等に内蔵されている傾きセンサーです。これらのセンサーを Grimoire.js と組み合わせて使ってみました。スマホで作品を傾けると模様が変わるようになっています。
Oimo.js
Oimo.js は JavaScript による物理演算ライブラリです。軽量かつ高速な動作が特徴です。
http://jsdo.it/cx20/OEes
http://jsdo.it/cx20/0fsp
おわりに
いかがでしょうか。ここで紹介したサンプル以外にも多数サンプルを投稿していますので興味ある方がいらっしゃいましたら http://jsdo.it/tag/Grimoire.js をご覧ください。