shader——mix()函数

前言

今天我们来学习下 shader 中的 mix()函数。话不多说，直接开始吧。

mix()

函数意义

Mix()在 x 和 y 之间使用 a 为权重执行线性插值。

函数语法

    float mix(float x, float y, float a)

    vec2 mix(vec2 x, vec2 y, vec2 a)
    vec3 mix(vec3 x, vec3 y, vec3 a)
    vec4 mix(vec4 x, vec4 y, vec4 a)

    vec2 mix(vec2 x, vec2 y, float a)
    vec3 mix(vec3 x, vec3 y, float a)
    vec4 mix(vec4 x, vec4 y, float a)

函数值域

1. 我们以最简单的 float mix(float x, float y, float a) 举例:

mix(2,4,0.6)=3.2; mix(5,7,0.5)=6;

2. vec2 mix(vec2 x, vec2 y, vec2 a)

vec3 x = vec3(1.0, 0.0, 0.0); vec3 y = vec3(0.0, 1.0, 0.0); vec3 a = vec3(0.5, 0.5, 0.5); vec3 result = mix(x, y, a); // 结果为 (0.5, 0.5, 0.0)

3. vec4 mix(vec4 x, vec4 y, float a)

vec2 a = vec2(1.0, 2.0); vec2 b = vec2(3.0, 4.0); vec2 c = mix(a, b, 0.5); // 返回 (2.0, 3.0)，即 a 和 b 的平均数

shader 实例

颜色混合 1

#ifdef GL_ES
precision mediump float;
#endif

#define PI 3.14159265359

uniform vec2 u_resolution;

vec3 colorA = vec3(0.149, 0.141, 0.912);
vec3 colorB = vec3(1.000, 0.833, 0.224);

void main() {
  vec2 st = (gl_FragCoord.xy * 2. - u_resolution.xy) /
            min(u_resolution.x, u_resolution.y); // uv:[-1,1]
  vec3 color = vec3(0.0);                        //初始颜色

  vec3 pct = vec3(st.x); // 线性过渡值

  color = mix(colorA, colorB, pct); //颜色混合

  gl_FragColor = vec4(color, 1.0);
}

颜色混合 2

#ifdef GL_ES
precision mediump float;
#endif

#define PI 3.14159265359

uniform vec2 u_resolution;

vec3 colorA = vec3(0.149, 0.141, 0.912);
vec3 colorB = vec3(1.000, 0.833, 0.224);

vec3 colorC = vec3(0.308, 1.000, 0.293);

void main() {
  vec2 st = (gl_FragCoord.xy * 2. - u_resolution.xy) /
            min(u_resolution.x, u_resolution.y); // uv:[-1,1]
  float d1 = smoothstep(.1, .12, length(st));    //半径为0.1的圆
  float d2 = smoothstep(
      .1, .12, length(st - vec2(0.1))); //半径为0.1，圆心为(0.1，0.1)的圆

  vec3 color1 = mix(colorA, colorB, d1); //颜色1
  vec3 color2 = mix(colorC, colorA, d2); //颜色2
  vec3 color = color2 * color1;

  gl_FragColor = vec4(color, 1.);
}

总结

以上便是 shader 函数 mix()的全部内容了。如有错误之处，欢迎大家留言指出。谢谢大家了。