Toon shading

An animated WebXR scene, experimenting with toon shading and illustrative low-poly styling.

Character modelling

I recently started assembling a WebXR scene to experiment with character rigs and more advanced animations within GLTF models. I used Blender for 3D modelling and rigging, before using A-Frame VR to bring it to life in real-time, with simple orbit interactivity and an animated environment.

All textures are mapped to a tiny colour palette inside an emission shader. This way I could create a scene with no lights or shadows for a toon shaded look. The shadows and highlights are essentially painted onto the model by moving the UVs around the texture palette. The models were kept low poly with this texturing method in mind.

By running the scene this way, with no lights or shadows, it ensures much faster performance on older devices and headsets.

Low-poly character
Low-poly character

Scene creation

I then created a few stylised buildings and assets, which were instanced along the road to keep file size to a minimum. I created the town environment using the same method as the character, with all highlights and shadows created by shifting the UVs around the colour palette.

To hide the edge of the scene as it loops, fog was added at the same colour value as the horizon in the sky image.

Animations

To create a more engaging character I started adding extra bones to the rig. He blinks his eyes, his fringe flaps in the wind and he wobbles slightly as he scoots along the road.

I then added some traffic to the road to make it feel more alive.

I’ll be adding more to this in the future, so be sure to check back for updates.

Direct link – Toon shading

Leave a reply

Your email address will not be published. Required fields are marked *