diff --git a/sandbox/tests/postprocessor/main.ts b/sandbox/tests/postprocessor/main.ts index 2c5a92165..b12d3e532 100644 --- a/sandbox/tests/postprocessor/main.ts +++ b/sandbox/tests/postprocessor/main.ts @@ -88,6 +88,33 @@ class CRTPostProcessors implements ex.PostProcessor { } } +class GrayScalePostProcessor implements ex.PostProcessor { + private _shader: ex.ScreenShader; + initialize(gl: WebGL2RenderingContext): void { + this._shader = new ex.ScreenShader( + gl, + `#version 300 es + precision mediump float; + // our texture + uniform sampler2D u_image; + // the texCoords passed in from the vertex shader. + in vec2 v_texcoord; + out vec4 fragColor; + void main() { + vec4 tex = texture(u_image, v_texcoord); + float avg = 0.2126 * tex.r + 0.7152 * tex.g + 0.0722 * tex.b; + fragColor = vec4(avg, avg, avg, 1.0); + }` + ); + } + getLayout(): ex.VertexLayout { + return this._shader.getLayout(); + } + getShader(): ex.Shader { + return this._shader.getShader(); + } +} + var game = new ex.Engine({ width: 600, height: 400, @@ -109,6 +136,9 @@ actor.actions.repeatForever((ctx) => { game.currentScene.add(actor); var ctx = game.graphicsContext as ex.ExcaliburGraphicsContextWebGL; -ctx.addPostProcessor(new CRTPostProcessors()); +// ctx.addPostProcessor(new CRTPostProcessors()); +// ctx.addPostProcessor(new GrayScalePostProcessor()); +const colorblind = new ex.ColorBlindnessPostProcessor(ex.ColorBlindnessMode.Deuteranope, true); +ctx.addPostProcessor(colorblind); game.start(); diff --git a/site/docs/12-other/12-post-processors/index.mdx b/site/docs/12-other/12-post-processors/index.mdx index 62ba5d76d..14b3141ea 100644 --- a/site/docs/12-other/12-post-processors/index.mdx +++ b/site/docs/12-other/12-post-processors/index.mdx @@ -73,19 +73,15 @@ In this example we can make the entire game gray scale: ```typescript class GrayScalePostProcessor implements ex.PostProcessor { private _shader: ex.ScreenShader; - initialize(gl: WebGLRenderingContext): void { - this._shader = new ex.ScreenShader( + initialize(gl: WebGL2RenderingContext): void { + this._shader = new ex.ScreenShader(gl, `#version 300 es precision mediump float; - // our texture uniform sampler2D u_image; - // the texCoords passed in from the vertex shader. in vec2 v_texcoord; - out vec4 fragColor; - void main() { vec4 tex = texture(u_image, v_texcoord); float avg = 0.2126 * tex.r + 0.7152 * tex.g + 0.0722 * tex.b; @@ -93,11 +89,9 @@ class GrayScalePostProcessor implements ex.PostProcessor { }` ); } - getLayout(): ex.VertexLayout { return this._shader.getLayout(); } - getShader(): ex.Shader { return this._shader.getShader(); }