2.着色器基础

Web图形学工作站

已于 2023-07-15 22:09:41 修改

阅读量376

点赞数

分类专栏： glsl 文章标签：着色器 python 开发语言

于 2023-05-31 14:53:28 首次发布

本文链接：https://blog.csdn.net/weixin_42970847/article/details/130966114

版权

glsl 专栏收录该内容

6 篇文章 3 订阅

订阅专栏

video shader效果

着色器构成

着色器（Shader）是用来实现图像渲染的，用来替代固定渲染管线的可编辑程序。其中Vertex Shader（顶点着色器）主要负责顶点的几何关系等的运算，Fragment Shader（片元着色器）主要负责片源颜色等的计算。

顶点着色器

顶点着色器，顾名思义，是对顶点进行一系列操作的着色器。顶点除了有最基本的位置属性，还可能包含很多其他属性，比如纹理，法线等等。通过顶点着色器，显卡就知道顶点应该绘制在具体什么位置。顶点着色器是非常重要的着色器，且必须要我们自己去定义。
顶点着色器作用于每个顶点，可以生成每个顶点的最终位置。针对每个顶点，它都会执行一次，一旦每个顶点的最终位置确定了，GPU就可以把这些可见顶点的集合组装成点、直线以及三角形，从而提高渲染场景和模型的速度。

片元着色器

如果你已经有使用电脑绘图的经验，你就会知道在这个过程中你会画一个圆，然后是一个矩形、一条线、一些三角形，直到你组成你想要的图像。这个过程与手写一封信或一本书非常相似——它是一组执行一项又一项任务的指令。着色器也是一组指令，但指令是针对屏幕上的每个像素一次性执行的。这意味着您编写的代码必须根据屏幕上像素的位置表现出不同的行为。就像打字机一样，您的程序将作为一个接收位置并返回颜色的函数工作，并且当它被编译时，它会运行得非常快。

shader学习基础工具

古语说的好，”工先利其事必先利其器“。以我个人学习习惯来讲，学习任何知识之前，我们都应该清楚自身的知识架构并找寻外部相关资料，所以我们这节内容首先介绍WebGL Shader学习工具，让我们学习之路尽可能平坦且顺畅！

graphtoy

请添加图片描述
GraphToy是一个开源的交互式可视化工具，用于创建、编辑和可视化图形。它可以用来学习和实验各种图形算法和数据结构，以及进行探索性数据分析和可视化。GraphToy可以在Web浏览器中使用，无需安装任何软件或插件。此工具能帮助我们将抽象的函数图形进行绘制，让我们能够更加直观的观察在区间范围内的数值变化，在shader大多数数值变化区间在[-1.,0.] [0,1.]

地址:https://graphtoy.com/

作者：Inigo Quilez

开始使用graphtoy

打开 GraphToy 网站：https://www.graphtoy.com/ ，大喊一声“干”，你就开始新的知识学习旅程了。

效果实时展示区域

该区域负责对右边函数的直观展示，其中上面三个按钮分别是”控制显示主题是亮还是暗色“、”控制格网的大小或者显隐“、“视图不同比例的缩放”

请添加图片描述
下面显示的内容从左到右依次是“x,y函数坐标数据”和time当前时间，同时可以控制时间的暂停还是继续。

输入函数

比如我们绘制一个y等于x二次方这个函数，只要在该领域输入对应的函数即可。同时你点击前面的f1(x,t) =可以动态控制函数的显隐（该功能一般在屏幕上绘制的函数较多的时候去应用）。

请添加图片描述
如果我想让我们函数动起来，可以输入t,比如我们以sin(x+t)为例子,绘制一个动态的波纹。

更多输入函数的意思，我们在本节课的后面详细给大家介绍。

支持函数

graphtoy支持多个函数，大多数函数我们会在后面的中级函数中给大家讲到。

请添加图片描述

键盘快捷键

快捷键	意义
鼠标左键	使用鼠标平移视图
使用 Shift+鼠标	以鼠标指针居中缩放
鼠标滚轮	缩放当前视口中心

desmos

请添加图片描述

此工具能帮助我们将抽象的函数图形进行绘制，让我们能够更加直观的观察在区间范围内的数值变化。desmos是一个非常强大的数学工具，可用于绘制函数、点、线、平面图形、三维图形、表格等，并且可以进行计算、插值、求导、积分等操作。它主要用于教学和科研。graphtoy则更加简单，只能用于绘制基本的函数图形。Desmos的界面比较复杂，但也更加灵活，可以进行复杂的操作。GraphToy的界面则非常简单，适合初学者和快速绘图。

地址:https://www.desmos.com/

开始使用Desmos

欢迎来到Desmos！要创建一个新的图形，在左边的列表的第一行输入你的表达式。随着你的输入，计算机会立刻在右边的图形画板生成图形。

请添加图片描述

数据表

用数据表更好的表现数据。你可以新建一个数据表或者从一个现有的表达式转换。如果你的表达式包含区间滑块，转换成数据表之后仍然被保留。

变量和区间滑块

你可以通过输入类似y = 2x + 3 的表达式绘制一个简单的直线。如果想要动态展示图形，你可以使用参数而不是常数，比如：输入y = mx + b，将提示你给参数m和 b 或者全部创建一个滑动区间，你也可以自己定义比如输入m=2 和b=3。手动移动滑块或者点击滑块左边的播放图标将能看到参数自动变化，m 的变化改变直线的斜率，b 的变化改变直线的截距。

在这里插入图片描述

想要创建一个可移动点，输入一个至少含有一个变量的点。点击然后在画板内拖动这个点。想要增加图形的互动性，可以使用在表达式中使用可移动点参数。例如，你可以创建直线 y-b=m(x-a) 并且添加点 (a,b)，然后通过移动点 (a,b) 来观察图形的移动，当然别忘了要先给参数添加滑块.

