webgl

Question

超级简单的问题：我如何在 webgl 中正确声明一个 float 变量？

背景：

我正在玩这个代码笔：http://codepen.io/jlfwong/pen/Wxjkxv

此代码笔的重点是允许您根据渲染函数设置着色器中每个像素的颜色。

我掌握了基础知识，并且工作得很好，但后来我试图获得 "fancy"。

我专注于此部分：

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

我想做的就是将 step(25.0, mod(gl_FragCoord.x, 50.0)) 保存到一个变量中，所以我尝试了这个：

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

这不起作用，因为它似乎缺少浮点数的精度声明。这是错误：

uncaught exception: Shader compile failed with: ERROR: 0:3: '' : No precision specified for (float)

我已经尝试了一些方法来解决这个问题：

precision float x_thing = step(25.0, mod(gl_FragCoord.x, 50.0));
precision highp float x_thing = step(25.0, mod(gl_FragCoord.x, 50.0));
precision highp float; float x_thing = step(25.0, mod(gl_FragCoord.x, 50.0));

此外，我已经用谷歌搜索和摆弄了一段时间，我只是对声明变量的问题感到恼火:P

TL;DR

如何在 webgl 中正确地声明一个 float 变量？ /我做错了什么？

Answer 1

我找到秘密了！看起来浮点精度需要在函数外声明...

var fragmentShader = compileShader('                       \n\
  precision highp float;                                   \n\
                                                           \n\
  void main(){                                             \n\
    float x_thing = step(25.0, mod(gl_FragCoord.x, 50.0)); \n\
    gl_FragColor = vec4(x_thing,                           \n\
                        x_thing,                           \n\
                        x_thing,                           \n\
                        1.0);                              \n\
  }                                                        \n\
', context.FRAGMENT_SHADER);

webgl - 我如何声明一个浮点变量

webgl - how do i declare a float variable