12 潘凌昀

美图网科技有限公司 - 高级软件工程师

我要认证

醉心于研究一些特效(用代码来画画),曾涉猎过图形图像视频处理 、计算机视觉 、增强现实/虚拟现实等技术领域,就职于美图。

等级
TA的排名 1k+

ShaderJoy —— 8 种 Instagram 滤镜 【GLSL】

PS 一步一步制作 LUT3D 滤镜参考地址(戳它)效果图AmaroNashvilleSierra1977BrannanHudson处理后的 LUT3D 基准图AmaroNashvilleSierra1977BrannanHudson完整代码#iChannel0 "file://./image.jpg"// #iCha...

2020-06-29 19:21:47

ShaderJoy —— 三种 USM 锐化算法和实现 【GLSL】

效果图原图weight = 0.30.50.8算法简述(源图像 – weight * 高斯模糊)/(1 - weight), 其中 weight 表示权重 [0.1, 0.9],默认为 0.6完整代码BufferA:#iChannel0 "file://./images/yinkong.jpg"#iUniform float blurSizeA = 0.00195 in {0.0, 0.01}void mainImage( out ...

2020-06-21 18:36:46

ShaderJoy —— MeanShift 算法与实现【GLSL】

算法参考 Trent1985 大佬的博客,由于他只提供了部分代码,而且是纯 C++ 的,所以我将它移植到了 OpenGL 上。实现了基于YCrCb的版本。效果图原图maxIter=10, radius=3, threshold=0.03maxIter=10, radius=4, threshold=0.03maxIter=10, radius=9, threshold=0.03maxIter=10, radius=4, threshold=...

2020-06-20 23:57:40

ShaderJoy —— EPM Blur 算法与实现 【GLSL】

算法参考 Trent1985 大佬的博客,由于他只提供了部分代码,而且是纯 C++ 的,所以我将它移植到了 OpenGL 上。实现的是基于RGB三通道的版本。效果图n=10, delta = 0.0074n=5, delta = 0.0074n=10, delta=0.0226完整代码BufferA:#iChannel0 "file://./images/yinkong.jpg"#iUniform int n = 10 in {1...

2020-06-20 22:18:15

ShaderJoy —— PS Surface Blur(表面模糊) 算法和实现【GLSL】

算法参考 Trent1985 大佬的博客,由于他只提供了部分代码,而且是纯 C++ 的,所以我将它移植到了 OpenGL 上。一共实现了两个版本:基于 RGB 三通道 和 基于 YCrCb 。效果图radius=2, threshold=35radius=2, threshold=19radius=4, threshold=35radius=4, threshold=118算法简述一句话算法:计算 当前像素 的邻域范围内各个像素的加权和...

2020-06-20 15:46:04

ShaderJoy —— PS Smart Blur 算法与实现【GLSL】

效果图:原图radius=3, threshold=24radius=10, threshold=24radius=15, threshold=13算法参考 Trent1985 大佬的博客,由于他只提供了部分代码,而且是纯 C++ 的,所以我将它移植到了 OpenGL 上,并且因为发现了代码上的一个小问题,做了一些小修改。算法简述由于算法很简单,一句话总结 —— 在当前像素邻域范围内查找符合条件(落在阈值范围内)的像素点,并计算像...

2020-06-20 14:04:53

Shader特效——噪声之美,大家一起 “噪” 起来 【GLSL】

本文是学习了CandyCat的博客之后写的一个小结,女神的博客理论写得非常详尽,看完有种如沐春风的感觉。1.若干常见噪声类型先上个效果图:从左到右依次为:1.Perlin噪声,2.FBM叠加的分形噪声,3.对FBM绝对值叠加的分形噪声,4.值噪声,5. Simplex噪声。以下代码是基于ShaderToy的作者Inigo Quilez的demo进行二次修改的,并添加...

2016-08-01 23:51:46

ShaderJoy ——网易面试官不相信的美颜磨皮效果【GLSL】

效果图原图博客原作者的效果我第一阶段的优化结果我第二阶段的优化结果第三阶段的优化正在路上ing ...参考原理和代码原作的博客:https://www.jianshu.com/p/5f860f14f665原作者的代码(修改为了 ShaderToy 格式,并保留了作者的注释):BoxBlur.glsl#iChannel0 "file://./images/yinkong.jpg"// 高斯算子左右偏移值,当偏移值为 5 ...

