webgl-如何声明浮点变量

超级简单的问题：如何在webgl中正确声明浮点变量

背景：

我在玩这个密码笔：

此代码笔的要点是允许您基于渲染函数设置着色器中每个像素的颜色

我掌握了基本知识，工作也做得很好，但后来我试着变得“花哨”

我主要关注这一部分：

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

我只想将

步骤（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））

• 高精度浮点；浮动x_thing=步长（25.0，mod（gl_FragCoord.x，50.0））

另外，我已经在谷歌上搜索和摆弄了一段时间，我只是对声明变量p的问题感到恼火

TL；博士

---

如何在webgl中正确声明浮点变量？/我做错了什么？

我发现了秘密！看起来需要在函数外部声明浮点精度

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，请查看