Three.js: ShaderMaterial bug (GL_OES_standard_derivatives)

[MKHenson]

Hi guys - I think i found a bug in the Shader Material. I have re-created the bug on this jsFiddle:

http://jsfiddle.net/ABlueEyedMonkey/NwgKs/1/

Not too sure how/why this happening, but if you use a shader material and use the function 'dFdx' the tool crashes.

If you comment this line out:
"vec2 dSTdx = dFdx( vec2(1.0, 1.0) );",

Then the shader works.

Is there some kind of initialization that needs to happen to get GL_OES_standard_derivatives initialized?

This issue is related to #3140

[mrdoob]

It's not crashing here. Maybe your graphics card doesn't support GL_OES_standard_derivatives?

[tapio]

You are missing "#extension GL_OES_standard_derivatives : enable" from your shader code. Three.js adds it automatically for MeshPhongMaterial if the material has bumpMap or normalMap properties. I guess it differs between browsers and drivers and whatnot whether it is required.

[mrdoob]

Does this example also crash?
http://mrdoob.github.com/three.js/examples/webgl_materials_bumpmap.html

[MKHenson]

Hi guys

mrdoob, that example works correctly. I have a geforce 680 and all the drivers are up to date. I don't think its the driver...

tapio might be onto something though. The original shader I wrote - which is currently breaking - has always been working until recently. I added some additional functionality to my application and the shader broke. I spent hours and could not isolate the problem. So I decided to start from scratch and write the most simple shader possible without anything else added to the scene. The simple shader kept working until I added the function dFdx. What was driving me crazy though, was that I knew for a fact that the dFdx function was being used in the phong material and that was used elsewhere in the application.

When I used the Phong material instead of the simple shader that I had created, it would work

Let me try what tapio advised and get back to you.

[MKHenson]

Also - something quite disconcerting about this issue, is that it doesn't always break. Firefox seems to Flag the issue up consistently, but chrome (which breaks 90% of the time) seems to work on occasions :S

I cant stress how annoying this was because it meant i just kept going around in circles

[bhouston]

I get this output with an NVIDIA GeForce 560 on Windows 8 with the Firefox 18.0.2 & Firefox 19.0.1:

THREE.WebGLRenderer three.min.js:385
ERROR: 0:35: 'GL_OES_standard_derivatives' : extension is disabled
 three.min.js:378
1: precision highp float;
2: 
3: 
4: #define MAX_DIR_LIGHTS 0
5: #define MAX_POINT_LIGHTS 0
6: #define MAX_SPOT_LIGHTS 0
7: #define MAX_HEMI_LIGHTS 0
8: #define MAX_SHADOWS 0
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: uniform mat4 viewMatrix;
32: uniform vec3 cameraPosition;
33: void main( void )
34: {
35: vec2 dSTdx = dFdx( vec2(1.0, 1.0) );
36: gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
37: } three.min.js:378
WebGL: INVALID_VALUE: attachShader: no object or object deleted three.min.js:489
Could not initialise shader
VALIDATE_STATUS: false, gl error [1281] three.min.js:489
8
WebGL: INVALID_OPERATION: getUniformLocation: program not linked three.min.js:490
21
WebGL: INVALID_OPERATION: getAttribLocation: program not linked three.min.js:491
WebGL: INVALID_OPERATION: useProgram: program not valid

This URL works great in both Chrome and Firefox:
http://mrdoob.github.com/three.js/examples/webgl_materials_bumpmap.html

http://prideout.net/recipes/ExtensionViewer.html says that the extension is there (OES_standard_derivatives), thus I am unsure how it is saying that it is disabled in Firefox.

[tapio]

@bhouston, did you try what I suggested in my earlier comment?

[MKHenson]

Hi tapio, I added the line you mentioned in my original shader and it works in chrome now (although I cant say for certain if it is a fix as chrome has now decided that even my previous example works >:/ )

But on firefox this came up:

_WARNING: 0:35: extension 'GL_OES_standard_derivatives' is not supported ERROR: 0:126: 'dFdx' : no matching overloaded function found ERROR: 0:126: '=' : cannot convert from 'const mediump float' to '2-component vector of float' ERROR: 0:127: 'dFdy' : no matching overloaded function found ERROR: 0:127: '=' : cannot convert from 'const mediump float' to '2-component vector of float' ERROR: 0:135: 'dFdx' : no matching overloaded function found ERROR: 0:135: '=' : cannot convert from 'const mediump float' to '3-component vector of float' ERROR: 0:136: 'dFdy' : no matching overloaded function found ERROR: 0:136: '=' : cannot convert from 'const mediump float' to '3-component vector of float_

[MKHenson]

The machine Im currently testing with is ATI Radeon HD 3400. The firefox version is 5.0 and the chrome version is 25.

At home I was running the Geforce 6800 with firefox 19 and chrome 25.

[bhouston]

@ABlueEyedMonkey The "ATI Radeon HD 3400" (only OpenGL 3.3) and the "Geforce 6800" (only OpenGL 2.0) are pretty old cards and may not support the various extensions.

ATI Radeon HD 3000 series info: http://en.wikipedia.org/wiki/R600_(ASIC)
NVIDIA Geforce 6 series info: http://en.wikipedia.org/wiki/GeForce_6_Series

@tapio That is the bug that prevented it from working on my machine. I missed your comment, sorry about that.

[MKHenson]

Hi bhouston - ok it def seems to be the browser for the FF5. The fix tapio mentioned seems to be working both in chrome and in later versions of FF.

[MKHenson]

Thanks a heap fellas - this has been driving me mad for the last 3 days now :D