Post Process Effect Causing Black Screen On Linux and Android

Questions
1

Hello,

I am experiencing an issue where the CRT post-process effect causes a black screen on some devices. It works perfectly on Windows and macOS, but it fails to display correctly on other devices. When the post-process effect is turned off, everything is visible, but there are some texture-related errors.

Here’s a link to my project discussion:

I was also able to port the entire ASCII renderer to a playground:

Any advice or guidance would be greatly appreciated. Thank you!

2

Hello :slight_smile:

Since your PG is > 1160 lines of code, I would advice to try to create a reproduction of the error (black screen only on Linux device) with absolute minimal code, in order for devs to be able to reproduce easily…

Also, I’m not sure it’s only on linux, since @roland has the issue as well, and I think he is using MacOS

1 Like
3

It does not work on my phone and I tested that.
I pointed out the only part that is not working is the post process effect lines 102 to 150 is where the shader is put into the store.

BABYLON.Effect.ShadersStore["crtFragmentShader"] = /* glsl */ `
#ifdef GL_ES
precision highp float;
#endif

#define PI 3.1415926538

varying vec2 vUV;
uniform sampler2D textureSampler;
uniform vec2 curvature;
uniform vec2 screenResolution;
uniform vec2 scanLineOpacity;
uniform float vignetteOpacity;
uniform float brightness;
uniform float vignetteRoundness;

vec2 curveRemapUV(vec2 uv) {
  uv = uv * 2.0 - 1.0;
  vec2 offset = abs(uv.yx) / vec2(curvature.x, curvature.y);
  uv = uv + uv * offset * offset;
  uv = uv * 0.5 + 0.5;
  return uv;
}

vec4 scanLineIntensity(float uv, float resolution, float opacity) {
  float intensity = sin(uv * resolution * PI * 2.0);
  intensity = ((0.5 * intensity) + 0.5) * 0.9 + 0.1;
  return vec4(vec3(pow(intensity, opacity)), 1.0);
}

vec4 vignetteIntensity(vec2 uv, vec2 resolution, float opacity, float roundness) {
  float intensity = uv.x * uv.y * (1.0 - uv.x) * (1.0 - uv.y);
  return vec4(vec3(clamp(pow((resolution.x / roundness) * intensity, opacity), 0.0, 1.0)), 1.0);
}

void main(void) {
  vec2 remappedUV = vUV;
  vec4 baseColor = texture2D(textureSampler, remappedUV);
  baseColor *= vignetteIntensity(remappedUV, screenResolution, vignetteOpacity, vignetteRoundness);
  baseColor *= scanLineIntensity(remappedUV.x, screenResolution.y, scanLineOpacity.x);
  baseColor *= scanLineIntensity(remappedUV.y, screenResolution.x, scanLineOpacity.y);
  baseColor *= vec4(vec3(brightness), 1.0);

  if (remappedUV.x < 0.0 || remappedUV.y < 0.0 || remappedUV.x > 1.0 || remappedUV.y > 1.0) {
    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
  } else {
    gl_FragColor = baseColor;
  }
}`;

class RetroTerminalEffect {
  postProcess: BABYLON.PostProcess;
  create(camera: BABYLON.Camera) {
    this.postProcess = new BABYLON.PostProcess(
      "CRTShaderPostProcess",
      "crt",
      [
        "curvature",
        "screenResolution",
        "scanLineOpacity",
        "vignetteOpacity",
        "brightness",
        "vignetteRoundness",
      ],
      null,
      1,
      camera
    );

    this.postProcess.onApply = function (effect) {
      effect.setFloat2("curvature", 5, 5);
      effect.setFloat2("screenResolution", 300, 300);
      effect.setFloat2("scanLineOpacity", 0.5, 0.5);
      effect.setFloat("vignetteOpacity", 0);
      effect.setFloat("brightness", 4);
      effect.setFloat("vignetteRoundness", 0);
    };
  }
}

This is the only part that really matters.
Which I got the code for here:

1 Like
4

Then, as I said, best is to share a minimal Playground, to give a minimal reproduction setup :

Doing some tests with this minimal setup, it appears problem comes from vignetteRoundness which shouldn’t be set to 0 since it’s a divider in the GLSL function :
JS :

effect.setFloat("vignetteRoundness", 0);

GLSL :

return vec4(vec3(clamp(pow((resolution.x / roundness) * intensity, opacity), 0.0, 1.0)), 1.0);

Setting it to >0 works on my side on Linux :

5 Likes
5

All right awesome thank you!

462539930_1057275289226997_4876522963677089680_n
462539930_1057275289226997_4876522963677089680_n961×2048 34.4 KB

With that bit of insight I was able to fix the weird texture issues too.

Now I can stop all the messages of it not working lol.

6

Correct :saluting_face:

7

@lucas-divinestar This is more a requirement than an advice…

…so this answer is kinda cheeky.

You are the one seeking for help so next time a pro who can help you asks you to create a PG with the issue isolated whithout any other unnecessary code, just do it please.

@Tricotou you bro once again proved yourself to be a gentleman :slight_smile: I wouldn’t bother to create the PG.

2 Likes