Sign in to follow this  
lTyl

Custom PIXI renderer not drawing on Macbook Safari

Recommended Posts

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?

 

Share this post


Link to post
Share on other sites

@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😂

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.