OpenGL Shader实现物件材料效果详解

2024-10-20 23:40:26

需求背景

在一些主流app上有一些比较特殊的滤镜效果，例如灰尘、塑料封面、光影效果等。在此之前一直困惑这类滤镜效果是如何实现的，单纯glsl脚本来绘制难度似乎有点大。例如下面截取平台的几种效果像是在图片上方覆盖了一个透明图层。

需求实现

glsl脚本实现其实特别简单，加载两个纹理同时对两个纹理的rgb进行相加即可。

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec4 texture1 = texture(iChannel1,uv);
    vec4 texture2 = texture(iChannel2,uv);
    vec3 rgb = texture1.rgb + texture2.rgb;
    vec4 pixel = vec4(rgb,1.);
    gl_FragColor = pixel;
}

纹理1

纹理2

纹理3

纹理2是一个透明塑封封面，两者rgb叠加即可呈现出最终希望达到的效果。这样的效果似乎比通过脚本模拟更加简易，同时也降低了开发成本。

功能拓展

另外对于素材和图片尺寸的问题是可以通过脚本代码来处理完成。对uv1和uv2进行比例相乘计算处理即可实现图片尺寸缩放操作，此外再通过smoothstep方法和算法控制纹理显示区域大小实现了框中图的效果。

void main()
{
    vec2 uv1 =  gl_FragCoord.xy / iResolution.xy;
    uv1.y = mod(uv1.y, 1.0);
    vec2 uv2 = uv1;

    uv1 -= 0.5;
    uv1 *= 2.;
    uv1 += 0.5;

    uv2 -= 0.5;
    uv2 *= 1.5;
    uv2 += 0.5;

    float l = 0.003;

    float k = smoothstep((1.0 - l), (1.0 - l) + 0.006, uv1.x);
    float k1 = smoothstep(l, l - 0.006, uv1.x);

    float m = smoothstep((1.0 - l), (1.0 - l) + 0.006, uv1.y);
    float m1 = smoothstep(l, l - 0.006, uv1.y);

    float i = smoothstep((1.0 - l), (1.0 - l) + 0.006, uv2.x);
    float i1 = smoothstep(l, l - 0.006, uv2.x);

    float j = smoothstep((1.0 - l), (1.0 - l) + 0.006, uv2.y);
    float j1 = smoothstep(l, l - 0.006, uv2.y);

    vec4 texture1 = texture(iChannel1, uv1)* (1.0 - k) * (1.0 - k1) * (1.0 - m) * (1.0 - m1);
    vec4 texture2 = texture(iChannel3, vec2(uv2.x,uv2.y)) * (1.0 - i) * (1.0 - i1) * (1.0 - j) * (1.0 - j1);
    gl_FragColor = 1.0 - (1.0 - texture1) * (1.0 - texture2);
}

此外还能对素材图片进行替换，从而达到不同效果场景氛围。

高级实现

但不一定所有效果都需要借助于设计师素材来实现，高级玩法其实是可以通过脚本直接实现。例如下面光照效果实际上就是只通过代码模拟来完成的，没有增加外置任何其他素材资源。但是实现成本较高需要了解很多数学模拟公式以及技术背景，而且最终效果也不一定是产品和设计所能满意的。

PS：具体实现是从shaderToy上找到，这里就不分享具体代码了。

结果总结

有感而发在需求实现上原先因为设计希望实现彩虹、光照、物件等在原图之上的滤镜效果，在此调研之前一直觉得技术是可以完成所有任务的。最终通过实践才发现有时候一些捷径实现和更直接简单的方法或许是最终最优解。所以技术和设计还是息息相关，在时间和精力有限的情况下应该借助其他方式快速达成需求目标。

到此这篇关于OpenGL Shader实现物件材料效果详解的文章就介绍到这了,更多相关OpenGL Shader物件材料效果内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

OpenGL Shader实现简单转场效果详解

