Material

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

This feature cant be applied using the ex.Actor.graphics.material = 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;
  }`,
})