Distance / Length 深入理解

Task

Try to fill pixels in red that are within 0.25 of the texture center in normalized coordinates.
尝试以标准设备坐标中心点0.25为半径的圆内绘制成红色

Theory

函数介绍

1 length() - 测量向量的长度

  • 对于一个二维向量 vec2 v = vec2(x, y),其长度为 sqrt(x*x + y*y)
  • 对于一个三维向量 vec3 v = vec3(x, y, z),其长度为 sqrt(x*x + y*y + z*z)

length() 应用: 画圆。 圆的定义就是:平面上所有到圆心距离相等的点的集合。

glsl 复制代码
// 假设 uv 是从 (-1.0, -1.0) 到 (1.0, 1.0) 的坐标
 uv *= 2.0; 
 uv -= 1.0;
 // 圆的半径为0.5
float radius = 0.5;

// 计算当前片元坐标到原点的距离
float d = length(uv);

// 如果距离小于半径,则为白色,否则为黑色
vec3 color = vec3(step(d, radius));

// step(d, radius) 等价于 d <= radius ? 1.0 : 0.0
// 我们可以用 smoothstep 获得更平滑的边缘
// float smooth_edge = 1.0 - smoothstep(radius - 0.01, radius + 0.01, d);
// vec3 color = vec3(smooth_edge);

gl_FragColor = vec4(color, 1.0);

2 distance() - 测量两点间的距离

  • distance(p1, p2): 用于计算两个点 p1p2 之间的直线距离。

它计算的同样是欧几里得距离,公式如下: distance(p1, p2) = sqrt(pow(p1.x - p2.x, 2) + pow(p1.y - p2.y, 2) + ...)
distance应用:同样的画一个圆

glsl 复制代码
// 假设 uv 是从 (0.0, 0.0) 到 (1.0, 1.0) 的坐标
vec2 center = vec2(0.5, 0.5);
float radius = 0.3;

// 计算当前片元坐标到指定圆心的距离
float d = distance(uv, center);

// 根据距离上色
vec3 color = vec3(step(d, radius));

gl_FragColor = vec4(color, 1.0);

总结

两个位置向量的差 (p1 - p2),会得到一个从 p2 指向 p1 的新向量 。而这个新向量的长度 ,恰好就是 p1p2 两点之间的距离

这意味着,前面那个在任意位置画圆的例子,我们也可以这样写:

glsl 复制代码
// ...
vec2 diff = uv - center;
float d = length(diff); // 效果与 distance(uv, center) 完全相同

Answer

glsl 复制代码
uniform vec2 iResolution;

void main() {
  vec2 uv = gl_FragCoord.xy / iResolution.xy;
  
   // 假设 uv 是从 (-1.0, -1.0) 到 (1.0, 1.0) 的坐标
   vec2 center = vec2(0.5, 0.5);
   float radius = 0.25;

   // 计算当前片元坐标到指定圆心的距离
   float d = distance(uv, center);

   // 根据距离上色
   vec3 color = vec3(step(d, radius));
   color.gb =vec2(0.0, 0.0);

   gl_FragColor = vec4(color, 1.0);
}

效果

练习

Distance / Length

最后

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

相关推荐
JefferyXZF17 分钟前
Next.js 路由导航:四种方式构建流畅的页面跳转(三)
前端·全栈·next.js
啃火龙果的兔子29 分钟前
React 多语言(i18n)方案全面指南
前端·react.js·前端框架
阿奇__1 小时前
深度修改elementUI样式思路
前端·vue.js·elementui
小白白一枚1111 小时前
css的选择器
前端·css
盛夏绽放1 小时前
SassSCSS:让CSS拥有超能力的预处理器
前端·css·rust
xw52 小时前
支付宝小程序IDE突然极不稳定
前端·支付宝
Dolphin_海豚3 小时前
vapor 语法糖是如何被解析的
前端·源码·vapor
Bdygsl4 小时前
前端开发:HTML(5)—— 表单
前端·html
望获linux4 小时前
【实时Linux实战系列】实时数据流处理框架分析
linux·运维·前端·数据库·chrome·操作系统·wpf
国家不保护废物4 小时前
TailwindCSS:原子化CSS的革命,让React开发爽到飞起!🚀
前端·css·react.js