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

相关推荐
小林rush1 分钟前
Vue3响应式系统设计与实现
前端·vue.js·前端框架
轻语呢喃7 分钟前
时间分片思想:多数据的前端处理方法
前端·javascript·面试
Spider_Man8 分钟前
假装渲染十万条,虚拟列表的障眼法你学会了吗?
前端·javascript·react.js
IT_陈寒19 分钟前
Vite 3.0 性能飞跃的5个关键优化点,让构建速度提升200%!
前端·人工智能·后端
赵民勇22 分钟前
npm使用的环境变量及其用法
前端·npm·node.js
i小杨1 小时前
Mac 开发环境与配置操作速查表
前端·chrome
陈随易1 小时前
改变世界的编程语言MoonBit:背景知识速览
前端·后端·程序员
狂奔solar2 小时前
使用Rag 命中用户feedback提升triage agent 准确率
java·前端·prompt
诗书画唱2 小时前
【前端教程】从零开始学JavaScript交互:7个经典事件处理案例解析
前端·javascript·交互
跟橙姐学代码2 小时前
写Python的人,都应该掌握的高效写法(用了真的爽!)
前端·python·ipython