Shaku Gfx Demo: Custom Effects

This demo demonstrate how to create and use a custom effect.
Custom effect = shaders + setup code to use it. In this case we created a custom effect that animate colors based on elapsed time.

The following is a minimal code example to show how to create and use a custom effects.

// define our custom effect
class CustomEffect extends Shaku.gfx.SpritesEffect
{
  /**
    * Override the fragment shader for our custom effect.
    */
  get fragmentCode()
  {
    const fragmentShader = `  
      #ifdef GL_ES
          precision highp float;
      #endif

      uniform sampler2D texture;
      uniform float elapsedTime;

      varying vec2 v_texCoord;
      varying vec4 v_color;

      void main(void) {
          gl_FragColor = texture2D(texture, v_texCoord) * v_color;
          gl_FragColor.r *= sin(v_texCoord.y * 10.0 + elapsedTime) + 0.1;
          gl_FragColor.g *= sin(1.8 + v_texCoord.y * 10.0 + elapsedTime) + 0.1;
          gl_FragColor.b *= sin(3.6 + v_texCoord.y * 10.0 + elapsedTime) + 0.1;
          gl_FragColor.rgb *= gl_FragColor.a;
      }
      `; 
      return fragmentShader;
  }

  /**
    * Override the uniform types dictionary to add our custom uniform type.
    */
  get uniformTypes()
  {
    let ret = super.uniformTypes;
    ret['elapsedTime'] = { type: Shaku.gfx.Effect.UniformTypes.Float };
    return ret;
  }
}

// create custom effect instance and set as active
let effect = new CustomEffect();

// load texture to render with effect
let spriteTexture = await Shaku.assets.loadTexture('assets/sprite.png');

// create sprites batch
let spritesBatch = new Shaku.gfx.SpriteBatch();

// part below goes between startFrame() and endFrame()
// -------------------------------------------------------

// update custom effect 'elapsedTime' uniform
effect.uniforms.elapsedTime(Shaku.gameTime.elapsed);

// draw with custom effect
spritesBatch.begin(undefined, effect);
spritesBatch.drawQuad(spriteTexture, new Shaku.utils.Vector2(screenX / 2, screenY / 2), 400);
spritesBatch.end();