a-text causes render error on safari

[Dirk-27]

Description:

• A-Frame Version: 1.2.0 (master)
• Platform / Device: Safari mobil (iPad Pro padOS 14.4, iPhone 7 iOS 13)
• Reproducible Code Snippet or URL: https://aframe.io/examples/showcase/sky/

We expect to see the text 'Puy de Sancy, France', but there is no text rendered.

The safari and chrome browser logs this:

https://aframe.io/aframe/examples/boilerplate/panorama/
WARNINGNo DPDB device match.
ERRORFailed to recalculate device parameters.
WARNINGUsing fallback iOS device measurements.
LOGA-Frame Version: 1.2.0 (Date 2021-02-05, Commit #b220fa00)
LOGTHREE Version (https://github.com/supermedium/three.js): ^0.125.1
LOGWebVR Polyfill Version: ^0.10.12
WARNINGNo DPDB device match.
ERRORFailed to recalculate device parameters.
WARNINGwebvr-polyfill: Invalid timestamps detected: Timestamp from devicemotion outside expected range.
ERRORTHREE.WebGLProgram: shader error:  0 35715 false gl.getProgramInfoLog  THREE.WebGLShader: gl.getShaderInfoLog() vertex
ERROR: unsupported shader version1: #version 300 es
2: in vec2 uv;
3: in vec3 position;
4: uniform mat4 projectionMatrix;
5: uniform mat4 modelViewMatrix;
6: out vec2 vUV;
7: void main(void) {
8:   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
9:   vUV = uv;
10: } THREE.WebGLShader: gl.getShaderInfoLog() fragment
ERROR: unsupported shader version1: #version 300 es
2: precision highp float;
3: uniform float alphaTest;
4: uniform float opacity;
5: uniform sampler2D map;
6: uniform vec3 color;
7: in vec2 vUV;
8: out vec4 fragColor;
9: #ifdef GL_OES_standard_derivatives
10:   float contour(float width, float value) {
11:     return smoothstep(0.5 - value, 0.5 + value, width);
12:   }
13: #else
14:   float aastep(float value, float afwidth) {
15:     return smoothstep(0.5 - afwidth, 0.5 + afwidth, value);
16:   }
17: #endif
18: #define BIG_ENOUGH 0.001
19: #define MODIFIED_ALPHATEST (0.02 * isBigEnough / BIG_ENOUGH)
20: #define ALL_SMOOTH 0.4
21: #define ALL_ROUGH 0.02
22: #define DISCARD_ALPHA (alphaTest / (2.2 - 1.2 * ratio))
23: void main() {
24:   #ifdef GL_OES_standard_derivatives
25:     vec2 uv = vUV;
26:     vec4 texColor = texture(map, uv);
27:     float dist = texColor.a;
28:     float width = fwidth(dist);
29:     float alpha = contour(dist, width);
30:     float dscale = 0.353505;
31:     vec2 duv = dscale * (dFdx(uv) + dFdy(uv));
32:     float isBigEnough = max(abs(duv.x), abs(duv.y));
33:     if (isBigEnough > BIG_ENOUGH) {
34:       float ratio = BIG_ENOUGH / isBigEnough;
35:       alpha = ratio * alpha + (1.0 - ratio) * dist;
36:     }
37:     if (isBigEnough <= BIG_ENOUGH) {
38:       vec4 box = vec4 (uv - duv, uv + duv);
39:       alpha = (alpha + 0.5 * (
40:         contour(texture(map, box.xy).a, width)
41:         + contour(texture(map, box.zw).a, width)
42:         + contour(texture(map, box.xw).a, width)
43:         + contour(texture(map, box.zy).a, width)
44:       )) / 3.0;
45:     }
46:     if (alpha < alphaTest * MODIFIED_ALPHATEST) { discard; return; }
47:   #else
48:     vec4 texColor = texture(map, vUV);
49:     float value = texColor.a;
50:     float afwidth = (1.0 / 32.0) * (1.4142135623730951 / (2.0 * gl_FragCoord.w));
51:     float alpha = aastep(value, afwidth);
52:     float ratio = (gl_FragCoord.w >= ALL_SMOOTH) ? 1.0 : (gl_FragCoord.w < ALL_ROUGH) ? 0.0 : (gl_FragCoord.w - ALL_ROUGH) / (ALL_SMOOTH - ALL_ROUGH);
53:     if (alpha < alphaTest) { if (ratio >= 1.0) { discard; return; } alpha = 0.0; }
54:     alpha = alpha * ratio + (1.0 - ratio) * value;
55:     if (ratio < 1.0 && alpha <= DISCARD_ALPHA) { discard; return; }
56:   #endif
57:   fragColor = vec4(color, opacity * alpha);
58: }

[Dirk-27]

This is currently a serious error in our production app. Is there a workaround?

[dmarcos]

Fixed on master. It will release in the A-Frame version. In the meantime you can use master builds in the meantime

[Dirk-27]

Thanks a lot! You do a great job!

[dmarcos]

@Dirk-27 Glad it works. Consider sponsoring the project to support our work. It will be super appreciated!