当前位置: 首页 > news >正文

GLSL shader学习系列1-Hello World

这是GLSL shader系列第一篇文章,本文学习目标:

  1. 安装编辑工具
  2. 编写hello world程序

安装插件

我使用VSCode编写shader代码,在VSCode上有两个好用的插件需要先装一下:

  1. Shader languages support for VS Code
    在这里插入图片描述
  2. glsl-canvas:主要用于在VSCode中对着色器的效果进行预览
    在这里插入图片描述

2 Hello World!

新建一个helloworld.frag文件,在其中编写如下代码:

#ifdef GL_ES
precision mediump float;
#endifvoid main() {gl_FragColor=vec4(1.,0.,0.,1.0);
}

然后在VSCode中按下Ctrl+Shift+P,输入Show glslCanvas后即可在屏幕中看到预览效果,一张全红的图片。至此,恭喜你已经完成了Hello world程序的编写,是不是非常简单?下面对代码做个介绍。

#ifdef GL_ES
precision mediump float;
#endif

在前3行检查了是否定义了GL_ES,这通常在移动端或浏览器下会定义,第2行指定了浮点数float的精度为中等,也可以指定为低精度lowp或高精度highp,精度越低执行速度越快,但质量会降低。你甚至可以直接将这段代码删除,程序仍能正常运行。

void main() {gl_FragColor=vec4(1.,0.,0.,1.0);
}

这是着色器的主要代码,看到main()函数你就应该知道,这也是程序的入口。在函数内部给gl_FragColor变量进行赋值,gl_FragColor是GLSL内置的变量,用输出最终的颜色。vec4是一种数据类型,其中分别存储RGB和透明度数据,取值范围均为0~1之间。注意,vec4里面的数值都是浮点类型的

3 再进一步

前面的示例程序太简单了,这次我们加点难度,看如下代码:

#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;void main() {vec2 st = gl_FragCoord.xy/u_resolution;gl_FragColor=vec4(st.x,st.y,0.,1.0);
}

这段代码的执行结果有趣了起来,屏幕中出现了这样的图像:
在这里插入图片描述
这是怎么回事呢?

首先来看uniform vec2 u_resolution;指定了着色器接受的入参:类型为vec2u_resolution,其中存储了画布的宽高。
再介绍一下gl_FragCoord,这是片元着色器中定义好的值,存储片段(像素)点的坐标xy的值,因此使用这两个值就能够知道当前着色器计算的是画布上哪个位置的颜色。

因此st中存储的值,相当于将像素点的横坐标和纵坐标做了归一化处理,左下角是直角坐标系的原点(0, 0), 右下角坐标是(1,0),左上角的坐标是0,1,因此这三个点相对应的rgba值就分别为rbga(0,0,0,0)(1,0,0,0)(0,1,0,0),即对应黑色、红色和绿色,其余像素点的取值是中间值。到这里,你是否明白其中的原理了呢?

4 更上一层楼

接下来玩点更有意思的:

#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;void main() {vec2 st = gl_FragCoord.xy/u_resolution;gl_FragColor=vec4(st.x,st.y,sin(u_time),1.0);
}

uniform float u_time是传入的时间,能够不断递增,这一次我们将gl_FragColor中的蓝色通道的值改为sin(u_time),这样随着时间的变化,每个像素点的蓝色通道的取值就会在0-1之间变换,让图片动起来。

http://www.lryc.cn/news/23082.html

相关文章:

  • Codeforces Round #851 (Div. 2)(A~D)
  • 内存保护_1:Tricore芯片MPU模块介绍
  • Vue3 -- PDF展示、添加签名(带笔锋)、导出
  • 行测-判断推理-图形推理-样式规律-属性规律-曲直性
  • idea集成Alibaba Cloud Toolkit插件
  • Win11 文件夹打开慢或卡顿解决方案
  • 【PostgreSQL的idle in transaction连接状态】
  • cityengine自定义纹理库资源
  • taobao.top.secret.bill.detail( 服务商的商家解密账单详情查询 )
  • 2023软件测试金三银四常见的软件测试面试题-【抓包和网络协议篇】
  • vue脚手架多页自动化生成实践
  • 【SQL语句优化】
  • 阿里P8:做测试10年我的一些经验分享,希望你们少走弯路
  • 栈在括号匹配中的应用(栈/链栈 纯C实现)
  • C语言Switch语句用法
  • Curl编码请求参数,API接口请求示例参数
  • 【C/C++】类型限定符extern、const、Volatile、register
  • day54【代码随想录】二刷数组
  • 哪个品牌蓝牙耳机性价比高?性价比高的平价蓝牙耳机推荐
  • 揭秘关于TFRcord的五脏六腑
  • 【Shell学习笔记】3.Shell 传递参数及数组
  • 【终结Bug】ModuleNotFoundError: No module named ‘cv2’
  • SQL Server2008详细安装步骤(保姆式教程)
  • Linux常用操作
  • Golang 处理parquet文件实战教程
  • 腾讯TIM实现即时通信 v3+ts实践
  • 华为OD机试 - 回文字符串(Java JS Python)
  • APP测试的7大注意点。
  • 设计模式-第4章(装饰模式)
  • 【算法设计-分治】快速幂与龟速乘