Pixi.js: Setting PRECISION_FRAGMENT to high causes error on older mobile devices

Created on 19 Jun 2017 · 4Comments · Source: pixijs/pixi.js

Hey,

I have set the PRECISION_FRAGMENT to high to get around animated sprites wobbling on x2 devices. However, some older mobile devices (Such as the Samsung A6 & Kindle Fire) this is not supported producing the following error;

Is there a reliable way to detect this & if so could it be valuable to automatically "downgrade" the precision if the requested is not supported?

Thanks,
Lewis

Stale 📢 Accepting PRs 🙏 Feature Request

Source

siwel

👍1

Most helpful comment

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices

Using highp precision in fragment shaders will prevent your content from working on some older mobile hardware. You can use mediump instead, but be aware that this often results in corrupted rendering due to lack of precision on most mobile devices, and the corruption is not going to be visible on a typical desktop computer. In general, only using highp in both vertex and fragment shaders is safer unless shaders are thoroughly tested on a variety of platforms. Starting in Firefox 11, the WebGL getShaderPrecisionFormat() function is implemented, allowing you to check if highp precision is supported, and more generally letting you query the actual precision of all supported precision qualifiers.

(emphasis added by me)

Defaulting to highp and then lowering the precision to the highest available based on this query seems like a good idea.

englercj on 19 Jun 2017

👍3

All 4 comments

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices

Using highp precision in fragment shaders will prevent your content from working on some older mobile hardware. You can use mediump instead, but be aware that this often results in corrupted rendering due to lack of precision on most mobile devices, and the corruption is not going to be visible on a typical desktop computer. In general, only using highp in both vertex and fragment shaders is safer unless shaders are thoroughly tested on a variety of platforms. Starting in Firefox 11, the WebGL getShaderPrecisionFormat() function is implemented, allowing you to check if highp precision is supported, and more generally letting you query the actual precision of all supported precision qualifiers.

(emphasis added by me)

Defaulting to highp and then lowering the precision to the highest available based on this query seems like a good idea.

englercj on 19 Jun 2017

👍3

Just wanted to point out that there are a couple of places in pixi where precision highp has been hard-coded, for example https://github.com/pixijs/pixi.js/blob/dev/src/filters/noise/noise.frag
This causes a RTE on older devices like my poor Samsung Galaxy S3.

In regards to wobbling on some devices due to shader precision, i'm doing this:

//test if highp is supported
let gl = PIXI.glCore.createContext(window.document.createElement("canvas"));
if(gl.getShaderPrecisionFormat)
{
    let fragmentShader = gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT);
    PIXI.settings.PRECISION_FRAGMENT = fragmentShader.precision != 0 ? "highp" : "mediump";
}
console.log("fragment precision:", PIXI.settings.PRECISION_FRAGMENT);

Perhaps PIXI could employ something like this?

Patrick-Hammond on 27 Jun 2018

👍1

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.