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°)完整圆周的角度(以弧度为单位)

任务解析

坐标中心化

ini 复制代码
//坐标中心化
uv -= 0.5;

计算角度

scss 复制代码
float angle = atan(uv.y, uv.x); // angle 范围[-π, π]

把弧度转换到[0-1]

scss 复制代码
float angle = abs(angle / 3.14); // angle [-π, π] / π

限制范围半径为0.5的圆

scss 复制代码
float dist = length(uv);
float color = step(0.5, dist);

Answer

glsl 复制代码
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更轻松!!

相关推荐
南玖i1 分钟前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js
excel4 分钟前
Web发展与Vue.js导读
前端
YAY_tyy6 分钟前
Three.js 开发实战教程(五):外部 3D 模型加载与优化实战
前端·javascript·3d·three.js
Zuckjet_3 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801463 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店5 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown5 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip6 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿6 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.7 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js