您现在的位置是： 首页 > 热门轿车 热门轿车
fractal noise_fractal noise翻译
2024-10-31 15:29:54 41人已围观
简介fractal noise_fractal noise翻译 大家好，今天我想和大家探讨一下“fractal noise”的应用场景。为了让大家更好地理解这个问题，我将相关资料进行了分类，现在就让我们一起来探讨吧。1.我装的AE 7.0版本，为什么缺少Fractal Noise等几个AE应该自带的
大家好，今天我想和大家探讨一下“fractal noise”的应用场景。为了让大家更好地理解这个问题，我将相关资料进行了分类，现在就让我们一起来探讨吧。
1.我装的AE 7.0版本，为什么缺少Fractal Noise等几个AE应该自带的插件？
2.AE怎么制作文字浮现光带特效？AE文字浮现光带特效制作教程
3.求AE Psunami插件
4.SVG滤镜的艺术以及它为什么这么棒
我装的AE 7.0版本，为什么缺少Fractal Noise等几个AE应该自带的插件？
AE 7.0分为STD（标准）和PRO（专业）两个版本，STD版限制了许多功能，使用起来很不方便。不过，AE 7.0的安装程序是不分STD和PRO的（也就是说，STD和PRO的安装程序是一样的），只要我们在安装时，输入了 正确的SN（序列号），就可以安装出AE 7.0的PRO版了（STD版的SN前四位是1064，而PRO版的SN前四位是1063 ）。大部分在、智、点、道、腾讯学的，可看看
AE怎么制作文字浮现光带特效？AE文字浮现光带特效制作教程
最近几年，国风是越来越火热了~很多东西都是涉及到国风的，而今天我们就来分享一个关于国风国风水墨画AE设计教程给大家~帮助大家更好的掌握AE软件的操作以及学会更好的将国风元素融入到设计作品当中去~另外，还为大家提供了很多的AE课程学习，大家千万不要错过了~AE制作中国水墨画效果操作步骤：
1、首先我们需要安装一个Turbulence2D插件！这个插件主要是一款二维流体效果模拟插件~
2、新建合成，命名为中国风，参数设置如下图所示。
3、在中国风的合成中，新建一个固态层，命名为背景，颜色可以随意设置，然后添加EffectGenerateRamp(特效生成渐变)特效，颜色可以设置为从白色到亮灰色RGB(175,175,175)的渐变颜色，渐变类型可以设置为Radial(径向)，固态层可以作为背景。
4、新建一个纯黑色固态层，命名为墨滴，并添加EffectJawsetTurbulence2D特效。
5、新建合成，命名为墨滴_源，参数设置与主合成中国风一致。新建的灰色固态层，颜色设置为RGB(169,169,169)，为其添加一个水滴形状的Mask，并为该层的位移、缩放和不透明属性设置动画，以达到墨滴滴入水的效果。读者不必严格按照上图所示的参数设置。基本规律是先快速下落，然后减慢速度，水滴在下落过程中逐渐增大，先增加不透明度，再降低到0。
6、在前层添加EffectStylizeRoughenEdges(特效风格化腐蚀边缘)特效，为Evolution(变化)设置表达式time*100，其他参数如下图所示。
7、新建合成，命名为噪声，参数设置与主合成中国风相同。为其添加EffectNoise&GrainFractalNoise(特效噪Noise(特效噪声&颗粒不规则噪声)命令，为Evolution设置表达式time*50，其他参数如下图所示。
8、回到主合成中国风，在当前合成中加入合成墨滴_源和噪声，关闭显示。
13、在当前层添加EffectColorcorectionTint(特效色彩校正染色)命令，将颜色设置为RGB(0,54,255)。
14、新建一个合成，命名为Text_中国风，将中的中国风、gif材料添加到当前合成中，调整大小，并添加EffectKeyingExtract(特效抠像抽出)命令中，调整参数，抠出黑色文字。Turbulence2D的Fuel不能是纯黑色，所以在这里调整为灰色。
15、在当前层添加EffectColorcorectionLevels(特效色彩校正色阶)命令，将OutputBlack(输出黑)调整为10。
16、复制当前层，在下图中添加EffecBlur&SharpenFastBlur(特效模糊&锐化快速模糊)命令，将模糊值设置为10图所示。
17、回到主合成中国风，将合成Text_中国风加入当前合成；复制墨滴层，将复制层命名为Text，并重新指定Turbulence2D的缓存位置。
18、将FuelLayer指定为Text_中国风层，其它参数不变。
19、为墨滴层设置淡出动画，具体参数设置:第3秒不透明度为100%，第5秒不透明度为0%；将Text层和Text_中国风层的入口设置为2秒，然后为Text层设置淡入淡出动画。具体参数设置:第2秒不透明度为0%，第3秒不透明度为100%，第5秒不透明度为0%
20、复制Text_中国风层，命名为FinalLogo，将墨滴层的Tint特效复制到Text_中国风层和FinalLogo层，关闭Text_中国风层的显示，并在FinalLogo层中添加EffectSapphireTransionsS_DissolveBubble(特效转场气泡溶解)特效。为DissovePercent(溶解度)设置关键帧，具体参数设置:第2秒为100%，第3秒为10%，第5秒为0%；最后，在当前层添加一个淡入动画。具体参数设置:第2秒为0%，第3秒为20%，第5秒为100%
操作到这里，那么一个带有国风元素的中国水墨画效果就通过AE软件制作出来了，大家也赶紧跟着步骤操作起来吧~最后，学习AE软件，就来~
求AE Psunami插件
AE是一款视频制作软件，适用于从事设计和视频特技的机构。对于视频剪辑、特效剪辑的小伙伴而言，掌握AE是相当重要的！如果只是会简单的剪辑还远远不能满足炫酷视频制作的，所以深入学习AE软件的使用就很有必要了！你是否此时正在烦恼该去哪学、怎么学AE视频剪辑？不用愁，看这里！为你提供一系列连续全面系统的AE视频课程，从最基础的软件功能开始学起，到不同视频特效效果上手操作，感兴趣别错过~AE文字浮现光带特效制作教程：步骤一，新建合成，我建立了一个“简单的文字特效”的720p，10秒的合成(其实--实际用到的只有2、3秒而已啦)步骤二，输入文字“razerdp”步骤三，用遮罩工具画出一个矩形遮罩。步骤四，打开文字选项，为文字添加动画“位置”。我们要利用这个位置动画和遮罩来做一个让文字浮现的效果。步骤五，对位置动画进行k帧，在一秒处(让文字迟点浮现)调整数据，使文字处于遮罩下方，在5秒处，归0，让文字回到遮罩处。这样就有一个文字浮现的动画了。然后稍微调整一下遮罩的羽化值，数值大概16像素即可。步骤六，做文字的倒影。首先复制一个文字层(快捷键ctrl+d)，并放到原文字层的下方，然后右键→变换→垂直方向翻转。然后打开两个图层的3d开关，对阴影部分做一下位置的调整(我已经将进行变换的图层重命名为“阴影”了)具体做法：1)选中“阴影”图层，按r调出旋转属性，旋转x轴，大概-40°，使得阴影倾斜，有倒影的样子。2)拖动时间轴，使的遮罩层中刚刚好出现文字(当然，如果没有遮罩羽化的话就更加容易调节)，然后移动你的阴影图层，使两个图层浮现部分衔接。做出的最终效果应该是这样的步骤七，对阴影优化一下，为“阴影”图层添加特效“快速模糊”(fastblur)，给予一定的模糊量，大概15左右就ok了。然后选中“阴影”图层，按t调出透明度，调节透明度到55%左右。最后优化一下文字，添加“辉光”(glow)效果。得到图中的最终效果。至此，文字部分的效果已经完成。下面的就是做背景了。步骤八，新建固态层，命名为“粒子”，添加特效“cc粒子仿真系统2”(ccparticlesystemsii),由于数据较多，调节的数据已经在图中圈示。说明：衰弱球状对应的英文是：weakspherical得到图中效果，步骤九，新建固态层并命名为“of”，添加opicalflares特效，将两个文字层顶置，我们可以清晰的看到，of的本身效果是这样的可这不是我们想要的，于是我们可以打开of的选项于是来到了这个新的选项框。这里有很多预置，当然，我们可以利用这些预置做的我们想要的灯光，但今天的教程很简单，只需要一种预置，我们把本身的光效统统删除。删掉之后，就一片空白了，这时我们就可以添加我们的预置添加之后，就改变灯光颜色，大概是**偏红一点就ok了然后调节一下亮度和光线强度。最后点击右上方的ok应用到合成中。步骤十，修改插件数据，位置神马的大家可以自行设置，放到顶端就ok了，这里最重要的是这两个数据。说明，rotationoffset,，修改这里只是为了让灯光旋转到自己喜欢的那一部分至于演变(evolution)，只是写入表达式timi*30，让其自动演变至此，粒子和灯光效果已经完成。接下来做那个条形的杂波彩条了。步骤十一，新建固态层，分辨率为1280*250，命名为“杂波yellow”为了系统不卡，我为杂波图层独奏，添加特效“分形杂波”(fractalnoise)，打开变换选项，取消掉“统一缩放”的按钮，修改数据如图。然后为演变k帧，同时也为透明度k帧，使得杂波彩条最后消失。步骤十二，添加特效“贝塞尔弯曲”(besselbending)，调节锚点，直到自己喜欢的样子。步骤十三，添加特效“色相位/饱和度”(huebit/saturation)，勾选彩色化，并调节色调和饱和度(调节色调可以调出自己喜欢的所有颜色，这也是ak常说的“着色”)，这里我截图的时候是调成了蓝色，并没有调成**。步骤十四，添加特效“辉光”(glow)，修改一下半径即可最后为杂波的旋转属性k帧，就得到图中的效果步骤十五，复制当前图层，重命名为杂波yellow(把刚才那个改名为杂波blue)，然后将两个图层的层模式设置为添加或者屏幕，修改一下弯曲特效的值，并且修改色相位中色调的值，使得两个层颜色和位置不一样。然后调整两个彩条的位置，得到图中效果由于ae的计算，可见蓝黄两色的交界处是变成了绿色，这个很好看，当然，这也是为什么我选择了这两个跟背景如此不搭边的颜色的原因。大家可以将粒子的颜色改为相近的颜色，看起来就顺眼多了。最后，添加摄像机动画。最终效果图：以上就是我们羽兔为各位提供到的“AE怎么制作文字浮现光带特效？AE文字浮现光带特效制作教程”精彩分享了，怎么样？对你的AE学习是否有帮助呢？如果你觉得图文教程学的不是那么详细、不是那么容易理解，就来选择视频教学吧！点击链接：
SVG滤镜的艺术以及它为什么这么棒
我不知道你要那个插件
AE的插件多如牛毛
我只能给你名字了
你自己网上找吧
3dlighting 2(3D灯光，带色浮雕，酷）
agedfilm 2（老**2，酷）
bulgix 2（程序自带）
chaoticonoise 2（RGB杂色）
chaoticrainbow 2（与上一个同）
colorspotlights 2（RGB色散灯光，酷）
earthquake 2（地震，酷）
electrofield 2（二维彩虹扩散）
flitter 2（与程序自带Scatter同）
fractalnoise 2（RGB杂色）
infinitywarp 2（快速万花筒，酷）
infinityzone 2（分形图像，酷）
interferix 2（万花筒）
interpheron 2（万花筒）
lightzoom 2（光线缩放，酷）
noiseblender 2（RGB杂色）
soapfilm 2（RGB杂色）
spotlights 2（聚灯光，酷）
strangenedbulae 2（飞动星云，差，渲染慢）
tilos 2（差于程序自带）
turbuletflow 2（波动，差于程序自带）
videolook 2（模拟电视机像素块，好）
warpoid 2（波动）
whirlix 2（差于程序自带）
woodmaker 2（RGB杂色）
DigiEffects berserk:
blizzard（雪景，酷）
bumpmasker（不可用常死机）
contourist（调整色块化，好）
crystallizer（晶格化）
cyclowarp（水波纹，差于程序自带）
edgex（带色阀值工具，好）
DigiEffects cinelook filmres:
DE cinelook（调整胶片工具，巨酷）
DE filmdamage（老**3，巨酷）
zbigforilluminaire(keying)（其实就是digieffects cinelook中的 zbigforilluminaire keying，抠像工具，不好用）
soft(PS 滤镜，用于 cinelook filmres)
DigiEeeects工具特点在于修改图像像素，改正CG为**胶片工具尤佳。
RE Vision Plugins: ReelSmart Motion blur(模拟真实运动模糊，巨酷)
新版需安装，注册后复制即用
Video Gogh(vidoe油、水、粉效果，酷)
ReelSmart
twixtor
Eye Candy of AE烟雾火焰内外倒角，经典21效果，但效果并不突出）
Knoll Lens pro:（模拟光线，巨酷,99版,不如Knoll Lighting Factory全面）
Knoll Lighting Factory:Lfez（内置30种光线，巨酷）
Lfle（模拟太阳光，酷）
Light Factory（即Knoll Lens pro,2000版,酷）
Light Factory Spertacular（与上一个同）
Boris of AE (分为99、98版，99版需破解。效果多为AE程序的原效果扩展，效果非常专业，参数太多，操作性差。共10大类，选用较佳。
blur&sharpen类：
blur（可实现系统无法实现的个别模糊）
directonal blur（可形成特殊的多重模糊，酷）
gaussian blur（可实现系统无法实现的个别模糊）
unsharp mask（能与PHOTOSHOP中同名工具相比）
此类工具强化系统，可选用。
color类:此类10工具，较同类系统或同名滤镜功能上更强，能多通道多色域工作，操作性不佳。
distortion类:以wave,ripple两类水波工具最好，酷。
keys&matter类:9类抠像工具
light类:alpha spotlight（ALPHA通道探照灯，酷）
edge lighting（照亮素材边缘、ALPHA、浮雕效果，酷）
light sweep（光线扫过，酷）
reverse spotlight（反向探照灯）
spotlight（探照灯）
此类并不比DIGIEFFECTS工具好，操作性差。
particles类:粒子工具2类并不突出。
Perspective类：
Cube（使素材于立方体6个面上，3D空间旋转，酷）
Cylider（使素材于圆筒上，3D空间旋转，酷）
DVE（类于系统BASIC 3D工具，更强大，酷）
Page Turn（最真实翻页工具，酷）
Sphere（使素材于球体面上，3D空间旋转，酷）
BORIS工具中最好的DVE工具。
Render类：
Clouds（云工具，酷）
noise map（此工具AE5中已有）
StylizeE类：此类5工具并不突出，除 boris scatterize（比系统或其他同名scatter都好，酷）。
text类:此类工具固好，但不支持中文。
Final FX Complete for AE：总的效果不如BORIS，但易用性强。Fecmenus98版，Fecplain97版，分别为FE(final effects）、NE（next effects）、SE（studio effects）。其中FE（final effects）即premiere中FE（final effects）相同但更强大。
SE:
AlphaMap（？）
Bender（弯曲）
blobbylize（光线）
burnfilm（火烧Film，酷）
Glass（玻璃浮雕）
GlassWipe（玻璃WELL过渡，酷）
GlueGun（玻璃圆钮过渡，酷）
GridWipe（网格过渡，酷）
Jaws（锯齿过渡，酷）
LightWipe（强光过渡，酷）
MR Mercury（水银变形，酷）
Prticle Worhd （粒子运动场，类程序自带,简单易用）
Ripple Pulse（？）
Smear（运动Smear，不如系统自带，渲染快）
Split2（过渡，裂开，酷）
Spotlight（探照灯，不如BORIS，渲染快）
TimeBlend（不如程序自带Time工具）
TimeBlendX（不如程序自带Time工具）
Toner（调色为某调，酷）
NE:
Advanced 3d（3D空间，酷，类系统自带）
Bendit(弯曲DVE)
Cylineder(类于BORIS同名工具Cylineder)
Drizzle(水泡，酷)
Force MotionBlur(不如REEL同名工具)
Hair(茸毛，不好，慢)
Light Rays(光线映射工具，酷)
Mr Smoothie(像素映射运动，不好)
Power Pin(Pin四角工具，类系统自带Pin)
Repe Tile(Tile工具，中心映射四周，不好)
Simple Wire Removal（在2位置中模糊，酷）
Wide Time（时间工具，类系统自带）
FE:
Ball Action(小球，酷)
Bubbles(复制素材为泡沫并飞动，酷)
Color Offect(移位RGB)
Composite(层叠加模式，类系统自带)
Flo Motion(万花筒)
Griddler(方格过渡，酷)
Image Wipe(亮度过渡，类系统自带)
Kaleide(万花筒)
Lens(鱼眼镜头，不如Pan Lens flare pro)
Light Sweep(光线扫过，酷，与BORIS同名工具略差)
Light Burts2(光线缩放，酷，与DigiEffects同名工具各有特色)
Page Turn(翻页过渡，酷，差于BORIS同名工具Page Turn)
Particle systems(粒子工具，将素材变为各类粒子，酷)
Particle systemsII(粒子工具，不如类系统自带)
Particle systemsLE(粒子工具，不如类系统自带)
Pixel Polly(爆炸，不如类系统自带)
Radial Scale Wipe(圆孔过渡，酷)
Rain(雨，酷)
Scale Wipe(拉动过渡，酷)
Scatterize(散发过渡，类系统自带Scatterize)
Slant(翻转工具，不好)
Slant Matte(翻转工具，不好)
Snow(雪，酷)
Sphere(球面镜，类于BORIS同名工具Sphere）
Star Burst(粒子工具，将素材变为星点，酷)
Thres Hold(阀值工具，酷)
Thres Hold RGB(阀值RGB，酷)
Tiler(多画面，不好)
Twister(沙漏过渡，不好)
Atomic Power Psunami：（制作水工具至好的，巨酷，多种模板。安装较烦，但效果与真实无二，渲染最慢。与pan fire 3.0为同类。）
Pan Lens flare pro(安装、复制都可，各种透镜效果)
注册号：fuhrley
SiEGE-B0nG
413098
PAN Scale(可以放大像素2-10倍，酷）
PAN Custom Lense(正圆透镜)
PAN Diamond(钻石)
PAN Droplet(水滴)
PAN Ellips Lens(椭圆)
PAN Quad Lens(方形)
PAN Scale(放大像素2-10倍，清楚，酷）
PAN SpeclGlass（与程序自带Scatter同）
PAN SterLensPro(星形)
PAN Tor Leanse(块状)
Panopticum Tools for After Effects v.1.0
serial: PTA-6660999-666
安装复制（要注册号）均可。
camera noise远镜头杂点
specl分散杂点
custom speed调整运动速度，特殊,有AE的time remapping之功能
echo调整运动速度，特殊,有AE的echo之功能
emboss雕刻，臭
NULL strob调整运动速度,使重影
strip过渡工具，帘状
photo expostion运动物体加快至消失，特殊
panopticum fire 3.0
serial#: PF3-77140003-518
制火工具至好的，多种模板，安装复制（要注册号）均可。
PANOPTICUM ARRAY 1.5 for AFTER EFFECTS
serial: PAE 6660999 1111
粒子工具，特殊而好。复制（要注册号）安装均可。
PANOPTICUM ENGRAVER V1.0 FOR AFTER EFFECTS
serial: PGE 12679 TNT
雕刻工具，多没有新意。
Panopticum AnimaText v1.0 for AFTER EFFECTS
制作爬行文本，真是不错，可是不支持中文！
不支持AE5.0，只能支持4.0，不然非法操作！
PANOPTICUM RICH TYPING V1.3 FOR AFTER EFFECTS
serial : RTA-14846-TRIN
制作爬行文本，真是不错，可是不支持中文！
Ultimatte 2
Ultimatte:抠像工具，酷
grain killer:抠像工具，酷
screen correction:抠像工具
下列滤镜带是至酷的，也算定个定级：）
DigiEffects berserk 1.5 NT(1998.3)
Blizzard:雪，FE中工具相似，
BumpMasker:不可用常死机 Contourist:使画面为符号色块化，
Crystallizer: PS中的晶格化 CycloWarp:波纹化，AE程序自带 Edgex:RGB色块化工具，
FogBank:雾，须定关键帧，
GravityWell:星空，
Laster:光电射击，
NewSprint:单色调打印
NightBloom:MEDIA效果，不可用
OilPaint:油画
Pearls:液态气泡、细胞运动，
Perspectron:拉动画面4角使其变形，比warpoid 2好，
Ripploid:波纹幻觉，
Spintron:TWIRL过渡
Squisher:波纹过渡
StarField:粒子，
StillNoise:色点
VanGounghist:凡高画笔，多种笔触
VIZHARM:原子曲线 20种效果，粒子、星空、雪、雾、凡高笔、气泡自然现象最
Digieffects Delerium 1.1(2000.5)
DE Bubbles:泡沫
DE Camera Shake:镜头摇动
DE Channel Delay:RGB通道移位
DE COP Blur:设定位置模糊
DE Electrical Arcs:闪电，某些设定会死机
DE Fairy Dust：星光闪烁
DE Film Flash：照亮胶片
DE Fire：火焰
DE FireWorks：激光射击
DE Flicker and Strobe：设定胶片明暗闪动
DE Flow Motion：自动扭曲画面
DE Fog Factory：雾
DE Framing Gradients：电视屏幕
DE Glower：发光
DE Grayscaler：变为灰度图
DE HLS Displace：HLS色位移
DE Hyper Harmoninizer：原子曲线
DE Lens Flares：自然光线
DE Loose Sprockets：胶片自然抖动
DE Multigraient：彩虹过渡，某些设定会死机
DE Muzzle Flash：枪炮发射的烟火
DE Nexus：线性光幕
DE Puffy Coulds：乌云
DE Rain Fall：雨
DE Retinal Bloom：胶片亮区粒子运动
DE Schematic Grids：光线栅格
DE Show Channels：显示某通道百分比
DE Sketchist：添加腐蚀痕迹
DE Smoke：烟
DE Snow Storm：雪
DE Solarize：曝光为黑白负片
DE Sparks：火星、焰花
DE Specular Lighting：模拟光线彩色浮雕
DE Thermogragh：热感仪效果
DE Turbulent Noise：杂色map
DE Video Malfunction：视频故障
DE Visual Harmonizer：原子曲线，某些设定会死机
DE Wave Displace：波形变形 45种效果，达91M，可创建38种自然现象，酷！自然现象最多也是较好的一组滤镜。 其中7种TILT滤镜：camera\flight\fobj\plight\slight\sobj\vobj为MAC专用，用于导入QuickDraw3D文件，在2D环境 处理3D格式。可惜不能用于WIN环境。
DigiEffects cinelook filmres 1.1(1998.3)
DE cinelook:使CG图形变成**胶片，内置模板。
DE filmdamage:使胶片损坏、弄脏，老**化。 这2个滤镜，可惜无论如何不能使用模板，太可惜了，D版？
DigiEffects cinemotion 1.1(2000.7)
AdaptiveNoise:使胶片平滑区出现杂色工具
BandingReducer:平滑胶片有颜色的条纹工具
FilmMotion:使30帧录像带转成24帧**胶片专用工具
GrainReducer:减少胶片颗粒工具
InterlaceAliasing:减少录像带交错闪烁而垂直模糊
LetterBox:宽银幕格式在视频上显示工具
SelectiveHSBNoise:精细调整HSB杂色工具
SelectiveHSBPosterize:减少HSB色过度工具
SelectiveRGBNoise:精细调整RGB杂色工具
SelectiveRGBPosterize:减少RGB色过度工具 是DigiEffects cinelook filmres 1.1(1998.3)有力补充。
DigiEeeects Aurorix 2: (1997.12)
3dlighting 2：模拟光线彩色浮雕，
agedfilm 2：老**2，
bulgix 2：AE程序自带bulgix chaoticonoise 2：RGB杂色
chaoticrainbow 2：与上一个同
colorspotlights 2：RGB色散灯光，
earthquake 2：画面地震，
electrofield 2：二维彩虹扩散
flitter 2：AE程序自带
Scatter fractalnoise 2：RGB虹状杂色
infinitywarp 2：快速扩散虹状
infinityzone 2：RGB虹状杂色
interferix 2：复杂RGB扩散虹状
interpheroid:简单RGB扩散虹状
interpheron 2：RGB扩散虹状
lightzoom 2：光线缩放，
noiseblender 2：RGB杂色
soapfilm 2：RGB杂色波动
spotlights 2：聚灯光，
strangenedbulae 2：飞动星云
tilos 2：AE程序自带 turbuletflow 2：波动，
AE程序自带 videolook 2：模拟电视扫描线，
warpoid 2：拉动画面部分像素使其变形，
whirlix 2：AE程序自带
经过近20年的发展，如今的网页排版，以其高密度的显示以及OpenType功能的支持，离现实世界的印刷排版仅是一步之遥。但是平面设计还是有一个领域，我们还在不断地fall back到使用位图，而不是使用单纯的文本：字体显示，如说明性的、绚丽的、戏剧性的、俏皮的、试验性的或料想不到的艺术字母。
在HTML中显示文本的案例
我们可以从成千上万的Web字体中挑选，还可以为它们添加CSS效果，一些具有广泛浏览器支持（如投影和三维变换），一些可能是更试验性的（如 background-clip 背景裁剪和 text-stroke 文本描边），但这都是基本的。如果我们希望能够在我们的网站上显示真正优秀的字体，我们通常会选择把它作为图像嵌入。
在Web上使用图像的缺点是显而易见的：文件的大小，对于经常改变的或用户生成的内容缺乏可行性，可访问性，以及时间损耗等等。
所以如果我们能够为字母编辑样式，就像我们经常使用CSS修饰文本那样，岂不是很棒吗？为多个边界应用不同的颜色？添加内斜面、外斜面？添加图案、纹理和3D效果？给它一个通用的样式？使用多种颜色还有扭曲样式？给它一个繁琐的样式？
复杂的SVG滤镜：CSS
这其中的大部分都是已经可以实现的：关键是要释放SVG滤镜的魔力。SVG滤镜（包括CSS滤镜）通常被认为是一种通过模糊效果或颜色处理来处理位图的方式。但它们其实不只是这样。像CSS规则，SVG滤镜可以是一组添加在传统文本顶部的可视化图层。有了CSS的 filter 属性，这些效果可以在SVG之外使用，然后直接应用到HTML内容上。
说到CSS和SVG中的滤镜可能有一点疑问：SVG滤镜可用一个SVG filter 元素定义，而且可以在SVG文件中应用。CSS滤镜可以通过 filter 属性应用于任何HTML元素上。CSS滤镜如 blur , contrast 和 hue-rotate ，都是预定义的快捷方式，也是常用的SVG滤镜效果。除此之外， 规范 还允许我们引用SVG文件中用户自定义的滤镜。还有一点困惑的是专有的 -ms- filter 标签，在IE9中已经被废弃，在IE10发布时就已经被删除。
本文主要涉及的是第一种情况：嵌入在HTML页面中的SVG文件中使用的滤镜，但后面我们会试着把SVG滤镜应用于HTML内容。
这篇文章中的插图都是SVG滤镜效果应用于文本的示例。点击可查看原文（在现代支持SVG的浏览器中查看）。我把他们称为“复杂的”SVG过滤器，因为实际上这些滤镜是多种效果的组合，然后结合到一个输出的。尽管字母的外观已经有了显著的改变，实际上文本仍然是可抓取并且可获得的，可以选中并复制。因为SVG滤镜在所有的现代浏览器中都是支持的，这些效果可以在IE10以上的浏览器中显示。
理解SVG滤镜是有一定挑战性的。即使是像投影这样简单的效果都需要复杂并且详细的语法。一些滤镜，如 feColorMatrix 和 feComposite ，没有对数学和色彩理论有一个透彻的理解的话是很难掌握的。本文不是一篇学习SVG滤镜的教程。相反，我将介绍一组标准 构建模块 ，来完成一些效果，我会用尽量少的解释，重点在于记录完成这些效果的各个步骤。你看到的主要是关于如何完成，对于那些想要了解为什么的人，我在这篇文章的结尾处放了一个阅读列表。
构建滤镜
下面是一张复杂的SVG滤镜的构建图。滤镜输出的是风化的文本效果，我们将使用它作为示例，一步一步演练：
让我们把这个效果分解成几个部分：
绿色文字
红色投影
文字和投影使用一个透明间隙隔开
文字带有grungy和风化效果
我们的SVG滤镜是通过组合多个小模块构建而成的，也称为“滤镜原语”。每个模块都是由一组或更多原语构建而成的，然后再组合成统一的输出结果。下边的可以帮助你理解：
构建复杂滤镜的处理步骤，最好的说明图
添加滤镜
我们从一个包含空滤镜和文本的模板SVG文件开始：
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
.filtered{
filter: url(#myfilter);
…
}
]]>
</style>
<filter id="myfilter">
<!-- filter stuff happening here -->
</filter>
</defs>
<g class="filtered">
<text x="0" y="200" transform="rotate(-12)">Petrol</text>
</g>
</svg>
滤镜元素
我们从 filter 标签元素开始，在其开始和结束标签中间，我们可以放置变换、颜色、位图操作等等所有规则。滤镜可以作为目标元素的属性应用，也可以通过CSS应用。目标元素通常是SVG中的元素，但是后边我们将了解另一个有趣的选择：把SVG滤镜应用于HTML元素。
几个用来控制 filter 元素的属性：
x 和 y 位置（默认 -10% ）；
width 和 height （默认 120% ）；
id 属性，对于后边的引用是必需的；
filterRes ，预定义解决方案（在“Filter Effects Module Level 1”规范中不建议使用）；
相对单位（默认 objectBoundingBox ）或绝对单位（默认 userSpaceOnUse） filterUnits 。
关于滤镜原语
正如我们已经知道的，滤镜原语是SVG滤镜的组成部分。任何一种效果，都至少包含一个原语。一个原语通常包含一个或两个输入（ in ， in2 ），以及一个输出（result ）。原语输入包括模糊、移动、填充、结合或扭曲等等。
该规范允许我们采用滤镜元素的几个属性作为输入源。因为大多数的属性都不能跨浏览器运行，在这篇文章中我们会采用 SourceGraphic （未添加滤镜的元素，有颜色、描边、图案填充等等）和 SourceAlpha （alpha通道的不透明区域——即原图中填充黑色的部分），这两者都有非常好的浏览器支持。
如何加厚输入文本
我们要了解的第一个滤镜原语是 feMorphology ，一个用于把输入加厚(operator="dilate" )或变薄( operator="erode" )的原语——因此，非常适合用来创建轮廓和边界。
这是我们如何将 SourceAlpha 增粗4个像素：
增粗了4个像素的图
<feMorphology operator="dilate" radius="4" in="SourceAlpha" result="BEVEL_10" />
创建投影
下一步骤是在上一个原语的基础上创建一个3D的投影，结合 feConvolveMatrix。这个滤镜原语是最强大也最难以掌握的一个。它主要是帮助你创建自己的滤镜。总之，你会定义一个会根据其相邻像素的值变化的像素栅格（一个内核矩阵）。这样一来，你就可以创建自己的滤镜效果，如模糊、锐化滤镜，或投影。
这是 feConvolveMatrix 创建的一个 45deg 、 3px 的深度投影。 order 属性定义 width 和 height ，这样原语才知道是应用 3x3 的矩阵，还是 9x1 的矩阵：
使用 feConvolveMatrix 创建增粗的投影输入
<feConvolveMatrix order="3,3" kernelMatrix=
"1 0 0
0 1 0
0 0 1" in="BEVEL_10" result="BEVEL_20" />
考虑到IE11和Microsoft Edge无法处理大于 8x8 的矩阵，它们也无法很好地处理复杂矩阵，所以在部署这段代码之前先删除所有回车最好。
该原语同样可以应用于左、上、右、下各个方向。因为我们希望投影是往右下方的，我们需要修改结果。 targetX 和 targetY 这两个属性定义了效果的起点。可惜，IE对它们的解析不同于其它的浏览器。因此，要保持跨浏览器的兼容性，我们将使用另一个滤镜原语 feOffset 来处理。
OFFSETTING
顾名思义， feOffset 需要一个输入值，如下：
<feOffset dx="4" dy="4" in="BEVEL_20" result="BEVEL_30"/>
裁剪投影部分
feComposite 是为数不多的几个需要两个输入的滤镜原语之一。它运用了Porter-Duff合成来组合两张图像。 feComposite 可以用于掩蔽或裁剪元素。这是如何从feConvolveMatrix 输出的结果中减去 feMorphology 的输出。
从投影中裁剪掉第一个加粗的原语
<feComposite operator="out" in="BEVEL_20" in2="BEVEL_10" result="BEVEL_30"/>
为投影着色
这个过程包括两个步骤：
首先，我们使用 feFlood 创建一个着色区域。这个原语将会简单地在滤镜区域输出根据我们定义的颜色的矩形。
<feFlood flood-color="#582D1B" result="COLOR-red" />
然后我们再用一个 feComposite 裁剪掉 BEVEL_30 的透明部分：
为投影着色
<feComposite in="COLOR-red" in2="BEVEL_30" operator="in" result="BEVEL_40" />
将斜面和原图结合成一个输出
feMerge 可以把斜面和源一起输出：
斜面和原图混合成一个输出
<feMerge result="BEVEL_50">
<feMergeNode in="BEVEL_40" />
<feMergeNode in="SourceGraphic" />
</feMerge>
看起来像是我们期待的结果。让我们给它加一个风化的效果，看起来更逼真一些。
添加分形纹理
feTurbulence 是最好玩的原语之一。但是，它可能融化你的多核CPU，让你的风扇像波音747的涡轮喷气发动机那样旋转。所以，谨慎使用，尤其是在移动设备上，因为这个原语对渲染性能有非常坏的影响。
像 feFlood , feTurbulence 输出填充矩形，但使用的是杂乱的非结构化的纹理。
我们手头有几个值可用来改变纹理的质感和节奏。通过这种方式，我们可以创建像木头、沙子、水彩或破裂混凝土效果的表面。这些设置对滤镜的性能有直接的影响，所以测试要足够彻底。以下是如何创建一个类似描边画笔的纹理的代码：
<feTurbulence baseFrequency=".05,.004" width="200%" height="200%" top="-50%" type="fractalNoise" numOctaves="4" seed="0" result="FRACTAL-TEXTURE_10" />
默认情况下， feTurbulence 输出的是彩色纹理——不是我们想要的那个。我们需要一个灰度alpha图；多一点对比的话会更好。通过 feColorMatrix 来增加对比度，同时将它转换为灰度图：
最后，加上分形纹理的效果
<feColorMatrix type="matrix" values=
"0 0 0 0 0,
0 0 0 0 0,
0 0 0 0 0,
0 0 0 -1.2 1.1"
in="FRACTAL-TEXTURE_10" result="FRACTAL-TEXTURE_20" />
最后要做的就是将纹理alpha和文字组合，依然是使用我们的老朋友 feComposite：
<feComposite in="BEVEL_50" in2="FRACTAL-TEXTURE_20" operator="in"/>
终于完成啦O(∩_∩)O~
如何将SVG滤镜应用到SVG
以下是两种将SVG滤镜应用到SVG text 元素的方法：
通过CSS
.filtered {
filter: url(#filter);
}
通过属性
<text filter="url(#filter)">Some text</text>
将SVG滤镜应用到HTML内容
滤镜最鸡冻人心的特性之一是，它可以嵌入SVG，在SVG中定义滤镜，并使用CSS把它应用到任何HTML元素中：
filter: url(#mySVGfilter);
在写这篇文章的时候，Blink和WebKit都需要添加前缀，如下：
-webkit-filter: url(#mySVGfilter);
这在理论上听起来很容易，但实际中却是一种黑暗艺术orz：
WebKit、Firefox和Blink目前都支持SVG滤镜应用于HTML内容。IE和Microsoft Edge却会显示未添加滤镜的元素，所以要确保默认样式看起来也非常OK~
包含滤镜的SVG可能不会被设置为 display: none 。但是你可以自己设置visibility: hidden 。
有时候SVG的大小会直接影响应用的目标元素的多少。
我说过WebKit，Blink和Firefox理解这种语法吗？好吧，Safari（和它的小伙伴，Mobile Safari）是一个特例。你可以在Safari中跑一下这些demo，但是你很可能会抓狂。在写这篇文章的时候，我不建议在当前版本的Safari（8.0.6）中对HTML内容使用SVG滤镜。因为结果是不可预测的，技术并非刀枪不入。更糟糕的是，如果Safari因为某些原因无法渲染你的滤镜，它也不会显示目标HTML元素，噢噢噢噢噩梦:-(。基于经验法则，你增加你让Safari显示你的滤镜的机会，通过绝对定位和固定目标元素的大小。作为一个概念证明，我已经设置了一个 “流行的”滤镜效果，针对桌面版Safari 进行了优化。在Safari中，将 feImage 应用于HTML元素似乎是不可能的。
之前的DEMO，应用于HTML内容
在这些demo中，包裹元素都被设置为 contenteditable = "true" ，方便进行文本编辑。（请注意，这些demo都是实验，在Safari、IE或Edge中都是不能运行的。）
Image filled text
用图像填充文本
Extruded and filled with pattern
使用图案填充和投影
Extruded and illuminated
投影和发光
Grungy look with the help of fractal filters
分形滤镜帮助完成的grungy效果
feTurbulence to achieve spilled water effect
feTurbulence 完成溅水效果
Some pop-arty color effects
凸出的颜色效果
Sketchy style
手绘风格
自定义滤镜
根据其复杂程度，滤镜也可以是一个很复杂的东西。在制作滤镜的时候，你可以添加或移除规则、改变他们的顺序和值，但很快你就会变得混乱。这里有一些我自己写的规则，可以帮助我追踪发生的问题。因为人员和项目不同，在我看来逻辑和结构化的东西，在你看来可能是混乱和不知所云，所以采用并保留一下这些建议吧。
分组
我把滤镜原语根据它们自身的功能分成了几组——如：“border”、“fill”、“bevel”等等。在模块的开始和结束的地方，我会根据组名备注。
命名
良好的命名规则可以帮助你更好地组织滤镜，并且方便对原语内部和外部情况进行追踪。经过对 BEM-like schemas 的实验，我最终确定了一个非常简单的命名结构：
NAME-OF-GROUP_order-number
比如说，你可能使用像 BEVEL_10 , BEVEL_20 , OUTLINE_10 等等这样的命名。我从 10 开始，并使用 10 作为增量，方便调整原语的顺序，也方便在一组原语中间或开始的地方添加原语。我比较喜欢整块内容一起使用，因为它们能够帮我更快地扫描原内容。
保持声明输入和结果
尽管不是必要的，我通常都会声明一个“ in ”和“ result ”。（如果省略，原语的输出就默认是其继承者的输入）
一些构建模块
我们先看看单个技术能达到的效果。然后通过组合这些构建模块，我们可以创建新的复杂的滤镜效果。
文本描边
Outlined
<!-- 1. Thicken the input with feMorphology: -->
<feMorphology operator="dilate" radius="2"
in="SourceAlpha" result="thickened" />
<!-- 2. Cut off the SourceAlpha -->
<feComposite operator="out" in="SourceAlpha" in2="thickened" />
这个方法并不能保证结果是好看的。尤其是你将 dilate 与较大的 radius 值结合的时候，结果可能比通过 stroke-width 创建的几何体糟糕一些。根据不同的情况，比较好的选择是将文本存储在一个符号元素中，然后在需要的时候通过 use 插入，再通过CSS的 stroke-width 属性将其加厚。注意， stroke-width 不能应用于HTML内容。
撕裂效果
Torn Out
<!-- 1. create an feTurbulence fractal fill -->
<feTurbulence result="TURBULENCE" baseFrequency="0.08"
numOctaves="1" seed="1" />
<!-- 2. create a displacement map that takes the fractal fill as an input to distort the target: -->
<feDisplacementMap in="SourceGraphic" in2="TURBULENCE" scale="9" />
颜色填充
Colored
<!-- 1. Create a colored filled area -->
<feFlood flood-color="#F79308" result="COLOR" />
<!-- 2. Cut off the SourceAlpha -->
<feComposite operator="in" in="COLOR" in2="SourceAlpha" />
有一点需要提到的是，除了 feFlood ， feColorMatrix 是另一种能够改变原输入颜色的方法，尽管它本身的概念比较难以理解。
OFFSETTING
Off Set.
<!-- Offset the input graphic by the amount defined in its "dx" and "dy" attributes: -->
<feOffset in="SourceGraphic" dx="10" dy="10" />
投影
Extruded
<!-- Define a convolve matrix that applies a bevel. -->
<!-- Order defines the depth of the extrusion; angle is defined by the position of "1" in the matrix. Here we see a 45-degree, 4-pixel deep extrusion: -->
<feConvolveMatrix order="4,4"
kernelMatrix="
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1" in="SourceAlpha" result="BEVEL" />
<!-- offset extrusion: -->
<feOffset dx="2" dy ="2" in="BEVEL" result="OFFSET" />
<!-- merge offset with Source: -->
<feMerge>
<feMergeNode in="OFFSET" />
<feMergeNode in="SourceGraphic" />
</feMerge>
好了，今天关于“fractal noise”的探讨就到这里了。希望大家能够对“fractal noise”有更深入的认识，并且从我的回答中得到一些帮助。
