Shader 魔法的学习之路 – 简介(1)

内容纲要

这系列的教程我们会从零讲解 shader 编程,如何用 shader 做一些酷炫的效果。

不过在此之前,我们先简单介绍一下 shader 是什么。

Shader 是什么?能吃吗?

我不想讲那些太学术官方的解释,一句话概括:Shader 是系统给你的一系列钩子函数,主要用在图形上,你可以在上面的钩子函数基于像素级别改变甚至创造图形。

Shader 的使用场景

可以看下别人用 shader 创造的东西:https://www.shadertoy.com/

有人可能会问,这些东西为什么不直接通过绘图软件或者动画软件搞出来,而非要用 shader 实现呢?

举个例子:大家有玩过游戏吧(没玩过那就去玩),一些游戏中当鼠标移到可交互的物品,为了看起来更显眼,这些物品会有边缘的高光,当鼠标移出去又恢复原状。这系列的场景的存在,要求我们要有动态修改图形的能力。

Shader 编程的一些基础概念和术语

下面的术语和概念在之后的教程中会反复提及,这里先预习一下,看不懂也没关系,后面会再提。

概念:

  • 图形学渲染流水线:一个图形需要经过多道工艺渲染出来,每项工艺接受上一条工艺的产物进行进一步的加功,这样每道工艺互不相干形成了流水线,我们关注的 shader 就是其中的一道工艺。详细介绍:https://zhuanlan.zhihu.com/p/79183044

术语:

  • fragment shader:处理每个像素的绘制颜色、方式的 shader
  • vetex shader:处理像素要在哪里绘制的 shader
  • uv:画布所有的像素点,整体表现为一个 0 到 1 分布的矩阵
  • 零点:坐标系的 (0,0) 点,本系列教程采用 webgl,默认零点在左下角

教程的一些参考和说明

这系列教程大部分思路和实现均来自 https://www.youtube.com/watch?v=u5HAYVHsasc&list=PLGmrMu-IwbguU_nY2egTFmlg691DN7uE5,教程很不错建议去看一下。

本人目前也还在根据上述的视频学习 shader,水平有限难免有错误,如果有什么说得不对的欢迎指正。

留下评论