webgl - how do i declare a float variable <p>super simple question: how do i properly declare a float variable in webgl?</p> <p><strong>Background:</strong></p> <p>I'm playing with this codepen: <a href="http://codepen.io/jlfwong/pen/Wxjkxv" rel="nofollow">http://codepen.io/jlfwong/pen/Wxjkxv</a></p> <p>the point of this codepen is to allow you set the color of each pixel in a shader based on a render function.</p> <p>I get the basics and I got things working pretty well, but then I tried to get "fancy".</p> <p>I'm focussing on this section:</p> <pre><code>var fragmentShader = compileShader(' \n\ void main(){ \n\ gl_FragColor = vec4(step(25.0, mod(gl_FragCoord.x, 50.0)), \n\ step(25.0, mod(gl_FragCoord.x, 50.0)), \n\ step(25.0, mod(gl_FragCoord.x, 50.0)), \n\ 1.0); \n\ } \n\ ', context.FRAGMENT_SHADER); </code></pre> <p>All I want to do is save <code>step(25.0, mod(gl_FragCoord.x, 50.0))</code> off to a variable so i tried this:</p> <pre><code>var fragmentShader = compileShader(' \n\ void main(){ \n\ float x_thing = step(25.0, mod(gl_FragCoord.x, 50.0)); \n\ \n\ gl_FragColor = vec4(x_thing, x_thing, x_thing, 1.0); \n\ } \n\ ', context.FRAGMENT_SHADER); </code></pre> <p>This doesn't work because it seems to be missing a precision declaration for float. here is the error:</p> <pre><code>uncaught exception: Shader compile failed with: ERROR: 0:3: '' : No precision specified for (float) </code></pre> <p>I have tried a few things to remedy this:</p> <ul> <li><code>precision float x_thing = step(25.0, mod(gl_FragCoord.x, 50.0));</code></li> <li><code>precision highp float x_thing = step(25.0, mod(gl_FragCoord.x, 50.0));</code></li> <li><code>precision highp float; float x_thing = step(25.0, mod(gl_FragCoord.x, 50.0));</code></li> </ul> <p>Also i've been googling and fiddling with this for a while and I'm just annoyed with having issues declaring a variable :P</p> <p>TL;DR</p> <p>how do i properly declare a float variable in webgl? / what am i doing wrong?</p>