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

相关推荐
开发加微信:hedian11640 分钟前
短剧小程序开发全攻略:从技术选型到核心实现(前端+后端+运营干货)
前端·微信·小程序
YCOSA20253 小时前
ISO 雨晨 26200.6588 Windows 11 企业版 LTSC 25H2 自用 edge 140.0.3485.81
前端·windows·edge
小白呀白3 小时前
【uni-app】树形结构数据选择框
前端·javascript·uni-app
吃饺子不吃馅3 小时前
深感一事无成,还是踏踏实实做点东西吧
前端·svg·图形学
90后的晨仔4 小时前
Mac 上配置多个 Gitee 账号的完整教程
前端·后端
少年阿闯~~4 小时前
CSS——实现盒子在页面居中
前端·css·html
开发者小天4 小时前
uniapp中封装底部跳转方法
前端·javascript·uni-app
阿波罗尼亚5 小时前
复杂查询:直接查询/子查询/视图/CTE
java·前端·数据库
正义的大古5 小时前
OpenLayers地图交互 -- 章节九:拖拽框交互详解
前端·vue.js·openlayers
三十_A5 小时前
【实录】使用 Verdaccio 从零搭建私有 npm 仓库(含完整步骤及避坑指南)
前端·npm·node.js