问题描述
通过使用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);
}