2020-06-16 12:07:44

ShaderJoy —— 色调分离,饱和度、色阶调整,和色调、对比度的自动调整【GLSL】

原图色调分离色调分离的核心思想,一句话总结,就是将 R, G, B 三个通道 0-255 的色调区间分别强制划分到给定的区间里。效果:代码:#iUniform float STEPS = 2. in {1.0, 80.0} ///< 分成几个色阶#iChannel0 "file://../images/yinkong.jpg"void mainImage( out vec4 fragColor, in vec2 fragCoord ){ ve...

2020-06-15 16:37:10

ShaderJoy —— ❤の霓虹【GLSL】

效果视频ShaderJoy --♡ 的霓虹效果图核心算法解析第一步,我们来看看心形线是怎么绘制的:由于最终的效果是曲线随着时间绕中心进行旋转,所以很自然得会想到极坐标,通过查找心形线的公式,我们选择极坐标形式的公式:其结果如下图所示心形线第二步,有了心形线,我们就可以在它上面选取若干点生成一条 bezier 曲线线段,为了同时显示两条曲线,需要将第二条曲线段和第一条曲线段选取的点的位置进行错开(offset);为了实现曲线运动的效果...

2020-06-14 12:58:02

ShaderJoy —— 烟花爆炸特效【GLSL】

效果图烟花爆炸效果核心算法解析粒子的扩散首先,通过时间 id (取整操作),随机出烟花的爆炸(初始)点位置 p 。然后再针对烟花爆炸出的每个粒子,随机得到它们各自的运动方向。粒子的运动(初始点和下落的终点之间的插值)和时间满足如下函数关系:float pt = 1. - pow(t - 1., 2.);vec2 pos = mix(p, endP, pt);显然,粒子的运动是一个从快到慢的过程,如下图所示。pt 的变化同时还让烟花的...

2020-06-13 11:50:57

ShaderJoy —— 新人所不知道的 GLSL 函数坑

前言前几天在技术群里看到有人吐槽踩了 fract函数的坑,其实这个坑我很早以前也遇到过,不过以前只是写在自己的笔记当中,为了大家少走弯路,不再 “前赴后继” 地踩坑,我决定把这个坑给填上。正文:通常意义上,我们觉得取小数部分,应该产生的是如下的效果,即正数取正数的小数,负数取负数的小数部分。但是 OpenGL的 fract却不按套路出牌(小朋友,你是否有很多问号???)首先我们来看 OpenGL官方文档的说明/// @note/// 返回 x-floor(x)...

2020-06-10 13:10:33

ShaderJoy —— 两种瘦脸+大眼特效【附完整参数】【GLSL】

效果对比图不带人脸特征点原图瘦脸效果图带人脸特征点 原图瘦脸效果图原代码参考自这篇博文,不过很遗憾的是作者并没有提供完整参数,也没有对代码进行解释。所以我在他的基础上进行了补充并且发现了一些问题。完整代码和注释#define MAX_CONTOUR_POINT_COUNT 9#define RED vec3(1., 0., 0.)#define WID...

2020-06-04 14:56:11

Shader 特效 —— 上下 “乐” 动效果【GLSL】

效果图主要设计思路上下分阶首先,对纹理坐标进行缩放和旋转,然后(在核心的 sHairComb 函数中)通过正弦函数(结合细分级别,以第一层为例)生成上下分阶效果。/// 上下分阶状效果float pattern = step(0.0, sin(3.14159 * (peval.x * subdiv)));上升的阶梯然后再通过向下取整函数(结合细分级别)生成从左到右的上升的阶梯效果/// 从左到右上升的阶梯效果peval.x = floor(peval...

2020-05-28 02:56:55

快速排序动态示意【Scratch】

快速排序的核心思想是先设定一个标杆值,然后分别从无序序列的前、后进行双向遍历,从后往前是寻找比标杆值小的值,从前往后是寻找比标杆值大的值,然后调整这两个值和标杆值的位置,确保标杆值左侧的都是比它小的值,而其右侧都是比它大的值。然后下一轮递归——以标杆值作为分界,其左侧和右侧分别再重复上述过程。效果图第一轮,无递归点击随机初始化小猫的颜色,然后点击 “舞台” 对颜色进行快速排序,我这里设置的颜色规则是红>蓝>绿>黄。最上方的小猫是用于存储标杆值的小猫。从后往前...

