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更轻松!!

相关推荐
携欢38 分钟前
PortSwigger靶场之Reflected XSS into HTML context with nothing encoded通关秘籍
前端·xss
lggirls2 小时前
特殊符号在Html中的代码及常用标签格式的记录
前端·javascript·html
乖女子@@@3 小时前
Vue-Pinia
前端
Github项目推荐3 小时前
你的中间件一团糟-是时候修复它了-🛠️
前端·后端
Bacon3 小时前
JWT 鉴权:小白友好版讲解 + 图形化拆解
前端
Maschera963 小时前
扣子同款半固定输入模板的简单解决方案
前端·react.js
待╮續4 小时前
Java开发 - 缓存
前端·bootstrap·html
Scarlett4 小时前
初识cocos,实现《FlappyBird》h5游戏
前端·cocos creator
古夕4 小时前
Vue 3 复杂表单父子组件双向绑定的最佳实践
前端·javascript·vue.js
烛阴4 小时前
TypeScript 进阶必修课:解锁强大的内置工具类型(一)
前端·javascript·typescript