Mix - Bilinear Interpolation

Task

To fill the screen using bilinear interpolation, follow these steps:

1. Assign the color blue to the left-top corner of the screen.
2. Assign the color red to the left-bottom corner of the screen.
3. Assign the color green to the right-top corner of the screen.
4. Assign the color black to the right-bottom corner of the screen.
5. Use bilinear interpolation to blend the colors in between the corners and fill the screen with a smooth gradient.

使用双线性的方式铺满屏幕，如下步骤实现：

1. 屏幕左上角设置为蓝色
2. 屏幕左下角设置为红色
3. 屏幕右上角设置为绿色
4. 屏幕右下角设置为黑色
5. 使用双线性渲染的方式，两个角直接通过线性插值实现

Theory

Bilinear interpolation 是一种决定每个像素颜色的一种特定的方法。分别是X和Y轴方向进行线性插值

具体实现步骤

1. Horizontal Interpolation.  先做一次横向的线性插值.
2. Vertical Interpolation.  在做一次纵向的线性插值。

注意：因为是一个面有4个点，所以横向插值时需要做上下两边。

Answer

uniform vec2 iResolution;

void main() {
  // Normalized pixel coordinates (from 0 to 1)
  vec2 uv = gl_FragCoord.xy / iResolution.xy;
  
  vec3 red = vec3(1.0, 0.0, 0.0);
  vec3 black = vec3(0.0, 0.0, 0.0);
  vec3 blue = vec3(0.0, 0.0, 1.0);
  vec3 green = vec3(0.0, 1.0, 0.0);
  vec3 t1 = mix(red, black, uv.x);
  vec3 t2 = mix(blue, green, uv.x);
  vec3 color = mix(t1, t2, uv.y);
  
  gl_FragColor = vec4(color, 1.0);
}

效果

练习

Mix - Bilinear Interpolation

最后

如果你觉得这篇文章有用，记得点赞、关注、收藏，学Shader更轻松！！