Grimoire.js

A WebGL framework for web development

Grimoire.js gives you WebGL representation in modern web development flow, minimal codes, very easy and effective and production level.

Grimoire.js acts as the bridge between WEB and CG.

WebGL development is typically hard due to the profound differences of the development flow between CG and WEB.
        <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

You can incorporate 3D representation into the WEB with tag-based syntax like HTML.

Grimoire.js reduces barriers to 3D by providing the notation web engineers used to.

DOM-like operation APIs

Grimoire.js can easy to collaborate with the other UI stuff.

Sometimes you want to change color of models to red or blue.

Sometimes you want to scale models bigger or smaller.

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

Try clicking links above in this sentence.

          <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')
  })
  $('#simple .bigger').on('click', function () {
    mesh.setAttribute('scale', '2.0')
  })
  $('#simple .smaller').on('click', function () {
    mesh.setAttribute('scale', '1.0')
  })
})

          
JavaScript

We are OSS project

Our community is open for everyone.

Why don't you join us to discuss future of project , report some issues or contribute Grimoire with us?

Join our community