ShaderJoy —— Shader 实例详解

ShaderJoy —— Shader 实例详解

ShaderJoy —— Shader 实例详解

Shader 实例详解，揭秘酷炫特效背后的算法，一起感受算法之美+数学之美【尽量用精简的直观的语言讲解，我也反感长篇大论的公式堆砌】希望我精心总结的一些知识点可以帮助你超越同龄人一丢丢，真心祝愿各位早日跻身大厂！

等 91 人订阅共24篇文章创建于2021-06-25

ShaderJoy —— 伸缩、旋转的 “+” 效果【GLSL】

在正文第一句加入“我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！” 效果图仅伸缩的 “+” 加上旋转的 “+” 算法思路划分网格首先，需要针对 uv 坐标划分网格 ouv 的可

1年前
2204
2
2

ShaderJoy —— 伸缩、旋转的 “+” 效果【GLSL】

ShaderJoy —— 如何阅读着色器的汇编代码（一）

正文当我开始图像编程时，像 HLSL 和 GLSL 这样的着色语言在游戏开发中还不流行，着色器是用汇编直接开发出来的。当 HLSL 被引入时，我记得我们为了好玩，试图通过手工生成更短、更紧凑的汇编

1年前
371
点赞
评论

ShaderJoy —— 如何阅读着色器的汇编代码（一）

【转载】《一个笨蛋的 ACES 指导》翻译

原文 1 链接原文 2 链接我决定正视一下 ACES 流程了，这个是一个比较好的入门理解，所以翻译一下分享出来。对于一些想补充的话，我会在行文之间用小字标识。我拖延了很久没有了解 ACES 了，

1年前
245
2
评论

【转载】《一个笨蛋的 ACES 指导》翻译

ShaderJoy —— “百叶窗” 特效【GLSL】

效果图静态图动态图代码及详解：代码很简单，让我们直接来看代码和注释其中 y = -x + offset 的函数图如下所示

1年前
1820
10
1

ShaderJoy —— “百叶窗” 特效【GLSL】

ShaderJoy —— 用 Shader 绘制爱心❤烟花【GLSL】

“ PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛” ShaderJoy —— Shader 特效乐趣无穷效果图百花齐放拉开一点时间再错开一点时间设计思路简介首

1年前
1991
18
10

ShaderJoy —— 用 Shader 绘制爱心❤烟花【GLSL】

ShaderJoy —— 用 Shader 绘制一只可爱的 “小挠斧” 【GLSL】

“ PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛” ShaderJoy —— Shader 特效乐趣无穷设计思路我设计的这只 “小挠斧” 的造型十分简单，只用到了三种

1年前
1585
9
8

ShaderJoy —— 用 Shader 绘制一只可爱的 “小挠斧” 【GLSL】

ShaderJoy —— 核心仅三行代码实现酷炫特效 “吉星高照虎年鸿运” 【GLSL】

“ PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛” ShaderJoy —— Shader 特效乐趣无穷效果图动态图静态图核心代码分析话不多说，先看核心代码，我

1年前
980
11
4

ShaderJoy —— 核心仅三行代码实现酷炫特效 “吉星高照虎年鸿运” 【GLSL】

ShaderJoy ——人有悲欢离合，月有阴晴圆缺【GLSL】

虽人有悲欢离合，月有阴晴圆缺，此事古难全。但愿各位读者在中秋佳节来临之际，身边都能有亲人相伴。即使独在异乡为异客，在学习工作之余，也都要平安健康，这样才能与他/她们一起共享这美好的月光。

2年前
3348
28
16

ShaderJoy ——人有悲欢离合，月有阴晴圆缺【GLSL】

ShaderJoy —— 方方圆圆？圆圆方方？【GLSL】

这是我参与8月更文挑战的第16天，活动详情查看： 8月更文挑战效果图算法简介首先，是常规操作，将 uv 坐标换算到 [-0.5, 0.5] 之间 uv 可视化后的效果下一步，就是如何绘制圆圆

2年前
1028
3
评论

ShaderJoy —— 简单脉冲波（带锯齿的半正弦波）绘制【GLSL】

