Error compiling fragment shader

[kevzettler]

file number 0: http://localhost:3000/static/js/bundle.js:1349:28
   1|  #extension GL_OES_standard_derivatives : enable
   2|  precision mediump float;
   3|  #define GLSLIFY 1
   4|  float gridFactor_1_0 (vec2 vBC_1_1, float width_1_2, float feather_1_3) {
   5|    float w1 = width_1_2 - feather_1_3 * 0.5;
   6|    vec3 bary = vec3(vBC_1_1.x, vBC_1_1.y, 1.0 - vBC_1_1.x - vBC_1_1.y);
   7|    vec3 d = fwidth_1_4(bary);
    |            ^^^
    | no matching overloaded function found
    | ^^^
    | dimension mismatch
    |          ^^^
    | cannot convert from 'const mediump float' to 'mediump 3-component vector of float'
    | 
   8|    vec3 a3 = smoothstep(d * w1, d * (w1 + feather_1_3), bary);
   9|    return min(min(a3.x, a3.y), a3.z);
  10|  }
  11|  
  12|  float gridFactor_1_0 (vec2 vBC_1_1, float width_1_2) {
  13|    vec3 bary = vec3(vBC_1_1.x, vBC_1_1.y, 1.0 - vBC_1_1.x - vBC_1_1.y);
  14|    vec3 d = fwidth_1_4(bary);
    |            ^^^
    | no matching overloaded function found
    | ^^^
    | dimension mismatch
    |          ^^^
    | cannot convert from 'const mediump float' to 'mediump 3-component vector of float'
    | 
  15|    vec3 a3 = smoothstep(d * (width_1_2 - 0.5), d * (width_1_2 + 0.5), bary);
  16|    return min(min(a3.x, a3.y), a3.z);
  17|  }
  18|  
  19|  
  20|  
  21|  varying vec2 b;
  22|  void main () {
  23|    gl_FragColor = vec4(vec3(gridFactor_1_0(b, 1.0)), 1);
  24|  }
  25| 

This error is happening when trying to copy the regl example from the README

[kevzettler]

looks like maybe related to https://github.com/glslify/glslify/issues/46

[rreusser]

Weird. Can you confirm what copy of glslify you're using? It seems like a problem with it recognizing (and not renaming) builtin functions like fwidth.

[kevzettler]

Yes it seems the glslify import is namespacing or renaming fwidth https://github.com/glslify/glslify/issues/110

Will have to check versions and report later

[rreusser]

Here's a gist in which the code, copy/pasted verbatim works for me. I've used budo index.js -- -t glslify to run it. https://gist.github.com/rreusser/b18f453ea251c418846e65c0bde39857

[kevzettler]

Yeah I'm using webpack with glslify-loader and glsify-import-loader I suspect maybe contributing to the issue.

[rreusser]

Ahh, seems like the problem is the glslify version:

6.1.1: https://github.com/glslify/glslify/blob/master/package.json#L3

^2.1.1: https://github.com/glslify/glslify-loader/blob/master/package.json#L17

Looks like glslify-loader is way behind.

[kevzettler]

thanks @rreusser i'll see if I have any luck updating

[kevzettler]

@rreusser looks like you're pretty active in the outstanding upgrade PRs https://github.com/glslify/glslify-loader/pull/15 https://github.com/glslify/glslify-loader/pull/19

How can I help drive those?

[rreusser]

See: https://github.com/glslify/glslify-loader/issues/13#issuecomment-354366613

@kevzettler Long story short, it's basically impossible to gauge the quality and robustness of a PR by how many 👍s it has, and I have no investment in webpack, so as happy as I am to push buttons and give feedback, it's a bit more time than I have available currently to actually spend some time working with it and get it over the line. If you could give it a test run and help gauge whether it's reasonable, more or less robust, and does what it claims, that would be a big help!

[rreusser]

(Related: sorry to get involved without the capability/intention of getting it over the line. Open source is tough. 😞)

[rreusser]

(Finally, just let me know if you'd like to help maintain! If you want to test, merge & publish, that'd be 💯! Always more than happy to add collaborators/owners/etc)

[Fabiantjoeaon]

Hi! Any updates on this? I'm sorry, but I have no clue on how to solve this issue. :(

