Grimoire.js

A WebGL framework for web development

Grimoire.js provides effective structure to make use of WebGL representational power in Web development.

Grimoire.js provides a bridge between WEB and CG.

Using WebGL for Web development was typically hard due to the profound differences of the development flow.
        <goml>
  <scene>
    <camera></camera>
    <mesh geometry="sphere" scale="-1,1,1" texture="360.jpg">
      <mesh.components>
        <Rotate speed="0.1" />
      </mesh.components>
    </mesh>
  </scene>
</goml>

        
GOML

HTML-like markup

Grimoire.js provides a markup syntax for Web developers to design easily.

You can make new tags by your own or import plugins to use useful tags created by other developers.

DOM operation APIs

Grimoire.js can easy to collaborate with the other UI stuff. This is just a few samples.

  • Change color of models to red or blue by click UI stuff.
  • Change scale models bigger or smaller by mouse over on a model.

All of mutations in Grimoire.js can be done with the way Web engineers used to.

Try clicking links above or hover mouse over the cube below.

          <goml>
  <scene>
    <camera></camera>
    <mesh texture="logo.png" geometry="cube">
      <mesh.components>
        <Rotate speed="0,0.1,0" />
      </mesh.components>
    </mesh>
  </scene>
</goml>

          
GOML
          gr(function() {
  var mesh = gr('#simple .canvas')('mesh')
  $('#simple .red').on('click', function () {
    mesh.setAttribute('color', 'red')
  })
  $('#simple .blue').on('click', function () {
    mesh.setAttribute('color', 'blue')
  })
  mesh.on('mouseenter', function () {
    mesh.setAttribute('scale', '2.0')
    $("#simple .bigger").addClass("bold-label");
    $("#simple .smaller").removeClass("bold-label");
  })
  mesh.on('mouseleave', function () {
    mesh.setAttribute('scale', '1.0')
    $("#simple .smaller").addClass("bold-label");
    $("#simple .bigger").removeClass("bold-label");
  })
})

          
JavaScript
          <goml>
  <scene>
    <camera position="0,0.2,0"></camera>
    <mesh color="red" geometry="cube" position="0,0,-9">
      <mesh.components>
        <Wave amp="2" speed="3"/>
      </mesh.components>
    </mesh>
    <wave-mesh geometry="cube" color="blue" position="4,0,-9"/>
    <wave-mesh geometry="cube" color="green" speed="5" position="-4,0,-9"/>
  </scene>
</goml>

          
GOML
          import Component from "grimoirejs/ref/Node/Component";
import ISceneUpdateArgument from "grimoirejs-fundamental/ref/SceneRenderer/ISceneUpdateArgument";
import TransformComponent from "grimoirejs-fundamental/ref/Components/TransformComponent";
import Vector3 from "grimoirejs-math/ref/Vector3";
import gr from "grimoirejs";
class Wave extends Component{
  public static attributes = {
    amp:{
      default:1.0,
      converter:"Number"
    },
    speed:{
      default:1.0,
      converter:"Number"
    }
  };

  public amp:number;

  public speed:number;

  private transform: TransformComponent;

  public $mount():void{
    this.transform = this.node.getComponent(TransformComponent);
    this.__bindAttributes(); // bind component attributes to fields
  }
  public $update(t:ISceneUpdateArgument):void{
    this.transfrom.position = new Vector3(this.transform.position.X,Math.sin(this.speed * t.timer.timeInSecound) * this.amp,this.transform.position.Z);
  }
}
gr.registerComponent("Wave",Wave);
gr.registerNode("wave-mesh",["Wave"],{},"mesh"); // wave-mesh node is a mesh node with Wave component

          
Typescript

Simple and powerful architecture

The previous features are mostly for Web engineers, but these features are customizable with component API like Unity.

All of nodes are just a set of components like modern game engines. And each components can be implemented by your own hand.

You would notice how this architecture is well formed and fit for CG development on Web.

Typescript ready

All of API provided by Grimoire can be used from Typescript also. This feature improve your development speed and reduce bugs.

Even CG engineers who is not familiar with dynamic-typed language can use APIs easily.

Powerful customizability for shading

Representation power of WebGL is not limited to 3DCG. Shader art is also fantastic.

Grimoire provide extended GLSL feature (named .sort) to annotate only what actually need.

Shader engineer no need to care about how to pass the parameters to shader. Just write as uniform variable.

Once shader was written, material parameters can be mutated from node values.

Shake mouse pointer on this section. Current hue:

          <goml>
  <import-material typeName="spots" src="gr/shading/shading.sort"/>
  <scene>
    <camera></camera>
    <mesh material="new(spots)"/>
  </scene>
</goml>

          
GOML
          gr(()=>{
  var hue = 0;
  $("#shading").on("mousemove",()=>{
    hue+=0.02;
    // Setting uniform value from node attribute
    gr("#shading .canvas").setAttribute("hue",hue%1);
    var hueDeg = Math.floor(360 * hue);
    $("span.hue").text(hueDeg + "°").css('color',"hsl(" + hueDeg +", 50%, 50%)");
  });
})

          
javascript
          @Pass{
   FS_PREC(highp,float)
   @import "screen-vert"
   @import "hsl"
   #ifdef FS
   uniform float _time;
   #define time _time/1000.
   // Uniform values can referenced from tag attribute
   @{default:0}
   uniform float hue;

   void main(void)
   {
       vec3 color = vec3(0.0);
       for( int i=0; i<32; i++ )
       {
           float seed = tan(float(i)*6.+1.0)*0.5 + 0.5;
           float size = pow( cos(float(i)*7.0+4.0) * 0.5 + 2.0, 2.0 );
           float pox = cos(float(i)*2.55+3.1);
           float rad =  sin(float(i))*0.12+0.25;
           vec2  pos = vec2( pox+sin(time/500.+seed+size), -abs(1.)-rad + (3.+2.0*rad) * mod(seed+0.1*(time/50.)*(0.2+0.8*size),1.0));
           color += mix( hsl2rgb(vec3(hue,.5,.5)), hsl2rgb(vec3(hue+0.2,.5,.5)), 0.2+0.2*sin(float(i)*sin(time*pox*0.003)+1.9)) *(1.- smoothstep( rad*(0.65+0.20*sin(pox*time)), rad, length( vTexCoord - pos ) )) * (1.0 - cos(pox*time));
       }
       gl_FragColor = vec4(color,length(color) * 0.1);
   }
   #endif
 }

          
Shader

And more...

These are only few feature of Grimoire. There are also several pluins available implemented on these base features.

Grimoire is currently still under beta version. But, if you are really like new things or ambitiously think about WebGL future, this must be good project to use for fun.

Now you are ready to dive into our tutorial.

Getting Started

We are OSS project

Our community is open for everyone.

How about to make great framework fiting for Web development with us?

Let's join our community to discuss or contribute with us!

Join our community