GLSL着色器根据使用情况转换像素颜色

Question

在下面提到的代码中，我想接受两个参数：colors & activeColor。数组包含允许在图像中绘制的颜色列表，activeColor是所选的尚未在图像上绘制的颜色。我使用HTML5画布在图像顶部绘制，WebGLShader根据用例转换像素颜色。

当绘制(画布上的绘画)一种颜色，我的用例是改变其他颜色，如果有activeColor。

在下面写了一个基本的逻辑，但在语法上是不对的。需要帮助。

：表示黑白颜色数组的颜色的动态Float32Array ( ex: 0,0,0, 1，1,1,1 )

色ex: 0，0,0,0,1表示黑色的activeColor：动态Float32Array

uniform sampler2D texture;
varying float colors;
varying float activeColor;
varying vec2 texCoord;

void main() {
    vec4 color = texture2D(texture, texCoord);

    for (int i = 0; i < colors.length; i+=3){
        vec4 c = vec4(colors[i], colors[i+1], colors[i+2], colors[i+3]);
        if(color.a > 0 && color.rgb != c) {
          color.rgb = vec4(activeColor[0], activeColor[1], activeColor[2], activeColor[3]);
        }
    }


    gl_FragColor = color;
}

Answer 1

这段代码没什么意义

varying float colors;
varying float activeColor;

这些都是float类型，因此它们只旧的1值。它们不是颜色(vec4s)，也不是数组。

colors.length

在GLSL中没有someArray.length这样的东西。在GLSL中，不能传递可变大小的数组。它们一定是固定大小的。类似地，不能以varying的形式传入数组。

还不清楚你想做什么

您的代码似乎试图在任何地方绘制activeColor --图像中不包含colors中的颜色。

你可以做这样的事

#define MAX_COLORS 10
uniform sampler2D texture;
uniform vec4 colors[MAX_COLORS];
uniform int numColors;
uniform vec4 activeColor;
varying vec2 texCoord;

void main() {
    vec4 color = texture2D(texture, texCoord);

    for (int i = 0; i < MAX_COLORS; ++i) {
      if (i >= numColors) {
        break;
      }

      vec4 c = colors[i];
      if(color.a > 0 && color.rgb != c) {
        color.rgb = activeColor.rgb;
        break;
      }
    }

    gl_FragColor = color;
}

统一vec4s的数量是有限制的。在29到4096之间通过观察你可能想要保持在221以下的数据。

将数据数组作为纹理传递更常见。

uniform sampler2D texture;
uniform sampler2D colors;  // texture holding colors
uniform vec2 colorsSize;   // size of texture
uniform int numColors;
uniform vec4 activeColor;
varying vec2 texCoord;

vec4 getColor(int i) {
  vec2 pixelCoord = vec2(mod(float(i), colorsSize.x,
                         floor(float(i) / colorsSize.x));
  return texture2D(colors, vec2(pixelCoord + 0.5 / colorsSize));
}  

void main() {
    vec4 color = texture2D(texture, texCoord);

    for (int i = 0; i < MAX_COLORS; ++i) {
      if (i >= numColors) {
        break;
      }

      vec4 c = getColor(i);
      if(color.a > 0 && color.rgb != c) {
        color.rgb = activeColor.rgb;
        break;
      }
    }

    gl_FragColor = color;
}

现在，您可以传递颜色作为纹理。

您可能会发现这些教程很有用。

您可能还会发现，这一技术半关联于您的问题(替换颜色)，其中有一个活生生的示例这里和另一个技术这里解释。