效果图简单脉冲波（带锯齿的半正弦波）绘制三角波三角波（犹如锯齿）所使用的算法代码函数示意图如下半正弦波半正弦波（截取正弦波的一部分，看起来犹如地平线上冒出一座山峰）所使用的算法代码函数示

2年前
681
2
评论

ShaderJoy —— 漫画笔触效果【GLSL】

这是我参与8月更文挑战的第14天，活动详情查看： 8月更文挑战效果图原图核心算法思路该效果的核心思路一共分为以下几步【参考 Photoshop 中的图层操作】先根据图像的亮度，人为设定阈值，

2年前
888
3
评论

ShaderJoy —— 漫画笔触效果【GLSL】

ShaderJoy ——GLSL 调试技巧入门【OpenGL】

这是我参与8月更文挑战的第12天，活动详情查看： 8月更文挑战使用Nsight图形调试器调试 GLSL 着色器代码是出了名的困难。与 C++ 或 Java 等典型语言的编程不同，着色程序在哪里失败

2年前
2867
3
评论

ShaderJoy —— “爽到飞起的 2233 娘” 效果【GLSL】｜8月更文挑战

这是我参与8月更文挑战的第5天，活动详情查看： 8月更文挑战 2233 娘其中关键需要用到的 iChannel0 是一幅由一系列连贯动作的 2233 娘组成的序列帧图像，如下图所示

2年前
644
8
1

ShaderJoy —— “爽到飞起的 2233 娘” 效果【GLSL】｜8月更文挑战

ShaderJoy —— 安利一个 Visual Studio Code 的 Shader 插件【免费】｜8月更文挑战

** ** Visual Studio Code - Shader Toy 这个扩展可以在 VSCode 中查看 GLSL 着色器的 WebGL 实时预览，通过提供 “Show GLSL Pr

2年前
2097
3
2

ShaderJoy —— 安利一个 Visual Studio Code 的 Shader 插件【免费】｜8月更文挑战

ShaderJoy —— 烟雾模拟【GLSL】

效果图完整代码与注释该算法最 trick 的地方就是通过三角函数的迭代叠加。最后，值得注意的是，其中 c 在最后输出之前会做如下处理其对应的函数如如下所示

2年前
1207
3
评论

ShaderJoy —— 烟雾模拟【GLSL】

ShaderJoy ——蹦跶的炫彩粒子【GLSL】

效果图原理简析其中发光粒子所依据的数学公式是 $ GLOW = \frac{0.04}{\sqrt{(x^{2}+y^{2})}} $ 其对应的数学函数图如下位置的周期性变换遵循三角函数 cos

2年前
856
2
评论

ShaderJoy ——蹦跶的炫彩粒子【GLSL】

ShaderJoy —— 褪色效果【GLSL】

效果图原图完整代码与注释其中提升暗部与提升亮部的简化函数示意图分别如下所示提升暗部提升亮部

2年前
941
2
评论

ShaderJoy —— 褪色效果【GLSL】

ShaderJoy ——旋转的分层齿轮【GLSL】

效果图正文首先，我们将获得一个范围 [-1., 1.] 之间的 uv 坐标，即屏幕中心是 (0., 0.) 点然后我们据此计算出每个 uv 坐标到中心点的距离（圆的半径）可视化后的效果如下所示

2年前
796
1
评论

ShaderJoy ——旋转的分层齿轮【GLSL】

ShaderJoy —— 果冻般的弹性 “抖抖抖“ 特效【GLSL】

效果图由于最近工作比较忙，有一段时间没有更新特效专栏了，但是期间也收集了一些挺有意思的特效代码，后续经过整理会陆续加入到专栏里面来和各位读者进行分享~ (　ﾟ∀ﾟ) ﾉ♡ 并且尽量以简单的语言来解释

2年前
1300
5
4

ShaderJoy —— 果冻般的弹性 “抖抖抖“ 特效【GLSL】

ShaderJoy —— 用 Shader 解决没有 VR 眼镜的尴尬

效果图为了展示效果，有请一位我不认识的女演员。。。原视频的播放效果：靠近观众的部分畸变严重，影响观感通过Shader校正后的播放效果【静态图】：相对就正常许多通过Shader校正后的播放效果【动态图】

2年前
587
2
评论