I have exactly the same issue, it seems like GL_OES_standard_derivatives can not be used, as the fwidth function etc. can not be found. I am using regl with canvas-sketch (which used glslify and budo)

file number 0: http://10.27.43.226:9966/sketch-v1.js:15711:20
   1|  
   2|      #ifdef GL_OES_standard_derivatives
   3|          #extension GL_OES_standard_derivatives : enable
   4|      #endif  
   5|      precision mediump float;
   6|  #define GLSLIFY 1
   7|  
   8|      float gridFactor (vec2 vBC, float width, float feather) {
   9|    float w1 = width - feather * 0.5;
  10|    vec3 bary = vec3(vBC.x, vBC.y, 1.0 - vBC.x - vBC.y);
  11|    vec3 d = fwidth(bary);
    | ^^^
    | extension is not supported
    | 
  12|    vec3 a3 = smoothstep(d * w1, d * (w1 + feather), bary);
  13|    return min(min(a3.x, a3.y), a3.z);
  14|  }
  15|  
  16|  float gridFactor (vec2 vBC, float width) {
  17|    vec3 bary = vec3(vBC.x, vBC.y, 1.0 - vBC.x - vBC.y);
  18|    vec3 d = fwidth(bary);
    | ^^^
    | extension is not supported
    | 
  19|    vec3 a3 = smoothstep(d * (width - 0.5), d * (width + 0.5), bary);
  20|    return min(min(a3.x, a3.y), a3.z);
  21|  }
  22|  
  23|      varying vec2 b;
  24|      void main () {
  25|          gl_FragColor = vec4(vec3(gridFactor(b, 1.0)), 1);
  26|      }
  27|  

regl.js:48 Error: (regl) Error compiling fragment shader, http://10.27.43.226:9966/sketch-v1.js:15711:20
    at Function.raise (regl.js:47)
    at Function.checkShaderError [as shaderError] (regl.js:327)
    at Object.getShader [as shader] (regl.js:5058)
    at regl.js:6327
    at Function.checkOptional [as optional] (regl.js:420)
    at parseShader (regl.js:6326)
    at parseProgram (regl.js:6352)
    at parseArguments (regl.js:7450)
    at Object.compileCommand [as compile] (regl.js:8783)
    at compileProcedure (regl.js:9377)

[rreusser]

@Fabiantjoeaon extension not supported is a different issue. You'll need to enable GL_OES_standard_derivatives by loading the extension and then the shader with:

#extension GL_OES_standard_derivatives : enable

It looks like maybe the issue is the line:

   2|      #ifdef GL_OES_standard_derivatives
   3|          #extension GL_OES_standard_derivatives : enable
   4|      #endif 

With the #ifdef, it seems like maybe that only enables the extension if the extension is already enabled?? Perhaps you simply need to remove the #ifdef.

(It's also possible that your hardware does not support oes_standard_derivatives, though support for it is generally pretty good, so this is perhaps unlikely)

[Fabiantjoeaon]

@rreusser Hey, thanks for the quick reply! Unfortunately, I added it because of a last resort, it also doesn't work without #ifdef. It's very strange however, I am using a 2017 macbook pro, and it's possible for me to run the example you have online.

What do you mean by loading the extension? You mean switching the chrome flags?

[rreusser]

@Fabiantjoeaon Based on your example, it looks like you're using regl. In case you aren't, you need to specify the oes_standard_derivatives extension when initializing regl. You can find more details here: https://github.com/regl-project/regl/blob/master/API.md#extensions

[Fabiantjoeaon]

@rreusser Yes, using regl (for the first time actually), I haven't noticed the extension property so thanks, I added that in. However, things get very strange right now, it still isn't working. Whenever I set extensions: ["GL_OES_standard_derivatives"], I get the following error:

Error: (regl) "GL_OES_standard_derivatives" extension is not supported by the current WebGL context, try upgrading your system or a different browser

Which is weird because I am using the latest version of Chrome, and my GPU inside my macbook is pretty up to date (AMD Radeon Pro 560). So I called gl.getExtensions(), and it has9: "OES_standard_derivatives" inside of it.

I have no clue anymore, might post this on StackOverflow also, or file an issue in the regl repo..

[Fabiantjoeaon]

Never mind, I figured it out, I had to enable EOS_STANDARD_DERIVATIVES inside regl, and I then had to enable and prefix it with GL_ inside of my fragment shader!