Grimoire.jsα
Focus on the most important.

What is Grimoire.js?

Grimoire.js is an innovative 3D graphics engine. It may seem to be just a javascript library. However, Grimoire.js will enable browser to use most of the feature as other game engines do in local environment, plugins features,hierarchies,templates,modUle systems.

- Purposes -

  • Provide a good learning resource for the beginners to know how programming is awesome via this library.
  • Sharing features that will be achieved easily by this library implemented with javascript.
  • Redefine legacies of 3DCG technologies on the Internet.
  • Have Enjoyable contributions

- Dependencies -

This library depends on the following libraries. We appreciate these contributors below

NamePurposeURL
gl-matrixUse for calcUlation for webglhttps://github.com/toji/gl-matrix

Contributions

Thank you for your interest in contributions!

- Installation to build -

You need the applications below.

  • node.js
  • npm

You need not to install any packages in global.

You need to run the command below to install npm packages,bower packages,and so on in local environment.

$ npm install

That is all you need to do for preparation!

Then, run the command below to build “j3.js”

$ npm run build
commanddescription
npm run buildbuild “j3.js”
npm run testrun test
npm run watchwatch files for build and run simple web server(under wwwroot)
npm startonly run simple web server(under wwwroot)

(simple web server supported LiveReload)

- Example -

Look at this simple example.


  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8"/>
      <script type="text/javascript" src="j3.js"></script>
    </head>
    <body>
      <div class="iframe-theme">
        <div class="container">
          <div id="canvas" class="canvasContainer"/>
        </div>
      </div>
      <script type="text/goml">
        <goml>
          <resources>
            <material name="sampleMaterial1" type="builtin.solid" color="yellow"/>
            <material name="sampleMaterial2" type="builtin.solid" color="green"/>
            <material name="sampleMaterial3" type="builtin.solid" color="blue"/>
            <material name="sampleMaterial4" type="builtin.solid" color="red"/>
            <material name="sampleMaterial5" type="builtin.solid" color="orange"/>
          </resources>
          <canvases>
            <canvas clearColor="#11022A" frame=".canvasContainer">
              <viewport cam="CAM1" id="main" width="640" height="480"/>
            </canvas>
          </canvases>
          <scenes>
            <scene name="mainScene">
              <camera id="maincam" aspect="1" far="20" fovy="1/3p" name="CAM1" near="0.1" position="(0,8,10)" rotation="x(-30d)"></camera>
              <mesh mat="sampleMaterial1" geo="cube" position="2,0,0"/>
              <mesh mat="sampleMaterial2" geo="sphere" position="4,0,0"/>
              <mesh mat="sampleMaterial3" geo="quad" position="0,0,0"/>
              <mesh mat="sampleMaterial4" geo="cone" position="-2,0,0"/>
              <mesh mat="sampleMaterial5" geo="cylinder" position="-4,0,0"/>
            </scene>
          </scenes>
        </goml>
      </script>
    </body>
  </html>