目录转场介绍渐变转场切换转场 x轴切换 y轴切换对角线切换位移转场 x轴位移 y轴位移转场介绍转场效果常出现再视频剪辑当中,用于衔接两段视频片段切换的过渡效果.转场常常在两个场景切换中去使用达到酷炫特效的作用. 那么如何在glsl中去实现转场效果?其实转场效果可以理解成两个纹理对象切换的过程.首先提前条件需要两个纹理对象,然后在这两个纹理对象上去实现纹理和纹理之间的切换. 渐变转场通过mix函数混合两个纹理图像,使用time在[0,1]之间不停变化来控制第二个图片纹理混合的强弱变
OpenGL Shader实现阴影遮罩效果

目录 smoothstep另一种用法遮罩效果实现效果扩展 smoothstep另一种用法在之前OpenGL Shader-抗锯齿实现文章中所介绍的那样:为了抗锯齿效果可以用smoothstep函数对绘制形状进行平滑过渡来实现.其中也提到了当smoothstep函数中入参a和b范围过大时就会出现渐变效果.如OpenGL Shader-抗锯齿实现中所展示的效果: 遮罩效果实现看到这个效果后似乎可以利用smoothstep函数中a和b入参取大范围来实现不一样的特效能力.例如可以使用该特点来实现
OpenGL Shader实现光照发光体特效

目录内发光原理发光体实现扩展效果小太阳光源移动效果内发光原理内发光原理简单概况是:采样周边像素alpha取平均值叠加效果.概括来说似乎好像特别简单,但需要一定的理解和消化.发光物体可以当做是一个圆形对象,去采集圆形对象周边像素值.例如已知圆形半径是R,角度是Angle,然后根据半径和角度推导算出当前像素坐标位置,用当前像素坐标位置得到透明度再去做计算. 但其实在阴影遮罩效果中似乎已经介绍过了同样能够通过.不同点在于阴影遮盖是利用圆形绘制向外部晕染而内发光效果是作用于内部. 发光体实
详解OpenGL Shader彩虹条纹效果的实现

