GLSL片段着色器中的2D彩色网格

如何解决GLSL片段着色器中的2D彩色网格

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

通过使用floor()和mix()进行缩放，可以很容易地在X轴上获得效果：

void main() {
  vec2 st = vTexCoord;

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

  // scale the coordinate system to the columns
  st = st * (columns + 1.0);

  float x = floor(st.x) / columns;
  vec3 color = mix(colorA,colorB,min(1.0,x));

  gl_FragColor = vec4(color,1.0);
}

但是，实现行并不是那么简单。我尝试将以下方法与颜色和动态索引一起使用：

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],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,row) + 0.5)  colorBDimensions).rgb;
   vec3 color = mix(cA,cB,min(1.0,x));

这是半相关的：using a texture to emulate indexed palette graphics

否则类似的东西会生成与您的图片相似的东西

void main() {
  vec3 colorsA = vec3(1,0);
  vec3 colorsB = vec3(0,1,1);
  vec3 colorsC = vec3(0,0);
  vec3 colorsD = vec3(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,xy.x));
  vec3 colorBottom = mix(colorsC,colorsD,xy.x));

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

http://glslsandbox.com/e#66911.0