Shader之旅
Action_花粥
OpenGL es技术员 WebGL 熟练工 Vulkan爱好者
展开
-
Shader之旅1:RGB颜色空间转换HSV颜色空间 RGB2HSV算法
书写本文的初衷是为了自我反省记录。如有表达不当,请批评指正首先贴出代码。这段代码是在公司看韩国那边的团队写在shader中的。乍一看非常蒙圈vec3 rgb2hsv(vec3 c) { vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.x...原创 2018-10-29 11:03:51 · 8508 阅读 · 2 评论 -
Shader之旅2:四宫格画面实现
书写本文的初衷是为了自我反省记录。如有表达不当,请批评指正首先贴出shader代码。这段代码是实现相机拍摄画面四宫格的实现。分别传入不同的channel 0 1 2 3。然后将UV进行切割分为四块填入四个channeluniform float selected_ratio;uniform float selected;#include "res/shaders/BlendMod...原创 2018-10-31 12:07:46 · 1306 阅读 · 0 评论 -
Shader之旅3:通道分离+抖动
书写本文的初衷是为了自我反省记录。如有表达不当,请批评指正 抖音上有类似的故障效果的拍摄特效。其实就是利用通道分离,并将画面进行震荡,产生类似的效果。如下效果。这是我写在shader上的效果uniform float time;float rand(float co) { return fract(sin(dot(co,12.9898+78.233)) * 43...原创 2018-12-31 23:27:22 · 1066 阅读 · 0 评论 -
Shader之旅4:outline edge 描边效果
书写本文的初衷是为了自我反省记录。如有表达不当,请批评指正在shadertoy上看到了物体的描边效果,感觉效果不错,拿来学习一下,先贴出代码,然后分析float d;float lookup(vec2 p, float dx, float dy){ vec2 uv = (p.xy + vec2(dx * d, dy * d)) / iResolution.xy; ve...原创 2019-01-14 12:20:22 · 1382 阅读 · 1 评论 -
Shader之旅5:类似抖音闪动放大效果
书写本文的初衷是为了自我反省记录。如有表达不当,请批评指正各种相机上有类似如下效果公司也要做这样的转场效果,GIF太模糊了,凑合看吧,就是画面放大原理很简单,就是首先在底部固定一个UV,然后盖上两层UV,让着上层的UV不断放大,然后和底层的UV mix即可。void mainImage(out vec4 fragcolor,in vec2 fragCoord){ ve...原创 2019-03-05 19:13:12 · 1747 阅读 · 0 评论 -
Shader之旅6:二维画面的UV旋转
书写本文的初衷是为了自我反省记录。如有表达不当,请批评指正首先放上在shadertoy上的效果,右图是未旋转的时候的样子,左图是旋转45°之后,第三个图是因为纵横比不一样,导致了错切void mainImage(out vec4 fragcolor,in vec2 fragCoord){ vec2 uv = fragCoord.xy / iResolution.xy;...原创 2019-03-06 15:39:56 · 1460 阅读 · 0 评论