怎么给html5背景加上js粒子特效

html-css022

怎么给html5背景加上js粒子特效,第1张

使用了particles.js

particles.js可以从github网站下载到最新的源码,网址是 https://github.com/VincentGarreau/particles.js/

使用方法非常简单

第一步,在html中引入脚本文件 particles.min.js,这个文件在下载的压缩包里可以找到

<script src="particles.min.js"></script>

第二步,在html中放入一个div容器,设置id为particles-js。这个一般放在所有网页元素的最后面就可以。

<div id="particles-js"></div>

<style type="text/css">

#particles-js {

position: absolute

top:0

width:100%

}

</style>

第三步,设置窗口样式

<style type="text/css">

#particles-js {

z-index: -1

position: absolute

top: 0

width: 100%

background: #aaa

}</style>

第四步,脚本生成粒子效果,可以单独放在一个js文件里,也可以放在<script>标签里。无论如何,这段脚本要出现在div容器之后。

particlesJS("particles-js", {  "particles": {    "number": {      "value": 380,      "density": {        "enable": true,        "value_area": 800

      }

    },    "color": {      "value": "#ffffff"

    },    "shape": {      "type": "circle",      "stroke": {        "width": 0,        "color": "#000000"

      },      "polygon": {        "nb_sides": 5

      },      "image": {        "src": "img/github.svg",        "width": 100,        "height": 100

      }

    },    "opacity": {      "value": 0.5,      "random": false,      "anim": {        "enable": false,        "speed": 1,        "opacity_min": 0.1,        "sync": false

      }

    },    "size": {      "value": 3,      "random": true,      "anim": {        "enable": false,        "speed": 40,        "size_min": 0.1,        "sync": false

      }

    },    "line_linked": {      "enable": true,      "distance": 150,      "color": "#ffffff",      "opacity": 0.4,      "width": 1

    },    "move": {      "enable": true,      "speed": 6,      "direction": "none",      "random": false,      "straight": false,      "out_mode": "out",      "bounce": false,      "attract": {        "enable": false,        "rotateX": 600,        "rotateY": 1200

      }

    }

  },  "interactivity": {    "detect_on": "canvas",    "events": {      "onhover": {        "enable": true,        "mode": "grab"

      },      "onclick": {        "enable": true,        "mode": "push"

      },      "resize": true

    },    "modes": {      "grab": {        "distance": 140,        "line_linked": {          "opacity": 1

        }

      },      "bubble": {        "distance": 400,        "size": 40,        "duration": 2,        "opacity": 8,        "speed": 3

      },      "repulse": {        "distance": 200,        "duration": 0.4

      },      "push": {        "particles_nb": 4

      },      "remove": {        "particles_nb": 2

      }

    }

  },  "retina_detect": true})

明白你的意思,你是想找关于象科幻电影哩的那种特效是吧?

伴随着互联网技术和CG技术的日新月异的发展,在影视及动画中,粒子系统特效的出现已经对影视及动画的发展起到了革命性的改造。很多的三维软件和后期合成软件中都有粒子特效,粒子特效可以模拟现实世界中物体间的相互作用,在未来的影视中的地位和前景占有不可替代的地位。可以帮助我们在影视中实现现实生活中不可能完成的拍摄镜头或是很难完成的拍摄镜头,能够给人耳目一新的感觉和强烈的视觉震撼效果。再有粒子系统还可以用于影视的特殊效果制作,如爆炸、烟雾、下雨、光效等等。不同于一般所看到的效果,其快速、方便的功能及有趣、多样化的效果,其所创造的视觉效果,可让您叹为观止。

粒子特效的出现是近年来随着计算机软硬件技术的发展而产生的一新兴技术。特效软件在计算机中的虚拟的世界应用越来越广泛,设计师在影视与动画中按照要表现的对象的形态进行设定。粒子系统特效在影视中模拟真实的方式使其成为一个有用的工具。将在未来的影视中被广泛应用。在影视制作方面,粒子特效这项新技术能够给人耳目一新的感觉,因此受到了众多客户的欢迎和追捧。

粒子系统定义: 什么是粒子系统?粒子系统是由总体具有相同的表现规律,个体却随机表现出不同的特征的大量显示元素构成的集合。

这个定义有几个要素:

