跟我一起学glsl编程21 - 图片修改颜色

绘制图片并修改颜色

这一节很简单，教大家深入的了解纹理贴图的使用

执行命令glslViewer -l image-color.frag ./assets/uv_grid_opengl.jpg 传入一张纹理图片,这张纹理图片就是我们的UV坐标

• 示例代码一

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_mouse;

uniform sampler2D  u_tex0;

void main(){
    vec2 coord = gl_FragCoord.xy / u_resolution;
    vec3 color = vec3(0.0);

    vec4 image = texture2D(u_tex0,coord);

    gl_FragColor = vec4(image);
}

• 代码效果

没什么变化，同上面一样铺满了整个屏幕

• 示例代码二

我们让颜色发生变化

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_mouse;

uniform sampler2D  u_tex0;

void main(){
    vec2 coord = gl_FragCoord.xy / u_resolution;
    vec3 color = vec3(0.0);

    vec4 image = texture2D(u_tex0,coord);

    image.r *=0.5;
    image.b *= abs(cos(u_time));
    image.a *= abs(sin(u_time * 5.0));

    gl_FragColor = vec4(image);
}

• 示例代码三

继续修改，加入coord.x

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_mouse;

uniform sampler2D  u_tex0;

void main(){
    vec2 coord = gl_FragCoord.xy / u_resolution;
    vec3 color = vec3(0.0);

    vec4 image = texture2D(u_tex0,coord);

    // image.r *=0.5;
    // image.b *= abs(cos(u_time));
    // image.a *= abs(sin(u_time * 5.0));

    image.r += sin(coord.x * 90.0);

    gl_FragColor = vec4(image);
}

• 代码效果

• 示例代码四

继续修改，加入coord.y

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_mouse;

uniform sampler2D  u_tex0;

void main(){
    vec2 coord = gl_FragCoord.xy / u_resolution;
    vec3 color = vec3(0.0);

    vec4 image = texture2D(u_tex0,coord);

    // image.r *=0.5;
    // image.b *= abs(cos(u_time));
    // image.a *= abs(sin(u_time * 5.0));

    image.r += sin(coord.x * 90.0);
    image.g += cos(coord.y * 90.0);

    gl_FragColor = vec4(image);
}

• 代码效果

• 示例代码五

我们只修改r通道的颜色

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_mouse;

uniform sampler2D  u_tex0;

void main(){
    vec2 coord = gl_FragCoord.xy / u_resolution;
    vec3 color = vec3(0.0);

    vec4 image = texture2D(u_tex0,coord);

    // image.r *=0.5;
    // image.b *= abs(cos(u_time));
    // image.a *= abs(sin(u_time * 5.0));

    image.r += sin(coord.x * 90.0);
    image.r += cos(coord.y * 90.0);

    gl_FragColor = vec4(image);
}

• 代码效果

• 示例代码六

利用mix给png图片更换背景色，mix(x, y, a)是内部函数，一共有三个参数,作用是使用a对x,y执行线性混合，返回x * (1 - a) + y * a

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_mouse;

uniform sampler2D  u_tex0;

void main(){
    vec2 coord = gl_FragCoord.xy / u_resolution;
    
    vec3 color = vec3(0.0,0.8,0.5);

    vec4 image = texture2D(u_tex0,coord);

    color = mix(color, image.rbg, image.a);

    gl_FragColor = vec4(color,1.0);
}

• 代码效果

《跟我一起学glsl编程》期待你的关注与点赞