How get acces to fwidth and GL_OES_standard_derivatives extension

Help & Support
1

Hi,
I´m trying to use derivatives in my shader code, to avoid seams produced by Mipmaps in an equirectangular panorama view. I need to access “fwidth” function, but I had no success with this.
Does someone know how to solve this?

    var vertexShader = this.vs.resource;    
    var fragmentShader =  "#extension GL_OES_standard_derivatives : enable \n\n" + "precision " + gd.precision + " float;\n";// +
    fragmentShader = fragmentShader + this.fs.resource;

    // A shader definition used to create a new shader.
    var shaderDefinition = {
        attributes: {
            aPosition: pc.SEMANTIC_POSITION
        },
        vshader: vertexShader,
        fshader: fragmentShader
    };

    // Create the shader from the definition
    this.shader = new pc.Shader(gd, shaderDefinition);

    // Create a new material and set the shader
    this.material = new pc.Material();
    this.material.shader = this.shader;

ERROR Message:

Failed to compile fragment shader:

WARNING: 0:1: 'GL_OES_standard_derivatives' : extension is not supported
ERROR: 0:53: 'fWidth' : no matching overloaded function found
ERROR: 0:53: 'fWidth' : no matching overloaded function found

1: #extension GL_OES_standard_derivatives : enable
2:
3: precision highp float;
4: #define M_PI 3.1415926535897932384626433832795
5:
6:
7: varying vec4 vertex;
2

Hi @Aldo_Rene_Zang and welcome,

Are you executing that on a WebGL1 or 2 context? On WebGL2 the extension is always available, just needs enabling.

Check this forum post: Accessing un-interpolated face normals? - #2 by dave

1 Like
3

Create your shader using pc | PlayCanvas API Reference like for example here:
PlayCanvas Examples

This function automatically sets up the version and exposes this extension.

4

also, the no matching overloaded function found could mean you’re passing parameters of incorrect type.

5 
PanoramicShader.prototype.initialize = function() { 

    var app = this.app;
    var gd = app.graphicsDevice;
    console.log("GD:" ,app.graphicsDevice);

console log:
image

6

I can run the example I linked, add this somewhere to the fragment shader, and reload the example … compiler seems happy

float distance = length(texCoord);
float delta = fwidth(distance);

when I capture the shader with Spector JS, this seems to work

Screenshot 2023-02-03 at 15.42.50
Screenshot 2023-02-03 at 15.42.501450×680 124 KB

7

@mvaligursky , thanks! After using pc.createShaderFromCode() it accepted fwidth method. :slight_smile:

1 Like