Clamp

Task

Write a GLSL program that draws a diagonal line from the bottom left corner of the texture to the top right corner. The line should have a width of 0.2 in normalized coordinates and be colored in (1.0, 0.3, 0.3). Additionally, ensure that the line is limited to values between 0.25 and 0.75 in Y coordinate.
编写一个GLSL程序,该程序绘制一条从纹理左下角到右上角的对角线。要求如下:

  • 线条在归一化坐标系中的宽度为 0.2
  • 线条颜色为 (1.0, 0.3, 0.3)
  • 此外,请确保该线条只在Y坐标

Theory

函数介绍

java 复制代码
float clamp(float value, float minVal, float maxVal)

clamp 将一个值限制在一个闭区间 [min, max] 内,如果小于minVal则返回minVal,如果大于maxVal则返回maxVal,否则返回value

  • value: 你想要限制的原始值。
  • minVal: 区间的下限(最小值)。
  • maxVal: 区间的上限(最大值)。

Answer

glsl 复制代码
uniform vec2 iResolution;

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

  float lineWidth = 0.2;
  vec3  lineColor = vec3(1.0, 0.3, 0.3);
  float value = clamp(uv.x, 0.25, 0.75);
  // 获得当前点的y坐标,用来下面进行判断颜色用,如果当前点的y坐标大于线条宽度的一半则舍弃这个点
  float dist  = abs(uv.y - value); 
  float line  = 1.0 - step(lineWidth * 0.5, dist);
  
  gl_FragColor = vec4(lineColor * line, 1.0);
}

效果

练习

Clamp

最后

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

相关推荐
x007xyz2 分钟前
🚀🚀🚀前端的无限可能-纯Web实现的字幕视频工具 FlyCut Caption
前端·openai·音视频开发
前端Hardy3 分钟前
HTML&CSS: 在线电子签名工具
前端·javascript·canvas
前端Hardy13 分钟前
告别抽象!可视化动画带你学习算法——选择排序
前端·javascript·css
毕设十刻15 分钟前
基于vue的考研信息系统6kv17(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
望获linux22 分钟前
论文解读:利用中断隔离技术的 Linux 亚微秒响应性能优化
java·linux·运维·前端·arm开发·数据库·性能优化
brzhang35 分钟前
ChatGPT Pulse来了:AI 每天替你做研究,这事儿你该高兴还是该小心?
前端·后端·架构
泉城老铁1 小时前
springboot+vue 文件下载,实现大文件的分片压缩和下载,避免内存溢出
前端·spring boot·后端
用户203735549811 小时前
Vue+Node+MongoDB高级全栈开发视频教程 完整版
前端
我是天龙_绍1 小时前
setup 函数 和 setup 语法糖
前端
泉城老铁1 小时前
Spring Boot和Vue.js项目中实现文件压缩下载功能
前端·spring boot·后端