gl-shader：编译着色器时出错：编译失败。错误：0:9：“分配”：无法从“4 分量向量”转换答案

【问题标题】：gl-shader: Error compiling shader: Compile failed. ERROR: 0:9: 'assign' : cannot convert from '4-component vectorgl-shader：编译着色器时出错：编译失败。错误：0:9：“分配”：无法从“4 分量向量”转换
【发布时间】：2021-07-25 05:10:25
【问题描述】：

当我可以同时传递 image saturation value 这样的 https://gl-react-cookbook.surge.sh/saturation?menu=true 和 image colorscaling 这样的 https://gl-react-cookbook.surge.sh/colorscale?menu=true 时，我正在尝试编写一个着色器，因为我在 react native 中使用 opengl。从示例中，我可以分别运行图像饱和度和图像颜色缩放，但我不知道如何将它们加在一起。我是 opengl 的新手，我尝试阅读文档，但找不到任何帮助。请帮我弄清楚如何获得这两个功能。这是我的代码。

我遇到的错误

gl-shader: Error compiling shader:
Compile failed.
ERROR: 0:9: 'assign' :  cannot convert from '4-component vector of float' to '3-component vector of float'
ERROR: 0:12: 'constructor' : too many arguments
ERROR: 0:13: Unexpected syntax error;
ERROR: 3 compilation errors. No code generated.

着色器

const shaders = Shaders.create({
  colorify: {
    frag: GLSL`
    precision highp float;
    varying vec2 uv;
    uniform sampler2D children, colorScale;
    uniform float contrast, saturation, brightness;
    const vec3 L = vec3(0.2125, 0.7154, 0.0721);
    float greyscale (vec3 c) { return 0.2125 * c.r + 0.7154 * c.g + 0.0721 * c.b; }
    void main() {
      vec4 c = texture2D(children, uv);
      vec3 brt = c.rgba * brightness;
      vec4 original = texture2D(children, uv);
      vec4 newcolor = texture2D(colorScale, vec2(greyscale(original.rgb), 0.5));
      gl_FragColor = vec4(mix(vec3(0.5), mix(vec3(dot(brt,L)),brt,saturation),contrast),c.a,newcolor.rgb, original.a * newcolor.a) 
    }
   `,
  },
});




export const Colorify = ({ url, colorScale, interpolation }) => (
  <Node
    shader={shaders.colorify}
    uniformsOptions={{ colorScale: { interpolation } }}
    uniforms={{
      colorScale,
      children: url,
      contrast: 0.3,
      saturation: 0.1,
      brightness: 0.2,
    }}
  />
);



const App = () => {
return (
 <Surface style={{ ...StyleSheet.absoluteFill }}>
          <Colorify
            url={route.imageUrl}
            colorScale={colorScales[color]}
            interpolation={interpolation}
          />
        </Surface>)}

任何帮助都会很棒。

【问题讨论】：

标签： c++ opengl expo react-native-android shader

【解决方案1】：

只需阅读您收到的错误消息：

ERROR: 0:9: 'assign' :  cannot convert from '4-component vector of float' to '3-component vector of float'

所以0:9 这里告诉我们查看传递给glShaderSource 第 9 行的第一个字符串（这里从 0 开始计数），在您的代码中是：

vec3 brt = c.rgba * brightness;

错误是cannot convert from '4-component vector of float' to '3-component vector of float。这是一个非常具有描述性的错误消息。 c.rgba 是一个 vec4，vec * float 仍然产生 vec4，你将它分配给 vec3 brt。您需要：

将vec4 结果存储在vec4 变量中：vec4 brt = c.rgba * brightness;，或
将生成的vec4 显式转换为vec3：vec3 brt = vec3(c.rgba * brightness); 或vec3 brt = (c.rgba * brightness).rgb;（或您想要的任何组件和顺序），或者
或者，这在这里最有意义，首先进行vec3 计算：vec3 brt = c.rgb * brightness;

ERROR: 0:12: 'constructor' : too many arguments

第 12 行就是这颗宝石：

gl_FragColor = vec4(mix(vec3(0.5), mix(vec3(dot(brt,L)),brt,saturation),contrast),c.a,newcolor.rgb, original.a * newcolor.a)

vec4 构造函数显然需要 4 个参数，但你传递了 vec4(vec3, float, vec3, float)。这完全没有任何意义。你完全把那部分代码弄错了。请再次阅读您的源材料。

ERROR: 0:13: Unexpected syntax error;

那是因为第 12 行末尾也缺少;，当编译器在下一行查找它时，它没有找到它，而是找到了}。

【讨论】：