Atan--着色器中的角度计算

Task

Create a gradient that transitions from red to green. The weight of each pixel should be determined by the angle between the center-to-pixel ray and the x-axis. Limit the gradient to a circular area with a diameter equal to the height of the texture.
创建一个从红色到绿色的渐变。每个像素的权重应该由从中心到像素的射线与x轴之间的角度来确定。将渐变限制在直径等于纹理高度的圆形区域内。

Theory

函数介绍

atan(y_over_x) ：接受一个浮点数，即 y 坐标除以 x 坐标的比值

它的返回值被限制在 [-π/2, π/2]（-90° 到 90°）的范围内

atan(y, x): 接受两个参数

atan(y, x) 能够准确判断出点所在的象限，并返回一个覆盖 [-π, π]（-180° 到 180°）完整圆周的角度（以弧度为单位）

任务解析

坐标中心化

//坐标中心化
uv -= 0.5;

计算角度

float angle = atan(uv.y, uv.x); // angle 范围[-π, π]

把弧度转换到0-1

float angle = abs(angle / 3.14); // angle [-π, π] / π

限制范围半径为0.5的圆

float dist = length(uv);
float color = step(0.5, dist);

Answer

uniform vec2 iResolution;

#define PI 3.14159265359

void main() {
  vec2 uv = gl_FragCoord.xy / iResolution.xy;
  //坐标中心化
  uv -= 0.5;
  
  vec2 ratio = vec2(iResolution.x / iResolution.y, 1.0);
  uv *= ratio;

  float angle = atan(uv.y, uv.x) ; 
  float normalized_angle = abs(angle / PI);

  vec3 color1 = vec3(1.0, 0.0, 0.0);
  vec3 color2 = vec3(0.0, 1.0, 0.0);
 
  vec3 color = mix(color1, color2, normalized_angle);
  float dist = length(uv);
  color -= step(0.5, dist);

  gl_FragColor = vec4(color, 1.0);
}

效果

练习

Atan

最后

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