Skip to content

Instantly share code, notes, and snippets.

@ssube

ssube/README.md

Last active June 25, 2020 05:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ssube/96e9db52bbb6e310fc4096872ed027bb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ssube/96e9db52bbb6e310fc4096872ed027bb to your computer and use it in GitHub Desktop.
Download ZIP
phaser-post
Raw
README.md

Phaser PostFX

A flexible layered post-processing system for PhaserJS 3. Apply fullscreen shaders to select scene elements.

Contents

Features

TODO

  • more effects
  • bind static textures to samplers (other than buffers)
    • support binding sampler to TEXTURE0 other than stage (forced by draw call)
  • set uniforms other than float1

API

EffectPipeline

Tint-based pipeline for shader effects with texture caching, sampler binding, and other niceties.

EffectPipeline.cacheTextures

Look up required textures from buffers and cache them with the uniform name to which they will be bound.

PostProcessor

Manages the buffers and pipelines for post-processing a particular scene. Methods match the scene lifecycle.

new PostProcessor

Create a new post-processing pipeline from data and bound to the scene.

PostProcessor.create

Set up the post-processing pipelines and render textures, compiling shaders and caching textures.

PostProcessor.update

Render a list of objects using the post-processing layers positioned for the camera.

PostProcessor.stop

Shut down the post-processing pipelines and clean up cached textures and WebGL resources.

Effects

Basics

Invert

Invert colors per-channel.

Monochrome

Luminance-based grayscale.

Sepia

Partial desaturation with overall brown tint, like old-fashioned photographs.

Vignette

Gradiated desaturation with circular black edge.

Blur

Basic X

Blurs 7 pixels in the X direction using the kernel [0.125, 0.25, 0.5, 1.0, 0.5, 0.25, 0.125].

Basic Y

Blurs 7 pixels in the Y direction using the kernel [0.125, 0.25, 0.5, 1.0, 0.5, 0.25, 0.125].

Combinators

Madd (Mult, Sum)

Add the previos stage to the original scene.

Diff

TODO

Tone Mapping

Clamp

Clamp scene colors between the high and low points, then expand that to fill the full [0.0, 1.0) texture range.

This effect can act as a low-pass/high-cut or high-pass/low-cut filter by setting the range:

  • high pass:
    • uMin: desired cutoff
    • uMax: 1.0
  • low pass:
    • uMin: 0.0
    • uMax: desired cutoff

Curve

TODO

Adjust scene colors using a 2-point curve.

Color

TODO

Adjust scene colors using a 2D tonemap texture, based on the biome tint/color palette effect from Crysis 1.

Exposure

A very rudimentary and not at all production-suitable fake HDR effect.

Note: Requires WebGL2 and GLSL version 300 for the textureLod function and generating mipmaps on NP2 textures.

Compound Effects

Most effects can be used on their own, but may not be useful. Including a few layers in the right order can produce much more complex effects.

Bloom

  • Clamp (high pass)
    • high: 1.0
    • low: 0.8
  • Blur (repeat as needed)
    • X
    • Y
  • Sum
