【shader】模糊与区域清晰效果

最新推荐文章于 2025-12-02 21:41:05 发布

原创

最新推荐文章于 2025-12-02 21:41:05 发布 · 143 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#产品运营 #前端

【shader】模糊与区域清晰效果

背景—— 群里大佬发个有意思的视频刚好有思路写了demo实现一下

shader基础入门的话可以看看这两位大佬的文章

Three.js 进阶之旅：Shader着色器基础图案-旷野之息神庙铁球 🔮 - 掘金 (juejin.cn)

手把手带你入门 Three.js Shader 系列（一） - 掘金 (juejin.cn)

使用的vscode的glsl-canvas插件展示

实现思路拆分视频中功能

背景 + y轴偏移 +鼠标区域不偏移

接下来就是一步步实现

背景的实现示例（用图片就好，有需要也拿过去吧）

ini复制代码#ifdef GL_ES
precision mediump float;
#endif

uniform v

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Cipher_Y

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Unity3D实现Shader开发之径向模糊（实现镜头中间不模糊,四周模糊的效果）

心疼你的一切博客

02-07

6936

径向模糊（Radial Blur）是一种常见的图像特效，在 Unity 开发中常用于模拟聚焦、运动模糊等效果，让图像产生从中心向四周或从四周向中心的模糊渐变。径向模糊的核心思想是基于图像中每个像素点相对于一个指定中心点的距离和方向，对该像素及其周围的像素进行加权平均计算，从而实现模糊效果。距离中心点越远的像素，模糊程度越大；越靠近中心点，模糊程度越小甚至不模糊。博客将会介绍如何实现径向模糊。希望这篇博客对Unity的开发者有所帮助。

【实现100个unity特效之4】Unity ShaderGraph使用教程与各种特效案例（2023/12/1更新）

热门推荐

向宇

06-25

4万+

ShaderGraph是Unity中的一个可视化工具，用于创建和编辑图形着色器。其意义在于简化编写复杂着色器的过程，减少对具体编程语言的依赖，使艺术家和设计师可以更方便地创建各种美术效果。使用ShaderGraph可以通过图形界面设置着色器属性，包括颜色、纹理、光照等，并在视窗预览中即时显示结果，从而快速迭代和调整着色器。使用ShaderGraph需要先安装Unity 2018.1或以上版本，并添加ShaderGraph插件。打开ShaderGraph面板后，可以通过拖放节点并连接它们来创建着色器。

参与评论您还未登录，请先登录后发表或查看评论

Unity Shader-后处理：简单均值模糊

05-23

所谓模糊，也就是不清楚，清晰的图片，各个像素之间会有明显的过渡，而如果各个像素之间的差距不是很大，那么图像就会模糊了，极端一点的情况，当一张图片所有的像素之间颜色都差不多时，那么这张图片也就是一个纯色的图片了。

Unity毛玻璃模糊Shader实战实现

weixin_42608318的博客

09-06

1113

Unity 是当前主流的跨平台游戏开发引擎之一，以其强大的图形渲染能力、灵活的编辑器和广泛的平台支持而闻名。其核心架构包括资源管理、物理系统、音频系统、动画系统以及最重要的图形渲染管线。在 Unity 的渲染流程中，Shader（着色器）扮演着至关重要的角色。Shader 是运行在 GPU 上的小型程序，负责计算每个像素的颜色输出，是实现复杂视觉效果的基础。

学习threejs，使用EffectComposer后期处理组合器（采用RenderPass、ShaderPass渲染通道），实现模糊效果

我哎GIS博客

04-29

1515

本文详细介绍如何基于threejs在三维场景中使用EffectComposer后期处理组合器（采用RenderPass、ShaderPass渲染通道），实现模糊效果，亲测可用。希望能帮助到您。一起学习，加油！加油！

基于unityshader的屏幕模糊处理：

QO_GQ的博客

06-09

908

首先我们都知道，我们所看见的都是摄像机将画面投影到视口纹理上面，也就是一张RenderTexture，四舍五入就是一张图，那么我们就只需要对这张图进行模糊处理就可以了：而模糊处理我们就需要用到对图片像素进行操作，那么用shader最好了：模糊处理算法而我用的是高斯模糊：原理：取当前像素的周围像素进行颜色混合（根据uv坐标偏移拿到对应周围的像素）：而高斯模糊进行的颜色混合比例：从周围像素点取相应比例的颜色进行叠加（也叫滤波器）好了，基本上可以上代码了：首先拿到改像素点在图片上对应的坐标 fl