1、 群体性:粒子系统是由“大量显示元素”构成的。因此,用粒子系统来描述一群蜜蜂是正确的,但描述一只蜜蜂没有意义。

2、 统一性:粒子系统的每个元素具有相同的表现规律。比如组成火堆的每一个火苗,都是红色,发亮,向上跳动,并且会在上升途中逐渐变小以至消失。

3、 随机性:粒子系统的每个元素又随机表现出不同特征。比如蜂群中的每一只蜜蜂,它的飞行路线可能会弯弯曲曲,就象布郎运动一般无规则可寻,但整个蜂群,却是看起来直线向一个方向运动(这就是上一点所说的统一性)。

粒子系统特效在影视的应用中的特点和前景:

粒子特效作为电脑美术的一个分支,是建立在影视艺术和电脑软硬件技术发展基础上而形成的一种相对的独立新型的艺术形式。随着电脑软硬件的进一步发展,粒子特效技术的应用得到了空前的发展,粒子特效作为一个独立学科真正开走上了迅猛发展之路。粒子特效软件功能愈来愈强大,操作起来也是愈来愈容易,这使得粒子特效有更广泛的运用以至我们不仅可以看到地方电视台的栏目包装及广告中充满绚丽的粒子特效,更有不少电脑爱好者在自已的个人电脑上玩起了粒子特效的制作。粒子特效正在国内迅速发展,但制作人才十分不足!全国各地影视特效公司纷纷建立,动画公司求才若渴,网络上随处可见特效人才的招聘信息,却少有合格人才!至使业内人士不禁有一将难求的感慨!

粒子特效人才已经成为国内市场迫切需求的高薪,高技术人才,根据资料显示,粒子特效在影视动画行业是未来最受欢迎的高薪职业之一!

一、创造现实生活中不能通过实拍完成或具有危险性的镜头的镜头:许多镜头都是我们在现实生活中不可能获得的,这需要我们通过电脑和特效软件来实现。在这其中粒子特效占有十分重要的地位,起到不可替代的作用。很多人第一次对粒子特效产生兴趣是因为他们是精神紊乱的防火狂活着枪痴。毕竟我们的生活需要保持激情。传统上都是在现场活着通过十几元素(如缩小的模型)创建出这些特效,现场烟雾师的手艺一点也不会荒废,但近来在很多很多案例(特别是一些较小型的通用案例)中,不管制作预算是多少,粒子特效可以节省大量的拍摄时间和费用。现场爆炸很有趣,但这涉及大量的装备,对演员和摄制人员来说也构成不小的威胁,并且常常只有一次拍摄机会旧的取得成功。粒子特效恰恰在这方面有着自己的独特优势通过粒子特效完成真实感很强的爆炸、枪炮口的闪光、烟雾、子弹击中的目标脱落散开产生的碎屑效果。所以粒子是一种有效的方法模拟实际镜头的元素。粒子特效是需要特效技师理解复杂的想象。并通过粒子来表现出来。我所说的“理解”不仅是指科学上的而且还要在直观上去理解它,就想画家理解色彩电影摄影师理解画面。这就要求粒子特效工作者必须在三维世界中学会观察效果,这样才能通过特效工具在画面中再现他们。

就《蜘蛛侠3》来说,为了打造绿恶魔、沙人和毒蜘蛛这些反派形象,索尼图形图像运作公司制造了930个单独的特技效果,较《蜘蛛侠2》相比多出了近100个。

其中,沙人最难搞定。在影片的开端,沙人还只是一个普通的人类罪犯——弗林特·马尔科,他无意中遭遇一台粒子雾化器,连同里面的沙子一同被风化,结果变成具有超能力的沙人。

在极具震撼力的“沙人诞生”的场景中,地上的沙子像有了生命般汇聚到一起,此起彼伏,渐渐显出个人形,我们的大反派从此诞生了。从名字中我们不能猜出,沙人能够幻化成任何东西。由于获得与沙子合二为一的力量,他时而变成硕大无比的沙人,时而变成一股沙尘暴。

沙子可以说是电影中的常客了,最为著名的当属在环球的“木乃伊”系列影片中的运用。索尼图形图像运作公司视觉效果总监斯科特·斯多克迪克说,但对于沙人来说,沙子“是真正有生命的,这无疑给制作特技效果带来一定难度”。软件工程师编制一个沙子模拟程序。最终的沙暴程序允许动画绘制和设计者创造流沙、扬沙以及沙子汇聚成身体和四肢的场面。《蜘蛛侠3》制片人格兰特·柯蒂斯说:“我们真的展示了沙人这个怪物拥有的令人可怕的力量,以及他如何驾驭或者无法驾驭能量的过程。”