Raw
data.yml
pipelines:
- name: basic
layers:
- name: clamp
uniforms:
- name: uMin
value: 0.8
- name: uMax
value: 1.0
- name: blurX
- name: blurY
- name: blurX
- name: blurY
- name: madd
- name: exposure
uniforms:
- name: uTarget
value: 0.5
# name: sepia
- name: vignette
mipmaps: true
screen:
x: 1024
y: 768
effects:
- name: invert
samplers:
- name: foo
source: stage
fragment:
precision mediump float;
uniform sampler2D foo;
varying vec2 outTexCoord;
varying vec4 outTint;
void main()
{
vec2 uv = outTexCoord.xy;
vec4 texel = texture2D(foo, uv);
vec4 invert = vec4(1.0) - texel;
gl_FragColor = mix(invert, texel, step(uv.y, 0.6));
gl_FragColor.w = 1.0;
}
- name: monochrome
samplers:
- name: foo
source: stage
fragment:
precision mediump float;
uniform sampler2D foo;
varying vec2 outTexCoord;
varying vec4 outTint;
void main()
{
vec2 uv = outTexCoord.xy;
vec4 texel = texture2D(foo, uv);
float lum = (texel.x * 0.3) + (texel.y * 0.6) + (texel.z * 0.1);
vec4 lumtex = vec4(lum, lum, lum, 1.0);
gl_FragColor = mix(texel, lumtex, step(0.3, uv.y));
gl_FragColor.w = 1.0;
}
- name: blurX
samplers:
- name: foo
source: stage
fragment:
precision mediump float;
uniform sampler2D foo;
varying vec2 outTexCoord;
varying vec4 outTint;
void main()
{
vec2 pixel = vec2(1.0) / vec2(1024.0, 768.0);
vec2 uv = outTexCoord.xy;
vec4 texN3 = texture2D(foo, vec2(uv.x - (pixel.x * 3.0), uv.y)) * 0.125;
vec4 texN2 = texture2D(foo, vec2(uv.x - (pixel.x * 2.0), uv.y)) * 0.25;
vec4 texN1 = texture2D(foo, vec2(uv.x - (pixel.x * 1.0), uv.y)) * 0.5;
vec4 tex00 = texture2D(foo, uv);
vec4 texP1 = texture2D(foo, vec2(uv.x + (pixel.x * 1.0), uv.y)) * 0.5;
vec4 texP2 = texture2D(foo, vec2(uv.x + (pixel.x * 2.0), uv.y)) * 0.25;
vec4 texP3 = texture2D(foo, vec2(uv.x + (pixel.x * 3.0), uv.y)) * 0.125;
gl_FragColor = (texN3 + texN2 + texN1 + tex00 + texP1 + texP2 + texP3) / 2.75;
gl_FragColor.w = 1.0;
}
- name: blurY
samplers:
- name: foo
source: stage
fragment:
precision mediump float;
uniform sampler2D foo;
varying vec2 outTexCoord;
varying vec4 outTint;
void main()
{
vec2 pixel = vec2(1.0) / vec2(1024.0, 768.0);
vec2 uv = outTexCoord.xy;
vec4 texN3 = texture2D(foo, vec2(uv.x, uv.y - (pixel.y * 3.0))) * 0.125;
vec4 texN2 = texture2D(foo, vec2(uv.x, uv.y - (pixel.y * 2.0))) * 0.25;
vec4 texN1 = texture2D(foo, vec2(uv.x, uv.y - (pixel.y * 1.0))) * 0.5;
vec4 tex00 = texture2D(foo, uv);
vec4 texP1 = texture2D(foo, vec2(uv.x, uv.y + (pixel.y * 1.0))) * 0.5;
vec4 texP2 = texture2D(foo, vec2(uv.x, uv.y + (pixel.y * 2.0))) * 0.25;
vec4 texP3 = texture2D(foo, vec2(uv.x, uv.y + (pixel.y * 3.0))) * 0.125;
gl_FragColor = (texN3 + texN2 + texN1 + tex00 + texP1 + texP2 + texP3) / 2.75;
gl_FragColor.w = 1.0;
}
- name: exposure
samplers:
- name: foo
source: stage
- name: bar
source: scene
fragment: |
#version 300 es
precision mediump float;
uniform sampler2D foo;
uniform sampler2D bar;
uniform vec2 uResolution;
uniform float uTime;
uniform float uLum;
uniform float uTarget;
in vec2 outTexCoord;
in vec4 outTint;
out vec4 outColor;
void main()
{
vec2 uv = outTexCoord.xy;
vec2 luv = outTexCoord.xy;
luv.y = 1.0 - luv.y;
vec4 global_lum = textureLod(bar, luv, 7.0);
vec4 local_lum = textureLod(bar, luv, 3.0);
vec4 texel = texture(foo, uv);
outColor = mix((local_lum - global_lum) + texel, texel, step(uTarget, uv.x));
outColor.w = 1.0f;
}
vertex: |
#version 300 es
precision mediump float;
uniform mat4 uProjectionMatrix;
uniform mat4 uViewMatrix;
uniform mat4 uModelMatrix;
in vec2 inPosition;
in vec2 inTexCoord;
in float inTintEffect;
in vec4 inTint;
out vec2 outTexCoord;
out float outTintEffect;
out vec4 outTint;
void main ()
{
gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4(inPosition, 1.0, 1.0);
outTexCoord = inTexCoord;
outTint = inTint;
outTintEffect = inTintEffect;
}
- name: clamp
samplers:
- name: stage
source: stage
fragment: |
precision mediump float;
uniform float uMin;
uniform float uMax;
uniform sampler2D stage;
varying vec2 outTexCoord;
void main() {
float range = uMax - uMin;
vec4 base = vec4(uMin);
vec4 texel = texture2D(stage, outTexCoord);
gl_FragColor = (clamp(texel, base, vec4(uMax)) - base) / range;
gl_FragColor.w = 1.0;
}
- name: madd
samplers:
- name: stage
source: stage
- name: scene
source: scene
fragment: |
precision mediump float;
uniform sampler2D scene;
uniform sampler2D stage;
varying vec2 outTexCoord;
void main() {
vec2 uv = outTexCoord.xy;
uv.y = 1.0 - uv.y;
vec4 texel = texture2D(stage, outTexCoord) + texture2D(scene, uv);
gl_FragColor = texel;
gl_FragColor.w = 1.0;
}
- name: sepia
samplers:
- name: stage
source: stage
fragment:
precision mediump float;
uniform sampler2D foo;
varying vec2 outTexCoord;
varying vec4 outTint;
void main()
{
vec2 uv = outTexCoord.xy;
vec4 texel = texture2D(foo, uv);
/* kernel from https://gist.github.com/rasteron/2019a4890e0d6311297f */
gl_FragColor.x = dot(texel.xyz, vec3(0.393, 0.769, 0.189));
gl_FragColor.y = dot(texel.xyz, vec3(0.349, 0.686, 0.168));
gl_FragColor.z = dot(texel.xyz, vec3(0.272, 0.534, 0.131));
gl_FragColor.w = 1.0;
}
- name: vignette
samplers:
- name: stage
source: stage
fragment:
precision mediump float;
uniform sampler2D stage;
varying vec2 outTexCoord;
varying vec4 outTint;
void main()
{
vec2 uv = outTexCoord.xy;
vec4 texel = texture2D(stage, uv);
float lum = (texel.x * 0.3) + (texel.y * 0.6) + (texel.z * 0.1);
float dist = pow(uv.x - 0.5, 2.0) + pow(uv.y - 0.5, 2.0);
dist = 1.0 - clamp(dist, 0.0, 1.0);
gl_FragColor.xyz = mix(texel.xyz, vec3(lum), 1.0 - pow(dist, 12.0)); /* desat */
gl_FragColor.xyz = gl_FragColor.xyz * vec3(pow(dist, 3.0)); /* darken */
gl_FragColor.w = 1.0;
}
Raw
postprocessor.ts
import { doesExist, mustExist, mustGet } from '@apextoaster/js-utils';
import * as Phaser from 'phaser';
import { CENTER_SPLIT } from '../constants';
import { Point } from '../entity';
export interface EffectSampler {
name: string;
source: string;
}
export interface EffectUniform {
name: string;
value: number;
}
export interface PipelineEffect {
name: string;
fragment: string;
samplers: Array<EffectSampler>;
vertex: string;
}
export interface PipelineLayer {
name: string;
uniforms: Array<EffectUniform>;
}
export interface PipelineData {
name: string;
effects: Array<PipelineEffect>;
layers: Array<PipelineLayer>;
mipmaps: boolean;
screen: Point;
}
const REQUIRED_BUFFERS = [
'scene',
'stage',
];
const MAX_SAMPLERS = 8;
export type RenderObject = Phaser.GameObjects.GameObject & Phaser.GameObjects.Components.Transform;
class EffectPipeline extends Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline {
protected samplers: Array<{
name: string;
texture: Phaser.GameObjects.RenderTexture;
}>;
constructor(game: Phaser.Game, effect: PipelineEffect) {
super({
fragShader: effect.fragment,
game,
renderer: game.renderer,
vertShader: effect.vertex,
});
this.samplers = [];
}
public onBind() {
super.onBind();
const program = this.program;
const renderer = this.renderer;
const sl = Math.min(MAX_SAMPLERS, this.samplers.length);
for (let i = 0; i < sl; ++i) {
const { name, texture } = this.samplers[i];
renderer.setTexture2D(texture.glTexture, i);
renderer.setInt1(program, name, i);
}
return this;
}
public cacheTextures(samplers: Array<EffectSampler>, buffers: Map<string, Phaser.GameObjects.RenderTexture>) {
for (const { name, source } of samplers) {
const texture = mustGet(buffers, source);
this.samplers.push({
name,
texture,
});
}
}
}
export class PostProcessor {
protected readonly data: PipelineData;
protected readonly scene: Phaser.Scene;
protected readonly buffers: Map<string, Phaser.GameObjects.RenderTexture>;
protected readonly effects: Map<string, EffectPipeline>;
protected running: boolean;
protected fillRect?: Phaser.GameObjects.Rectangle;
constructor(data: PipelineData, scene: Phaser.Scene) {
this.data = data;
this.scene = scene;
this.running = false;
this.effects = new Map();
this.buffers = new Map();
}
public get screenBuffer() {
return this.getBuffer('stage');
}
public getBuffer(key: string) {
return mustGet(this.buffers, key);
}
public create() {
this.fillRect = this.scene.add.rectangle(0, 0, this.data.screen.x, this.data.screen.y, 0x00, 1.0);
for (const buffer of REQUIRED_BUFFERS) {
const rt = this.createBuffer(buffer);
this.buffers.set(buffer, rt);
}
for (const effect of this.data.effects) {
const game = this.scene.game;
const pipeline = new EffectPipeline(game, effect);
this.effects.set(effect.name, pipeline);
const renderer = game.renderer as Phaser.Renderer.WebGL.WebGLRenderer;
renderer.addPipeline(effect.name, pipeline);
const rt = this.createBuffer(effect.name);
rt.setPipeline(effect.name);
this.buffers.set(effect.name, rt);
}
for (const data of this.data.effects) {
const effect = mustGet(this.effects, data.name);
effect.cacheTextures(data.samplers, this.buffers);
}
this.running = true;
}
public createBuffer(name: string) {
const rt = this.scene.make.renderTexture({
height: this.data.screen.y,
width: this.data.screen.x,
x: 0,
y: 0,
});
rt.setName(name);
rt.setScrollFactor(0, 0);
rt.setVisible(false);
this.scene.textures.addRenderTexture(name, rt);
return rt;
}
public update(objects: Array<RenderObject>, layers: Array<PipelineLayer>, camera: Phaser.Cameras.Scene2D.Camera, gl: WebGL2RenderingContext) {
if (!this.running) {
return;
}
const sceneBuffer = mustGet(this.buffers, 'scene');
const stageBuffer = mustGet(this.buffers, 'stage');
const fillRect = mustExist(this.fillRect);
sceneBuffer.draw(fillRect, fillRect.displayWidth / CENTER_SPLIT, fillRect.displayHeight / CENTER_SPLIT);
for (const obj of objects) {
sceneBuffer.draw(obj, Math.floor(-camera.scrollX + obj.x), Math.floor(-camera.scrollY + obj.y));
}
if (this.data.mipmaps) {
this.updateMips(sceneBuffer, gl);
}
stageBuffer.draw(sceneBuffer);
for (const layer of layers) {
const buffer = mustGet(this.buffers, layer.name);
const effect = mustGet(this.effects, layer.name);
if (doesExist(layer.uniforms)) {
for (const uniform of layer.uniforms) {
effect.setFloat1(uniform.name, uniform.value);
}
}
buffer.draw(stageBuffer);
stageBuffer.draw(buffer);
if (this.data.mipmaps) {
this.updateMips(stageBuffer, gl);
}
}
}
public updateMips(buffer: Phaser.GameObjects.RenderTexture, gl: WebGL2RenderingContext) {
const active = gl.getParameter(gl.ACTIVE_TEXTURE);
const levels = Math.ceil(Math.log2(Math.max(buffer.height, buffer.width)));
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, buffer.glTexture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAX_LEVEL, levels);
gl.generateMipmap(gl.TEXTURE_2D);
const err = gl.getError();
if (err > 0) {
/* eslint-disable-next-line */
console.warn('mipmap error', err);
}
gl.activeTexture(active);
}
public stop() {
this.running = false;
const fillRect = mustExist(this.fillRect);
this.scene.children.remove(fillRect);
for (const name of this.buffers.keys()) {
const renderer = this.scene.game.renderer as Phaser.Renderer.WebGL.WebGLRenderer;
renderer.removePipeline(name);
this.scene.textures.remove(name);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment