effects_overview.html 54 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="generator" content="Asciidoctor 1.5.4">
  8. <meta name="keywords" content="documentation, effect, light, water">
  9. <title>jME3 Special Effects Overview</title>
  10. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700">
  11. <style>
  12. /* Asciidoctor default stylesheet | MIT License | http://asciidoctor.org */
  13. /* Remove comment around @import statement below when using as a custom stylesheet */
  14. /*@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700";*/
  15. article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
  16. audio,canvas,video{display:inline-block}
  17. audio:not([controls]){display:none;height:0}
  18. [hidden],template{display:none}
  19. script{display:none!important}
  20. html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
  21. body{margin:0}
  22. a{background:transparent}
  23. a:focus{outline:thin dotted}
  24. a:active,a:hover{outline:0}
  25. h1{font-size:2em;margin:.67em 0}
  26. abbr[title]{border-bottom:1px dotted}
  27. b,strong{font-weight:bold}
  28. dfn{font-style:italic}
  29. hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
  30. mark{background:#ff0;color:#000}
  31. code,kbd,pre,samp{font-family:monospace;font-size:1em}
  32. pre{white-space:pre-wrap}
  33. q{quotes:"\201C" "\201D" "\2018" "\2019"}
  34. small{font-size:80%}
  35. sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
  36. sup{top:-.5em}
  37. sub{bottom:-.25em}
  38. img{border:0}
  39. svg:not(:root){overflow:hidden}
  40. figure{margin:0}
  41. fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
  42. legend{border:0;padding:0}
  43. button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
  44. button,input{line-height:normal}
  45. button,select{text-transform:none}
  46. button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
  47. button[disabled],html input[disabled]{cursor:default}
  48. input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
  49. input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
  50. input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
  51. button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
  52. textarea{overflow:auto;vertical-align:top}
  53. table{border-collapse:collapse;border-spacing:0}
  54. *,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
  55. html,body{font-size:100%}
  56. body{background:#fff;color:rgba(0,0,0,.8);padding:0;margin:0;font-family:"Noto Serif","DejaVu Serif",serif;font-weight:400;font-style:normal;line-height:1;position:relative;cursor:auto}
  57. a:hover{cursor:pointer}
  58. img,object,embed{max-width:100%;height:auto}
  59. object,embed{height:100%}
  60. img{-ms-interpolation-mode:bicubic}
  61. .left{float:left!important}
  62. .right{float:right!important}
  63. .text-left{text-align:left!important}
  64. .text-right{text-align:right!important}
  65. .text-center{text-align:center!important}
  66. .text-justify{text-align:justify!important}
  67. .hide{display:none}
  68. body{-webkit-font-smoothing:antialiased}
  69. img,object,svg{display:inline-block;vertical-align:middle}
  70. textarea{height:auto;min-height:50px}
  71. select{width:100%}
  72. .center{margin-left:auto;margin-right:auto}
  73. .spread{width:100%}
  74. p.lead,.paragraph.lead>p,#preamble>.sectionbody>.paragraph:first-of-type p{font-size:1.21875em;line-height:1.6}
  75. .subheader,.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{line-height:1.45;color:#7a2518;font-weight:400;margin-top:0;margin-bottom:.25em}
  76. div,dl,dt,dd,ul,ol,li,h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6,pre,form,p,blockquote,th,td{margin:0;padding:0;direction:ltr}
  77. a{color:#2156a5;text-decoration:underline;line-height:inherit}
  78. a:hover,a:focus{color:#1d4b8f}
  79. a img{border:none}
  80. p{font-family:inherit;font-weight:400;font-size:1em;line-height:1.6;margin-bottom:1.25em;text-rendering:optimizeLegibility}
  81. p aside{font-size:.875em;line-height:1.35;font-style:italic}
  82. h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{font-family:"Open Sans","DejaVu Sans",sans-serif;font-weight:300;font-style:normal;color:#ba3925;text-rendering:optimizeLegibility;margin-top:1em;margin-bottom:.5em;line-height:1.0125em}
  83. h1 small,h2 small,h3 small,#toctitle small,.sidebarblock>.content>.title small,h4 small,h5 small,h6 small{font-size:60%;color:#e99b8f;line-height:0}
  84. h1{font-size:2.125em}
  85. h2{font-size:1.6875em}
  86. h3,#toctitle,.sidebarblock>.content>.title{font-size:1.375em}
  87. h4,h5{font-size:1.125em}
  88. h6{font-size:1em}
  89. hr{border:solid #ddddd8;border-width:1px 0 0;clear:both;margin:1.25em 0 1.1875em;height:0}
  90. em,i{font-style:italic;line-height:inherit}
  91. strong,b{font-weight:bold;line-height:inherit}
  92. small{font-size:60%;line-height:inherit}
  93. code{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;color:rgba(0,0,0,.9)}
  94. ul,ol,dl{font-size:1em;line-height:1.6;margin-bottom:1.25em;list-style-position:outside;font-family:inherit}
  95. ul,ol,ul.no-bullet,ol.no-bullet{margin-left:1.5em}
  96. ul li ul,ul li ol{margin-left:1.25em;margin-bottom:0;font-size:1em}
  97. ul.square li ul,ul.circle li ul,ul.disc li ul{list-style:inherit}
  98. ul.square{list-style-type:square}
  99. ul.circle{list-style-type:circle}
  100. ul.disc{list-style-type:disc}
  101. ul.no-bullet{list-style:none}
  102. ol li ul,ol li ol{margin-left:1.25em;margin-bottom:0}
  103. dl dt{margin-bottom:.3125em;font-weight:bold}
  104. dl dd{margin-bottom:1.25em}
  105. abbr,acronym{text-transform:uppercase;font-size:90%;color:rgba(0,0,0,.8);border-bottom:1px dotted #ddd;cursor:help}
  106. abbr{text-transform:none}
  107. blockquote{margin:0 0 1.25em;padding:.5625em 1.25em 0 1.1875em;border-left:1px solid #ddd}
  108. blockquote cite{display:block;font-size:.9375em;color:rgba(0,0,0,.6)}
  109. blockquote cite:before{content:"\2014 \0020"}
  110. blockquote cite a,blockquote cite a:visited{color:rgba(0,0,0,.6)}
  111. blockquote,blockquote p{line-height:1.6;color:rgba(0,0,0,.85)}
  112. @media only screen and (min-width:768px){h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2}
  113. h1{font-size:2.75em}
  114. h2{font-size:2.3125em}
  115. h3,#toctitle,.sidebarblock>.content>.title{font-size:1.6875em}
  116. h4{font-size:1.4375em}}
  117. table{background:#fff;margin-bottom:1.25em;border:solid 1px #dedede}
  118. table thead,table tfoot{background:#f7f8f7;font-weight:bold}
  119. table thead tr th,table thead tr td,table tfoot tr th,table tfoot tr td{padding:.5em .625em .625em;font-size:inherit;color:rgba(0,0,0,.8);text-align:left}
  120. table tr th,table tr td{padding:.5625em .625em;font-size:inherit;color:rgba(0,0,0,.8)}
  121. table tr.even,table tr.alt,table tr:nth-of-type(even){background:#f8f8f7}
  122. table thead tr th,table tfoot tr th,table tbody tr td,table tr td,table tfoot tr td{display:table-cell;line-height:1.6}
  123. body{tab-size:4}
  124. h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2;word-spacing:-.05em}
  125. h1 strong,h2 strong,h3 strong,#toctitle strong,.sidebarblock>.content>.title strong,h4 strong,h5 strong,h6 strong{font-weight:400}
  126. .clearfix:before,.clearfix:after,.float-group:before,.float-group:after{content:" ";display:table}
  127. .clearfix:after,.float-group:after{clear:both}
  128. *:not(pre)>code{font-size:.9375em;font-style:normal!important;letter-spacing:0;padding:.1em .5ex;word-spacing:-.15em;background-color:#f7f7f8;-webkit-border-radius:4px;border-radius:4px;line-height:1.45;text-rendering:optimizeSpeed}
  129. pre,pre>code{line-height:1.45;color:rgba(0,0,0,.9);font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;text-rendering:optimizeSpeed}
  130. .keyseq{color:rgba(51,51,51,.8)}
  131. kbd{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;display:inline-block;color:rgba(0,0,0,.8);font-size:.65em;line-height:1.45;background-color:#f7f7f7;border:1px solid #ccc;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em white inset;box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em #fff inset;margin:0 .15em;padding:.2em .5em;vertical-align:middle;position:relative;top:-.1em;white-space:nowrap}
  132. .keyseq kbd:first-child{margin-left:0}
  133. .keyseq kbd:last-child{margin-right:0}
  134. .menuseq,.menu{color:rgba(0,0,0,.8)}
  135. b.button:before,b.button:after{position:relative;top:-1px;font-weight:400}
  136. b.button:before{content:"[";padding:0 3px 0 2px}
  137. b.button:after{content:"]";padding:0 2px 0 3px}
  138. p a>code:hover{color:rgba(0,0,0,.9)}
  139. #header,#content,#footnotes,#footer{width:100%;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;max-width:62.5em;*zoom:1;position:relative;padding-left:.9375em;padding-right:.9375em}
  140. #header:before,#header:after,#content:before,#content:after,#footnotes:before,#footnotes:after,#footer:before,#footer:after{content:" ";display:table}
  141. #header:after,#content:after,#footnotes:after,#footer:after{clear:both}
  142. #content{margin-top:1.25em}
  143. #content:before{content:none}
  144. #header>h1:first-child{color:rgba(0,0,0,.85);margin-top:2.25rem;margin-bottom:0}
  145. #header>h1:first-child+#toc{margin-top:8px;border-top:1px solid #ddddd8}
  146. #header>h1:only-child,body.toc2 #header>h1:nth-last-child(2){border-bottom:1px solid #ddddd8;padding-bottom:8px}
  147. #header .details{border-bottom:1px solid #ddddd8;line-height:1.45;padding-top:.25em;padding-bottom:.25em;padding-left:.25em;color:rgba(0,0,0,.6);display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-flow:row wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap}
  148. #header .details span:first-child{margin-left:-.125em}
  149. #header .details span.email a{color:rgba(0,0,0,.85)}
  150. #header .details br{display:none}
  151. #header .details br+span:before{content:"\00a0\2013\00a0"}
  152. #header .details br+span.author:before{content:"\00a0\22c5\00a0";color:rgba(0,0,0,.85)}
  153. #header .details br+span#revremark:before{content:"\00a0|\00a0"}
  154. #header #revnumber{text-transform:capitalize}
  155. #header #revnumber:after{content:"\00a0"}
  156. #content>h1:first-child:not([class]){color:rgba(0,0,0,.85);border-bottom:1px solid #ddddd8;padding-bottom:8px;margin-top:0;padding-top:1rem;margin-bottom:1.25rem}
  157. #toc{border-bottom:1px solid #efefed;padding-bottom:.5em}
  158. #toc>ul{margin-left:.125em}
  159. #toc ul.sectlevel0>li>a{font-style:italic}
  160. #toc ul.sectlevel0 ul.sectlevel1{margin:.5em 0}
  161. #toc ul{font-family:"Open Sans","DejaVu Sans",sans-serif;list-style-type:none}
  162. #toc li{line-height:1.3334;margin-top:.3334em}
  163. #toc a{text-decoration:none}
  164. #toc a:active{text-decoration:underline}
  165. #toctitle{color:#7a2518;font-size:1.2em}
  166. @media only screen and (min-width:768px){#toctitle{font-size:1.375em}
  167. body.toc2{padding-left:15em;padding-right:0}
  168. #toc.toc2{margin-top:0!important;background-color:#f8f8f7;position:fixed;width:15em;left:0;top:0;border-right:1px solid #efefed;border-top-width:0!important;border-bottom-width:0!important;z-index:1000;padding:1.25em 1em;height:100%;overflow:auto}
  169. #toc.toc2 #toctitle{margin-top:0;margin-bottom:.8rem;font-size:1.2em}
  170. #toc.toc2>ul{font-size:.9em;margin-bottom:0}
  171. #toc.toc2 ul ul{margin-left:0;padding-left:1em}
  172. #toc.toc2 ul.sectlevel0 ul.sectlevel1{padding-left:0;margin-top:.5em;margin-bottom:.5em}
  173. body.toc2.toc-right{padding-left:0;padding-right:15em}
  174. body.toc2.toc-right #toc.toc2{border-right-width:0;border-left:1px solid #efefed;left:auto;right:0}}
  175. @media only screen and (min-width:1280px){body.toc2{padding-left:20em;padding-right:0}
  176. #toc.toc2{width:20em}
  177. #toc.toc2 #toctitle{font-size:1.375em}
  178. #toc.toc2>ul{font-size:.95em}
  179. #toc.toc2 ul ul{padding-left:1.25em}
  180. body.toc2.toc-right{padding-left:0;padding-right:20em}}
  181. #content #toc{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
  182. #content #toc>:first-child{margin-top:0}
  183. #content #toc>:last-child{margin-bottom:0}
  184. #footer{max-width:100%;background-color:rgba(0,0,0,.8);padding:1.25em}
  185. #footer-text{color:rgba(255,255,255,.8);line-height:1.44}
  186. .sect1{padding-bottom:.625em}
  187. @media only screen and (min-width:768px){.sect1{padding-bottom:1.25em}}
  188. .sect1+.sect1{border-top:1px solid #efefed}
  189. #content h1>a.anchor,h2>a.anchor,h3>a.anchor,#toctitle>a.anchor,.sidebarblock>.content>.title>a.anchor,h4>a.anchor,h5>a.anchor,h6>a.anchor{position:absolute;z-index:1001;width:1.5ex;margin-left:-1.5ex;display:block;text-decoration:none!important;visibility:hidden;text-align:center;font-weight:400}
  190. #content h1>a.anchor:before,h2>a.anchor:before,h3>a.anchor:before,#toctitle>a.anchor:before,.sidebarblock>.content>.title>a.anchor:before,h4>a.anchor:before,h5>a.anchor:before,h6>a.anchor:before{content:"\00A7";font-size:.85em;display:block;padding-top:.1em}
  191. #content h1:hover>a.anchor,#content h1>a.anchor:hover,h2:hover>a.anchor,h2>a.anchor:hover,h3:hover>a.anchor,#toctitle:hover>a.anchor,.sidebarblock>.content>.title:hover>a.anchor,h3>a.anchor:hover,#toctitle>a.anchor:hover,.sidebarblock>.content>.title>a.anchor:hover,h4:hover>a.anchor,h4>a.anchor:hover,h5:hover>a.anchor,h5>a.anchor:hover,h6:hover>a.anchor,h6>a.anchor:hover{visibility:visible}
  192. #content h1>a.link,h2>a.link,h3>a.link,#toctitle>a.link,.sidebarblock>.content>.title>a.link,h4>a.link,h5>a.link,h6>a.link{color:#ba3925;text-decoration:none}
  193. #content h1>a.link:hover,h2>a.link:hover,h3>a.link:hover,#toctitle>a.link:hover,.sidebarblock>.content>.title>a.link:hover,h4>a.link:hover,h5>a.link:hover,h6>a.link:hover{color:#a53221}
  194. .audioblock,.imageblock,.literalblock,.listingblock,.stemblock,.videoblock{margin-bottom:1.25em}
  195. .admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{text-rendering:optimizeLegibility;text-align:left;font-family:"Noto Serif","DejaVu Serif",serif;font-size:1rem;font-style:italic}
  196. table.tableblock>caption.title{white-space:nowrap;overflow:visible;max-width:0}
  197. .paragraph.lead>p,#preamble>.sectionbody>.paragraph:first-of-type p{color:rgba(0,0,0,.85)}
  198. table.tableblock #preamble>.sectionbody>.paragraph:first-of-type p{font-size:inherit}
  199. .admonitionblock>table{border-collapse:separate;border:0;background:none;width:100%}
  200. .admonitionblock>table td.icon{text-align:center;width:80px}
  201. .admonitionblock>table td.icon img{max-width:none}
  202. .admonitionblock>table td.icon .title{font-weight:bold;font-family:"Open Sans","DejaVu Sans",sans-serif;text-transform:uppercase}
  203. .admonitionblock>table td.content{padding-left:1.125em;padding-right:1.25em;border-left:1px solid #ddddd8;color:rgba(0,0,0,.6)}
  204. .admonitionblock>table td.content>:last-child>:last-child{margin-bottom:0}
  205. .exampleblock>.content{border-style:solid;border-width:1px;border-color:#e6e6e6;margin-bottom:1.25em;padding:1.25em;background:#fff;-webkit-border-radius:4px;border-radius:4px}
  206. .exampleblock>.content>:first-child{margin-top:0}
  207. .exampleblock>.content>:last-child{margin-bottom:0}
  208. .sidebarblock{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
  209. .sidebarblock>:first-child{margin-top:0}
  210. .sidebarblock>:last-child{margin-bottom:0}
  211. .sidebarblock>.content>.title{color:#7a2518;margin-top:0;text-align:center}
  212. .exampleblock>.content>:last-child>:last-child,.exampleblock>.content .olist>ol>li:last-child>:last-child,.exampleblock>.content .ulist>ul>li:last-child>:last-child,.exampleblock>.content .qlist>ol>li:last-child>:last-child,.sidebarblock>.content>:last-child>:last-child,.sidebarblock>.content .olist>ol>li:last-child>:last-child,.sidebarblock>.content .ulist>ul>li:last-child>:last-child,.sidebarblock>.content .qlist>ol>li:last-child>:last-child{margin-bottom:0}
  213. .literalblock pre,.listingblock pre:not(.highlight),.listingblock pre[class="highlight"],.listingblock pre[class^="highlight "],.listingblock pre.CodeRay,.listingblock pre.prettyprint{background:#f7f7f8}
  214. .sidebarblock .literalblock pre,.sidebarblock .listingblock pre:not(.highlight),.sidebarblock .listingblock pre[class="highlight"],.sidebarblock .listingblock pre[class^="highlight "],.sidebarblock .listingblock pre.CodeRay,.sidebarblock .listingblock pre.prettyprint{background:#f2f1f1}
  215. .literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{-webkit-border-radius:4px;border-radius:4px;word-wrap:break-word;padding:1em;font-size:.8125em}
  216. .literalblock pre.nowrap,.literalblock pre[class].nowrap,.listingblock pre.nowrap,.listingblock pre[class].nowrap{overflow-x:auto;white-space:pre;word-wrap:normal}
  217. @media only screen and (min-width:768px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:.90625em}}
  218. @media only screen and (min-width:1280px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:1em}}
  219. .literalblock.output pre{color:#f7f7f8;background-color:rgba(0,0,0,.9)}
  220. .listingblock pre.highlightjs{padding:0}
  221. .listingblock pre.highlightjs>code{padding:1em;-webkit-border-radius:4px;border-radius:4px}
  222. .listingblock pre.prettyprint{border-width:0}
  223. .listingblock>.content{position:relative}
  224. .listingblock code[data-lang]:before{display:none;content:attr(data-lang);position:absolute;font-size:.75em;top:.425rem;right:.5rem;line-height:1;text-transform:uppercase;color:#999}
  225. .listingblock:hover code[data-lang]:before{display:block}
  226. .listingblock.terminal pre .command:before{content:attr(data-prompt);padding-right:.5em;color:#999}
  227. .listingblock.terminal pre .command:not([data-prompt]):before{content:"$"}
  228. table.pyhltable{border-collapse:separate;border:0;margin-bottom:0;background:none}
  229. table.pyhltable td{vertical-align:top;padding-top:0;padding-bottom:0;line-height:1.45}
  230. table.pyhltable td.code{padding-left:.75em;padding-right:0}
  231. pre.pygments .lineno,table.pyhltable td:not(.code){color:#999;padding-left:0;padding-right:.5em;border-right:1px solid #ddddd8}
  232. pre.pygments .lineno{display:inline-block;margin-right:.25em}
  233. table.pyhltable .linenodiv{background:none!important;padding-right:0!important}
  234. .quoteblock{margin:0 1em 1.25em 1.5em;display:table}
  235. .quoteblock>.title{margin-left:-1.5em;margin-bottom:.75em}
  236. .quoteblock blockquote,.quoteblock blockquote p{color:rgba(0,0,0,.85);font-size:1.15rem;line-height:1.75;word-spacing:.1em;letter-spacing:0;font-style:italic;text-align:justify}
  237. .quoteblock blockquote{margin:0;padding:0;border:0}
  238. .quoteblock blockquote:before{content:"\201c";float:left;font-size:2.75em;font-weight:bold;line-height:.6em;margin-left:-.6em;color:#7a2518;text-shadow:0 1px 2px rgba(0,0,0,.1)}
  239. .quoteblock blockquote>.paragraph:last-child p{margin-bottom:0}
  240. .quoteblock .attribution{margin-top:.5em;margin-right:.5ex;text-align:right}
  241. .quoteblock .quoteblock{margin-left:0;margin-right:0;padding:.5em 0;border-left:3px solid rgba(0,0,0,.6)}
  242. .quoteblock .quoteblock blockquote{padding:0 0 0 .75em}
  243. .quoteblock .quoteblock blockquote:before{display:none}
  244. .verseblock{margin:0 1em 1.25em 1em}
  245. .verseblock pre{font-family:"Open Sans","DejaVu Sans",sans;font-size:1.15rem;color:rgba(0,0,0,.85);font-weight:300;text-rendering:optimizeLegibility}
  246. .verseblock pre strong{font-weight:400}
  247. .verseblock .attribution{margin-top:1.25rem;margin-left:.5ex}
  248. .quoteblock .attribution,.verseblock .attribution{font-size:.9375em;line-height:1.45;font-style:italic}
  249. .quoteblock .attribution br,.verseblock .attribution br{display:none}
  250. .quoteblock .attribution cite,.verseblock .attribution cite{display:block;letter-spacing:-.025em;color:rgba(0,0,0,.6)}
  251. .quoteblock.abstract{margin:0 0 1.25em 0;display:block}
  252. .quoteblock.abstract blockquote,.quoteblock.abstract blockquote p{text-align:left;word-spacing:0}
  253. .quoteblock.abstract blockquote:before,.quoteblock.abstract blockquote p:first-of-type:before{display:none}
  254. table.tableblock{max-width:100%;border-collapse:separate}
  255. table.tableblock td>.paragraph:last-child p>p:last-child,table.tableblock th>p:last-child,table.tableblock td>p:last-child{margin-bottom:0}
  256. table.tableblock,th.tableblock,td.tableblock{border:0 solid #dedede}
  257. table.grid-all th.tableblock,table.grid-all td.tableblock{border-width:0 1px 1px 0}
  258. table.grid-all tfoot>tr>th.tableblock,table.grid-all tfoot>tr>td.tableblock{border-width:1px 1px 0 0}
  259. table.grid-cols th.tableblock,table.grid-cols td.tableblock{border-width:0 1px 0 0}
  260. table.grid-all *>tr>.tableblock:last-child,table.grid-cols *>tr>.tableblock:last-child{border-right-width:0}
  261. table.grid-rows th.tableblock,table.grid-rows td.tableblock{border-width:0 0 1px 0}
  262. table.grid-all tbody>tr:last-child>th.tableblock,table.grid-all tbody>tr:last-child>td.tableblock,table.grid-all thead:last-child>tr>th.tableblock,table.grid-rows tbody>tr:last-child>th.tableblock,table.grid-rows tbody>tr:last-child>td.tableblock,table.grid-rows thead:last-child>tr>th.tableblock{border-bottom-width:0}
  263. table.grid-rows tfoot>tr>th.tableblock,table.grid-rows tfoot>tr>td.tableblock{border-width:1px 0 0 0}
  264. table.frame-all{border-width:1px}
  265. table.frame-sides{border-width:0 1px}
  266. table.frame-topbot{border-width:1px 0}
  267. th.halign-left,td.halign-left{text-align:left}
  268. th.halign-right,td.halign-right{text-align:right}
  269. th.halign-center,td.halign-center{text-align:center}
  270. th.valign-top,td.valign-top{vertical-align:top}
  271. th.valign-bottom,td.valign-bottom{vertical-align:bottom}
  272. th.valign-middle,td.valign-middle{vertical-align:middle}
  273. table thead th,table tfoot th{font-weight:bold}
  274. tbody tr th{display:table-cell;line-height:1.6;background:#f7f8f7}
  275. tbody tr th,tbody tr th p,tfoot tr th,tfoot tr th p{color:rgba(0,0,0,.8);font-weight:bold}
  276. p.tableblock>code:only-child{background:none;padding:0}
  277. p.tableblock{font-size:1em}
  278. td>div.verse{white-space:pre}
  279. ol{margin-left:1.75em}
  280. ul li ol{margin-left:1.5em}
  281. dl dd{margin-left:1.125em}
  282. dl dd:last-child,dl dd:last-child>:last-child{margin-bottom:0}
  283. ol>li p,ul>li p,ul dd,ol dd,.olist .olist,.ulist .ulist,.ulist .olist,.olist .ulist{margin-bottom:.625em}
  284. ul.unstyled,ol.unnumbered,ul.checklist,ul.none{list-style-type:none}
  285. ul.unstyled,ol.unnumbered,ul.checklist{margin-left:.625em}
  286. ul.checklist li>p:first-child>.fa-square-o:first-child,ul.checklist li>p:first-child>.fa-check-square-o:first-child{width:1em;font-size:.85em}
  287. ul.checklist li>p:first-child>input[type="checkbox"]:first-child{width:1em;position:relative;top:1px}
  288. ul.inline{margin:0 auto .625em auto;margin-left:-1.375em;margin-right:0;padding:0;list-style:none;overflow:hidden}
  289. ul.inline>li{list-style:none;float:left;margin-left:1.375em;display:block}
  290. ul.inline>li>*{display:block}
  291. .unstyled dl dt{font-weight:400;font-style:normal}
  292. ol.arabic{list-style-type:decimal}
  293. ol.decimal{list-style-type:decimal-leading-zero}
  294. ol.loweralpha{list-style-type:lower-alpha}
  295. ol.upperalpha{list-style-type:upper-alpha}
  296. ol.lowerroman{list-style-type:lower-roman}
  297. ol.upperroman{list-style-type:upper-roman}
  298. ol.lowergreek{list-style-type:lower-greek}
  299. .hdlist>table,.colist>table{border:0;background:none}
  300. .hdlist>table>tbody>tr,.colist>table>tbody>tr{background:none}
  301. td.hdlist1,td.hdlist2{vertical-align:top;padding:0 .625em}
  302. td.hdlist1{font-weight:bold;padding-bottom:1.25em}
  303. .literalblock+.colist,.listingblock+.colist{margin-top:-.5em}
  304. .colist>table tr>td:first-of-type{padding:0 .75em;line-height:1}
  305. .colist>table tr>td:last-of-type{padding:.25em 0}
  306. .thumb,.th{line-height:0;display:inline-block;border:solid 4px #fff;-webkit-box-shadow:0 0 0 1px #ddd;box-shadow:0 0 0 1px #ddd}
  307. .imageblock.left,.imageblock[style*="float: left"]{margin:.25em .625em 1.25em 0}
  308. .imageblock.right,.imageblock[style*="float: right"]{margin:.25em 0 1.25em .625em}
  309. .imageblock>.title{margin-bottom:0}
  310. .imageblock.thumb,.imageblock.th{border-width:6px}
  311. .imageblock.thumb>.title,.imageblock.th>.title{padding:0 .125em}
  312. .image.left,.image.right{margin-top:.25em;margin-bottom:.25em;display:inline-block;line-height:0}
  313. .image.left{margin-right:.625em}
  314. .image.right{margin-left:.625em}
  315. a.image{text-decoration:none;display:inline-block}
  316. a.image object{pointer-events:none}
  317. sup.footnote,sup.footnoteref{font-size:.875em;position:static;vertical-align:super}
  318. sup.footnote a,sup.footnoteref a{text-decoration:none}
  319. sup.footnote a:active,sup.footnoteref a:active{text-decoration:underline}
  320. #footnotes{padding-top:.75em;padding-bottom:.75em;margin-bottom:.625em}
  321. #footnotes hr{width:20%;min-width:6.25em;margin:-.25em 0 .75em 0;border-width:1px 0 0 0}
  322. #footnotes .footnote{padding:0 .375em 0 .225em;line-height:1.3334;font-size:.875em;margin-left:1.2em;text-indent:-1.05em;margin-bottom:.2em}
  323. #footnotes .footnote a:first-of-type{font-weight:bold;text-decoration:none}
  324. #footnotes .footnote:last-of-type{margin-bottom:0}
  325. #content #footnotes{margin-top:-.625em;margin-bottom:0;padding:.75em 0}
  326. .gist .file-data>table{border:0;background:#fff;width:100%;margin-bottom:0}
  327. .gist .file-data>table td.line-data{width:99%}
  328. div.unbreakable{page-break-inside:avoid}
  329. .big{font-size:larger}
  330. .small{font-size:smaller}
  331. .underline{text-decoration:underline}
  332. .overline{text-decoration:overline}
  333. .line-through{text-decoration:line-through}
  334. .aqua{color:#00bfbf}
  335. .aqua-background{background-color:#00fafa}
  336. .black{color:#000}
  337. .black-background{background-color:#000}
  338. .blue{color:#0000bf}
  339. .blue-background{background-color:#0000fa}
  340. .fuchsia{color:#bf00bf}
  341. .fuchsia-background{background-color:#fa00fa}
  342. .gray{color:#606060}
  343. .gray-background{background-color:#7d7d7d}
  344. .green{color:#006000}
  345. .green-background{background-color:#007d00}
  346. .lime{color:#00bf00}
  347. .lime-background{background-color:#00fa00}
  348. .maroon{color:#600000}
  349. .maroon-background{background-color:#7d0000}
  350. .navy{color:#000060}
  351. .navy-background{background-color:#00007d}
  352. .olive{color:#606000}
  353. .olive-background{background-color:#7d7d00}
  354. .purple{color:#600060}
  355. .purple-background{background-color:#7d007d}
  356. .red{color:#bf0000}
  357. .red-background{background-color:#fa0000}
  358. .silver{color:#909090}
  359. .silver-background{background-color:#bcbcbc}
  360. .teal{color:#006060}
  361. .teal-background{background-color:#007d7d}
  362. .white{color:#bfbfbf}
  363. .white-background{background-color:#fafafa}
  364. .yellow{color:#bfbf00}
  365. .yellow-background{background-color:#fafa00}
  366. span.icon>.fa{cursor:default}
  367. .admonitionblock td.icon [class^="fa icon-"]{font-size:2.5em;text-shadow:1px 1px 2px rgba(0,0,0,.5);cursor:default}
  368. .admonitionblock td.icon .icon-note:before{content:"\f05a";color:#19407c}
  369. .admonitionblock td.icon .icon-tip:before{content:"\f0eb";text-shadow:1px 1px 2px rgba(155,155,0,.8);color:#111}
  370. .admonitionblock td.icon .icon-warning:before{content:"\f071";color:#bf6900}
  371. .admonitionblock td.icon .icon-caution:before{content:"\f06d";color:#bf3400}
  372. .admonitionblock td.icon .icon-important:before{content:"\f06a";color:#bf0000}
  373. .conum[data-value]{display:inline-block;color:#fff!important;background-color:rgba(0,0,0,.8);-webkit-border-radius:100px;border-radius:100px;text-align:center;font-size:.75em;width:1.67em;height:1.67em;line-height:1.67em;font-family:"Open Sans","DejaVu Sans",sans-serif;font-style:normal;font-weight:bold}
  374. .conum[data-value] *{color:#fff!important}
  375. .conum[data-value]+b{display:none}
  376. .conum[data-value]:after{content:attr(data-value)}
  377. pre .conum[data-value]{position:relative;top:-.125em}
  378. b.conum *{color:inherit!important}
  379. .conum:not([data-value]):empty{display:none}
  380. dt,th.tableblock,td.content,div.footnote{text-rendering:optimizeLegibility}
  381. h1,h2,p,td.content,span.alt{letter-spacing:-.01em}
  382. p strong,td.content strong,div.footnote strong{letter-spacing:-.005em}
  383. p,blockquote,dt,td.content,span.alt{font-size:1.0625rem}
  384. p{margin-bottom:1.25rem}
  385. .sidebarblock p,.sidebarblock dt,.sidebarblock td.content,p.tableblock{font-size:1em}
  386. .exampleblock>.content{background-color:#fffef7;border-color:#e0e0dc;-webkit-box-shadow:0 1px 4px #e0e0dc;box-shadow:0 1px 4px #e0e0dc}
  387. .print-only{display:none!important}
  388. @media print{@page{margin:1.25cm .75cm}
  389. *{-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important}
  390. a{color:inherit!important;text-decoration:underline!important}
  391. a.bare,a[href^="#"],a[href^="mailto:"]{text-decoration:none!important}
  392. a[href^="http:"]:not(.bare):after,a[href^="https:"]:not(.bare):after{content:"(" attr(href) ")";display:inline-block;font-size:.875em;padding-left:.25em}
  393. abbr[title]:after{content:" (" attr(title) ")"}
  394. pre,blockquote,tr,img,object,svg{page-break-inside:avoid}
  395. thead{display:table-header-group}
  396. svg{max-width:100%}
  397. p,blockquote,dt,td.content{font-size:1em;orphans:3;widows:3}
  398. h2,h3,#toctitle,.sidebarblock>.content>.title{page-break-after:avoid}
  399. #toc,.sidebarblock,.exampleblock>.content{background:none!important}
  400. #toc{border-bottom:1px solid #ddddd8!important;padding-bottom:0!important}
  401. .sect1{padding-bottom:0!important}
  402. .sect1+.sect1{border:0!important}
  403. #header>h1:first-child{margin-top:1.25rem}
  404. body.book #header{text-align:center}
  405. body.book #header>h1:first-child{border:0!important;margin:2.5em 0 1em 0}
  406. body.book #header .details{border:0!important;display:block;padding:0!important}
  407. body.book #header .details span:first-child{margin-left:0!important}
  408. body.book #header .details br{display:block}
  409. body.book #header .details br+span:before{content:none!important}
  410. body.book #toc{border:0!important;text-align:left!important;padding:0!important;margin:0!important}
  411. body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-break-before:always}
  412. .listingblock code[data-lang]:before{display:block}
  413. #footer{background:none!important;padding:0 .9375em}
  414. #footer-text{color:rgba(0,0,0,.6)!important;font-size:.9em}
  415. .hide-on-print{display:none!important}
  416. .print-only{display:block!important}
  417. .hide-for-print{display:none!important}
  418. .show-for-print{display:inherit!important}}
  419. </style>
  420. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  421. <style>
  422. /* Stylesheet for CodeRay to match GitHub theme | MIT License | http://foundation.zurb.com */
  423. /*pre.CodeRay {background-color:#f7f7f8;}*/
  424. .CodeRay .line-numbers{border-right:1px solid #d8d8d8;padding:0 0.5em 0 .25em}
  425. .CodeRay span.line-numbers{display:inline-block;margin-right:.5em;color:rgba(0,0,0,.3)}
  426. .CodeRay .line-numbers strong{color:rgba(0,0,0,.4)}
  427. table.CodeRay{border-collapse:separate;border-spacing:0;margin-bottom:0;border:0;background:none}
  428. table.CodeRay td{vertical-align: top;line-height:1.45}
  429. table.CodeRay td.line-numbers{text-align:right}
  430. table.CodeRay td.line-numbers>pre{padding:0;color:rgba(0,0,0,.3)}
  431. table.CodeRay td.code{padding:0 0 0 .5em}
  432. table.CodeRay td.code>pre{padding:0}
  433. .CodeRay .debug{color:#fff !important;background:#000080 !important}
  434. .CodeRay .annotation{color:#007}
  435. .CodeRay .attribute-name{color:#000080}
  436. .CodeRay .attribute-value{color:#700}
  437. .CodeRay .binary{color:#509}
  438. .CodeRay .comment{color:#998;font-style:italic}
  439. .CodeRay .char{color:#04d}
  440. .CodeRay .char .content{color:#04d}
  441. .CodeRay .char .delimiter{color:#039}
  442. .CodeRay .class{color:#458;font-weight:bold}
  443. .CodeRay .complex{color:#a08}
  444. .CodeRay .constant,.CodeRay .predefined-constant{color:#008080}
  445. .CodeRay .color{color:#099}
  446. .CodeRay .class-variable{color:#369}
  447. .CodeRay .decorator{color:#b0b}
  448. .CodeRay .definition{color:#099}
  449. .CodeRay .delimiter{color:#000}
  450. .CodeRay .doc{color:#970}
  451. .CodeRay .doctype{color:#34b}
  452. .CodeRay .doc-string{color:#d42}
  453. .CodeRay .escape{color:#666}
  454. .CodeRay .entity{color:#800}
  455. .CodeRay .error{color:#808}
  456. .CodeRay .exception{color:inherit}
  457. .CodeRay .filename{color:#099}
  458. .CodeRay .function{color:#900;font-weight:bold}
  459. .CodeRay .global-variable{color:#008080}
  460. .CodeRay .hex{color:#058}
  461. .CodeRay .integer,.CodeRay .float{color:#099}
  462. .CodeRay .include{color:#555}
  463. .CodeRay .inline{color:#000}
  464. .CodeRay .inline .inline{background:#ccc}
  465. .CodeRay .inline .inline .inline{background:#bbb}
  466. .CodeRay .inline .inline-delimiter{color:#d14}
  467. .CodeRay .inline-delimiter{color:#d14}
  468. .CodeRay .important{color:#555;font-weight:bold}
  469. .CodeRay .interpreted{color:#b2b}
  470. .CodeRay .instance-variable{color:#008080}
  471. .CodeRay .label{color:#970}
  472. .CodeRay .local-variable{color:#963}
  473. .CodeRay .octal{color:#40e}
  474. .CodeRay .predefined{color:#369}
  475. .CodeRay .preprocessor{color:#579}
  476. .CodeRay .pseudo-class{color:#555}
  477. .CodeRay .directive{font-weight:bold}
  478. .CodeRay .type{font-weight:bold}
  479. .CodeRay .predefined-type{color:inherit}
  480. .CodeRay .reserved,.CodeRay .keyword {color:#000;font-weight:bold}
  481. .CodeRay .key{color:#808}
  482. .CodeRay .key .delimiter{color:#606}
  483. .CodeRay .key .char{color:#80f}
  484. .CodeRay .value{color:#088}
  485. .CodeRay .regexp .delimiter{color:#808}
  486. .CodeRay .regexp .content{color:#808}
  487. .CodeRay .regexp .modifier{color:#808}
  488. .CodeRay .regexp .char{color:#d14}
  489. .CodeRay .regexp .function{color:#404;font-weight:bold}
  490. .CodeRay .string{color:#d20}
  491. .CodeRay .string .string .string{background:#ffd0d0}
  492. .CodeRay .string .content{color:#d14}
  493. .CodeRay .string .char{color:#d14}
  494. .CodeRay .string .delimiter{color:#d14}
  495. .CodeRay .shell{color:#d14}
  496. .CodeRay .shell .delimiter{color:#d14}
  497. .CodeRay .symbol{color:#990073}
  498. .CodeRay .symbol .content{color:#a60}
  499. .CodeRay .symbol .delimiter{color:#630}
  500. .CodeRay .tag{color:#008080}
  501. .CodeRay .tag-special{color:#d70}
  502. .CodeRay .variable{color:#036}
  503. .CodeRay .insert{background:#afa}
  504. .CodeRay .delete{background:#faa}
  505. .CodeRay .change{color:#aaf;background:#007}
  506. .CodeRay .head{color:#f8f;background:#505}
  507. .CodeRay .insert .insert{color:#080}
  508. .CodeRay .delete .delete{color:#800}
  509. .CodeRay .change .change{color:#66f}
  510. .CodeRay .head .head{color:#f4f}
  511. </style>
  512. </head>
  513. <body class="article toc2 toc-left">
  514. <div id="header">
  515. <h1>jME3 Special Effects Overview</h1>
  516. <div class="details">
  517. <span id="author" class="author"></span><br>
  518. <span id="revnumber">version ,</span>
  519. <span id="revdate">2016/03/17 20:48</span>
  520. </div>
  521. <div id="toc" class="toc2">
  522. <div id="toctitle">Table of Contents</div>
  523. <ul class="sectlevel1">
  524. <li><a href="#sample-code">Sample Code</a>
  525. <ul class="sectlevel2">
  526. <li><a href="#particle-emitter">Particle Emitter</a></li>
  527. <li><a href="#scene-processor">Scene Processor</a></li>
  528. <li><a href="#post-processor-filter">Post-Processor Filter</a></li>
  529. </ul>
  530. </li>
  531. <li><a href="#water">Water</a></li>
  532. <li><a href="#environment-effects">Environment Effects</a>
  533. <ul class="sectlevel2">
  534. <li><a href="#depth-of-field-blur">Depth of Field Blur</a></li>
  535. <li><a href="#fog">Fog</a></li>
  536. <li><a href="#light-scattering">Light Scattering</a></li>
  537. <li><a href="#vegetation">Vegetation</a></li>
  538. </ul>
  539. </li>
  540. <li><a href="#light-and-shadows">Light and Shadows</a>
  541. <ul class="sectlevel2">
  542. <li><a href="#bloom-and-glow">Bloom and Glow</a></li>
  543. <li><a href="#light">Light</a></li>
  544. <li><a href="#shadow">Shadow</a></li>
  545. </ul>
  546. </li>
  547. <li><a href="#special-glass-metal-dissolve-toon">Special: Glass, Metal, Dissolve, Toon</a>
  548. <ul class="sectlevel2">
  549. <li><a href="#toon-effect">Toon Effect</a></li>
  550. <li><a href="#fade-in-fade-out">Fade in / Fade out</a></li>
  551. <li><a href="#user-contributed">User Contributed</a></li>
  552. </ul>
  553. </li>
  554. <li><a href="#particle-emitters-explosions-fire-smoke">Particle Emitters: Explosions, Fire, Smoke</a>
  555. <ul class="sectlevel2">
  556. <li><a href="#creating-your-own-filters">Creating your own Filters</a></li>
  557. </ul>
  558. </li>
  559. </ul>
  560. </div>
  561. </div>
  562. <div id="content">
  563. <div id="preamble">
  564. <div class="sectionbody">
  565. <div class="paragraph">
  566. <p>jME3 supports several types of special effects: Post-Processor Filters, SceneProcessors, and Particle Emitters (also known as particle systems). This list contains screenshots and links to sample code that demonstrates how to add the effect to a scene.</p>
  567. </div>
  568. </div>
  569. </div>
  570. <div class="sect1">
  571. <h2 id="sample-code">Sample Code</h2>
  572. <div class="sectionbody">
  573. <div class="ulist">
  574. <ul>
  575. <li>
  576. <p>There is one <code>com.jme3.effect.ParticleEmitter</code> class for all Particle Systems.</p>
  577. </li>
  578. <li>
  579. <p>There is one <code>com.jme3.post.FilterPostProcessor</code> class and several <code>com.jme3.post.filters.*</code> classes (all Filters have <code>*Filter</code> in their names).</p>
  580. </li>
  581. <li>
  582. <p>There are several <code>SceneProcessor</code> classes in various packages, including e.g. <code>com.jme3.shadow.<strong></code> and <code>com.jme3.water.</strong></code> (SceneProcessor have <code>*Processor</code> or <code>*Renderer</code> in their names).</p>
  583. </li>
  584. </ul>
  585. </div>
  586. <div class="sect2">
  587. <h3 id="particle-emitter">Particle Emitter</h3>
  588. <div class="listingblock">
  589. <div class="content">
  590. <pre class="CodeRay highlight"><code data-lang="java"><span class="directive">public</span> <span class="type">class</span> <span class="class">MyGame</span> <span class="directive">extends</span> SimpleApplication {
  591. <span class="directive">public</span> <span class="type">void</span> simpleInitApp() {
  592. ParticleEmitter pm = <span class="keyword">new</span> ParticleEmitter(<span class="string"><span class="delimiter">&quot;</span><span class="content">my particle effect</span><span class="delimiter">&quot;</span></span>, <span class="predefined-type">Type</span>.Triangle, <span class="integer">60</span>);
  593. Material pmMat = <span class="keyword">new</span> Material(assetManager, <span class="string"><span class="delimiter">&quot;</span><span class="content">Common/MatDefs/Misc/Particle.j3md</span><span class="delimiter">&quot;</span></span>);
  594. pmMat.setTexture(<span class="string"><span class="delimiter">&quot;</span><span class="content">Texture</span><span class="delimiter">&quot;</span></span>, assetManager.loadTexture(<span class="string"><span class="delimiter">&quot;</span><span class="content">Effects/spark.png</span><span class="delimiter">&quot;</span></span>));
  595. pm.setMaterial(pmMat);
  596. pm.setImagesX(<span class="integer">1</span>);
  597. pm.setImagesY(<span class="integer">1</span>);
  598. rootNode.attachChild(pm); <span class="comment">// attach one or more emitters to any node</span>
  599. }
  600. }</code></pre>
  601. </div>
  602. </div>
  603. </div>
  604. <div class="sect2">
  605. <h3 id="scene-processor">Scene Processor</h3>
  606. <div class="listingblock">
  607. <div class="content">
  608. <pre class="CodeRay highlight"><code data-lang="java"><span class="directive">public</span> <span class="type">class</span> <span class="class">MyGame</span> <span class="directive">extends</span> SimpleApplication {
  609. <span class="directive">private</span> BasicShadowRenderer bsr;
  610. <span class="directive">public</span> <span class="type">void</span> simpleInitApp() {
  611. bsr = <span class="keyword">new</span> BasicShadowRenderer(assetManager, <span class="integer">1024</span>);
  612. bsr.setDirection(<span class="keyword">new</span> Vector3f(<span class="float">.3f</span>, -<span class="float">0.5f</span>, -<span class="float">0.5f</span>));
  613. viewPort.addProcessor(bsr); <span class="comment">// add one or more sceneprocessor to viewport</span>
  614. }</code></pre>
  615. </div>
  616. </div>
  617. </div>
  618. <div class="sect2">
  619. <h3 id="post-processor-filter">Post-Processor Filter</h3>
  620. <div class="listingblock">
  621. <div class="content">
  622. <pre class="CodeRay highlight"><code data-lang="java"><span class="directive">public</span> <span class="type">class</span> <span class="class">MyGame</span> <span class="directive">extends</span> SimpleApplication {
  623. <span class="directive">private</span> FilterPostProcessor fpp; <span class="comment">// one FilterPostProcessor per app</span>
  624. <span class="directive">private</span> SomeFilter sf; <span class="comment">// one or more Filters per app</span>
  625. <span class="directive">public</span> <span class="type">void</span> simpleInitApp() {
  626. fpp = <span class="keyword">new</span> FilterPostProcessor(assetManager);
  627. viewPort.addProcessor(fpp); <span class="comment">// add one FilterPostProcessor to viewPort</span>
  628. sf = <span class="keyword">new</span> SomeFilter();
  629. fpp.addFilter(sf); <span class="comment">// add one or more Filters to FilterPostProcessor</span>
  630. }</code></pre>
  631. </div>
  632. </div>
  633. </div>
  634. </div>
  635. </div>
  636. <div class="sect1">
  637. <h2 id="water">Water</h2>
  638. <div class="sectionbody">
  639. <div class="imageblock" style="text-align: right">
  640. <div class="content">
  641. <img src="../../jme3/advanced/water-post.png" alt="water-post.png" height="100">
  642. </div>
  643. </div>
  644. <div class="imageblock" style="text-align: right">
  645. <div class="content">
  646. <img src="../../jme3/advanced/water.png" alt="water.png" height="100">
  647. </div>
  648. </div>
  649. <div class="paragraph">
  650. <p>The jMonkeyEngine&#8217;s <a href="../../jme3/advanced/water.html">&quot;SeaMonkey&quot; WaterFilter</a> simulates ocean waves, foam, including cool underwater caustics.
  651. Use the SimpleWaterProcessor (SceneProcessor) for small, limited bodies of water, such as puddles, drinking troughs, pools, fountains.</p>
  652. </div>
  653. <div class="paragraph">
  654. <p>See also the <a href="http://jmonkeyengine.org/2011/01/15/new-advanced-water-effect-for-jmonkeyengine-3">Rendering Water as Post-Process Effect</a> announcement with video.</p>
  655. </div>
  656. <div class="ulist">
  657. <ul>
  658. <li>
  659. <p><a href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/water/TestSceneWater.java">jme3/src/test/jme3test/water/TestSceneWater.java</a> – SimpleWaterProcessor (SceneProcessor)</p>
  660. </li>
  661. <li>
  662. <p><a href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/water/TestSimpleWater.java">jme3/src/test/jme3test/water/TestSimpleWater.java</a> – SimpleWaterProcessor (SceneProcessor)</p>
  663. </li>
  664. </ul>
  665. </div>
  666. <div class="imageblock" style="text-align: right">
  667. <div class="content">
  668. <img src="../../jme3/advanced/water-reflection-muddy.png" alt="water-reflection-muddy.png" height="100">
  669. </div>
  670. </div>
  671. <div class="imageblock" style="text-align: right">
  672. <div class="content">
  673. <img src="../../jme3/advanced/underwater2.jpg" alt="underwater2.jpg" height="100">
  674. </div>
  675. </div>
  676. <div class="ulist">
  677. <ul>
  678. <li>
  679. <p><a href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/water/TestPostWater.java">jme3/src/test/jme3test/water/TestPostWater.java</a> – WaterFilter</p>
  680. </li>
  681. <li>
  682. <p><a href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/water/TestPostWaterLake.java">jme3/src/test/jme3test/water/TestPostWaterLake.java</a> – WaterFilter</p>
  683. </li>
  684. </ul>
  685. </div>
  686. </div>
  687. </div>
  688. <div class="sect1">
  689. <h2 id="environment-effects">Environment Effects</h2>
  690. <div class="sectionbody">
  691. <div class="sect2">
  692. <h3 id="depth-of-field-blur">Depth of Field Blur</h3>
  693. <div class="imageblock" style="text-align: right">
  694. <div class="content">
  695. <img src="../../jme3/advanced/dof-blur.png" alt="dof-blur.png" height="100">
  696. </div>
  697. </div>
  698. <div class="imageblock" style="text-align: right">
  699. <div class="content">
  700. <img src="../../jme3/advanced/light-scattering-filter.png" alt="light-scattering-filter.png" height="100">
  701. </div>
  702. </div>
  703. <div class="ulist">
  704. <ul>
  705. <li>
  706. <p><a href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestDepthOfField.java">jme3/src/test/jme3test/post/TestDepthOfField.java</a> – DepthOfFieldFilter</p>
  707. </li>
  708. </ul>
  709. </div>
  710. </div>
  711. <div class="sect2">
  712. <h3 id="fog">Fog</h3>
  713. <div class="ulist">
  714. <ul>
  715. <li>
  716. <p><a href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestFog.java">jme3/src/test/jme3test/post/TestFog.java</a> – FogFilter</p>
  717. </li>
  718. </ul>
  719. </div>
  720. </div>
  721. <div class="sect2">
  722. <h3 id="light-scattering">Light Scattering</h3>
  723. <div class="ulist">
  724. <ul>
  725. <li>
  726. <p><a href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestLightScattering.java">jme3/src/test/jme3test/post/TestLightScattering.java</a> – LightScatteringFilter</p>
  727. </li>
  728. </ul>
  729. </div>
  730. </div>
  731. <div class="sect2">
  732. <h3 id="vegetation">Vegetation</h3>
  733. <div class="ulist">
  734. <ul>
  735. <li>
  736. <p>Contribution: <a href="../../jme3/contributions/vegetationsystem/grass.html">Grass System</a></p>
  737. </li>
  738. <li>
  739. <p>Contribution: <a href="http://jmonkeyengine.org/groups/user-code-projects/forum/topic/generating-vegetation-paged-geometry-style/">Trees (WIP)</a></p>
  740. </li>
  741. </ul>
  742. </div>
  743. </div>
  744. </div>
  745. </div>
  746. <div class="sect1">
  747. <h2 id="light-and-shadows">Light and Shadows</h2>
  748. <div class="sectionbody">
  749. <div class="imageblock" style="text-align: right">
  750. <div class="content">
  751. <img src="../../jme3/advanced/tanlglow1.png" alt="tanlglow1.png" height="100">
  752. </div>
  753. </div>
  754. <div class="imageblock" style="text-align: right">
  755. <div class="content">
  756. <img src="../../jme3/advanced/shadow-sponza-ssao.png" alt="shadow-sponza-ssao.png" height="100">
  757. </div>
  758. </div>
  759. <div class="sect2">
  760. <h3 id="bloom-and-glow">Bloom and Glow</h3>
  761. <div class="ulist">
  762. <ul>
  763. <li>
  764. <p><a href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestBloom.java">jme3/src/test/jme3test/post/TestBloom.java</a></p>
  765. </li>
  766. <li>
  767. <p>More details: <a href="../../jme3/advanced/bloom_and_glow.html">Bloom and Glow</a> – BloomFilter</p>
  768. </li>
  769. </ul>
  770. </div>
  771. </div>
  772. <div class="sect2">
  773. <h3 id="light">Light</h3>
  774. <div class="ulist">
  775. <ul>
  776. <li>
  777. <p><a href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/light/TestSimpleLighting.java">jme3/src/test/jme3test/light/TestSimpleLighting.java</a> – DirectionalLight, PointLight</p>
  778. </li>
  779. <li>
  780. <p><a href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/light/TestLightRadius.java">jme3/src/test/jme3test/light/TestLightRadius.java</a> – DirectionalLight, PointLight</p>
  781. </li>
  782. <li>
  783. <p><a href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/light/TestManyLights.java">jme3/src/test/jme3test/light/TestManyLights.java</a> – .j3o scene</p>
  784. </li>
  785. <li>
  786. <p>More details: <a href="../../jme3/advanced/light_and_shadow.html">Light and Shadow</a></p>
  787. </li>
  788. </ul>
  789. </div>
  790. <div class="imageblock" style="text-align: right">
  791. <div class="content">
  792. <img src="../../jme3/advanced/shadow.png" alt="shadow.png" height="100">
  793. </div>
  794. </div>
  795. <div class="imageblock" style="text-align: right">
  796. <div class="content">
  797. <img src="../../jme3/advanced/light-sources.png" alt="light-sources.png" height="100">
  798. </div>
  799. </div>
  800. </div>
  801. <div class="sect2">
  802. <h3 id="shadow">Shadow</h3>
  803. <div class="ulist">
  804. <ul>
  805. <li>
  806. <p><a href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/light/TestShadow.java">jme3/src/test/jme3test/light/TestShadow.java</a> – BasicShadowRenderer (SceneProcessor)</p>
  807. </li>
  808. <li>
  809. <p><a href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/light/TestPssmShadow.java">jme3/src/test/jme3test/light/TestPssmShadow.java</a> – PssmShadowRenderer (SceneProcessor), also known as Parallel-Split Shadow Mapping (PSSM).</p>
  810. </li>
  811. <li>
  812. <p><a href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestSSAO.java">jme3/src/test/jme3test/post/TestSSAO.java</a>, <a href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestSSAO2.java">jme3/src/test/jme3test/post/TestSSAO2.java</a> – SSAOFilter, also known as Screen-Space Ambient Occlusion shadows (SSOA).</p>
  813. </li>
  814. <li>
  815. <p><a href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestTransparentSSAO.java">jme3/src/test/jme3test/post/TestTransparentSSAO.java</a> – SSAOFilter, also known as Screen-Space Ambient Occlusion shadows (SSOA), plus transparancy</p>
  816. </li>
  817. <li>
  818. <p>More details: <a href="../../jme3/advanced/light_and_shadow.html">Light and Shadow</a></p>
  819. </li>
  820. </ul>
  821. </div>
  822. </div>
  823. </div>
  824. </div>
  825. <div class="sect1">
  826. <h2 id="special-glass-metal-dissolve-toon">Special: Glass, Metal, Dissolve, Toon</h2>
  827. <div class="sectionbody">
  828. <div class="imageblock" style="text-align: right">
  829. <div class="content">
  830. <img src="../../jme3/advanced/toon-dino.png" alt="toon-dino.png" height="100">
  831. </div>
  832. </div>
  833. <div class="sect2">
  834. <h3 id="toon-effect">Toon Effect</h3>
  835. <div class="ulist">
  836. <ul>
  837. <li>
  838. <p><a href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestCartoonEdge.java">jme3/src/test/jme3test/post/TestCartoonEdge.java</a> – CartoonEdgeFilter</p>
  839. </li>
  840. <li>
  841. <p><a href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/post/TestTransparentCartoonEdge.java">jme3/src/test/jme3test/post/TestTransparentCartoonEdge.java</a> – CartoonEdgeFilter</p>
  842. </li>
  843. </ul>
  844. </div>
  845. </div>
  846. <div class="sect2">
  847. <h3 id="fade-in-fade-out">Fade in / Fade out</h3>
  848. <div class="ulist">
  849. <ul>
  850. <li>
  851. <p><a href="../../jme3/advanced/fade.html">Fade</a> – FadeFilter</p>
  852. </li>
  853. </ul>
  854. </div>
  855. </div>
  856. <div class="sect2">
  857. <h3 id="user-contributed">User Contributed</h3>
  858. <div class="imageblock" style="text-align: right">
  859. <div class="content">
  860. <img src="../../jme3/advanced/shaderblow_light1.jpg" alt="shaderblow_light1.jpg" height="150">
  861. </div>
  862. </div>
  863. <div class="imageblock" style="text-align: right">
  864. <div class="content">
  865. <img src="../../jme3/advanced/shaderblow_glass.jpg" alt="shaderblow_glass.jpg" height="150">
  866. </div>
  867. </div>
  868. <div class="imageblock" style="text-align: right">
  869. <div class="content">
  870. <img src="../../jme3/advanced/shaderblow_matcap.jpg" alt="shaderblow_matcap.jpg" height="150">
  871. </div>
  872. </div>
  873. <div class="imageblock" style="text-align: right">
  874. <div class="content">
  875. <img src="../../jme3/advanced/shaderblow_light2.jpg" alt="shaderblow_light2.jpg" height="150">
  876. </div>
  877. </div>
  878. <div class="paragraph">
  879. <p><a href="../../sdk/plugin/shaderblow.html">ShaderBlow - GLSL Shader Library</a></p>
  880. </div>
  881. <div class="ulist">
  882. <ul>
  883. <li>
  884. <p>LightBlow Shader – blend material texture maps</p>
  885. </li>
  886. <li>
  887. <p>FakeParticleBlow Shader – jet, fire effect</p>
  888. </li>
  889. <li>
  890. <p>ToonBlow Shader – Toon Shading, toon edges</p>
  891. </li>
  892. <li>
  893. <p>Dissolve Shader – Scifi teleportation/dissolve effect</p>
  894. </li>
  895. <li>
  896. <p>MatCap Shader – Gold, metals, glass, toons…!</p>
  897. </li>
  898. <li>
  899. <p>Glass Shader – Glass</p>
  900. </li>
  901. <li>
  902. <p>Force Shield Shader – Scifi impact-on-force-field effect</p>
  903. </li>
  904. <li>
  905. <p>SimpleSprite Shader – Animated textures</p>
  906. </li>
  907. <li>
  908. <p>SimpleSpriteParticle Shader – Sprite library</p>
  909. </li>
  910. <li>
  911. <p>MovingTexture Shader – Animated cloud/mist texture</p>
  912. </li>
  913. <li>
  914. <p>SoftParticles Shader – Fire, clouds, smoke etc</p>
  915. </li>
  916. <li>
  917. <p>Displace Shader – Deformation effect: Ripple, wave, pulse, swell!</p>
  918. </li>
  919. </ul>
  920. </div>
  921. <div class="paragraph">
  922. <p>Thanks for your awesome contributions! Keep them coming!</p>
  923. </div>
  924. </div>
  925. </div>
  926. </div>
  927. <div class="sect1">
  928. <h2 id="particle-emitters-explosions-fire-smoke">Particle Emitters: Explosions, Fire, Smoke</h2>
  929. <div class="sectionbody">
  930. <div class="imageblock" style="text-align: right">
  931. <div class="content">
  932. <img src="../../jme3/advanced/explosion-5.png" alt="explosion-5.png" height="100">
  933. </div>
  934. </div>
  935. <div class="imageblock" style="text-align: right">
  936. <div class="content">
  937. <img src="../../jme3/advanced/particle.png" alt="particle.png" height="100">
  938. </div>
  939. </div>
  940. <div class="paragraph">
  941. <p><a href="../../jme3/advanced/particle_emitters.html">Particle emitter effects</a> are highly configurable and can have any texture. They can simulate smoke, dust, leaves, meteors, snowflakes, mosquitos, fire, explosions, clusters, embers, sparks…</p>
  942. </div>
  943. <div class="ulist">
  944. <ul>
  945. <li>
  946. <p><a href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/effect/TestExplosionEffect.java">jme3/src/test/jme3test/effect/TestExplosionEffect.java</a> – debris, flame, flash, shockwave, smoke, sparks</p>
  947. </li>
  948. <li>
  949. <p><a href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/effect/TestPointSprite.java">jme3/src/test/jme3test/effect/TestPointSprite.java</a> – cluster of points</p>
  950. </li>
  951. <li>
  952. <p><a href="http://code.google.com/p/jmonkeyengine/source/browse/trunk/engine/src/test/jme3test/effect/TestMovingParticle.java">jme3/src/test/jme3test/effect/TestMovingParticle.java</a> – dust, smoke
  953. '''</p>
  954. </li>
  955. </ul>
  956. </div>
  957. <div class="sect2">
  958. <h3 id="creating-your-own-filters">Creating your own Filters</h3>
  959. <div class="paragraph">
  960. <p>Here is an extract taken from @nehon in the forum thread (<a href="http://hub.jmonkeyengine.org/forum/topic/how-exactly-do-filters-work/">http://hub.jmonkeyengine.org/forum/topic/how-exactly-do-filters-work/</a>)</p>
  961. </div>
  962. <div class="paragraph">
  963. <p>The methods are called in this order (pretty much the same flow as processors):
  964. - initFilter() is called once when the FilterPostPorcessor is initialized or when the filter is added to the processor and this one as already been initialized.</p>
  965. </div>
  966. <div class="paragraph">
  967. <p>for each frame the methods are called in that sequence :
  968. - preFrame() occurs before anything happens
  969. - postQueue() occcurs once the queues have been populated (there is one queue per bucket and 2 additional queues for the shadows, casters and recievers). Note that geometries in the queues are the one in the view frustum.
  970. - postFrame occurs once the main frame has been rendered (the back buffer)</p>
  971. </div>
  972. <div class="paragraph">
  973. <p>Those methods are optional in a filter, they are only there if you want to hook in the rendering process.</p>
  974. </div>
  975. <div class="paragraph">
  976. <p>The material variable is here for convenience. You have a getMaterial method that returns the material that’s gonna be used to render the full screen quad. It just happened that in every implementation I had a material attribute in all my sub-classes, so I just put it back in the abstract class. Most of the time getMaterial returns this attribute.</p>
  977. </div>
  978. <div class="paragraph">
  979. <p>Forced-technique can be any technique really, they are more related with the material system than to the filters but anyway. When you use a forced technique the renderer tries to select it on the material of each geometry, if the technique does not exists for the material the geometry is not rendered.
  980. You assume well about the SSAO filer, the normal of the scene are rendered to a texture in a pre pass.</p>
  981. </div>
  982. <div class="paragraph">
  983. <p>Passes : these are filters in filters in a way. First they are a convenient way to initialize a FrameBuffer and the associated textures it needs, then you can use them for what ever you want.
  984. For example, a Pass can be (as in the SSAO filter) an extra render of the scene with a forced technique, and you have to handle the render yourself in the postQueue method.
  985. It can be a post pass to do after the main filter has been rendered to screen (for example an additional blur pass used in SSAO again). You have a list of passes called postRenderPass in the Filter abstract class. If you add a pass to this list, it’ll be automatically rendered by the FilterPostProcessor during the filter chain.</p>
  986. </div>
  987. <div class="paragraph">
  988. <p>The bloom Filter does an intensive use of passes.</p>
  989. </div>
  990. <div class="paragraph">
  991. <p>Filters in a nutshell.</p>
  992. </div>
  993. <hr>
  994. <div class="paragraph">
  995. <p>See also:</p>
  996. </div>
  997. <div class="ulist">
  998. <ul>
  999. <li>
  1000. <p><a href="../../jme3/advanced/particle_emitters.html">Particle Emitters</a></p>
  1001. </li>
  1002. <li>
  1003. <p><a href="../../jme3/advanced/bloom_and_glow.html">Bloom and Glow</a></p>
  1004. </li>
  1005. <li>
  1006. <p><a href="http://www.smashingmagazine.com/2008/08/07/50-photoshop-tutorials-for-sky-and-space-effects/">Photoshop Tutorial for Sky and space effects (article)</a></p>
  1007. </li>
  1008. </ul>
  1009. </div>
  1010. </div>
  1011. </div>
  1012. </div>
  1013. </div>
  1014. <div id="footer">
  1015. <div id="footer-text">
  1016. Version <br>
  1017. Last updated 2016-06-05 15:58:32 UTC
  1018. </div>
  1019. </div>
  1020. </body>
  1021. </html>