HTML5 UberShader Plugin

We are very happy to announce release the UberShader for Kiwi.JS. This shader is designed to simulate lifelike lighting effects on 2D sprites, allowing you to create unprecedented detail and quality in your Kiwi.JS games.

The UberShader plugin is available on Github at It contains numerous examples of advanced techniques, so you can examine the source files for inspiration.

Check it out in action, right now:

If your browser does not support WebGL, you are seriously missing out. Consider upgrading to a modern browser such as Chrome or Firefox to get the most out of rich internet applications.

Power Users Guide

This is a powerful shader, so we’ve written an in-depth guide for getting the most out of it. It’s got illustrations and live examples. Check it out here.

Plugin Features

Texture Map Types

The UberShader uses seven texture maps: five to describe the surface of an object, and two to describe local lighting conditions.

  • Diffuse: Flat color before lighting.
  • Normal: Surface contour information, used to create detailed lighting.
  • Specular: Surface reflectivity, controlling color and intensity of highlights.
  • Emit: Surface glow information.
  • Tint: Each entity can have up to three custom color channels to differentiate diffuse and specular color.
  • Irradiance: Sphere map of local light, sampled over a hemisphere.
  • Reflection: Sphere map of local light, sampled cleanly.

Point Lights

The UberShader supports 5 colored point lights with 3D coordinates and custom falloff. These can add detail to the overall light described by irradiance and reflections.

Gamma Correction

The UberShader can perform gamma correction on its output. By default this is set to 1.2, slightly darkening shadows and emphasising highlights.

Sphere Deviation

The Ubershader can distort image-based lighting and reflections from sphere maps. This creates an illusion of proximity in the reflections.

Share the joy

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">