Sometimes it's useful to apply a custom shader to an Actor to give some kind of graphical effect! This can be done with Material's!

Example swirling code here Example Swirling Shader Effect

This feature cant be applied using the = material property or by setting the material property on the ex.ExcaliburGraphicsContext.material = material with .save()/.restore()

This feature opt out of the default batch rendering and issues a separate draw call, which can incur a performance penalty depending on how many calls/types of shaders you are running.

Pre-built varyings: * in vec2 v_uv - UV coordinate

Pre-built uniforms: _ uniform sampler2D u_graphic - The current graphic displayed by the GraphicsComponent _ uniform vec2 u_resolution - The current resolution of the screen _ uniform vec2 u_size; - The current size of the graphic _ uniform vec4 u_color - The current color of the material * uniform float u_opacity - The current opacity of the graphics context

A custom vertex shader can be provided, otherwise a default will be provided

const material = new ex.Material({
  name: 'test',
  color: ex.Color.Red,
  fragmentSource: `#version 300 es
  precision mediump float;
  // UV coord
  in vec2 v_uv;
  uniform sampler2D u_graphic;
  uniform vec4 u_color;
  uniform float u_opacity;
  out vec4 fragColor;
  void main() {
    vec4 color = u_color;
    color = texture(u_graphic, v_uv);
    color.rgb = color.rgb * u_opacity;
    color.a = color.a * u_opacity;
    fragColor = color * u_color;