shader学习

前言 今天我们来学习 shader 中的 step()函数和 smoothStep()函数。话不多说，直接开始吧。 step() 函数意义 通过比较两个值生成一个阶跃函数, Edge 指定步长函数的边

前言 今天我们来学习下 shader 中的 mix()函数。话不多说，直接开始吧。 mix() 函数意义 Mix()在 x 和 y 之间使用 a 为权重执行线性插值。 函数语法 函数值域 我们以最简单

前言 今天我们来学习下 shader 中的 min 函数和 max 函数。话不多说，直接开始吧。 min() 函数意义 返回两个值最小的一个 函数语法 函数值域 一、我们以最简单的 float min

前言 今天我们来学习一下 shader 中的 fract 函数。话不多说，直接开始吧。 fract() 函数意义 fract函数的意思是取小数部分，即x-floor(x)。 例如:fract(1.5)

前言 今天我们来学习下 shader 中的 floor 函数。话不多说，直接开始吧。 floor()函数 函数意义 向下取整 函数语法 函数值域 我们以最简单的 float floor(float x

前言 今天我们来学习 shader 中的 clamp 函数。话不多说，我们直接开始吧。 clamp() 函数意义 返回第二个数和第三个数中间的数，一般我们常用返回[0,1]之间的数值。 可以使用cla

前言 今天，我们来学习下 shader——ceil()函数。话不多说，直接开始。 ceil() 函数意义 向上取整 函数语法 函数值域 我们以最简单的举例: 同样的道理 vec2/vec3/vec4

前言 今天我们来学习 shader 的——mod 函数。话不多说，直接开始。 mod() 函数意义 用来求余数函数，返回两数相除的余数。 函数语法 函数值域 两个异号整数求余 符号规律(余数的符号)

前言 今天我们来学习 shader 中的常用函数——sign。话不多说，直接开始吧。 sign() 函数意义 根据输入值的大小，返回其正负号。 函数语法 函数值域 当 x>0， sign(x)=1.;

前言 今天我们来了解下 shader 中的函数——abs()。 abs() 函数意义 求传入数字的绝对值，返回该数的绝对值。 函数语法 注意：abs（vec2(x,y)）将返回一个二维向量 vec2(

前言 在前端中，我们经常接触到各种图片，我们也可以通过图片去做很多很好看的效果。那在 shader 中，我们有没有图片的概念呢？答案是：没有。在 shader 中我们没有图片，但我们有 纹理 （跟图片

前言 我们之前提到过——坐标修正的概念。但只是一笔带过。今天我们来详细了解下坐标修正。话不多说，直接开始。 什么是坐标修正 我们在前面文章的 shader 编写中，都进行了坐标修正。即以下代码： 从代

前言 目前我们 Shader 的默认坐标系是笛卡尔坐标系（也就是直角坐标系），除了这种坐标系外，还有另一种坐标系，叫做极坐标系，用这种坐标系能够画出一些基于圆的图案来。话不多说，直接开始吧。 什么是极

前言 之前，我们通过内置函数——fract实现过一些简单的重复图案。今天我们来尝试写一些其他的重复图案。话不多说，直接开始吧。 条纹 生成一条线 我们可以看到，uv.x 大于 0.5 的地方是白色的，

前言 之前，我们使用 shader 画的图形都是黑白配色的，太单调了。今天，我们来使用内置函数——mix来给我们的图案上色。话不多说，直接开始吧。 mix 函数介绍 mix(x,y,t): x：颜色

前言 今天我们使用 SDF 的布尔运算来画一些组合图形，还是话不多说，直接开始吧。 现成的 SDF 应该到哪里去取 我们应该都发现了，很多时候 SDF 是非常考验大家的数学功底的。给大家推荐一个大神的

前言 前面，我们学习了内置函数fract,今天我们再来学习另外一个内置函数abs。废话不多说，直接开始吧。 abs 函数说明 它的作用是获取一个数的绝对值。比如 abs(2.)，返回的值是 2.，ab

前言 今天，我们来学习下 shader 中另外的一个内置函数——fract。我们今天将利用它来实现重复效果。话不多说，直接开始吧。 fract 函数介绍 fract—— 它的作用是获取一个数的小数部分

前言 在前面，我们通过 shader 去实现了圆，发光圆，矩形这几种效果，今天，我们将来实现一个翻转旋转的三角形。话不多说，直接开始吧。 实现过程 画一个三角形 我们首先先来画一个三角形。跟之前画矩形

前言 今天我们将学习下 SDF 函数的相关概念，并使用 SDF 完成一个矩形。 什么是 SDF 概念：SDF，全称 Signed Distance Function（有符号距离函数），是一个在计算机图