目录前言回顾效果实现增加条纹角度变化拓展前言在一款图片处理软件colorow中发现彩虹效果滤镜感觉蛮有意思. 在OpenGL Shader系列更新到现在尝试通过之前积累的知识点来自行实现效果. 回顾之前使用过内置函数smoothstep可实现数值过渡效果.如下代码所示实现在坐标0.5分割黑色和白色分界. void main() { vec2 uv = gl_FragCoord.xy / iResolution.xy; vec3 color = vec3(0.); float g
使用OpenGL创建窗口的示例详解

目录效果展示窗口创建并启动渲染循环效果展示窗口创建并启动渲染循环 /* 因为OpenGL只是一个标准/规范,具体的实现是由驱动开发商针对特定显卡实现的. 由于OpenGL驱动版本众多,它大多数函数的位置都无法在编译时确定下来,需要在运行时查询. 所以任务就落在了开发者身上,开发者需要在运行时获取函数地址并将其保存在一个函数指针中供以后使用. GLAD是一个开源的库,它能解决我们上面提到的获取函数地址并将其保存在一个函数指针中供以后使用繁琐的问题 */ #include <glad/gla
OpenGL Shader实现物件材料效果详解

目录需求背景需求实现功能拓展高级实现结果总结需求背景在一些主流app上有一些比较特殊的滤镜效果,例如灰尘.塑料封面.光影效果等.在此之前一直困惑这类滤镜效果是如何实现的,单纯glsl脚本来绘制难度似乎有点大.例如下面截取平台的几种效果像是在图片上方覆盖了一个透明图层. 需求实现 glsl脚本实现其实特别简单,加载两个纹理同时对两个纹理的rgb进行相加即可. void main() { vec2 uv = gl_FragCoord.xy / iResolution.xy; vec4
Android OpenGL仿自如APP裸眼3D效果详解

目录原理简介 & OpenGL 的优势具体实现 1. 绘制静态图片 2. 让图片动起来 3. 几个反直觉的细节 4. 帕金森综合征? 源码原理简介 & OpenGL 的优势裸眼 3D 效果的本质是——将整个图片结构分为 3 层:上层.中层.以及底层.在手机左右上下旋转时,上层和底层的图片呈相反的方向进行移动,中层则不动,在视觉上给人一种 3D 的感觉: 也就是说效果是由以下三张图构成的: 接下来,如何感应手机的旋转状态,并将三层图片进行对应的移动呢?当然是使用设备自身提供各种各样优
Flutter利用Canvas绘制精美表盘效果详解

目录前言初始化面板刻度刻度线刻度值指针时针分针秒针动起来前言趁着周末空闲时间使用 Flutter 的 Canvas制作了一个精美表盘. 最终实现的效果还不错,如下: 前面说到使用 Canvas 实现该表盘效果,而在 Flutter 中使用 Canvas 更多的则是继承 CustomPainter 类实现 paint 方法,然后在 CustomPaint 中使用自定义实现的 CustomPainter. 比如这里创建的 DialPainter 使用如下: @overrid
js实现图片局部放大效果详解

图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积. 如上图,可以看到,这是放大镜的基本效果,主要分成左右两个部分.左边分成一张大图,和一个导航栏,在右边则是一个放大镜放大后的图片.因此,我在画页面的时候,大体的HTMl结构如下: <body> <div class="choose"> <div class="content"> <img src
vue和better-scroll实现列表左右联动效果详解

一.实现思路 (1)实现上是左右分别一个better-scroll列表 (2)利用计算右侧列表每一个大区块的高度来计算左侧的位置二.实现 1.实现左右两个better-scroll (1)dom结构(better-scroll要求,会把最外层dom的第一个子元素作为要滚动的区域) 左边滚动列表dom <div class="menu-wrapper" v-el:menu-wrapper> <ul> <li v-for="item in good
JavaScript实现六种网页图片轮播效果详解

目录 1.当鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 2.动态生成小圆圈 3.点击小圆圈,小圆圈变色 4.点击小圆圈滚动图片 5.点击右侧按钮一次,就让图片滚动一张. 6.点击右侧按钮, 小圆圈跟随变化 7.左侧按钮功能制作 8.自动播放功能在网页中,我们经常会看到各种轮播图的效果,它们到底是怎样实现的呢?今天,我们就一起来看一下!首先,我们需要准备若干张图片,在这里我准备了五张图片. 功能需求: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 点击右侧按钮一次,图片往左播放
JS实现canvas仿ps橡皮擦刮卡效果详解

目录效果演示: 主要JS代码实现 <div class="box" id="bb"> <canvas id="cas" width="1366" height="651"></canvas> </div> <script type="text/javascript" charset="utf-8"> var
Qt自定义Widget实现互斥效果详解

目录前沿功能实现知识点问题讲解知识点1 讲解知识点2 讲解知识点3 总结前沿什么叫做自定义Widget实现互斥效果呢? 在使用Qt做一个界面美观性比较强的功能时,可能会遇到这种问题:多个控件互斥,类似于QRadiButton控件,但又不是单纯的QRadioButton控件,互斥的可能是一个窗口,也可能是几个按钮,等等多种情况. 这里我只是列举了一个简单的互斥例子,虽然简单,但是包含了各种坑,有需要的掘友们可以小笔记们记一下,尤其是对Qt新手来说,还是很有必要的. 由效果图可以看出创
利用Matlab制作环形相册效果详解

目录运行效果完整步骤 1.图片准备及导入 2.为每张图片制作遮罩层 3.调整每张图大小 4.绘图及绘图参数详解完整代码运行效果完整步骤 1.图片准备及导入要制作一款相册足够的图片量是必不可少的,不然整个相册只有一张图来回重复多没意思呀,因此我们需要一个文件夹专门放图片,为了方便导入,这里全部都是jpg格式: 图片导入代码: path='.\album\';%文件夹路径 files=dir(fullfile(path,'*.jpg')); picNum=size(files,1); %