返回顶部
首页 > 资讯 > 移动开发 >OpenGLShader实现物件材料效果详解
  • 863
分享到

OpenGLShader实现物件材料效果详解

2024-04-02 19:04:59 863人浏览 泡泡鱼
摘要

目录需求背景需求实现功能拓展高级实现结果总结需求背景 在一些主流app上有一些比较特殊的滤镜效果,例如灰尘、塑料封面、光影效果等。在此之前一直困惑这类滤镜效果是如何实现的,单纯gls

需求背景

在一些主流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物件材料效果内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: OpenGLShader实现物件材料效果详解

本文链接: https://lsjlt.com/news/140155.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • OpenGLShader实现物件材料效果详解
    目录需求背景需求实现功能拓展高级实现结果总结需求背景 在一些主流app上有一些比较特殊的滤镜效果,例如灰尘、塑料封面、光影效果等。在此之前一直困惑这类滤镜效果是如何实现的,单纯gls...
    99+
    2024-04-02
  • OpenGLShader实现简单转场效果详解
    目录转场介绍渐变转场切换转场x轴切换y轴切换对角线切换位移转场x轴位移y轴位移转场介绍 转场效果常出现再视频剪辑当中,用于衔接两段视频片段切换的过渡效果。转场常常在两个场景切换中去使...
    99+
    2024-04-02
  • 详解OpenGLShader彩虹条纹效果的实现
    目录前言回顾效果实现增加条纹角度变化拓展前言 在一款图片处理软件colorow中发现彩虹效果滤镜感觉蛮有意思。 在OpenGL Shader系列更新到现在尝试通过之前积累的知识点来...
    99+
    2024-04-02
  • 详解OpenGLShader抗锯齿的实现
    目录绘制圆形锯齿问题smoothstep函数介绍抗锯齿实现扩展自制smoothstep函数抗锯齿自制linearstep函数抗锯齿绘制圆形锯齿问题 普通绘制圆形形状时可以看到图形边缘...
    99+
    2024-04-02
  • 基于JavaScript实现游戏购物车效果详解
    目录项目展示登陆界面注册界面主界面项目展示 登陆界面 登陆界面html和js <!DOCTYPE html> <html lang="en"> ...
    99+
    2024-04-02
  • Python实现批量下载音效素材详解
    目录序言环境/模块/目标1、目标2、开发环境3、模块流程讲解全部代码序言 作为当代新青年,应该多少会点短视频制作吧? 哈哈,那当代自媒体创作者好了~ 制作视频的时候,多少需要一些搞...
    99+
    2024-04-02
  • Springboot实例讲解实现专业材料认证管理系统流程
    目录一,项目简介二,环境介绍三,系统展示四,核心代码展示五,项目总结一,项目简介 这是一个基于java的毕业设计项目,毕设课题为springboot框架的知识产权服务平台系统, 是一...
    99+
    2024-04-02
  • vue实现物流时间轴效果
    本文实例为大家分享了vue实现物流时间轴效果的具体代码,供大家参考,具体内容如下 son组件(物流时间轴组件) <template> <div class...
    99+
    2024-04-02
  • javascript如何实现购物车效果
    这篇文章将为大家详细讲解有关javascript如何实现购物车效果,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。javascript实现购物车效果的方法:1...
    99+
    2024-04-02
  • PythonOpenCV实现人物动漫化效果
    目录前言效果展示代码展示前言 前几天玩抖音,发现一个人像动漫化的操作,觉得很好玩儿。我心想:python既然这么强大,是不是也可以使用python程序来实现这样一个操作呢? 哈哈!...
    99+
    2024-04-02
  • 原生JavaScript实现购物车效果
    本文实例为大家分享了JavaScript实现购物车效果的具体代码,供大家参考,具体内容如下 HTML: <!DOCTYPE html> <html>     ...
    99+
    2024-04-02
  • Android实现动画效果详解
    目前Android平台提供了两类动画一类是Tween动画,第二类就是 Frame动画,具体内容介绍请看下文: 一类是Tween动画,就是对场景里的对象不断的进行图像变化来产生动...
    99+
    2022-06-06
    动画 Android
  • Unity使用DoTween实现抛物线效果
    Unity使用DoTween实现抛物线效果,供大家参考,具体内容如下 概要 public partial class EMath { public static Vect...
    99+
    2024-04-02
  • Android实现购物车添加物品的动画效果
    前言:当我们写商城类的项目的时候,一般都会有加入购物车的功能,加入购物车的时候会有一些抛物线动画,最近做到这个功能,借助别人的demo写了一个。 效果: 开发环境:Andro...
    99+
    2022-06-06
    购物车 动画 Android
  • JS实现简单加减购物车效果
    本文实例为大家分享了JS实现简单加减购物车的具体代码,供大家参考,具体内容如下 1.书写input输入框作为加减实现的效果。 2.加减按钮用button按钮来实现 3.利用js控制i...
    99+
    2024-04-02
  • Android自定义控件eBook实现翻书效果实例详解
    本文实例讲述了Android自定义控件eBook实现翻书效果的方法。分享给大家供大家参考,具体如下: 效果图: Book.java文件: package com.book...
    99+
    2022-06-06
    Android
  • Vue商品控件与购物车联动效果怎么实现
    这篇文章给大家分享的是有关Vue商品控件与购物车联动效果怎么实现的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。示例:构建商品控件与购物车联动商品控件商品控件的结构编写 ...
    99+
    2024-04-02
  • 详解Android如何实现阴影效果
    目录实现形式elevationCardView属性shadow属性layer配置文件自定义实现小结实现形式 elevation Material Design提供了View的阴影效果...
    99+
    2024-04-02
  • Android菜单栏DIY实现效果详解
    目录前言实现的效果和思路1. 绘制底部布局2. 添加子view3. 处理事件分发4. 做个动画5. 小结前言 个人打算开发个视频编辑的APP,然后把一些用上的技术总结一下,这次主要是...
    99+
    2024-04-02
  • React中实现keepalive组件缓存效果的方法详解
    目录背景结构代码背景 由于react官方并没有提供缓存组件相关的api(类似vue中的keepalive),在某些场景,会使得页面交互性变的很差,比如在有搜索条件的表格页面,点击某一...
    99+
    2023-01-14
    React keepalive组件缓存效果 React keepalive组件缓存 React keepalive缓存 React keepalive
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作