Photosohp - 实现 2D MetaBall、MetaFont

已于 2022-05-23 11:32:25 修改
阅读量372 收藏 4
点赞数
分类专栏： unity unity-shader DCC 文章标签： photoshop 2D metalball metaball
于 2022-05-21 10:58:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linjf520/article/details/124890253
版权
unity 同时被 3 个专栏收录
249 篇文章 64 订阅
订阅专栏
unity-shader
141 篇文章 35 订阅
订阅专栏
DCC
10 篇文章 4 订阅
订阅专栏

文章目录

效果

MetaFont

请添加图片描述

MetaBall

请添加图片描述

原理

  • 将原来的图像模糊
  • 然后调整色阶

就两步，非常简单，但是效果非常出众

Photoshop 步骤

原图

在这里插入图片描述

模糊

在这里插入图片描述

调整色阶

在这里插入图片描述

原理转换到 Shader

先不着急写 Shader
上面都是 Photoshop 的一些步骤
里面的一些黑箱操作，可能不了解的同学，会一脸懵逼

那么下面我将在 shader 程序代码思路的角度来讲解，便于没接触过 Photoshop 的同学理解

模糊：原图剪影模糊后，边缘都是 淡出的数值 (FadeOut)，边缘值都是平滑的淡出的
相加：然后我们可以通过多个图像的模糊后的 交集部分像素值相加
色阶：然后将这些相加后的值，大于某个指定的阈值时候，就设置为指定的颜色

实时模糊

上面的效果不算太麻烦，有了上面的思路，我们要制作实时的也是可以的

我们可以 实时 将原图实时 方框模糊，或是 高斯模糊算法来处理

然后将得到的结果处理即可

但是这个模糊效果的消耗不低，毕竟需要比较多的纹理采样次数

总结为：原图实时模糊 + 相加 + 色阶

预先模糊

我们可以使用预先使用 Photoshop 模糊后的素材来做 预先模糊好的图 + 相加+色阶 即可

Shader

（shader graph）
（手撸 shader）
（后续补上）

PSD 素材

jave.lin_Metaball_原理.psd - Photoshop 2020 CC - 23.0.0 版本

References

另外，2D metaball 的实现，可以如此简单

其实在 3D 下的也差不多
在 shadertoy 上可以看到 iq 大神的 metavolume 的各种效果
都是使用隐式几何的SDF公式算法来实现的

