docs: [#3065] Gray scale shader example incorrect

Closes #3065
excaliburjs · May 18, 2024 · 5fafd82 · 5fafd82
1 parent a54f7f0
commit 5fafd82
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 9 deletions.
diff --git 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
@@ -73,31 +73,25 @@ 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;
       fragColor = vec4(avg, avg, avg, 1.0);
     }`
     );
   }
-
   getLayout(): ex.VertexLayout {
     return this._shader.getLayout();
   }
-
   getShader(): ex.Shader {
     return this._shader.getShader();
   }