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

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

上接第一篇 《如何阅读着色器的汇编代码（三）》这是代码中的第二个分支，将从纹理读取的结果乘以其他常量值()。 关注 指令，值得指出的是它可以直接将标量与向量相乘，这是关于底层硬件的另一个信息。 还值得注意的是,尽管 乘法看似一条指令在 HLSL 中间语言, 它实际上是 4 条着色器汇编指令, 由 GCN 的设计(这与它作为一个标量架构有关，但是我不想它与标量指令和寄存器混淆,有很多在线材料, 说明它是如何工作的更多细节)。着色器的执行现在结束了，剩下要做的就是写出结果。 该代码片段首先恢复在程序开始

上接第一篇 《如何阅读着色器的汇编代码（二）》此指令更新所有 线程的执行掩码。 如果一个线程不属于一个活动的像素四边形（quad），它将被停用。这是一个纹理示例指令。 后缀意味着该操作还可以通过 对象过滤数据，示例中的 HLSL 代码使用了该对象。 第一个向量寄存器范围 表示将用于存储结果的 4 个寄存器(, 4 个浮点值)， 范围包含上面插入的 坐标( 和 )， 标量寄存器范围 包含用于存储 纹理描述符 (指向纹理的内存地址)的 8 个寄存器，另一个标量范围 包含用于存储用于纹理样本过滤

上接第一篇 《如何阅读着色器的汇编代码（一）》对应的 ISA 汇编代码未添加注释的部分对应 GPU 必须执行的代码，以设置突出显示的主要指令。在我们开始深入研究代码之前，有一些事情值得讨论。 首先，我们注意到几乎所有指令都以前缀 v_ 或前缀 s_ 开始，例如 v_mul_f32 和 s_mov_b32。 这给了我们一些关于硬件本身的信息: GCN 架构以 64 个批次批量处理工作项(像素，顶点等)，称为 ，并在其上并行执行每个着色器指令，同时要么操作对于每个线程来说唯一的数据(使用 v_ 前缀，

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

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

透明名称症状原因解决方案 糟糕的多边形排序三角形的网格或粒子出现在错误的顺序为了提高速度，游戏引擎采用了逐个对象（per-object）排序而不是逐个三角形（per-triangle）排序1. 把大的物体分成小的; 2. 将枢轴移近网格中心; 3. 对半透明物体（half solid）使用抖动不透明度（dithered opacity）或剪切 alpha（cutout alpha）; 4. hack: 改变着色器的绘制优先级(渲染队列) 景深 vs. 透明度透明物体

材质名称症状原因解决方案 双线性 mipmap 过滤在斜角（oblique angles）模糊的纹理透视投影中的双线性滤波低估了所需的 mipmap 级别的纹理如果性能折衷是可以接受的，则使用各向异性纹理滤波 sRGB vs 线性颜色纹理太暗或者导入后褪色，或者粗糙度不对纹理(至少)有两种格式: 线性颜色或 sRGB。 线性用于数据，而 sRGB 用于人类可读的颜色1. 在纹理程序中，输出 albedo/diffuse 为 sRGB； 2. 在游戏引擎中，在 al

游戏美术中最常见的故障及其解决方法针对网格问题、光照 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 ///< 离散非均匀分布...

专栏 Logo 的放大效果ShaderJoy 的生成代码48*14 的小图就存储在以下代码中其内部原理是一种图像编码技术，不过它本身具有一定的技术局限，仅适用于 8 bit 的 256 颜色以下的图像，且图像不能过大，现在的主要用途恐怕就是在 ShaderToy 上表演 “骚操作” 或者给喜欢的妹子表白？（不过哪个妹子有哪个闲心去跑这种代码呢，如果真有，那还真得好好珍惜了！扯远了扯远了。。。）以下是生成 48*14 小图的代码void Sprite(inout ve...

效果图原图深度图算法原理不喜欢长篇大论，一句话概括，深度图模拟了相机到物体的距离，而景深（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...

随机单位向量vec3 rndunit(float seed) { return normalize(tan(hash3(seed)));}这个函数从给定的种子生成一个随机的单位向量。它依赖于一个名为 “hash3” 的函数（一生三的 hash 函数），该函数会生成一个在 [-1,1] 范围内的随机vec3。它与直接标准化向量的简单方法稍有不同。假设我们直接将一个方框中的向量映射到一个球面上的向量，我们会得到的是沿着立方体的边角聚集起来的向量。tan 调用本质上是考虑到这个问题的...

绕任意轴旋转点以下代码中的函数的作用是返回三维点 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,...

十字星光算法关键思路首先着眼于单颗十字星的绘制float Star(vec2 gv, float sz, float flare){ float d = length(gv); float col = smoothstep(.99, .8, d) * .01 * sz / d; col *= col; /// @note 十字光（平滑过的） float a = smoothstep(crossCoef0, 1., 1. - abs(gv...

效果图关键算法说明首先将 2PI 平均分成 N+1 份，在对应的角度上我们分配了一个点 for ( int i = 0; i <= N; i++ ) { float th = PI2 * float(i) / float(N); poly[i] = vec2(sin(th), cos(th)); ///< 平均分布在圆上的 N+1 个点 }值得注意的是，最有一个点其实等于最...

代码//Define-Switches#define SHADERTOY#define GLES//Consts#define PI 3.14159265359#define TAU (PI*2.)#define PHI 1.61803399#define deg2rad 0.01745329251#define SQRT2 (sqrt(2.))#define BIG 1e8#define ETA 1e-4#define eqf(a,b) ( abs((a)-(b))&...