Introducing: Crimild JS

I would like to take the opportunity to talk about a little experiment I did during the last month or so, which I called Crimild JS. As you may have guessed, Crimild JS is a compact framework based on Javascript and WebGL following the same design principles that Crimild does. It includes a scene graph, an abstract rendering API, node components, etc.

Per-Fragement Lighting
Click in the image above to go to the live demo

Of course, the project is still in a very early stage and there are a lot of missing features. Nodes lack their bounding information, there is neither a camera nor even texture support yet. There is no way to import scenes from files either.

Toon Shading
Click on the image above to go to the live demo

Crimild JS does introduce some improvements over its older brother. First, since WebGL is based completely on a programmable rendering pipeline, there was no need for the old fixed function renderer, simplifying the render pass. In addition, Crimild JS uses a new rendering system which includes fallback shaders and effects if no render component has been declared for a geometry. This alone reduces the complexity of a scene and allows anyone to create simple simulations without having to worry about the way they are rendered in the screen.

Shapes & Colors
Click on the image above to go to the live demo

Another improvement already present in Crimild JS is the use of quaternions for rotations instead of the classical 3×3 rotation matrix, as well as other mathematical techniques that I’ve been trying to include in Crimild for quite some time.

Per-Vertex Lighting
Click on the image above to go to the live demo

All in all, Crimild JS allowed me not only to try out WebGL as a platform for 3D development but also to implement some new features without compromising the rest of the project. I’m pretty happy with the result, but I’m still unsure about how far I’m willing to go with it yet. For sure, expect to have more news about Crimild JS in the near future.