Vector Normaliztion -- 向量归一化

Task

Write a shader program that divides the screen into two equal parts. The origin of the left part is at (0.25, 0.5), and the origin of the right part is at (0.75, 0.5). In the left part, display the cosine of the angle between the positive X-axis and the vector directed from the origin to the current pixel position. In the right part, display the sine of the angle between the positive X-axis and the vector directed from the origin to the current pixel position.
编写一个着色器程序,将屏幕分割成两个相等的部分。左侧部分的原点位于 (0.25, 0.5),右侧部分的原点位于 (0.75, 0.5)。在左侧部分,显示X轴正方向与从原点指向当前像素位置的向量之间夹角的余弦值。在右侧部分,显示X轴正方向与从原点指向当前像素位置的向量之间夹角的正弦值。

Theory

函数介绍

  • normalize(): 向量归一化(Vector Normalization)

它接收一个向量,然后返回一个指向相同方向,但长度恰好为 1 的单位向量(Unit Vector)
常常用于光照计算,方向相关内容

点积介绍

两个单位向量进行点积运算时,其结果等于它们之间夹角的余弦值(cosine)

  • dot(A, B) = 1:方向完全相同。
  • dot(A, B) = 0:方向互相垂直。
  • dot(A, B) = -1:方向完全相反。

Answer

glsl 复制代码
uniform vec2 iResolution;

void main() {
  vec2 uv = gl_FragCoord.xy / iResolution.xy;

  //左边,和方向有关时需要向量归一化
  vec2 left = normalize(uv - vec2(0.25, 0.5));
  // 右边
  vec2 right = normalize(uv - vec2(0.75, 0.5));
  
  float condition = step(0.5, uv.x);
  // 因为是单位向量,所有cos = left.x
  float t = (1.0 - condition) * left.x + condition * right.y ;
  
  gl_FragColor = vec4(vec3(t), 1.0);
}

效果

练习

Vector Normaliztion

最后

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

相关推荐
YL有搞头1 小时前
VUE的模版渲染过程
前端·javascript·vue.js·面试·模版渲染
百思可瑞教育2 小时前
前端性能优化:请求和响应优化(HTTP缓存与CDN缓存)
前端·网络协议·http·缓存·性能优化·北京百思可瑞教育·百思可瑞教育
gnip6 小时前
文件操作利器:showOpenFilePicker
前端·javascript
繁依Fanyi6 小时前
做一个 3D 图片画廊
前端
繁依Fanyi6 小时前
用 Electron 做一个屏幕取色器
前端
某公司摸鱼前端7 小时前
一键 i18n 国际化神库!适配 Vue、React!
前端·vue.js·react.js·i18n
OEC小胖胖7 小时前
给你的应用穿上“外衣”:React中的CSS方案对比与实践
前端·前端框架·react·web
excel7 小时前
Nuxt 3 微前端:模块导入导出与路由跳转实战
前端
大家的林语冰7 小时前
Promise 再次进化,ES2025 新增 Promise.try() 静态方法
前端·javascript·ecmascript 6
大家的林语冰7 小时前
如何错误手写 ES2025 新增的 Promise.try() 静态方法
前端·javascript·ecmascript 6