Why do I need to define a precision value in webgl shaders?

three.js glsl webgl shader fragment-shader
Flavio picture Flavio · Nov 21, 2014 · Viewed 14.2k times · Source

I'm trying to get this tutorial to work but I ran into two issues, one of which is the following.

When I run the code as is I get an error in the fragment shader saying: THREE.WebGLShader: gl.getShaderInfoLog() ERROR: 0:2: '' : No precision specified for (float). So what I did was specifying a precision for every float/vector I define like so varying highp vec3 vNormal. This eliminates the error but I don't get why? I can't find any other example where precision values are added to variable declarations. Can anybody explain why this occurs? Does it have something to do with my Browser (Chrome 38)?

Answer

Jessy picture Jessy · Nov 21, 2014

There is no default precision in WebGL fragment shaders. (High precision is default for vertex shaders.) The easiest solution is to add 

precision highp float;

to all of your fragment shaders, which will eliminate the need to define the precision for all floating point vector variables, but generally,

precision mediump float;

will be preferable, for performance. I do not advise lowp; the good mobile hardware of today doesn't even support it anymore, and does the equivalent of typedeffing lowp to mediump.

Related questions

gl_FragCoord.x, y, z being 1 for all pixels and w being the depth

I'm using THREE.js with shader. I'm trying to get the zbuffer information. Vertex shader: // switch on high precision floats #ifdef GL_ES precision highp float; #endif void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } Fragment shader: #ifdef GL_ES …

Read More
Why do shaders have to be in html file for webgl program?

I have seen the following question where someone asked how to remove shaders from html: WebGL - is there an alternative to embedding shaders in HTML? There are elaborate workarounds to load in a file containing the shader suggested in …

Read More
Debug GLSL code in webgl

Is it possible to debug GLSL code or print the variable values from within the glsl code while using it with webgl ? Do three.js or scene.js contain any such functionality?

Read More