快速学会ShaderGraph(八):光照与阴影效果优化

分享知识，拥抱变化

09-04

250

本文系统讲解了实时渲染中光照与阴影的优化方法。首先介绍了ShaderGraph中Lighting节点组的使用，包括主光源和环境光的控制，以及如何实现光照强度分层和多光源叠加。其次详细解析了阴影优化的全流程，涵盖Shadow节点使用、引擎参数调节和进阶优化技巧。文章还总结了常见问题的排查方案，如阴影缺失、光照过暗和阴影锯齿等问题。最后提供了性能平衡策略，指导开发者根据不同场景需求合理分配资源，特别针对移动端给出了专项优化建议。全文通过理论讲解结合实践案例，帮助开发者掌握从基础到进阶的光影优化技巧，在保证画面质

UnityShader : 高斯模糊 Gaussian Blur

costfine的专栏

07-20

1万+

通常我们会比较在意图片的清晰度，想要图片越精细，那自然会想到像素要高了，像素的意义就是保存更多的颜色信息，这样图片就能表现更多的细节。相反，要达到模糊效果，自然就是将颜色信息舍弃掉，通过不同的算法，得到的模糊效果也会不一样。普通的模糊算法比较普通的一种，就是将每个像素的颜色，都与周边的颜色靠拢，丢失自己独特的颜色，也就是取自己与周围颜色的平均值，从而达到模糊的效果。

Unity Shader-后处理：径向模糊效果

puppet_master的专栏

02-24

2万+

简介游戏都追求画面感，个人感觉后处理是最能表现画面感的方法之一（虽然比较费）。之前玩了一阵子模糊效果，今天再来看一个模糊效果，径向模糊。这种效果对于画面感的提升非常有帮助，尤其是在快速运动突然加速的一瞬间，或者Boss出场狂吼一声的屏幕效果。于是我第一时间想到了《天涯明月刀》里面轻功飞起来加速的那一瞬间，径向模糊的使用，使轻功加速的画面感一下子就出来了。最近清了玩了快6年的

Unity Shader 实现磨皮效果

博客标题

12-06

3096

最近在做一些UI使用的shader，大部分是对UV进行一些操作，今天看需求文档时发现美术同学的要求里有一项是类似磨皮的效果，本来我也比较好奇这些美颜效果都是怎么做的，所以就趁此机会实验以下。查了一大堆页面后发现可以实现磨皮效果的算法有很多，常用到的有双边滤波器、表面模糊方法、选择性模糊方法等。勉强看明白了双边滤波和表面模糊方法的公式，所以以下就使用这两种方法在Unity中实现下磨皮效果。双边滤...

cocos2dx 模糊效果

12-07

2. 实时模糊：如果游戏需要动态模糊（如跟随角色移动），可以考虑只对移动区域进行局部模糊更新，提高效率。 3. 使用GPU加速：利用Cocos2d-x的GLSL着色器系统，将模糊操作移到GPU上执行，可以显著提升性能。五、...

【产品运营必备】数据分析实战宝典：从入门到精通，驱动业务增长（附相关材料下载）

fengye8600的博客

11-26

431

在产品迭代与运营增长的赛道上，数据分析早已不是“加分项”，而是驱动决策的“核心引擎”。3. 数据+业务=决策：数据是“线索”不是“结论”，比如“用户下单后取消率高”，数据显示“取消原因多为‘配送慢’”，结合业务“近期配送团队人手不足”，才能得出“需增加配送人员”的决策，而非单纯“优化下单页面”。2. 按“核心行为”拆分：统计“完成核心行为的用户留存”与“未完成的用户留存”，比如外卖APP的核心行为是“下单”，若完成下单的用户次日留存60%，未完成的仅10%，说明需引导新用户快速下单；

前端在移动端中的页面切换

2509_93939582的博客

11-28

655

记得加硬件加速，用transform和opacity属性，别动不动改布局属性（比如width或height），那样容易引发重排重绘，卡成幻灯片。不过，SPA也不是万能药，它初次加载可能慢点，得靠代码分割和懒加载来优化——比如把不常用的模块拆开，等用户需要时再加载，这样既省资源又提速。还有，别忘了图片和视频的懒加载：页面切换时，先加载核心内容，图片等可视区域再加载，这样首屏能秒开。另外，内存管理也得注意，SPA容易内存泄漏，切换页面时记得清理事件监听器和定时器，不然用久了手机会变卡。

我用Gemini3pro 造了个手控全息太阳系

乐于分享，共同成长

11-28

191