Jave.Lin
关注
专栏目录
webgl2-2d-metaballs:使用香草WebGL2实现2D Metaball效果的教程
05-27
WebGL2 Metaballs 有关如何使用WebGL2编写2D视觉效果的深入教程的演示。 安装 安装依赖项： npm install 编译代码以进行开发并启动本地服务器： npm run start:dev 创建构建： npm run build 学分 参考和引用来自： 杂项 关注Georgi： ， ， 跟随Codrops： ， ， ， 执照 麻省理工学院 用 :blue_heart: 由Codrops
Metaballs解析与运用(2D元球融合)
最新发布
ufrontend的博客
04-17 688
Metaball（元球）技术是由Blinn于1982年开发一种适用于建立可变形表面的技术。此技术利用Metaball建立能量场，然后通过标量域的等势面来建立3D模型来表现软体或者隐式曲面。简单的说，就是在空间里布置一些Metaball，每个Metaball都有一个能量场，通常用势函数来表示。设空间里均布着无数个点。在其中某一点，它的能量为每个Metaball对它的势的叠加。然后在空间的所有点找出势能相同的点，就得到一个由这些点组成的曲面。
python如何画贝塞尔曲线_初识贝塞尔曲线
weixin_39735509的博客
11-23 567
贝塞尔曲线在CSS动画中和canvas、svg绘图中都是比较重要的一个东西！所以我来好好的小结一下关于它的一些东西。什么是贝塞尔曲线贝塞尔曲线于1962，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算法开发，以稳定数值的方法求出贝兹曲线。贝塞尔...
Android OpenGL ES MetaBall 2D融球效果
01-21
平台：Android 语言：GLSL(OpenGL ES) 算法：MetaBall 效果：2D融球效果
Unity5.6 2D物理引擎Effector
TxNet
11-28 7909
Unity2D-5.6中更新了5个以”Effector”为组成要素的组件，构成2D游戏的效应器组件。使用这些组件在无需编码的情况下可以构建一些特殊游戏效果，例如: 排斥力、吸引力、浮力、方向力、单向通过等。 1.PointEffector2D，模拟2D排斥与吸引效果。2.SurfaceEffector2D，模拟2D物体表面方向力。3.AreaEffector2D，模拟2D物体内部一个方向
Blender基础：融球(Metaball)
热门推荐
开发游戏的老王
09-08 1万+
本文基于Blender 2.8正式版 融球(Metaball)是什么 Metaball直译应该是元球，翻译成融球也是有道理的，看看下面： 因为它们会融 ，而且即使是物体模式下单独Shift + A创建的两个和多个融球离近了也会融到一起。 用线框模式观察一下就更神奇了： 果真是融到一起了，连拓扑结构都在时时发生着变化。 融球是干什么的 在雕刻生物类角色时，有时会用它来起大形，作用有点类似于Z...
Android OpenGL ES实现MetaBall 2D融球效果
soely的博客
01-21 2361
MetaBall算法是一种比较常用的融合的算法，具体的算法原理可以去wikipedia查看详细的说明。 实现的效果图如下： 图片有点失真锯齿，运行在手机的真实效果会好一点。 这里跟MetaBall算法相关的代码主要写在fragment shader里。fragment shader的代码如下： #version 300 es precision mediump float; uni
android 融球效果图,Android OpenGL ES实现MetaBall 2D融球效果
weixin_30871695的博客
05-29 279
MetaBall算法是一种比较常用的融合的算法，具体的算法原理可以去wikipedia查看详细的说明。实现的效果图如下：图片有点失真锯齿，运行在手机的真实效果会好一点。这里跟MetaBall算法相关的代码主要写在fragment shader里。fragment shader的代码如下：#version 300 esprecision mediump float;uniform vec4 uCol...
Metaball（元球）效果学习
weixin_33775572的博客
06-28 685
几年前就在网上曾看见过这种效果，但一直不知道叫什么名字   前一阵无意在9ria(天地会)论坛上看到了一篇专门讲这个的文章：AS3 元球（Metaball），不过有点遗憾的是那篇文章上的代码直接复制下来都不能调试，花了点时间整理了一下，终于调试通过了，贴在这里分享一下： Metaball的公式： 其中，x、y是舞台上的任意一个点，x0、y0是metaball的位置，R为半径。从公式上看...
Unity Shader - ddx/ddy偏导函数测试，实现：锐化、高度图、Flat shading应用、高度生成法线
Jave.Lin 的学习笔记
07-02 1万+
这两条指令用于对指定的**寄存器**，求其值在临近像素上的变化率，因为纹理坐标的梯度可以用来确定纹理当前被缩放的程度，**可用该值来计算Mip层**，另外它也可以用来计算Texel的跨越Size，由此求得正确的过滤宽度，从而纠正通常的线性过滤在远处由于过滤宽度错误而产生的失真。...
unity shader - 圣斗士星矢 人物 shader 还原 - GPA 抓帧提取资源、shader，ROOT权限、救砖、ro.debuggable=1（最终还是RenderDoc无法抓帧）
Jave.Lin 的学习笔记
03-26 1万+
环境 unity : 2018.2.11f1 pipeline : BRP 使用工具 Intel GPA + 模拟器 理论上，只要能在模拟器运行的所有程序的 graphics event / API 都可以抓取 jave.lin : 个人经验：如果有 GPA 抓取无数据的情况，可以尝试更改：graphics api 为：dx / ogl 之间切换，再尝试 GPA 步骤: Graphics Monitor Settings->Auto-detect launch application 设置好.
Unity Shader - URP ShadowCast & ShadowRecieve - 投影 和 接受阴影
Jave.Lin 的学习笔记
10-15 1万+
因为近期需要将之前 Built-in RP 升级到 URP，所以啊，要调整的内容真的是多 其中，在以前自定义 shader 中使用到 阴影的部分，都需要调整一下，使用 URP 自带的 shader API（如果自己写阴影方案，但是又没有 unity 引擎源码，你会遇到一堆问题，例如，你可以看看我之前写的一篇：Unity Shader - Custom Shadow Map (New Version) - 这其中就遇到 LOD 问题、ReplaceShader 功能不够强大的问题） ————————————
Unity Shader - 实现类似镜面反射、水面扰动效果
Jave.Lin 的学习笔记
08-15 1万+
前几天，家里出了一些问题，搞得心情很不好，面试我也取消了。 唉，反正那个伤心啊，不过，昨天处理好了。 所以说啊，家和万事兴。 加油加油！！！ 所以心情好了，我又写博客了。 另外说一下：shader我今年2019.5才开始正式学习。 所以每个shader效果有些实现方法可能不是很好的，欢迎大神多多指点。 进入主题吧： 今天实现：Unity Shader - 实现类似镜面反射、水面扰动效果 Quad ...
Unity Shader - Offset 的测试，解决简单的z-fighting情况
Jave.Lin 的学习笔记
07-04 9865
使用OpenGL Polygon Offset解决简单的z-fighting，复杂的就没办法了，只能使用其他方法，如：模板缓存 其对应Unity中使用的是Shader中的Subshader/Pass Tags中的Offset factors, units 参考ShaderLab: Culling & Depth Testing中的Offset。 z-fighting z-fighting（...
Unity Shader - 使用Noise噪点图生成简单山脉（使用tex2Dlod控制顶点高度）
Jave.Lin 的学习笔记
03-04 9002
之前有一篇：Unity Shader - Noise 噪点图 - 实现简单山脉 偶然在国外的一些Unity学习网站上看到在VS阶段使用tex2Dlod的使用。（我才知道该函数可以在VS使用啊，之前看过很多文档啊，书籍啊，都没有说明这点，真是无语了啊，????） 也可以参考CG的tex2Dlod文档。 这一篇算是在前一篇的优化。 没做啥东西，只是将生产网格的高度控制，不在脚本层处理了，该在了shader中...
Unity Shader PostProcessing - 11 - Depth Fog/Height Fog - 雾效/深度雾效/高度雾/深度+高度雾
Jave.Lin 的学习笔记
04-17 8096
文章目录观察生活中的雾Scenario 1 - Pure Depth Fog - 纯深度雾提取有用信息Scenario 2 - Height Fog - 带高度的雾提取有用信息Scenario 1 & 2 are same - 本质上两种雾都是一样的先看看Unity自带的FogLinear - 线性的Exponential - 指数的Exponential Squared - 指数平方的三...
Unity CommandBuffer或是Camera重定向RenderTarget的ColorBuffer & DepthBuffer
Jave.Lin 的学习笔记
03-19 6674
关键API：_Camera.SetTargetBuffers(colorRT.colorBuffer, depthRT.depthBuffer);或CommandBuffer.SetRenderTarget(RenderTargetIdentifier[] colors, RenderTargetIdentifier depth); 下面我用到的是Camera的API 然后重定向ColorBuff...
Unity Shader - 故障艺术之 - Glitch Art - ImageBlock + Split RGB （区块强度 + 分离通道颜色的故障效果）
Jave.Lin 的学习笔记
06-09 6543
文章目录思路Shader运行效果Back ProjectReferences 参考：- 高品质后处理：十种故障艺术（Glitch Art）算法的总结与实现 - 错位图块故障（Image Block Glitch） Image Block + Split RGB 通道只是其一一种效果 思路 基于前一篇的 Split RGB Glitch： Split RGB 还是比较简单的 现有类似 noise 的 抖动函数 使用 noise 得到的值作为 R, B 通道的偏移采样 那么这一篇就是在 Split RG
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值