在这里插入图片描述

设置与缩放

在这里插入图片描述

图形画板

在这个图形画板设置模块你可以选择笛卡尔坐标或者极坐标，显示或隐藏标签、网格线和坐标轴。使用投影仪模式可以使图形、坐标轴线条和数字标签加粗。

2.窗口设定

调整坐标轴刻度

3.三角设定

选择常规坐标标签或者π标签，以及选择角度制或者弧度制。

4.缩放你可以使用图形画板右上角的图标放大或者缩小图形视图，点击中间按钮恢复默认。

5.其他方式缩放

如果你使用触摸屏设备，你也可以在图形画板使用双指捏合和分开来控制缩放。

使用鼠标也可以通过鼠标滚轮实现缩放，鼠标左键按下然后移动鼠标也能实现图形平移。

图形表达式

来看看Desmos支持哪些类型的数学函数式子

请添加图片描述

支持的函数

请添加图片描述

键盘快捷键

快捷键	意义
ctrl +o	打开我的图片
ctrl + s	保存
crtl + shift + s	另存为或重命名
crtl +z	撤销
ctrl +y	重做
Enter	创建新的表达式
Delete	删除表达式

shadertoy

请添加图片描述

此工具我们在初级课程中给大家提到过，这个工具可以更加方便让我们在网页中实现shader效果，不用考虑环境安装、图形API等额外的设置，并且此网站上具有大量的shader作品信息，可以直接参考其实现逻辑为我们现实中的shader编程提供解决思路，堪称shader界中的github.

地址:https://www.shadertoy.com/

作者：Inigo Quilez

开始使用shadertoy

我居然找到了IQ写的一个关于shadertoy教程)，各位老铁们可以先看看，毕竟本人写的肯定最精准。如果英语不好的可以看我接下里的内容。

首先先打开地址:https://www.shadertoy.com/

请添加图片描述
大家可以在左上角“search”功能栏处搜索你感兴趣的项目，但是最好是英文搜索，中文你懂得…

开始你的创作

点击右上角新建，可以开始你的创作，打开的界面如下所示;

请添加图片描述

参数介绍

uniform vec3 iResolution;           // 窗口分辨率，单位像素
uniform float iTime;                // 程序运行的时间，单位秒
uniform float iTimeDelta;           // 渲染时间，单位秒
uniform float iFrame;               // 帧率
uniform vec4 iMouse;                // 鼠标位置
uniform vec4 iDate;                 // 日期（年，月，日，时）

入口函数

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord/iResolution.xy;
    vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
    fragColor = vec4(col,1.0);
}

外部资源输入

输入外部资源

Shadertoy 使用称为通道的概念来访问不同类型的数据。在 Shadertoy 用户界面的底部，你会看到四个黑框：iChannel0、iChannel1、iChannel2 和 iChannel3。

请添加图片描述

你选择任何一个黑框，出现一个对话框。可以选择纹理、立方体贴图、体积、视频和音乐。

请添加图片描述

Misc(其他)

你可以从键盘、网络摄像头、麦克风等交互元素中进行选择，甚至可以从SoundCloud播放音乐。

请添加图片描述

缓冲区 Buffer A、Buffer B、Buffer C 和 Buffer D 让您创建“多通道”着色器。将它们视为可以添加到着色器管线中的额外着色器。“Cubemap A”输入是一种特殊类型的着色器程序，可让您创建自己的立方体贴图。然后您可以将该立方体贴图传递给缓冲区或您的主“图像”程序。我们在后面给大家讲解纹理贴图的时候会详细介绍立方体贴图。多buffer例子

请添加图片描述

纹理

下一个选项卡是“纹理”选项卡。你会发现三页价值的 2D 纹理可供选择。将 2D 纹理视为我们可以从中提取像素值的图像。

请添加图片描述

Volumes(体积)

“体积”选项卡包含 3D 纹理。典型的 2D 纹理使用 UV 坐标沿 x 轴（U 值）和 y 轴（V 值）访问数据。在 3D 纹理中，您使用 UVW 坐标，其中 W 值用于 z 轴。您可以将 3D 纹理想象成一个立方体，立方体上的每个像素代表我们可以从中提取的数据。这就像从三维数组中提取数据。

请添加图片描述

视频

“视频”选项卡包含随时间变化的 2D 纹理（或图像）。实现在 Shadertoy 画布中播放视频。人们使用 Shadertoy 上的视频来试验依赖于前一帧数据的后处理效果或图像效果。

请添加图片描述

音乐

“音乐”选项卡可让您播放 Shadertoy 为您提供的一系列歌曲。如果您从其中一个频道的此选项卡中选择了一首歌曲，则当用户访问您的着色器时，音乐将自动播放。

请添加图片描述

着色器调试

想在着色器调试，门都没有，你可能会找到一些特定的平台调试工具，但一般来说，最好的办法是使用我前面讲的两个函数可视化工具来观察值的输出。

小结

章节复习

现在我们来检验你对shader的知识的拓展？

尝试用desmos做个长方体吧（好像你现在还觉得难，后面我带大家一起学习）
可以一起聊聊你看到过哪些神奇的shader网站吗，不妨列到本网站下面，我们一起来学习
你做个哪些有趣的shader艺术画呢，不妨我们一起欣赏一下

复习案例

请列出你的shader学习资料吧！
德军总部 3D :https://www.shadertoy.com/view/4sfGWX
冒险游戏：https://www.shadertoy.com/view/4sjfDm
城市驾驶：https://www.shadertoy.com/view/4dGGz3
足球游戏：https://www.shadertoy.com/view/XldcRf