2020-05-13 11:38:58

选择排序动态示意【Scratch】

选择排序的算法很简单,一句话概括就是每次找到未排序部分(本例为右侧)最小的数,放到已排序序列(本例为左侧)的末尾。效果图点击随机初始化小猫的颜色,然后点击 “舞台” 对颜色进行插入排序,我这里设置的颜色规则是红>蓝>绿>黄。在无序序列中进行查找最小值的过程中该小猫会跳起,当找到最小值时,会将该小猫往下移动。待插入的小猫会保持跳起状态一段时间,这样可以更直观的看出是哪两只小猫在进行比较,以及具体发生交换的位置在哪里。ps: 待插入的小猫左侧是有序序列,右侧...

2020-05-12 17:10:26

插入排序动态示意【Scratch】

插入排序算法其实很简单:就是每次往已经有序的序列中插入一个数,假设第 i 位左边的已经有序,第 i 位右边的为待排序的序列,第 i 位即是当前待插入的数。然后遍历左侧的有序序列,查找合适的插入位置即可。效果图点击随机初始化小猫的颜色,然后点击 “空格” 对颜色进行插入排序,我这里设置的颜色规则是红>蓝>绿>黄。其中进行比较的两只小猫会跳起(待插入的小猫会保持跳起状态一段时间),被调整的序列也会跳起,这样可以更直观的看出是哪两只小猫在进行比较,以及具体插入的位置在哪里。...

2020-05-12 13:56:21

计算图像梯度的优雅写法 【GLSL】

效果图代码如下#iChannel0 "file://./beard.jpg"vec4 getCol(vec2 pos){ vec2 uv = pos / iResolution.xy; vec4 c = texture(iChannel0, uv); return c;}// 灰度float getVal(vec2 pos){ ret...

2020-05-06 00:17:07

冒泡排序动态示意【Scratch】

示意图点击随机初始化小猫的颜色,然后点击 “舞台” 对颜色进行冒泡排序,我这里设置的颜色规则是红>蓝>绿>黄。动态效果如下:代码块和注释角色 * 【一共十个】的代码块:舞台的代码块冒泡排序的代码在舞台代码块中,每完成一次交换都会发送 “Sort” 消息更新角色的颜色。...

2020-05-11 00:58:17

Shader 特效 —— Film Burn (炫光光晕)效果【GLSL】

效果图该特效可以分为以下 5 种效果的融合。大 Blob 的效果没添加随机性的大 Blob 示意图结合代码可知,这其实就是二维sin*cos 的效果。对纹理坐标增加了点随机性并随着 progress 移动后的效果如下增加了随机性的大 Blob 动态示意图【gif 对颜色进行了量化】增加了随机性的大 Blob 静态示意图相应代码...

2020-05-07 13:01:51

查看更多

CSDN身份
  • 博客专家
勋章 我的勋章
  • GitHub
    GitHub
    绑定GitHub第三方账户获取
  • 签到王者
    签到王者
    累计签到获取,不积跬步,无以至千里,继续坚持!
  • 阅读者勋章Lv4
    阅读者勋章Lv4
    授予在CSDN APP累计阅读博文达到90天的你,是你的坚持与努力,使你超越了昨天的自己。
  • 专栏达人
    专栏达人
    授予成功创建个人博客专栏的用户。专栏中添加五篇以上博文即可点亮!撰写博客专栏浓缩技术精华,专栏达人就是你!
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv4
    勤写标兵Lv4
    授予每个自然周发布9篇以上(包括9篇)原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。
  • 学习力
    学习力
    《原力计划【第二季】》第一期主题勋章 ,第一期活动已经结束啦,小伙伴们可以去参加第二期打卡挑战活动获取更多勋章哦。
  • 博客之星-入围
    博客之星-入围
    授予每年博客之星评选结果第21-200名的用户
  • 原力新人
    原力新人
    在《原力计划【第二季】》打卡挑战活动中,成功参与本活动并发布一篇原创文章的博主,即可获得此勋章。