OpenGL Shader-开篇

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」

前言

学习OpenGL离不开Shader开发，比如图片滤镜和特效等花里胡哨的效果都需要具备Shader开发能力。开设OpenGL ES Shader专栏期望对学习OpenGL Shader开发做总结和记录，其中也会涉及到大量数学公式和算法，同时也是对自己数学算法知识的回顾和提升吧。专栏计划大纲目录：

• 绘画：颜色、形状、图形
• 效果：随机生成、噪点
• 图像：纹理、滤镜、内容处理
• 动画
• 3D

辅助工具

• GAPID: Graphics API Debugger Google跨平台图像开发调试工具，支持 OpenGL ES 和 Vulkan 调试。
• Visual Studio Code - Shader Toy VSCode插件工具，可以在VSCode上编写OpenGLShader脚本实时调试效果。
• ShaderToy网站 Shader资源库网站，有大量开发者上传的shader资源，对于学习Shader有很大帮助。
• OpenGL官方手册 网址手册可以翻阅查找对于OpenGL所有内置变量和内置方法信息。

Shader Toy插件使用

开发Shader之前先学习如何使用Shader Toy插件可以帮助开发者提效。对于Android开发者而言最痛苦莫过于每次调试需要重新编译打包查看效果。有了Shader Toy插件可以实时查看修改后的Shader脚本效果大大提高了开发效率。

简单介绍

1. 先在VSCode插件库中搜索并安装Shader Toy，顺带可以再下载Shader lanuage语法支持插件可以高亮提醒和代码补齐。
2. 新建shader脚本文件编写示例代码，Command + Shift + P调出命令面板选择"Shader Toy: Show GLSL Preview"后可显示GLSL Preview窗口查看脚本最终效果。

3. shader脚本也是以void main()开始。同时支持的常用变量只读标识Uniforms有iResolution,iTime, iTimeDelta, iFrame, iMouse, iMouseButton, iDate, iSampleRate, iChannelN等。

简单示例展示

• 颜色画布 Shader输出结果是gl_FragColor这里定义一个红色的向量值，透明度设置为1.0。

simple.fsh代码如下:

void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

• 图片纹理 支持纹理显示定义一个本地图片地址，然后声明一个iChannel1对于本地地址即可。纹理创建使用texture。gl_FragCoord和iResolution分别代表顶点坐标和纹理像素。

texture.fsh代码如下:

#iChannel1 "/Users/julyyu1/Desktop/opengles_shader/res/i600x800.jpeg"
void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    gl_FragColor = texture(iChannel1,uv);
}