P5.js: webGL text rendering broken on Android

[aferriss]

Text rendering in webGL appears broken on Android in chrome, I'm willing to bet that it's broken on iOS / Safari as well, but haven't had a chance to check yet.

I noticed a number of things in the font.frag shader that look suspicious.

1. Many mobile devices do not support the derivatives extension. It looks like it's only being used as a hack with fwidth() to determine texel size which can be calculated easily as1.0 / vec2(width, height), and so it is probably better for us to pre-calculate this value on the cpu and pass it to the shader as a uniform.

2. Some Android devices will fail to compile shaders if non-const values are declared outside of a function block. This shader declares the following in the global scope of the shader, so we should move these into main, and adjust any functions that use them accordingly.

vec2 pixelScale;
vec2 coverage = vec2(0.0);
vec2 weight = vec2(0.5);

For example this will fail to compile

vec4 test = vec4(0.0);

void main(){
  gl_FragColor = test;
}

Whereas this will work fine

void main(){
  vec4 test = vec4(0.0);
  gl_FragColor = test;
}

1. This shader also uses break; statements inside of a loop ( https://github.com/processing/p5.js/blob/master/src/webgl/shaders/font.frag#L170 and https://github.com/processing/p5.js/blob/master/src/webgl/shaders/font.frag#L198), which might cause problems on iOS devices (see: https://github.com/processing/p5.js/commit/994d718ee1fe6f7a98842687cea701062cec6790). We should try and remove these if possible.

2. webGL reported a couple different errors on my Android device somewhat inconsistently so there maybe something mixed up in the actual cpu / gl side of things as well. I saw at least one error complaining about a location property being undefined, as well as another error being thrown at drawElements().

3. There are some odd choices with how the code is structured stylistically. In particular are these empty curly bracket blocks at https://github.com/processing/p5.js/blob/master/src/webgl/shaders/font.frag#L159 and https://github.com/processing/p5.js/blob/master/src/webgl/shaders/font.frag#L190. I doubt this is the root cause of the rendering bug but I think they could be removed to make them in line with how some of the other shaders are written. It looks like all they're doing is visually separating blocks of code, so we could just include comments instead.

4. There are a ton of conditional checks and ternary operators in this shader. It'd be good if we could try making a pass through here at removing some of these in favor of more mathematical conditional checking.

Nature of issue?

• [X] Found a bug
• [ ] Existing feature enhancement
• [ ] New feature request

Most appropriate sub-area of p5.js?

• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [X] WebGL
• [ ] Other (specify if possible)

Which platform were you using when you encountered this?

• [X] Mobile/Tablet (touch devices)
• [ ] Desktop/Laptop
• [ ] Others (specify if possible)

Details about the bug:

• p5.js version: master
• Web browser and version: Chrome 74.03729.157
• Operating System: Android
• Steps to reproduce this: Try running the test for webGL text

[stalgiag]

Thank you for the well written and researched issue!

I am able to reproduce on Android with same version of Chrome and Firefox 66.0.5. I never saw location property undefined errors but with every try I got the drawElements error. I could try my hand at following your suggestions and rewriting the shader, but I wouldn't be able to get to this until a month or so from now.

If someone else has the time and interest then their help would be greatly appreciated.

[aferriss]

@stalgiag I started working on some of the fixes above but so far haven't found the root cause. I'm happy to tackle this one!

[Spongman]

which version of Android are you testing this on? i am not seeing any issues on version 6.

[aferriss]

@Spongman Android 9 on a pixel 2

[stalgiag]

@Spongman also on Android 8 on Galaxy S7

[Spongman]

wow, ok. that seems very strange that these newer devices would have less-compatible shader compilers. maybe it's just a change in the browser's webgl implementation...

[aferriss]

Going to close this because I believe https://github.com/processing/p5.js/pull/3769 fixed the issue.