WebGL rendering is broken on Safari Preview

[prusnak]

Details

• Browser and browser version: Safari 14.1
• OS version: macOS 11.3 (Apple Silicon)
• xterm.js version: 4.11.0 (gotty 1.3.0)

Steps to reproduce

1. install xterm.js with webgl addon
2. open the page in Safari
3. observe missing letters, just background colors can be seen
4. Chrome and Firefox work fine

[jerch]

@prusnak Do you get any output at all? I think you should not - as far as I know Safari does not implement Webgl2 at all. Or did they change that recently?

[prusnak]

I did get the output - the background color of characters was rendered correctly. It's hard to see if the background is the same color everywhere, but if you use colorful output one can see that.

I run the following script:

for x in {0..8}; do
    for i in {30..37}; do
        for a in {40..47}; do
            echo -ne "\e[$x;$i;$a""m\\\e[$x;$i;$a""m\e[0;37;40m "
        done
        echo
    done
done

Chrome:

Safari:

[Tyriar]

I think you may need to switch in webgl2 via an experimental feature in Safari. I'm not sure if that changes on M1.

[prusnak]

I think you may need to switch in webgl2 via an experimental feature in Safari. I'm not sure if that changes on M1.

Ah, it was actually the opposite :-)

I had WebGL 2.0 enabled in experimental settings and turning it off fixed the issue for me.

Feel free to close the issue if you want to.

[Tyriar]

Ah ok, I guess that's why it's experimental then 😄. If it's off, loading the addon will throw and it will revert back to the DOM renderer.

[Tyriar]

We're seeing this on ipad and the safari preview still

[Tyriar]

@meganrogge and I looked into this just now, here's what we found:

• The issue is just with rendering of text, not backgrounds (see the green above which is webgl powered)
• The uploaded texture appears correct when getImageData is used and inspected on the browser side, but using the texture in the fragment shader doesn't seem to work
• Using vec4(1.,0.,0.,1.) here shows red where the glyphs should show as expected:

  xterm.js/addons/xterm-addon-webgl/src/GlyphRenderer.ts

  Line 69 in 522c8bf

  outColor = texture(u_texture, v_texcoord);

• Also using vec4(v_texcoord,0.,1.) looks as expected (differing shades of red)
• outColor = vec4(u_texture, vec2(v_texcoord.x, 1.-v_texcoord.y)) shows all black