Using fullscreen shader

[paladin-t]

Introduction

Bitty Engine supports to make fullscreen effect using GLSL shaders. This feature is experimental that might not compatible with all platforms, so it's not enabled in the builds for better compatibility. Change the flag in source code to BITTY_EFFECTS_ENABLED=1 and compile from source to enable it.

Glance

To put it simply, Bitty Engine loads "../effects/default.json" for customized shader, the related files come as following for example.

"../effects/default.json":

{
  "clear_color": [ 30, 30, 30, 255 ],
  "texture_min_filter": "linear",
  "texture_mag_filter": "linear",
  "vs": "assets/shaders/crt.vs",
  "fs": "assets/shaders/crt.fs",
  "textures": [
    "assets/shaders/crt.png"
  ]
}

"../effects/crt.png":

"../effects/crt.vs":

#version 150

uniform mat4 ProjMatrix;
in vec2 Position;
in vec2 UV;
in vec4 Color;
out vec2 Frag_UV;
out vec4 Frag_Color;

void main()
{
  Frag_UV = UV;
  Frag_Color = Color;
  gl_Position = ProjMatrix * vec4(Position.xy, 0, 1);
}

"../effects/crt.fs":

#version 150

uniform sampler2D Texture;
uniform sampler2D Texture1;
uniform vec3 Time;
uniform vec4 Resolution;
in vec2 Frag_UV;
in vec4 Frag_Color;
out vec4 Out_Color;

const float BARREL_POWER = 1.0085;
const float COLOR_BLEEDING = 1.2;
const float BLEEDING_RANGE_X = 0.8;
const float BLEEDING_RANGE_Y = 0.5;
const float LINES_DISTANCE = 2;
const float SCAN_SIZE = 2;
const float SCANLINE_ALPHA = 1.2;
const float LINES_VELOCITY = 30;

vec2 distort(vec2 p)
{
  float angle = p.y / p.x;
  float theta = atan(p.y, p.x);
  float radius = pow(length(p), BARREL_POWER);

  p.x = radius * cos(theta);
  p.y = radius * sin(theta);

  return 0.5 * (p + vec2(1, 1));
}

void getColorBleeding(inout vec4 color, inout vec4 colorLeft)
{
  color = color * vec4(COLOR_BLEEDING, 0.5, 1 - COLOR_BLEEDING, 1);
  colorLeft = colorLeft * vec4(1 - COLOR_BLEEDING, 0.5, COLOR_BLEEDING, 1);
}

void getColorScanline(vec2 uv, inout vec4 c, float time)
{
  float lineRow = floor((uv.y * Resolution.y / SCAN_SIZE) + mod(time * LINES_VELOCITY, LINES_DISTANCE));
  float n = 1 - ceil((mod(lineRow, LINES_DISTANCE) / LINES_DISTANCE));
  c = c - n * c * (1 - SCANLINE_ALPHA);
  c.a = 1;
}

void main()
{
  vec2 xy = Frag_UV * 2;
  xy.x -= 1;
  xy.y -= 1;
  if (length(xy) < 1.5)
    xy = distort(xy);
  else
    xy = Frag_UV;

  float pixelSizeX = 1 / Resolution.x * BLEEDING_RANGE_X;
  float pixelSizeY = 1 / Resolution.y * BLEEDING_RANGE_Y;
  vec4 colorLeft = texture(Texture, xy - vec2(pixelSizeX, pixelSizeY));
  vec4 color = texture(Texture, xy);
  vec4 mask = texture(Texture1, Frag_UV * 0.99 + 0.005);
  getColorBleeding(color, colorLeft);
  vec4 c = color + colorLeft;
  getColorScanline(xy, c, Time.x);
  Out_Color = c * (1 - mask.a);
}

Material format

The format is explained with the following example:

{
  "vs": "../effects/example.vs",
  "fs": "../effects/example.fs",
  "textures": [
    "assets/shaders/example.png"
  ],
  "uniforms": [
    {
      "name": "Offset",
      "type": "vec2"
    },
    {
      "name": "BlendColor",
      "type": "vec3"
    }
  ],
  "clear_color": [ 30, 30, 30, 255 ],
  "texture_min_filter": "nearest",
  "texture_mag_filter": "nearest",
  "texture_wrap_s": "repeat",
  "texture_wrap_t": "repeat",
}

The "vs" and "fs" entries specify the vertex and fragment shaders respectively.

The "textures" array specifies none or a number of textures injected to the shader.

The "uniforms" array specifies none or a number of uniform data injected to the shader.

The "clear_color" specifies the clear color in form of [R, G, B, A].

The "texture_min_filter", "texture_mag_filter" entries specify how to filter textures, the value can be one in "nearest", "linear".

The "texture_wrap_s", "texture_wrap_t" entries specify how to wrap textures, the value can be one in "repeat", "clamp", "clamp_to_edge".

Shader API

• uniform vec4 Resolution: the renderer recolution as [width, height, 1/width, 1/height]
• uniform vec4 Canvas: the canvas recolution as [width, height, 1/width, 1/height]
• uniform vec3 Time: the time factor as [sec, min, hr], where the value of sec comes with range [0.0, 1.0), min comes with range [0.0, 60.0), hr comes with range [0.0, ∞)
• uniform mat4 ProjMatrix: the projection matrix
• in vec2 Position: the position entry
• in vec2 UV: the uv entry to sample canvas
• in vec4 Color: the color entry

For sampling the canvas texture, use uniform sampler2D Texture;, for sampling extra textures, use uniform sampler2D Texture1;, uniform sampler2D Texture2;...

Lua API

• Application.setEffect(material): specifies the effect material

  • material: the material string, in the same format of "../effects/example.json"

• Application.setEffect(): resets the effect material to default

• Application.setEffectUniform(name, data): passes effect uniform from Lua to GLSL

  • name: the uniform name string
  • data: the specific data to set, can be one type in number, Vec2, Vec3, Vec4, Texture, Image

[ZZKJInc]

Thanks for this Tony, is this enabled in the Steam retail version now?

[paladin-t]

Not yet. It is disabled in most binary distributions for better compatibility, except for the pre-built runtime for windows here.

[ZZKJInc]

Ah, well at least I can give it a try. Would be great if it makes it to the final version though, its such a useful feature.