Custom PIXI renderer not drawing on Macbook Safari

[lTyl]

Howdy all!

I wrote a custom renderer plugin for PIXI to draw Glyph data generated from OpenType.js. I am using PIXI.glCore.VertexArrayObject to manage the index buffers and vertex buffers for the data. On every browser, this works fine with the exception of Macbook Safari. iPad Safari works, but Macbook Safari does not draw anything. No errors in the console. Simply nothing draws. The browser and hardware does have support for native VAO. Here is a simplified example:

https://jsfiddle.net/pyfdbz5v/

A green "X" should draw. On Edge, Chrome and Firefox this works fine. But if you try the fiddle using Safari on a Macbook (I am using Safari 12.0), nothing draws. No errors are logged. No WebGL errors were logged (using this: https://github.com/KhronosGroup/WebGLDeveloperTools). To further cloud the problem, if you try the fiddle using Safari on an iPad...The green "X" appears as expected.

I am having a hard time tracking down if this is a Macbook Safari bug or a weird bug in PIXI. Can anyone help me identify the cause for this odd behavior?

 

[ivan.popelyshev]

Holy cow!

Ok, lets start from stupid questions, I know that brainiacs forget stuff periodically. Are you sure that WebGL is enabled there?

I dont own macbook so you have to find someone like @Mat Groves who has testing devices.

[lTyl]

@ivan.popelyshev : Yes, I confirmed I was using the WebGL renderer via two methods: The first was the console.log PIXI does showing the hello step. This isn't foolproof. So I also did a check for app.renderer instanceof PIXI.WebGLRenderer, and it was returning true.

 

EDIT: It should be noted that if I re-write the demo to use raw WebGL outside of PIXI and PIXI.glCore, then Macbook Safari does render as expected. (Fiddle coming shortly) So that adds evidence that the problem is somewhere in the PIXI code...but where? ?

[ivan.popelyshev]

I can look later, but basically, I'll look at webgl commands through Spector extension https://chrome.google.com/webstore/detail/spectorjs/denbgaamihkadbghdceggmchnflmhpmk

[lTyl]

I do use Spector, but I am unsure how it can help in this particular case. Since the problem is Macbook Safari, and Spector is not available as a Safari extension. We can see the calls in Chrome, but that doesn't necessarily mean the same calls are firing in Safari as well.

[ivan.popelyshev]

I think the calls are the same, now we have to change order of them randomly until it works  

Try doing the same in webgl like in pixi, and then change order.

[lTyl]

16 hours ago, ivan.popelyshev said:

I think the calls are the same, now we have to change order of them randomly until it works  

Try doing the same in webgl like in pixi, and then change order.

So the current theory is Safari does not like the order of operations PIXI/my glyph renderer code is calling the WebGL commands?

[lTyl]

Here is the same fiddle as above, but using WebGL (no PIXI). The green "X" draws correctly on Macbook Safari: https://jsfiddle.net/9x1gzkva/4/. I have attached the command captures from Spector to this post. This fiddle isn't using VAO, so I'll update it using VAOs to get a similar command list as PIXI...

pixi_fiddle_capture.json

webgl_fiddle_capture.json

 

EDIT: Here is the updated fiddle with a VAO being bound: https://jsfiddle.net/9x1gzkva/5/

[ivan.popelyshev]

What if you switch off "antialias" in original fiddle?

[lTyl]

I found the problem. It was in my vertex shader code:

varying vec2 vTextureCoord;
attribute vec2 aTextureCoord;
...main:
vTextureCoord = aTextureCoord;

I am not using textures in this renderer, and I am not passing an attribute 'aTextureCoord'. The fragment shader only has a uniform for the color, so it wasn't using the varying. Every other browser happily assigns an undefined value to vTextureCoord, but for Macbook Safari, it silently fails...Leading to many hours of frustration ?. The fact iPad Safari worked but Macbook Safari did not further made this confusing as all hell

[ivan.popelyshev]

Oh right, I completely forgot about that problem  Yes, its known problem listed in many threads and even in pixi wiki, i believe. Sorry )

[lTyl]

@ivan.popelyshev Hah, all good. Do you mind linking to where it can be found in the PIXI Wiki? Just in case anyone stumbles on this thread. Then at least they have someplace to look

[ivan.popelyshev]

not for renderer plugin though, for Filters - https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters#cannot-read-property-location-of-undefined