THREE.WebGLShader: Shader couldn't compile. about aframe-bmfont-text-component

[bryik]

According to MDN, "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".

MDN also says that there is a function "getShaderPrecisionFormat()" that can check if highp precision is supported.

So I guess you'd need to fork the component and add some code that tests if highp precision is supported. You could also try using mediump instead of highp (although this may result in degraded quality or corruption).

[frabaglia]

Hi!

I made this test on early stage on my app to, in case of, redirect the user to a limited experience version:

function pixelShader() {
  var support = true;
  try {
    var canvas = document.getElementsByTagName('canvas')[0]
    var gl = canvas.getContext("webgl")
    var shaderType = [gl.VERTEX_SHADER,gl.FRAGMENT_SHADER]
    var precisionType = [gl.LOW_FLOAT, gl.MEDIUM_FLOAT, gl.HIGH_FLOAT, gl.LOW_INT, gl.MEDIUM_INT, gl.HIGH_INT]
    shaderType.forEach(function(shader){
      precisionType.forEach(function(precision){
        gl.getShaderPrecisionFormat(shader,precision)
      })
    })
  } catch (error) {
    if (error)
      {
        support = false;
      }
  }
  return support;
}

Where do you think i could integrate this in your component? Let me try and if it looks fine i'll send you a PR.

[bryik]

Changing the precision used by the fragment shader can be done by adding a parameter here. Try testing with precision: "mediump".

var material = new THREE.RawShaderMaterial(SDFShader({
    precision: "mediump",
    map: texture,
    side: THREE.DoubleSide,
    transparent: true,
    color: data.color,
    opacity: data.opacity
}));

If that fixes the problem on mobile let me know and I'll try to help with integrating the test.

P.S.
I've just discovered that Three.js' WebGL renderer has a "capabilities" property that contains a method getMaxPrecision(). Might be useful.

[bryik]

Closing as this issue has been open for quite some time and I'm about to archive this project.