Particle System Improvements

Here’s a little something that I’ve been doing on the side.

The fire effect has been created with a new Particle System node that includes tons of customization controls. For example, you can define shapes for the particle emitter from several mathematical shapes like cylinder (the one in the video), cones, spheres, etc.

In addition, some particle properties like size and color can be interpolated using starting and ending values. The interpolation method is fixed for the moment, but it will be customizable in the near future to use different integration curves.

At the moment, the particle system is implemented entirely in CPU, meaning no point sprites or any other optimization techniques are used, which lead to performance issues as particle count gets bigger (the effect in the video has a particle count of 50).

The particle system in the video above is configured on a Lua script as follow

   type = 'crimild::ParticleSystem',
   maxParticles = 50,
   particleLifetime = 2.0,
   particleSpeed = 0.75,
   particleStartSize = 0.5,
   particleEndSize = 0.15,
   particleStartColor = { 1.0, 0.9, 0.1, 1.0 },
   particleEndColor = { 1.0, 0.0, 0.0, 0.5 },
   emitter = {
      type = 'cylinder',
      height = 0.1,
      radius = 0.2,
   precomputeParticles = true,
   useWorldSpace = true,
   texture = 'assets/textures/fire.tga',

Even when the new system is quite easy to configure, it still requires a lot of try and error to get something nice on screen. Maybe it’s time to start thinking about a scene editor…



Weekend in the Woods

This post is NOT about Metal. I promise.

I’ve been working on a little side project during the last couple of weeks using two of the newest Crimild’s improvements. Here, take a look:

So, what’s going on here? The game idea is pretty obvious: it’s a platform game. You walk or run and then jump to reach another platform. Or you can fall into the abyss until MAX_FLOAT happens.

But there are two mayor “new” features working together here for the first time: animations and physics.

I introduced the new scene importer earlier this year, now supporting FBX and other file formats thanks to the Assimp library. What’s different in this demo is the use of a new Animator component, allowing us to set states and transitions between poses based on predefined rules.

For example, you can transition from idle to walk animation by linking them with the current horizontal speed. Or, you gan go from any given state to jump if the vertical speed changes. All this is combined with a character controller that reacts to user input.

On the other hand, the Physics system has been improved by supporting different colliders (like box, capsule or mesh). The RigidBodyComponent has been greatly enhanced, too. And all physical objects can now be created from Lua scripts as well.

At the moment, both features are in the “experimental” phase but I’m assuming they’ll be production ready before the end of this year.

That’s it. Let’s go back to Metal…


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.