电影特效杂志《电影技术》编辑乔迪·邓肯表示,对于特效小组来说,打造沙人的很多形态——从一块束状的云到一个格拉斯大小的巨人——是一种巨大的挑战。“几乎每一个镜头都要重新制作以达到完美的效果。”

“沙人”的诞生过程恐怕是近年来好莱坞特效电影中最震撼的场面之一。无论是从技术还是从创意上看,这段镜头都是数一数二的。之前还没有人挑战过如此大规模的沙粒模拟。这些沙粒最终还要汇集成一个“角色”,进行逼真的动作,这是对动画的特效的双重挑战。当导演Sam Raimi对Imageworks的特效制作人员们提出自己的想法时,他们也觉得无从下手,因为没有先例可循。最终Imageworks决定采用模型和粒子模拟并用的手段:“沙人”的内核是一个人形的简单模型,由动画师来为它调节各种动作;而特效师们则在这个模型的表面进行粒子模拟和材质的设定。由于“沙人”的形态不稳定,经常会由实体碎裂成细沙,因此它就时常在“模型状态”和“粒子状态”间游离。

制作不受天气季节等因素影响:不需要重建极端的气候条件,即使是不经意间向窗外一瞥都会发现外面的现象在不断的变化。事实上,气候条件很少符合现场的要求,拍摄更不可能去等待完美的气候条件。例如我们在拍摄的过程中需要一个暴风雪、暴雨的场景,但天气的变化不是我们可以掌握的。由于各种条件的限制我们不能等到有暴风雪、暴雨的天气才来实现我们需要的场景和镜头,这样既浪费了时间、财力、人员,甚至还要去等待天公作美。但暴风雪、冰雹、暴雨,这一系列的极端的天气状况我们都可以通过粒子特效来实现从而不受天气的影响。前后效果比较会很显著,结果可能是一部一鸣惊人的影片。

影视中粒子特效实现以降低成本:粒子特效的存在在一定程度上减少了影视作品上成本的输出。粒子系统特效不需要发杂的制作环境,有时候仅仅需要的就是几个工作人员和几台电脑。在影视中我们经常会出现花火的场景,在拍摄这些场景我们玩玩会花费大量的金钱并且往往要求我们一次成功。这样的例子很多很多这些都加剧了影片成本的输出,我们完全可以通过粒子系统来模拟完成。这样既可以减少成本的输出,往往粒子系统所带来的强悍的视觉效果也可能使影片更具魅力。

在拍摄一部影片的时候

可修改性较强,质量要求更易受到控制:由于粒子系统依赖的是电脑和软件,在制作方面主要需要的是制作人员的艺术修养和对软件的操作水平。粒子系统,在模仿自然现象、物理现象及空间扭曲上具有得天独厚的优势,可以通过空间扭曲控制粒子的行为,增强物理现象的真实性,结合空间扭曲能对粒子流造成引力、阻挡、风力等仿真影响。它几乎可以模拟任何富于联想的三维效果,如烟云、火花、爆炸、暴风雪或者瀑布。所以产品的质量我们通过粒子系统和电脑软件的控制可以得到很好的控制,修改起来也相对容易一些。相对于摄像机拍摄出来的场景和效果的优势在于其精确性、真实性和无限的可操作性质量要求更易受到控制。

能够对所表现的产品起到美化作用:影视中我们需要创造一些现实生活中不能看到的视觉效果,粒子特效有时候就会大大提高我们的工作效率。创造出绚丽的视觉画面。粒子系统特效对场景的美感、艺术感、观看的震撼力产生影响。 粒子特效对产品的美化体现在很多方面很多行业,例如广告、影视片头、电影、游戏。举个例子来说,在游戏制作的2D时代,我们就见到过不少加入了粒子系统的特效。比如暗黑破坏神中的魔法效果,就大量使用了粒子效果。能够在游戏中产生与自然云雾相似的物体,并且这些物体由于随机性的作用,使环境变化丰富多彩,能够给游戏增加强烈的视觉吸引力。进入3D时代,在游戏使用粒子系统的情况变得更为普遍,我们可以产生很多效果绚丽的粒子效果。粒子系统是是3D游戏中必不可少的组成元素,很多著名的游戏引擎都提供强大的粒子系统以及供美工使用的粒子编辑器。这些强大的粒子编辑器有更加复杂的设计,比如考虑多层粒子,粒子间相互作用等因素,但最根本的设计仍然是从上面的粒子基本结构而来。

