webgl - 我如何声明一个float变量

时间:2016-07-16 21:48:49

标签: webgl

超级简单的问题:我如何在webgl中正确声明一个浮点变量?

背景

我正在使用此代码笔:http://codepen.io/jlfwong/pen/Wxjkxv

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

我得到了基础知识,并且我的工作得很好,但后来我试图得到#34;花哨的"。

我专注于这一部分:

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

这不起作用,因为它似乎缺少float的精确声明。这是错误:

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变量? /我做错了什么?

1 个答案:

答案 0 :(得分:1)

我找到了秘密!看起来像float精度需要在函数外声明......

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