- 博客(812)
- 资源 (41)
- 收藏
- 关注
RSS订阅
原创 ShaderJoy —— 纯 shader 实现立方体的渲染（含线框效果，虚线线框效果），带你了解渲染管线内部细节和原理【GLSL】
效果图动态图静态图立方体的顶点属性数据首先，我们定义基本图元 —— 三角形的数据结构struct Triangle{ /// @note 三角形的三个顶点和 uv 坐标 vec3 a; vec2 aUV; vec3 b; vec2 bUV; vec3 c; vec2 cUV; vec3 n; ///< 法线};因为立方体有 6 个面，8个顶点（包括纹理坐标和法线），一面由 2 个三角形组成，我们可以手动进...
2020-09-08 15:49:15
2528
2
原创 ShaderJoy —— 噪声之美，大家一起 “噪” 起来 【GLSL】
本文是学习了CandyCat的博客之后写的一个小结，女神的博客理论写得非常详尽，看完有种如沐春风的感觉。1.若干常见噪声类型先上个效果图：从左到右依次为：1.Perlin噪声，2.FBM叠加的分形噪声，3.对FBM绝对值叠加的分形噪声，4.值噪声，5. Simplex噪声。以下代码是基于ShaderToy的作者Inigo Quilez的demo进行二次修改的，并添加...
2020-06-19 09:35:49
14726
5
原创 ShaderJoy ——网易面试官不相信的美颜磨皮效果【GLSL】
效果图原图博客原作者的效果我第一阶段的优化结果我第二阶段的优化结果第三阶段的优化正在路上ing ...参考原理和代码原作的博客：https://www.jianshu.com/p/5f860f14f665原作者的代码（修改为了 ShaderToy 格式，并保留了作者的注释）：BoxBlur.glsl#iChannel0 "file://./images/yinkong.jpg"// 高斯算子左右偏移值，当偏移值为 5 ...
2020-06-17 14:21:05
2861
原创 ShaderJoy —— 烟花爆炸特效【GLSL】
效果图烟花爆炸效果核心算法解析粒子的扩散首先，通过时间 id （取整操作），随机出烟花的爆炸（初始）点位置 p 。然后再针对烟花爆炸出的每个粒子，随机得到它们各自的运动方向。粒子的运动（初始点和下落的终点之间的插值）和时间满足如下函数关系：float pt = 1. - pow(t - 1., 2.);vec2 pos = mix(p, endP, pt);显然，粒子的运动是一个从快到慢的过程，如下图所示。pt 的变化同时还让烟花的...
2020-06-13 11:50:57
3093
原创 ShaderJoy —— 新人所不知道的 GLSL 函数坑
前言前几天在技术群里看到有人吐槽踩了 fract函数的坑，其实这个坑我很早以前也遇到过，不过以前只是写在自己的笔记当中，为了大家少走弯路，不再 “前赴后继” 地踩坑，我决定把这个坑给填上。正文：通常意义上，我们觉得取小数部分，应该产生的是如下的效果，即正数取正数的小数，负数取负数的小数部分。但是 OpenGL的 fract却不按套路出牌（小朋友，你是否有很多问号？？？）首先我们来看 OpenGL官方文档的说明/// @note/// 返回 x-floor(x)......
2020-06-10 13:10:33
4036
原创 ShaderJoy —— 两种瘦脸+大眼特效【附完整参数】【GLSL】
效果对比图不带人脸特征点原图瘦脸效果图带人脸特征点 原图瘦脸效果图原代码参考自这篇博文，不过很遗憾的是作者并没有提供完整参数，也没有对代码进行解释。所以我在他的基础上进行了补充并且发现了一些问题。完整代码和注释#define MAX_CONTOUR_POINT_COUNT 9#define RED vec3(1., 0., 0.)#define WID...
2020-06-04 14:56:11
4405
4
原创 ShaderJoy —— Film Burn （炫光光晕）效果【GLSL】
效果图该特效可以分为以下 5 种效果的融合。大 Blob 的效果没添加随机性的大 Blob 示意图结合代码可知，这其实就是二维sin*cos 的效果。对纹理坐标增加了点随机性并随着 progress 移动后的效果如下增加了随机性的大 Blob 动态示意图【gif 对颜色进行了量化】增加了随机性的大 Blob 静态示意图相应代码...
2020-05-07 13:01:51
3508
3
原创 ShaderJoy —— 一些特效作品展示
ShaderJoy －水墨晕染转场ShaderJoy －－ 爱的节奏ShaderJoy －－ Little StarsShaderjoy －－ ∞ neonShaderJoy －－♡の烟花ShaderJoy －－Dancing ♡ShaderJoy －－ ♡の烟花ShaderJoy —— 💗声波纹ShaderJoy－－❤随乐动ShaderJoy ——💗の声纹ShaderJoy —— ❤ 气泡音频特效Shader 特效 —— 基于 OpenGL 的音频可视化（仿 ShaderToy）.mp4ShaderJ
2020-04-26 17:48:32
5552
17
原创 ShaderJoy ——“❤️爱心乱撞 ” 【GLSL】
效果视频Shader 特效 —— “碰撞出 ❤ 的火花”效果图稍加修改的效果-0稍加修改的效果-1代码和详解1.BufferA#iChannel0 "file://./Particles/CollisionBufferA.glsl"/// @note 粒子的总数，注意要和 Collision 一致#define SIZ...
2020-04-11 12:23:55
1782
原创 ShaderJoy ——“❤️ 爱如潮水” 【GLSL】
视频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...
2020-03-20 10:05:59
2515
13
原创 ShaderJoy —— 如何在 ShaderToy 上绘制字符（三种方法）
完整代码及注释//Font liberated from http://paulbourke.net/dataformats/hershey/#include "Drawings/ASCII.glsl"float start_x = 0.36;float start_y = 0.46;float font_size = 0.002;float rect_x = 0.62;float...
2020-03-05 18:07:58
2089
原创 ShaderJoy —— 两种更加自然的 “翻页 ”效果的原理和实现
《Turning Pages of 3D Electronic Books》论文核心算法的解读参考链接：Implementing iBooks page curling using a conical deformation algorithm注意：圆周的中心轴并不是 y 轴s 旋转到 s'，再旋转到 Ts 旋转到 T 的第一步s 旋转到...
2020-02-26 19:26:19
2422
2
翻译 非常方便的 VSCode 的 Shader 插件 —— Shader Toy
Visual Studio Code - Shader Toy这个扩展可以在 VSCode 中查看 GLSL 着色器的 WebGL 实时预览，通过提供 “Show GLSL Preview” 命令可以达到类似于访问 shadertoy.com 的效果。metaballs example要运行该命令，可以打开 “Command Palette” 并输入“ Shader...
2020-02-23 12:47:45
13069
13
原创 ShaderJoy —— “透视投影” 的实现 【GLSL】
效果视频Shader 特效——左右透视投影Shader 特效——上下透视投影更进一步可以实现Shader 特效——立方体透视投影代码和注释：float persp = 0.7; ///< 控制透视的角度#define PI 3.141592653589#define PI_HALF (PI/2.)//#define ANT...
2020-02-15 20:21:22
2281
4
原创 ShaderJoy —— 特效常用的 30 种缓动函数 【C/C++】【GLSL】
效果图：a.Bounce b.Sine c.Expo d.Circ e.Elastic f.Back函数代码：#define PI 3.14159f#define c1 1.70158f#define c2 (c1 * 1.525f) // 2.5949095 #define c3 (c1 + 1.f) // 2.70158#define c4 ...
2020-02-13 15:59:55
2292
原创 ShaderJoy —— “水面波纹消散” 的实现 【GLSL】
视频效果：Shader 特效——水面波纹消散图片效果：原理详解：波纹的数学公式有以为例，取progress = 0.5 后其三维示意图和等高线图如下：z_{x} 示意图完整代码与注释：float amplitude = 100.0;float speed = 50.0;#define PI 3.141592...
2020-02-12 09:43:35
3112
7
原创 ShaderJoy —— “酷炫的 ❤️ Beating” 的实现【GLSL】
效果视频优酷视频链接Shader 特效——酷炫的HeartBeating效果图GIF压缩有画质损失完整代码与注释void mainImage( out vec4 fragColor, in vec2 fragCoord ){ vec2 uv = (2.*fragCoord - iResolution.xy) / iResolution.y;...
2020-02-09 14:37:57
4587
2
原创 ShaderJoy —— “消逝的网格” 的实现 【GLSL】
效果视频直线消逝旋转消逝图片效果代码详解vec2 squares = vec2(10., 10.);vec2 direction = vec2(0., 0.); ///< 网格渐变的方向float smoothness = 1.6;#define PI 3.141592653589#define PI_HALF (PI/2.)#i...
2020-02-07 23:58:14
1826
原创 ShaderJoy —— “随机翻转的网格” 的实现 【GLSL】
视频效果Shader特效——“翻转的网格” 的实现 【GLSL】设计思路详解将特效分为三个阶段首先，我们通过定义一个变量 pause 来把特效分为三个阶段—— [0., pause), [pause, 1.-pause), [1.-pause, 1.]float pause = 0.1;第一个阶段显示的原图混合黑色背景（分隔带，随着时间逐渐消失）的效果，如下所示...
2020-02-04 12:54:07
2099
原创 ShaderJoy —— “圆角五角星的变换” 的实现 【GLSL】
视频效果Shader特效——“圆角五角星的变换” 的实现 【GLSL】图片效果圆角五角星圆角六角星核心代码及思路详解首先，我们通过 将纹理坐标换算为极坐标 ，然后再将取值范围从 [-, ] 变换到 [-1.5, 0.5] 。即，该函数三维视图如下等高线图如下接着，我们将 angle 送入 函数中，并利用 segmen...
2020-02-03 16:46:13
3082
原创 ShaderJoy —— “爱心 ❤️ 转场” 的实现 【GLSL】
效果视频Shader特效——“爱心❤的变换” 的实现 【GLSL】静态效果图❤设计思路与核心代码首先我们将纹理坐标 p 换算为以 center 为中心的坐标系，如下所示float inHeart (vec2 p, vec2 center, float size){ // 奇异值的处理 if (size == 0.0) ...
2020-02-02 18:42:55
2180
2
原创 ShaderJoy —— “圆点消散” 的实现 【GLSL】
视频预览圆点消散特效设计思路首先我们需要把图像分成 N*N 的网格（N 即代码中的 dots），每个网格中的坐标 pos 的取值范围都是 [0.0, 1.0] 的，且每个网格内的中心坐标都是 (0.5, 0.5)。那么我们就可以在网格内部依据像素到中心的距离 distance(pos, grid_center) < r 来绘制出一个圆。接下来的问题是——如何设计网格...
2020-02-02 00:21:38
2198
原创 ShaderJoy —— “变换的五角星” 的实现(两种画法)【GLSL】
效果图静态图动态图图解分析为啥需要旋转 18 °vec2 circlePoint(float ang){ // 调整五个点所构成的边的角度 ang -= PIx2 * 0.05; // 18° 正五角星 return vec2(cos(ang), sin(ang));}// 单位圆上用 5 个点平分 5 个角度...
2020-01-19 23:38:33
3119
原创 ShaderJoy —— “径向畸变”和“反畸变”【GLSL】
效果图：径向畸变反（逆）径向畸变径向畸变，可以简单的总结为：图像中心处的放大倍数大于在边缘处的放大倍数。有两个系数 的多项式径向畸变模型有为如下公式：多项式的径向畸变公式但是有人证明了有更简单的形式来近似它，如下径向畸变的近似公式其中和分别表示 非畸变 和 畸变后 的当前纹理坐标到图像中心（0, 0）距离。是每一...
2020-01-16 02:09:28
3280
5
原创 ShaderJoy —— “羞羞的晃动” 的实现 【GLSL】
效果图原图同向晃动异向晃动由于不可描述的原因，原先的图被禁了。。。只好换上和谐版的图。。。原始算法和代码参考自 Lyman Li大佬，我对代码进行了修改，并对一些算法细节进行补充，以及对代码增加了详细的注释。通过 Bezier 曲线构建封闭区域首先，我们先着眼于妹子的一个胸，它的区域由四条 Bezier 曲线所构成的封闭图形来进行确定。其中四...
2020-01-12 01:34:00
3816
原创 ShaderJoy —— “动态网格”的实现 【GLSL】
效果预览参考自https://blog.youkuaiyun.com/Kennethdroid/article/details/103335598我对代码进行了简化和解析。首先让我们来看一下实际效果：动态网格效果图代码和具体解析上图中区间即 [maxSize, gridSize - maxSize]coord：由于是取模运算 mod，什么 coord 表示任意网...
2020-01-04 16:17:21
1784
2
原创 ShaderJoy —— “Flow based eXtend Difference of Gaussian” 效果 【GLSL】
效果图对比原图不同参数下的效果-0不同参数下的效果-1不同参数下的效果-2不同参数下的效果-3不同参数下的效果-4不同参数下的效果-5如需购买源码请私信（完）...
2019-12-26 18:44:00
1764
原创 ShaderJoy —— “Flow-based Difference-of-Gaussians“ 特效【GLSL】
效果对比图原图基于 ETF 的 FDoG基于各向异性的向量场的 FDoG引言基于流的高斯差分滤波器(FDoG)不同于传统的边缘检测器，它使用一个曲线形状的滤波器内核，以求最大限度地提高线的连续性。构造 ETF（Edge Tangent Field）给定一个输入图像，其中表示一个图像像素，我们首先构造一个光滑、保留特征的边缘流场。...
2019-12-25 19:25:31
2077
原创 ShaderJoy —— “Anistropic Kuwahara” 的实现 【GLSL】
效果对比原图效果图向量场可视化的效果我这里用的是一般的 LIC（因为我觉得这个好看一点 >_-） ，作者使用的是特殊的 LIC（卷积核权重由 dw 和 w 计算得出）dw 和曲线上采样的坐标 (p.x、p.y) 和特征向量（t.x 、t.y）的关系如下图所示引言上文提到过改进的广义 Kuwahara 算法，但是它也存在缺陷——它无法捕获方向特征并会...
2019-12-23 17:34:12
1922
原创 ShaderJoy —— “Generalized Kuwahara” 的实现 【GLSL】
目录引言具体改进代码及详解效果图作者论文方法的效果图只做一次高斯卷积的效果图引言为了克服 Kuwahara 的缺陷，作者又提出了Generalized Kuwahara Filtering，即广义的 Kuwahara 滤波器。将结果定义为子区域平均值的加权和，而不是仅仅选择单个子区域。权重是根据子区域的方差来定义的。这将使得区域边界更加平滑、瑕疵更少。为了...
2019-12-22 17:42:36
1687
原创 ShaderJoy —— “震荡波” 的实现【GLSL】
效果如图：核心原理：设震荡波的参数为 a=10, b=0.8, c=0.2如果我们着眼于某一个时刻 time（time 不变） ，有一段范围 dist 的像素 [time -c, time+c]，即它们处在畸变的范围内，那么令畸变的差值 diff 为 x ，其在该范围的像素上的取值范围为 [-c, c]，则diffPow=diffPow 曲线如图所示...
2019-12-17 17:08:31
2333
2
原创 优化加速的导向滤波（Guided Filter）【CUDA】【OpenCV】
原理可以参看：白马负金羁的《导向滤波(Guided Filter)的解析与实现》 ，写得很清晰透彻我实现的效果如下原图（894*1080，由于笔记本屏幕不够大，截图有截断）单通道的导向滤波1.CPU 版的 Guided Filter 和 Fast Guided Filter （缩放倍数为 2，何凯明大神加了一个 resize 就成了新算法，大神就是大神！） 的耗时（循环 ...
2019-03-15 11:45:04
4339
9
原创 一种基于视神经网络的高动态范围（HDR）图像自适应局部色调映射的实现【OpenCV】【CUDA】
原理是基于这篇论文——《Adaptive Local Tone Mapping Based on Retinex for High Dynamic Range Images》论文提出的背景虽然可以从不同曝光的照片中获得包含真实场景全动态范围的高动态范围 (HDR) 图像，但是普通显示器等低动态范围(LDR)显示设备无法处理场景的全动态范围。LDR 设备只能显示两个数量级的。一旦将 H...
2019-03-11 13:05:21
4335
4
原创 L0 范数图像平滑(L0 Smooth) 的原理和 GPU 加速【CUDA】
一、概述原作者提出了一种新的图像编辑方法，通过增加过渡的陡峭度，同时消除了一个低振幅结构的可管理程度，特别有效地锐化主要边缘。这种看似矛盾的效果是在一个利用 L0 梯度最小化的优化框架中实现的，它可以全局控制产生多少个非零梯度，以一种稀疏控制的方式近似出显著的结构。与其他边缘保持平滑方法不同，原作者的方法不依赖于局部特征，而是全局定位重要的边缘。它作为一种基本的工具，有许多应用场景，尤其有利于...
2019-02-21 21:11:00
5502
原创 分别使用 TensorRT 和 CUDA 加速 MTCNN
Github 现有的 TensorRT 加速的 MTCNN 【PKUZHOU/MTCNN_FaceDetection_TensorRT】不是基于插件的，而是走了使用 scale和 ReLU 、eltwise-sum 层 “曲线救国”的路线——PKUZHOU 认为 PReLU 会破坏 TensorRT 的 CBR 优化，但实际上实现 PReLU 插件以后耗时更少，如图左侧是“曲线救...
2019-02-13 20:15:39
7284
15
原创 L0 范数图像平滑(L0 Smooth) 代码及详细注释 【OpenCV】
原理可以参考原作者的论文以及这位大神写的博客OpenCV 实现话不多说，附上C++代码cv::Mat L0Smoothing(cv::Mat &im8uc3, double lambda = 2e-2, double kappa = 2.0) { // convert the image to double format int row = im8uc3.row...
2016-10-15 20:54:21
9367
8
原创 泊松分布采样 （Poisson-Disk-Sample）代码及详细注释【OpenCV】
算法步骤简述关键代码如下：// 以center为圆心radius为半径的圆环范围内随机产生新的采样点template<unsigned int N, class T>void sample_annulus(T radius, const Vec<N, T> ¢re, unsigned int &seed, Vec<N, T>...
2016-09-23 18:50:11
20175
7
原创 ShaderJoy —— “Canny边缘检测”的实现 【GLSL】
算法参考自：http://blog.sina.com.cn/s/blog_676b40ec0100z2pt.htmlhttp://blog.youkuaiyun.com/xiajun07061225/article/details/6926108在写这篇文章的时候，发现网上关于canny的代码大多是基于C/C++，用GLSL的很少很少，甚至Github上也只有一份错误的实现，所以干脆自己实现...
2016-08-21 11:32:27
5843
3
原创 ShaderJoy —— 如何判别直线是否和二次贝塞尔曲线相交【GLSL】
这段代码通过将贝塞尔曲线和直线的方程设置为相等，并使用二次方程求解交点，实现了对这两者之间交点的检测。它还处理了一些特殊情况，如贝塞尔曲线退化成直线、线段接近垂直等情况，确保算法的鲁棒性和准确性。
2025-01-15 16:13:46
62
原创 ShaderJoy —— 旋转发光的粒子圣诞树
下图是 x 分量应用该函数在两个时刻（0 和 10）的效果图，y 分量也同理。这段代码对最终颜色进行了色调映射，使得颜色更加柔和和平滑。这部分代码初始化了输出颜色，并获取了屏幕分辨率。这部分是该效果的核心，它使用。运算符优先级高于二元。
2025-01-07 14:08:20
62
手把手带你用 Unity 开发游戏（2021）第二版
2022-02-18
网络前端的 shader 视频教程 (3)
2022-02-16
网络前端的 shader 视频教程 (7)
2022-02-16
网络前端的 shader 视频教程 (6)
2022-02-16
网络前端的 shader 视频教程 (5)
2022-02-16
网络前端的 shader 视频教程 (4)
2022-02-16
网络前端的 shader 视频教程 (2)
2022-02-16
网络前端的 shader 视频教程 (1)
2022-02-16
《终极的 Git 课程 —— 与虚幻引擎相结合 》(2)
2022-02-15
《终极的 Git 课程 —— 与虚幻引擎相结合 》(4)
2022-02-15
《终极的 Git 课程 —— 与虚幻引擎相结合 》(3)
2022-02-15
《终极的 Git 课程 —— 与虚幻引擎相结合 》(1)
2022-02-15
Instagram 滤镜 Spark AR视频教程 (3)
2022-02-15
Instagram 滤镜 Spark AR视频教程 (2)
2022-02-15
Instagram 滤镜 Spark AR视频教程 (1)
2022-02-15
上千种实用视频蒙太奇特效制作效果 Montage Library v5.0.rar
2021-09-30
1000 种出入场文字动画效果 Text Library v3.1.rar
2021-09-30
纹理合成 C++ 代码
2020-12-10
matplotlib-cpp 源码.zip
2020-02-06
NoiseVolume.dds
2020-01-15
2D 折线顶点平滑算法
2020-01-14
OpenCV310 Cmake
2016-10-17
编译过的Cartoonifier_Android工程
2013-08-21
精通Android增强现实源码
2013-01-21
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人