ShaderJoy 的兴趣技术杂货铺

事情的起因GL 群里一位群友提出问题，但是他自己的理解是有偏差的虽然有热心的群友发出一篇博客的链接，虽然那篇对 LUT3D 的原理讲解的比较详细，但是对代码却没有做更详细的剖析，所以我打算写一篇博客，来具体说明一下。原理的老生常谈这里还是得啰嗦一下，什么是 LUT ？英文全称为 Look Up Table，翻译过来是 “查找表” （注意，不是查水表 =_=）。输入一个值，然后通过查找表来得到一个输出值。在调色领域中，一般称为颜色查找表，查找表的分量（查水表的话就是门牌号）..

视频效果：生成视频效果带文字的效果（优酷质量压缩较模糊）效果图：简介：[平台： Windows, Linux, Android, iOS]基于若干张用户照片（等比例缩放至统一大小，不足则填充黑边），结合音频文件，经过音视频同步（音频时长较短则循环播放，音频时长较长则以视频时长为准）后，生成一个带转场特效的视频文件。支持多种音频格式，如 aac/mp3...

ShaderJoy －水墨晕染转场ShaderJoy －－ 爱的节奏ShaderJoy －－ Little StarsShaderjoy －－ ∞ neonShaderJoy －－♡の烟花ShaderJoy －－Dancing ♡ShaderJoy －－ ♡の烟花ShaderJoy —— 💗声波纹ShaderJoy－－❤随乐动ShaderJoy ——💗の声纹ShaderJoy —— ❤ 气泡音频特效Shader 特效 —— 基于 OpenGL 的音频可视化（仿 ShaderToy）.mp4ShaderJ

视频Shader 特效——“晃动心中的爱”Shade r特效——心内流动效果图代码和注释如下：#define PI 3.1415926#define PI_HALF (.5*PI)#define PIx2 (2.*PI)// 2D rotation matrixmat2 rotmat(float a){ return mat2(c...

参考自：http://webvfx.rectalogic.com/examples_2transition-shader-pagecurl_8html-example.html效果图precision mediump float;varying vec2 texCoord;uniform sampler2D sourceTex;uniform

这段代码通过将贝塞尔曲线和直线的方程设置为相等，并使用二次方程求解交点，实现了对这两者之间交点的检测。它还处理了一些特殊情况，如贝塞尔曲线退化成直线、线段接近垂直等情况，确保算法的鲁棒性和准确性。

下图是 x 分量应用该函数在两个时刻（0 和 10）的效果图，y 分量也同理。这段代码对最终颜色进行了色调映射，使得颜色更加柔和和平滑。这部分代码初始化了输出颜色，并获取了屏幕分辨率。这部分是该效果的核心，它使用。运算符优先级高于二元。

Oklab 是以感知一致的方式平衡颜色的最佳方法之一。Oklab（上方）与标准 HSV 在恒定亮度和饱和度下的对比虽然 OkLab 并不是一个完美的近似，但它做得相当不错，并且可以轻松地进行逆转换，这对于颜色空间变换非常重要。我打算在我的颜色量化工具中使用这种方法。在减少调色板时，选择感知上最不同的颜色可能会很有用，而这正是我将要采用的方法。您也可以利用这一点为游戏挑选颜色调色板，或帮助提高对色盲用户的可访问性。这里有很多可能性，我希望这能给您一些启发。

尝试总结一下我对原演讲的理解以及本文的内容：重点不在于节省几个 ALU 指令，而是更多地了解你所使用的工具/平台，并与编译器合作而不是盲目依赖它。编译器技术的进步：自早期以来，编译器技术已经有了显著的发展，但编译器无法知道作者的意图。我们需要与编译器合作，以实现最佳的代码和性能结果。不要假设编译器的行为：不要对编译器的行为做出假设，而是学习阅读和理解编译器的输出，尤其是在有机会这样做时。培养良好的习惯：不必总是担心额外的指令。

最后，始终建议单独分析任何性能改进的变化，以确定实际的改进情况。有些改进可能会带来相反的结果，例如减少寄存器数量以增加占用率可能导致纹理缓存抖动，因为更多的 warp/wavefront 可能会尝试从不同的内存区域获取数据。GPU 性能分析和优化更像是一门艺术，而不完全是科学。希望这个翻译对你有帮助！如果你有任何进一步的问题或需要更详细的解释，请随时告诉我。

