Opengl GLSL片段着色器中的二维颜色栅格

我试图在GLSL中实现这种模式：

通过使用

floor（）

和

mix（）

然而，实现行并不是那么简单。我尝试使用以下方法处理颜色数组和动态索引：

void main() {
  vec2 st = vTexCoord;

  float maxColumns = 100.0;
  float columns = floor(mouse.x * maxColumns);
  st = st * (columns + 1.0);

  float x = floor(st.x) / columns;

  float maxRows = 2.0;
  float row = mouse.y * maxRows;
  int y = int(floor(row));

  vec3 color = mix(colorsA[y], colorsB[y], min(1.0, x));

  gl_FragColor = vec4(color,1.0);
}

看到这个错误后，我似乎采取了错误的方法：

Darn! An error occurred compiling the fragment shader:ERROR: 0:46: '[]' : Index expression must be constant
ERROR: 0:46: '[]' : Index expression must be constant

在GLSL片段着色器中使用2D颜色网格的正确方法是什么？
最明显的问题是，为什么不只是对整个对象使用纹理而不是着色器？纹理的弹性要大一百万倍

在任何情况下，您都没有定义
colorA
和
colorB
，但正如错误所述，在WebGL1中，索引必须是常量表达式

如果要从数组中查找值，请将这些值放入纹理中。纹理基本上是数组

uniform sampler2D colorA;
uniform sampler2D colorB;
uniform vec2 colorADimensions;
uniform vec2 colorBDimensions;
...

   vec3 cA = texture2D(colorA, (vec2(column, row) + 0.5)  colorADimensions).rgb;
   vec3 cB = texture2D(colorB, (vec2(column, row) + 0.5)  colorBDimensions).rgb;
   vec3 color = mix(cA, cB, min(1.0, x));

这是半相关的：

否则，像这样的东西将生成类似于您的图像

void main() {
  vec3 colorsA = vec3(1,0,0);
  vec3 colorsB = vec3(0,1,1);
  vec3 colorsC = vec3(0,0,0);
  vec3 colorsD = vec3(1,1,0);
  vec2 vTexCoord = gl_FragCoord.xy / resolution;

  // -----------

  vec2 st = vTexCoord;

  vec2 maxColRows = vec2(100, 2);
  vec2 colRows = floor(mouse * maxColRows);

  st = st * (colRows + 1.0);

  vec2 xy = floor(st) / colRows;

  vec3 colorTop = mix(colorsA, colorsB, min(1.0, xy.x));
  vec3 colorBottom = mix(colorsC, colorsD, min(1.0, xy.x));

  vec3 color = mix(colorTop, colorBottom, min(1.0, xy.y));;
    
  gl_FragColor = vec4(color,1.0);
}

我不确定我是否理解您想要实现的目标，是吗？
void main() {
  vec3 colorsA = vec3(1,0,0);
  vec3 colorsB = vec3(0,1,1);
  vec3 colorsC = vec3(0,0,0);
  vec3 colorsD = vec3(1,1,0);
  vec2 vTexCoord = gl_FragCoord.xy / resolution;

  // -----------

  vec2 st = vTexCoord;

  vec2 maxColRows = vec2(100, 2);
  vec2 colRows = floor(mouse * maxColRows);

  st = st * (colRows + 1.0);

  vec2 xy = floor(st) / colRows;

  vec3 colorTop = mix(colorsA, colorsB, min(1.0, xy.x));
  vec3 colorBottom = mix(colorsC, colorsD, min(1.0, xy.x));

  vec3 color = mix(colorTop, colorBottom, min(1.0, xy.y));;
    
  gl_FragColor = vec4(color,1.0);
}