在影视与动画发展中存在的问题:

随着中国影视及动画产业的蓬勃发展,充满激情的特效制作从业人员发现在常规制作技术得到充分掌握和发展的同时,特效制作技术和资料及其缺乏,甚至成为了影视制作的致命伤道理很简单:没有前沿高端的CG技术支持 就没有精彩的CG作品产生。先说说我对这个行业的整体看法。由于是新的行业,一切都是从零开始,没有专门的学校开这样的专业,没有专门的高水平师资力量,没有传统的势力范围,没有垄断。所以这个行业对于那些文凭不高,但是自学能力很强的人来说,简直就是风水宝地,大家在一样的起跑线上奔跑,和化工,金融这些传统行业完全不同,这个行业的高手都是30左右,说资历也不会太长。

国内影视业不景气,外国大片的冲击,如何有效率地提高国人的创作、粒子特效制作水平和规范制作准则是摆在我们同行面前的不容轻视的课题。首先受到客观条件的限制,其最终画面效果的好坏与否仅取决于制作人员的水平、经验和艺术修养,以及特效软件及硬件的技术局限。对制作人员的技术要求较高制作周期相对较长粒子特效也是大片中常见的特技,也很少有人能做的成,奥斯卡最佳视觉特效奖得住《蜘蛛侠3》的特效总监来华演讲,他说在影片中那个沙人是影片最难的,为了能做好它,我们成立了100人的小组专门研究沙子,为时1年才做得成功!

其次,我们行内的粒子系统特效人员的目标不太统一,有以下几种:

一 艺术型,很多国内大师做特效是从好奇到爱好,着迷于好莱坞大片的惊人效果,力求提高国内的数码图象水平。但因条件的束搏,资金、技术通道有限,不能成就梦想。或因电影市场不景,缺乏投资,人才不集中,不能生产大片,又不愿做“行货”,赚不到钱。

二 赚钱型,粒子特效尚属新生产物,以迷人的魅力和无限的发展前景,吸引着无数进场淘金的探险者,他们大多无艺术根基,凭借惊人的接受力,学会所有特效软件,在行业新兴初期硬件垄断经营已经赚了不少,但即将面临无数后起新力军的创意冲击和价格冲击。

三 业余型,更多的爱好者投身我们的事业,无疑是件好事,但各人有不同的因素导至水平参差不齐,他们是想做好却没条件呀!更无奈的是其中一部分为生存,适应激烈的商业竞争,被迫以低价劣质的特效产品冲斥市场,造成行业的不规范的恶性循环。

钱是要赚的,饭是要吃的,技术也需要提高。我们同行要怎样做,一同把蛋糕做大呢?摆在面前的空间是很广阔的。我们面对机遇也面临挑战,我们的发展蓝图将如何规划?这就需要有志之士共同的努力和发展。

总结:

粒子系统特效技术虽然入门门槛较低,但要精通并熟练运用却需多年不懈的努力,同时还要随着软件的发展不断学习新的技术。它在所有影视广告制作形式中技术含量是最高的。粒子系统特效在影视中的应用是一件艺术和技术紧密结合的工作。在制作过程中,一方面要在技术上充分实现真实和美感的要求,另一方面,还要在画面色调、构图、明暗、镜头设计组接、节奏把握等方面进行艺术的再创造。影视特效需要借鉴平面设计的一些法则,但更多是要按影视艺术的规律来进行创作。有理由相信一定能够在今后的电影动画史上大放异彩。未来,我们将生活在信息的海洋,而粒子系统特效的存在将是一道随处可见的风景。

粒子特效能够为游戏增添交互与响应能力,光影特效就是在游戏中增加了影子。

粒子特效(ParticleEffects)是为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块,是增添交互与响应能力的作用。

光影特效就是在游戏中增加了影子,包括人和各种物体的影子。水面上也有清晰的倒影,到了晚上,水面会反光。