'fwidth' : no matching overloaded function found

I am using a RawShaderMaterial in threejs and trying to use fwidth but I get the error

‘fwidth’ : no matching overloaded function found;

Initially I thought that the wrong parameters was sent in so I did this basic test.

float width = fwidth(1.0);

The above line of code runs fine in shader toy without error but in my RawShaderMaterial it gives the match not found error.

renderer.capabilities.isWebGL2 = true;

I am kinda stuck on what is required to get fwidth to work.
Since I am a total noob it could just be that I am not using it right so any insights you can offer would be greatly appreciated.

Please demonstrate the issue with a live example. The following copy from the official examples uses fwidth() for rendering a wireframe. Please update it so the runtime error appears: https://jsfiddle.net/fx0t8dzb/

1 Like


From my tests I have determined that ShaderMaterial works but RawShaderMaterial not.
What I don’t know is why not.

Try it like so: https://jsfiddle.net/t73h1snz/1/

The idea is to define GLSL3 as the version of your shader. This happens for build-in materials by default.

1 Like

aai soo much pain for such a small thing.
Thank you very much for your guidance on this it really is much appreciated.

since safari is does not yet support GLSL3, is there a way to enable the
#extension GL_OES_standard_derivatives : enable
with out using GLSL3?

Yes, but in this case you have to write a different shader with GLSL1, too. Use this example as a template: three.js webgl - materials - wireframe