2017/08/25(金)ノードとコンポーネント

プログラム::Grimoire

grimoire.jsではすべてのデータ（タグ）は、木構造で管理されノードとして登録されています
各ノードはコンポーネント（機能）をいくつか持っており、親から継承されています

ノード

ノードを登録することで、自分で作ったデータ（タグ）を利用することができます
標準では、gomlやscene、camera、meshなどが登録されています

基本的に描画で使うオブジェクトはmeshから派生させることになります
また、形状についてはgeometryから派生させます

ノードの登録

registerNodeを使い登録できます

gr.registerNode("ノード名", [ノードの持つコンポーネントのリスト], {デフォルト値}, "親ノード")

myobjectという名前でノードを登録してみる
コンポーネントは特に無し（親から継承したコンポーネントは持ってる）

<div style="width: 640px; height: 480px; border: 1px dotted black;">
  <script type="text/javascript">
    gr.registerNode("myobject", [], {}, "mesh");  
  </script>
  <script type="text/goml">
    <goml>
      <scene>
        <myobject geometry="cube" position="1,1,0" color="#99f" />
        <camera/>
      </scene>
    </goml>
  </script>
</div>

デフォルトのパラメータを指定した場合

<div style="width: 640px; height: 480px; border: 1px dotted black;">
  <script type="text/javascript">
    gr.registerNode("myobject", [], {geometry: "sphere"}, "mesh");  // デフォルトで 球(sphere) にする
  </script>
  <script type="text/goml">
    <goml>
      <scene>
        <myobject position="1,1,0" color="#99f" />                  <!-- デフォルトで指定された 球(sphere) になる -->
        <myobject geometry="cube" position="-1,1,0" color="#99f" /> <!-- パラメータで指定した 立方体(cube) になる -->
        <camera/>
      </scene>
    </goml>
  </script>
</div>

コンポーネント

コンポーネントを登録することで、オブジェクトに機能を追加することができます？

コンポーネントの登録

registerComponentを使い登録できます

gr.registerComponent("コンポーネント名", {属性値やイベント})
コメント（0件）

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タグはいくつでもかけるけど、最初に置いたカメラの視点で描画されます

コメント（0件）