gl-shader: Error compiling shader: Compile failed. ERROR: 0:9: 'assign' : cannot convert from '4-component vector

Question

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

Error I am getting

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.

Shaders

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>)}

任何帮助都会很棒。

Answer 1

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

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

因此 0:9 告诉我们查看第 9 行传递给 glShaderSource 的第一个字符串（此处从 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 行是这样 gem:

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 行最后也缺少一个 ;，当编译器在下一行寻找它时，它没有找到它，而是找到了一个 }。

gl-shader: Error compiling shader: Compile failed. ERROR: 0:9: 'assign' : cannot convert from '4-component vector

gl-shader: Error compiling shader: Compile failed. ERROR: 0:9: 'assign' : cannot convert from '4-component vector

c++

opengl

expo

react-native-android

shader