Jump to content

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:


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?


Link to comment
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?

Link to comment
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.

Link to comment
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?

Link to comment
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...




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

Link to comment
Share on other sites

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

varying vec2 vTextureCoord;
attribute vec2 aTextureCoord;
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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...