先日弊社にGrimoire.jsのコミッターの方々に来社いただいてハンズオンを行っていただいたので忘れないうちにメモを残します。
Grimoire.jsとは
Web開発者がかんたんにWebGLを使えるようにするためのフレームワーク
だと理解しています。（間違ってたら編集リクエストいただけると助かります）
準備
ローカルサーバーを立てる
なんでもいいですがNode.jsで
$ npm install -g http-server
$ hs
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://172.20.10.3:8080
Hit CTRL-C to stop the server
使い方
立方体を描画してみる
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Grimoire.js plugins -->
<script src="https://unpkg.com/grimoirejs-preset-basic/register/grimoire-preset-basic.js"></script>
</head>
<body>
<!-- GOML-->
<script id="main" src="index.goml" type="text/goml"></script>
</body>
</html>
<!-- Grimoire.js plugins -->の部分はCDNからGrimoire.jsのコアやよく使うプラグインなどがまとまったコードを取得しています。
<!-- GOML-->の部分はindex.gomlというファイルを読み込んでいます。ファイルの中にはGrimoire.jsが解釈できるGOMLというマークアップ言語で描画する要素などを定義します。XMLの記法でかけるうようになっています。
<goml>
<scene>
<camera>
<camera.components>
</camera.components>
</camera>
<mesh geometry="cube" color="red" position="0,0,0">
</mesh>
</scene>
</goml>
上記のファイルではgomlというルートノードの中にsceneタグがあり、その中にcameraとmesh要素が存在します。meshでどんな要素を描画するかを定義していて、このサンプルだとgeometry="cube"という属性がついているので立方体が描画されます。
立方体を動かしてみる
このままだと立方体なのにただの四角に見えるのでマウスで動かせるようにしてみます。
index.gomlを下記のように編集します。
<goml>
<scene>
<camera>
<camera.components>
<MouseCameraControl/>
</camera.components>
</camera>
<mesh geometry="cube" color="red" position="0,0,0">
</mesh>
</scene>
</goml>
camera要素の中にcamera.componenｔｓ要素とその中にMouseCameraControlというタグが入りました。cameraやmeshにコンポーネントを追加することで機能を追加できます。
これでもう一度アクセスすると
マウスでぐりぐり動かせます。
面に画像を貼り付けてみる
せっかくなので面になにか画像を貼ってみます。
index.gomlを下記のように編集します。
<goml>
<scene>
<camera>
<camera.components>
<MouseCameraControl/>
</camera.components>
</camera>
<mesh geometry="cube" texture="./image.png" position="0,0,0">
</mesh>
</scene>
</goml>
公式サイトにあるようにGrimoire.jsのロゴ画像をimage.pngという名前でgomlファイルと同じディレクトリに置いて、mesh要素にtexture="./image.png"という属性を追加しました。
再度アクセスすると
textureという属性名の通り、立方体の面に画像を貼り付けることができました。
JSでいじる
ブラウザっぽくJSでいじります。
htmlファイルを下記のように編集します。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Grimoire.js plugins -->
<script src="https://unpkg.com/grimoirejs-preset-basic/register/grimoire-preset-basic.js">
</script>
<script src="./index.js"></script>
</head>
<body>
<!-- GOML-->
<script id="main" src="index.goml" type="text/goml"></script>
</body>
</html>
gomlファイルをincludeしているscriptタグにmainというIDをつけただけです。
index.jsというファイルを作ってJS下記のように記述します。
JSの記述は
http://qiita.com/kyasbal_1994/items/cff1466719934f461ca8
から拝借しました。ありがとうございます。
gr(function() {
var colors = ['blue', 'red', 'lime'];
var i = 0;
setInterval(function() {
gr('#main')('mesh')
.setAttribute('color', colors[i % 3]);
i++;
}, 1000);
});
JQueryのセレクタのように#mainでgomlが記述されたスクリプトを指定して、その中のmesh要素に対して一定間隔で色の属性を切り替えています。
再度アクセスすると
色が切り替わっています 
所感
HTMLやJSからかなりかんたんに３Dモデルを描画したりいじったりできるという印象です。私が他のWebGL系のライブラリを使ったことがなかったのでそことの比較はできないのですが、そのあたりは
http://qiita.com/kyasbal_1994/items/cff1466719934f461ca8
こちらの記事や公式サイト
https://grimoire.gl/
リポジトリ
https://github.com/GrimoireGL/GrimoireJS
からまずはさわってみるのがいいのかなと思っています。
以上です。