2017/08/25(金)WebGL使いたい

プログラム::Grimoire

grimoire.jsを使ってみる

WebGLを使いたくて探してたら見つけたjsライブラリ
以前はjThree.jsって名前だった模様
Grimoire.jsにあります

ダウンロードとか

InstallationのMinified versionからDLできる
いくつかライブラリが入ってるみたい
頻繁に更新されてるので、直で書いてしまうのもあり

他にgLTFを読むプラグインgrimoirejs-gltfとかシェーディングプラグインgrimoire-forward-shadingもあるらしい

使ってみる

goml(Grimoire Object Markup Language)で書くらしい
scriptタグにtype="text/goml"を指定して記述
記述があった部分に、自動でcanvasを生成して描画する
親要素のサイズに対して100%で生成される模様
そのため、body直下に置くとwindowサイズめいっぱいにできる
resizeイベント拾ってるみたいで、windowサイズとか変えても勝手に大きさ変わる

<!DOCTYPE html>
<html>
<head>
  <script src="./grimoire-preset-basic.min.js"></script>
</head>
<body>
<div style="width: 640px; height: 480px; border: 1px dotted black;">
  <script type="text/goml">
    <goml>
      <scene>
        <camera/>
        <mesh geometry="cube" position="1,1,0" color="#99f" />
      </scene>
    </goml>
  </script>
</div>
</body>
</html>

書いてみる

sceneタグの中に描画オブジェクトやカメラを配置する
当然カメラ無いと表示できないので忘れないように注意

sceneタグはいくつでもかけるけど、最初に置いたカメラの視点で描画されます