Grimoire.js
A WebGL framework for web development
Grimoire.js provides effective structure to make use of WebGL representational power in Web development.
<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
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.
Grimoire.js can easy to collaborate with the other UI stuff. This is just a few samples.
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="1,1,1" />
</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
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.
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.
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: 0°
<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
Web engineers typically use inspector when they create web stuff. Grimoire also provide own inspector tool as chrome extension or npm package.
You don't need to install the extension in this page. You can experiment the tool just by clicking button below.
Open devtoolOur 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!