GL.getExtension ('OES_standard_derivatives');

p5.js Coding Questions
1

I am trying to work with some code that someone else did.

my p5js sketch is hanging/ crashing at the line ‘vec3 normal = vec3(-dFdx(f), -dFdy(f), 0.5) + 0.5;’. My diagnostic efforts lead me to think that the call to ‘dFdx’ is where the problem is. The Frag shader has #extension GL_OES_standard_derivatives : enable’ on its second line.

My question is ‘Can p5js access this calculus library (with dFdx in it)?’ and if so how. What syntax to use and where does go: Frag Shader, sketch.js or where. I have been to Mozilla and two or three other website and can not get clear on this.

2

In order to enable the GL_OES_standard_derivatives extension you need to call getExtension('OES_standard_derivatives') on the WebGLRenderingContext. To do this you can store a reference to the p5.Renderer returned by the createCanvas call and then use the GL property to access the WebGLRenderingContext. For example:

let canvas = p.createCanvas(p.windowWidth, p.windowHeight, p.WEBGL);
canvas.GL.getExtension('OES_standard_derivatives');

Here’s a working example of a shader that uses dFdx and dFdy.

One thing to note when porting shaders from other platforms to p5js is that different platforms use different naming conventions for standard attributes and uniforms (these are the inputs to your vertex shader that tell you what the geometry is, how it is textured/lit/etc, and what the projection matrices are for the current camera position).

1 Like
3

Thanks,

I had never seen a sketch structured that way. But, I started with your example sketch ( or his example) and mine is now working fine.

4

By “structured that way” I presume you’re referring to my use of instance mode, which is defining your sketch as a callback function and passing it to the p5 constructor. I tend to use that by force of habit because the default mode of p5.js, “global mode,” is an anti-pattern and really ought to be avoided. However it shouldn’t affect the solution, and I’m glad you got it working.

5

Hi Paul,

Thank you for sharing that flat faces shader.

I’ve been messing around trying to apply it to an off-screen graphics buffer, but it seems that I can’t call .GL.getExtension('OES_standard_derivatives') on a p5.Graphics object. It sounds like I should be using instance mode to create multiple canvases instead.

Here is the sketch, would be great to get your feedback if you have time.

Edit: I think I’ve got it working with two canvases, link if you’re interested.

6

The link is down. Can you re post it? Were you able to do it with a p5.graphic?

7

Here’s a version that works with a p5.Graphics buffer.

1 Like