摘要：作者开发了一个基于Web的沉浸式3D太阳系互动项目，通过Three.js实现逼真的天体渲染，并集成MediaPipe手势识别技术，用户只需摄像头即可用手势控制太阳系模型。核心功能包括：真实轨道和自转动画、UnrealBloomPass辉光特效、左手捏合缩放、右手食指控制旋转。技术栈采用Three.js、MediaPipe Hands和Vite，实现了突破传统输入方式的创新交互体验。项目展示了前端技术与AI视觉结合的潜力，代码已开源供体验。

Vue 通用复选框组互斥 Hooks：兼容 Element Plus + Ant Design Vue

最新发布

a3212768093的博客

12-02

474

本文介绍了一个通用的Vue Hooks useExclusiveCheckbox，用于实现复选框组的互斥选择功能。该Hooks兼容ElementPlus和AntDesignVue两大UI库，主要特点包括：跨UI库兼容、轻量无依赖、灵活配置互斥选项值、全场景适配和类型安全。核心逻辑通过对比新旧选中值数组，自动处理互斥选项与其他选项的切换关系。文章提供了完整代码和使用示例，分别演示了在ElementPlus和AntDesignVue中的实现方式，并解答了常见问题。该方案可显著提升开发效率，适用于各类需要互斥选择

47、【Ubuntu】【Gitlab】拉出内网 Web 服务：Nginx 事件驱动分析（一）

HIT_Weston的博客

12-01

797

本文分析了Python的http.server模块与Nginx在Web服务架构上的本质区别。作者指出http.server仅适用于开发测试，而GitLab等完整Web应用需要Nginx的高性能架构。重点阐述了Nginx的事件驱动模型：通过epoll实现异步非阻塞I/O，单线程可处理上万并发连接，避免了传统多线程的资源消耗。文章还展示了Nginx的C语言伪代码实现逻辑，说明其"不轮询、无阻塞、仅处理活跃连接"的核心机制。最后预告将继续深入分析Nginx配置优化等内容。

前端跨域解决方案

2509_93942660的博客

11-28

575

如果涉及带凭证的请求，比如cookie，还得加Access-Control-Allow-Credentials: true，并且Origin不能是通配符。原理很简单，前端请求发给同域的代理，代理再转发给目标服务器，绕过浏览器限制。比如，你页面里嵌了个第三方iframe，想和它通信，就可以用window.postMessage发消息，对方用message事件接收。JSONP适合老项目，CORS是首选标准，代理在开发时好用，WebSocket专攻实时，postMessage处理iframe问题。

酷秒神马 9.0 版源码系统实测

2501_93715493的博客

11-28

516

核心技术升级诚意满满：播放器搭载 FFmpeg 6.1 内核 + ExoPlayer 2.21.0 双引擎，全面支持 4K HDR 10 + 解码和 Dolby Vision 视觉技术，配合智能码率适配（ABR）算法，能根据网络波动自动切换 2K/4K 画质，50Mbps 带宽下 4K 视频加载延迟低于 800ms，卡顿率直降 50%。新增的 P2P 加速传输模块，让热门影片播放时服务器带宽占用减少 40%，低配服务器也能稳定支撑千人同时在线。注：学习交流专用，使用遇到的问题与本人、分享者无关。

前端路由管理

2509_93941777的博客

11-28

431

这种机制在单页应用（SPA）中特别常见，比如Vue.js或React项目里，用户点击链接时，URL会变，但页面不会整体刷新。这样一来，应用可以更流畅，减少等待时间。记得有一次，我在一个电商项目里用Vue Router做商品详情页的路由，通过动态路由参数传递商品ID，配合axios异步加载数据，页面切换又快又顺。通过动态import()语法，可以把路由组件拆分成独立的chunk，用户访问时才加载，大大提升首屏速度。还有404页面的处理，最好设置一个通配符路由，捕获所有未匹配的路径，避免用户看到空白页。

Unity Shader实现均值模糊后处理效果

此外，根据不同的视觉效果需求，均值模糊也可以与其他滤波器结合使用，例如与高斯模糊结合可以得到更为柔和的视觉效果。 #### 结语总结以上，均值模糊是一种基础但强大的后处理技术，在游戏和多媒体领域中有着...

【shader】模糊与区域清晰效果

【shader】模糊与区域清晰效果

背景—— 群里大佬发个有意思的视频 刚好有思路写了demo实现一下

shader基础入门的话可以看看这两位大佬的文章

使用的vscode的glsl-canvas插件展示

背景—— 群里大佬发个有意思的视频刚好有思路写了demo实现一下