PI：定义了 π 的值。RADIUS：表示圆柱体半径的一个常量，其值为 (Uniform 变量amount：控制 “移动圆柱体的同时滚动圆柱体” 的参数，在-0.16到1.3之间变化。texOffset：额外用来偏移纹理的参数。宏定义：等于amount，表示圆柱体中心的位置。：基于amount计算得到圆柱体角度，用于圆柱体的滚动。

Shader 特效——更自然的翻页效果。

/ 缩放因子// 偏移量这种方式提供了极大的灵活性，允许你根据具体需求定制坐标变换。

仅在需要时使用#define和#ifdef。优化我们的代码分支可以使用常量布尔和if子句。if(!宏定义的一个很好的用例是删除某些需要资源的代码部分，而这些资源可能在一些着色器的配置中不可用。# endif。

当我开始图像编程时，像 HLSL 和 GLSL 这样的着色语言在游戏开发中还不流行，着色器是用汇编直接开发出来的。 当 HLSL 被引入时，我记得我们为了好玩，试图通过手工生成更短、更紧凑的汇编代码来击败编译器，这并不难。 从那时起，着色器编译技术就有了巨大的进步，现在，在大多数情况下，手工生成更好的汇编代码是相当困难的(而且着色器已经变得如此庞大和复杂，无论如何，它不再是划算的了)。即使现在没有人直接用汇编编写着色器，对于图形程序员来说，能够阅读和理解编译器产生的着色器汇编(ISA)代码仍然是有用的。 首

我通过 Twitter DMs 看到了一个很好的问题，关于占用率是什么以及为什么它对着色器性能很重要，我将把我的答案扩展到一篇快速的博客文章中。首先是一些上下文环境，GPU，当其运行着色程序时，将 64 或 32 个像素或顶点(在 AMD 上称为 ，在 NVidia 上称为 )一起批处理，并一次性对所有的程序执行一条指令 。通常，从内存中获取数据的指令有很大的延迟(例如，发出指令和返回结果之间的时间很长)，因为必须访问缓存或 RAM 来获取数据。在等待数据时，这种延迟可能会导致 GPU 停顿。当遇到 GPU

游戏美术中最常见的故障及其解决方法针对网格问题、光照 bug、粒子、透明度、物理的故障排除提示。 解决方案可以应用在 Unity，UE，Godot 和大多数其他游戏引擎。名称症状原因解决方案 锯齿的线条（Aliased lines）细长的几何形状，比如电缆或栅栏出现抖动、消失几何形状比单个像素还细小1. 对不同的纹理更粗的几何形状制作 LODs； 2. 在远距离上混合到纯色纹理； 3. 使用不同的抗锯齿算法。 翻转的法线（Flipped normals）网格被反转或

效果图静态图​动态图​代码及详解：代码很简单，让我们直接来看代码和注释varying vec2 texcoord;// uniform float iGlobalTime;// uniform vec2 iResolution;#define PI 3.1415926f#define PIx2 2.*PI#define PI_HALF PI/2.#iChannel0 "file://./yeah_0.jpg"#iChannel1 "file://./yeah.jpg"..

ShaderJoy —— Shader 特效乐趣无穷爱心❤烟花，不仅春节可以放，情人节也可以用来表白~效果图动态图（压缩有质量损失）运用在 虎年新春 主题百花齐放拉开一点时间再错开一点时间运用在情人节主题静态图设计思路简介首先，我们实现一个发光的粒子，代码为vec3 burst(vec2 st, vec2 pos, float r, vec3 col){ st -= pos; r = 0.6 * r * r; /// 发光效果 retur

ShaderJoy —— Shader 特效乐趣无穷效果图设计思路我设计的这只 “小挠斧” 的造型十分简单，只用到了三种基本图形圆形（圆头）弧线（圆头）直线那么在 shader 当中我们该如何绘制这三种基本图形呢？答案是通过 SDF ！【想进一步了解的同学可以搜索我的相关专栏文章 ShaderJoy 】限于篇幅，我这里就直接列出了本文所用到的三种 SDF 的函数sdCircleudSegmentsdArcsdCircle 的使用sdCircle 具体代码分别如下所示/

theme: channing-cyanhighlight: vs2015“ PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛”ShaderJoy —— Shader 特效乐趣无穷效果图动态图静态图核心代码分析话不多说，先看核心代码，我们从简单的二维坐标入手（之后再推广到三维），如下/// @note 将屏幕坐标换算为 [-.5, .5] 的范围vec2 p = fragCoord.xy / iResolution.xy - .5;float pa, .

效果图原图核心算法思路该效果的核心思路一共分为以下几步【参考 Photoshop 中的图层操作】先根据图像的亮度，人为设定阈值，分为（6个）不同等级的灰度图；然后构造（6个）不同旋转方向的 “木刻纹” 图像，如下图所示；该核心的 “木刻纹” 是由以下正弦和取模函数搭配实现的float dist = mod(rotuv.y - sin(rotuv.x * frecuencia) * amplitud, divisor); 函数示意图如下所示等高线图如下所示接着，将 “木刻

效果图算法思路与步骤首先，我们在屏幕中心绘制一个发光的圆点代码如下void mainImage( out vec4 fragColor, in vec2 fragCoord ){ vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y; vec2 p = uv; fragColor = vec4( .003 / length(p) );}发光效果的原理，看了以下函数示意图就容..

效果图由于最近工作比较忙，有一段时间没有更新特效专栏了，但是期间也收集了一些挺有意思的特效代码，后续经过整理会陆续加入到专栏里面来和各位读者进行分享~(　ﾟ∀ﾟ) ﾉ♡并且尽量以简单的语言来解释原理而不是用枯燥乏味的长篇大论以及堆砌晦涩难懂的公式【我自己遇到这样的文章以很头疼 (ノへ￣、)】，当然如果有什么地方读者大大觉得我没有说清楚，也欢迎留言，提醒我进行补充。核心算法该特效关键用到 sin(sin(x * a))*b, a = 3., b = 20. 这个数学公式，...

效果图主要思路介绍首先我们通过 SDF 在场景中构造了一个平面和球体vec2 res = vec2( q.y, 2.0 ); ///< 默认是 plane... ...// float d = sqrt(x * x + y * y + z * z) - r;float d = length(vec3(x, y, z)) - r; ///< 同上然后通过对球体进行拉伸（抛物线公式），构造一个如下的形状（♥ 的半边）float y ...

效果图关键思路解析要实现阴影最核心的思想：就是要从场景中各个物体上的点朝着光线的方向进行 Raymarching，如果经过 SDF 测试以后，发现有阻挡，则我们可知该像素是位于阴影区域的；软阴影的效果，则在其基础之上考虑了那些虽然不在阴影区域，但很接近的像素，然后根据其离光线的距离来控制虚化的程度，实际关键代码如下/// @note 软阴影，朝着光的方向 ray marching/// @param p 三维空间中的点/// @param l 光的方向float ..

效果图球面线性插值旋转的效果简单线性插值旋转的效果基础知识四元数是什么呢？简单来说，四元数本质上是一种高阶复数，是一个四维空间，相对于复数的二维空间。一个复数由实部和虚部组成，即 ，i 是虚数单位，有。而四元数其实和我们学到的这种是类似的，不同的是，它的虚部包含了三个虚数单位，i、j、k，即一个四元数可以表示为。我们现在已知一个四元数可以表示为 ，现在就来回答这样一个简单的式子是怎么和三维旋转结合在一起的。为了方便，我们下面使用 ，其中 v 是向量，w 是实...

效果图动态图静态图原理解构绕 Y 轴旋转这部分的关键代码 /// @note 场景像素的旋转 float c = cos(iTime); float s = sin(iTime); mat3 YRotationMatrix = mat3( vec3( c, 0., s ), ///< 第一列 vec3( 0., 1., 0. ), ///&...

效果图场景中有三个物体：一个平面，两个球判断光线与球是否相交直线与圆的 Raytrace/// @note 光线和球相交Hit Intersect(Ray ray, Sphere sphere){ // Check for a Negative Square Root vec3 oc = sphere.Position - ray.Origin; ///< 光源和球心的连线（长边） float l = dot(ray.Direc...

效果图一个光源跟随鼠标，一个光源上下移动绿色的 box 为障碍物算法阐述光源亮度的指数衰减我们想要的效果是，光的亮度随着离光源的距离越大而迅速衰减 ，所以很自然地需要先计算出像素到光源的距离，然后需要设计一个衰减函数，来满足随着距离增大而迅速减少的目的。/// @note 光照部分 return hyperstep(light.min, light.max, distance(pixel, light.pos)) * light.brightn...

效果图其中使用到的噪声纹理完整代码和注释#iChannel0::WrapMode "Repeat"#iChannel0 "file://../../ShaderToy/image (2).png"// #iChannel0 "file://../../ShaderToy/image (9).png"// #iChannel0 "file://../../ShaderToy/image (10).png"#define t iTime#define res ...

效果图粒子雨效果完整代码和注释#define PI 3.14159#define TAU 6.28318#iUniform float A = 55. in {0., 300.}#iUniform float B = 35. in {0., 300.}#iUniform float C = .25 in {0., 1.}#iUniform float D = 64. in {0., 200.}#iUniform float E = 5. in {0., 20.}#...

效果图之前写过一篇偏理论的介绍镜头眩光的文章 ShaderJoy —— 伪镜头眩光 【GLSL】，这次介绍另一种直接用 shader 实现的效果（实现起来更简单，而且效果也还不错）。废话不多说，直接上代码！完整代码和注释#iChannel0::WrapMode "Repeat"#iChannel0 "file://../ShaderToy/image (5).png"float noise(float t){ return texture(iChannel0...

效果图核心设计思路一、绘制圆环我们可以通过将两个半径不同的圆进行相减来得到圆环 /// @note 圆环 float mask = Circle(uv, vec2(0., 0.), 0.5, 0.01); mask -= Circle(uv, vec2(0., 0.), 0.35, 0.01);二、营造旋转将 uv 坐标换算到极坐标的角度（并重新映射到 0.-1.） float angle = atan(uv.y, uv.x)...

效果图离散均匀分布的随机序列离散非均匀分布的随机序列在数学中，韦尔数列是由 赫尔曼韦尔 证明的等分布定理的一个数列: 无理数 α 的所有倍数的序列，0α，2α，3α，4α，… 是对1 取模的等分布的数列。其整数的版本常被用于产生离散均匀的随机分布（即本例所使用的方法）GLSL 代码及注释如下：#define hash Nth_weyl ///< weyl 离散均匀分布// #define hash Not_uniform ///< 离散非均匀分布...

现在的主要用途恐怕就是在 ShaderToy 上表演 “骚操作” 或者给喜欢的妹子表白？（不过哪个妹子有哪个闲心去跑这种代码呢，如果真有，那还真得好好珍惜了！当然你也可以选择把它换成你喜欢的任意图片。将上面提到的 “荧光形状” 应用了 “衰减” 之后，效果如下所示。仅适用于 8 bit 的 256 颜色以下的图像，且图像不能过大。感觉该效果特别适合运用在像素风的人物上，仿佛回到了当初用。其中所谓的 “荧光形状” 单看其对任意向量的效果，接着，再看看衰减（decay） 效果，如下所示。

效果图原图深度图算法原理不喜欢长篇大论，一句话概括，深度图模拟了相机到物体的距离，而景深（DoF）的效果就是在该距离上处于相机焦点附近（专业术语叫一对远近的弥散圆之间）时清晰，较远时模糊。这里的模糊我们使用的是均值模糊（不同邻域不同偏移的组合）。至此，我们就可以直接看看源码了。完整代码和注释#iChannel0 "file://../images/CubeOrig.jpg"#iChannel1 "file://../images/Cube...

效果图算法核心思路首先我们将 uv 坐标的 x 分量进行分区（这里为了容易看清，所以设置为黑白）将 uv.x 分为 6 个区接下来我们看看是如何实现周期性的过渡，取值范围从 0. 到 1.float progress = abs(sin(iTime * 0.75));没错，简单的 sin 函数就能满足我们的需求。然后我们在对 uv 坐标的 x 分量进行检查，看其是否落在了指定的区间内/// 检查 uv.x 是否落在区间内if ((uv.x &g...

当我们标准化一个高斯分布的向量，我们得到一个均匀随机的单位向量【相对均匀】。换句话说，它创建的矩阵除了对角线之外都是零，对角线上的值就是你传入的值。该函数找到直线上最接近 p 点的点，然后返回到 p 点的距离。这是通过把这个点投影到直线上，然后截断它的投影，使它在端点之间。我们所做的是将两个 int 值放入一个特殊的多项式函数中，然后将其转换为浮点数，并将结果映射到 (- 1,1) 的范围内。假设我们直接将一个方框中的向量映射到一个球面上的向量，我们会得到的是。没有它，我们得到的值就不是随机的。

绕任意轴旋转点以下代码中的函数的作用是返回三维点 p 绕轴 ax 旋转 ro 角度的后的三维点 p' 。这个旋转以原点为中心。值得注意的是 ax 必须标准化（normalized）。下图说明了该函数的作用。p' 是返回值。vec3 erot(vec3 p, vec3 ax, float ro) { return mix(dot(ax, p)*ax, p, cos(ro)) + cross(ax, p)*sin(ro);}原理详解mix(dot(ax,...