# GL.getExtension ('OES\_standard\_derivatives');

**URL:** <https://discourse.processing.org/t/gl-getextension-oes-standard-derivatives/29854>\
**Category:** Coding Questions\
**Created:** [May 4, 2021, 5:34pm UTC](https://discourse.processing.org/t/gl-getextension-oes-standard-derivatives/29854 "2021-05-04T17:34:03Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![BigBigRed](https://avatars.discourse-cdn.com/v4/letter/b/d6d6ee/32.png) [@BigBigRed](https://discourse.processing.org/u/BigBigRed)\
**Post date:** [May 4, 2021, 5:34pm UTC](https://discourse.processing.org/t/gl-getextension-oes-standard-derivatives/29854/1 "2021-05-04T17:34:03Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [May 4, 2021, 9:25pm UTC](https://discourse.processing.org/t/gl-getextension-oes-standard-derivatives/29854/2 "2021-05-04T21:25:27Z")

</div>

In order to enable the `GL_OES_standard_derivatives` extension you need to call `getExtension('OES_standard_derivatives')` on the [`WebGLRenderingContext`](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getExtension). 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:

```javascript
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](https://openprocessing.org/sketch/1185346).

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).

---

<div class="post-metadata">

**Author:** ![BigBigRed](https://avatars.discourse-cdn.com/v4/letter/b/d6d6ee/32.png) [@BigBigRed](https://discourse.processing.org/u/BigBigRed)\
**Post date:** [May 6, 2021, 6:00pm UTC](https://discourse.processing.org/t/gl-getextension-oes-standard-derivatives/29854/3 "2021-05-06T18:00:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [May 6, 2021, 7:34pm UTC](https://discourse.processing.org/t/gl-getextension-oes-standard-derivatives/29854/4 "2021-05-06T19:34:34Z")

</div>

By “structured that way” I presume you’re referring to my use of [instance mode](https://github.com/processing/p5.js/wiki/p5.js-overview#instantiation--namespace), 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.

---

<div class="post-metadata">

**Author:** ![Swiss](https://avatars.discourse-cdn.com/v4/letter/s/eada6e/32.png) [@Swiss](https://discourse.processing.org/u/Swiss)\
**Post date:** [September 2, 2021, 10:52am UTC](https://discourse.processing.org/t/gl-getextension-oes-standard-derivatives/29854/5 "2021-09-02T10:52:26Z")

</div>

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](https://openprocessing.org/sketch/1253105), would be great to get your feedback if you have time.

Edit: I think I’ve got it working with two canvases, [link](https://openprocessing.org/sketch/1253889) if you’re interested.

---

<div class="post-metadata">

**Author:** ![vjjv](https://avatars.discourse-cdn.com/v4/letter/v/df705f/32.png) [@vjjv](https://discourse.processing.org/u/vjjv)\
**Post date:** [February 22, 2022, 1:35am UTC](https://discourse.processing.org/t/gl-getextension-oes-standard-derivatives/29854/6 "2022-02-22T01:35:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [February 22, 2022, 3:11am UTC](https://discourse.processing.org/t/gl-getextension-oes-standard-derivatives/29854/7 "2022-02-22T03:11:19Z")

</div>

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

https://openprocessing.org/sketch/1492649/embed/?plusEmbedHash=Y2M1ZmZkZjQzNzMzMmY0MWFlZDA2NDQ4NTI4ZjUxN2I0MzJjYWFiOWFhNTEwMDAyOTZjNzNkZGNjNzJlZjBlNGZlOTllNTgxODFkMDZjODYyMmJlYTAzNWM3NDczMDk2YTkwYjcyNTFiZWIyOTYyYTllNDIxYjEwMmFlNTE0Nzk1b1lOenAzZE5mVER2ZjU5ZEVtREpUUUxoOTF3NU8xVXlGRUxNV240K2x4UThSTnZzS0hTcXVYd2dpMzlPKzFjRWVHNktMVE1TMDRTcUhTUFMrRStFdz09&plusEmbedTitle=true