bloom_and_glow.html 46 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899
  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">
  9. <title>Bloom and Glow</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>Bloom and Glow</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="sectlevel0">
  524. <li><a href="#bloom-usage">Bloom Usage</a></li>
  525. <li><a href="#bloom-with-a-glow-map">Bloom with a glow map</a>
  526. <ul class="sectlevel4">
  527. <li><a href="#creating-a-glow-map">Creating a glow-map</a></li>
  528. <li><a href="#usage">Usage</a></li>
  529. </ul>
  530. </li>
  531. <li><a href="#bloom-with-a-glow-color">Bloom with a glow color</a>
  532. <ul class="sectlevel4">
  533. <li><a href="#usage-2">Usage</a></li>
  534. </ul>
  535. </li>
  536. <li><a href="#hints-and-tricks">Hints and tricks</a>
  537. <ul class="sectlevel4">
  538. <li><a href="#increasing-the-blur-range-and-reducing-fps-cost">Increasing the blur range and reducing fps cost</a></li>
  539. <li><a href="#using-classic-bloom-combined-with-a-glow-map">Using classic bloom combined with a glow map</a></li>
  540. <li><a href="#making-your-home-brewed-material-definition-support-glow">Making your home brewed material definition support Glow</a></li>
  541. <li><a href="#make-a-glowing-object-stop-to-glow">Make a glowing object stop to glow</a></li>
  542. </ul>
  543. </li>
  544. </ul>
  545. </div>
  546. </div>
  547. <div id="content">
  548. <div id="preamble">
  549. <div class="sectionbody">
  550. <div class="paragraph">
  551. <p>Bloom is a popular shader effect in 3D games industry. It usually consist in displaying a glowing halo around light sources or bright areas of a scene.
  552. In practice, the bright areas are extracted from the rendered scene, blurred and finally added up to the render.</p>
  553. </div>
  554. <div class="paragraph">
  555. <p>Those images gives an idea of what bloom does. The left image has no bloom effect, the right image does.<br></p>
  556. </div>
  557. <div class="paragraph">
  558. <p><span class="image"><img src="../../jme3/advanced/nobloomsky.png" alt="No bloom" height=""></span><span class="image"><img src="../../jme3/advanced/blomsky.png" alt="Bloom" height=""></span></p>
  559. </div>
  560. </div>
  561. </div>
  562. <h1 id="bloom-usage" class="sect0">Bloom Usage</h1>
  563. <div class="olist arabic">
  564. <ol class="arabic">
  565. <li>
  566. <p>Create a FilterPostProcessor</p>
  567. </li>
  568. <li>
  569. <p>Create a BloomFilter</p>
  570. </li>
  571. <li>
  572. <p>Add the filter to the processor</p>
  573. </li>
  574. <li>
  575. <p>Add the processor to the viewPort</p>
  576. </li>
  577. </ol>
  578. </div>
  579. <div class="listingblock">
  580. <div class="content">
  581. <pre class="CodeRay highlight"><code data-lang="java"> FilterPostProcessor fpp=<span class="keyword">new</span> FilterPostProcessor(assetManager);
  582. BloomFilter bloom=<span class="keyword">new</span> BloomFilter();
  583. fpp.addFilter(bloom);
  584. viewPort.addProcessor(fpp);</code></pre>
  585. </div>
  586. </div>
  587. <div class="paragraph">
  588. <p>Here are the parameters that you can tweak :</p>
  589. </div>
  590. <table class="tableblock frame-all grid-all spread">
  591. <colgroup>
  592. <col style="width: 25%;">
  593. <col style="width: 25%;">
  594. <col style="width: 25%;">
  595. <col style="width: 25%;">
  596. </colgroup>
  597. <thead>
  598. <tr>
  599. <th class="tableblock halign-left valign-top">Parameter</th>
  600. <th class="tableblock halign-left valign-top">Method</th>
  601. <th class="tableblock halign-left valign-top">Default</th>
  602. <th class="tableblock halign-left valign-top">Description</th>
  603. </tr>
  604. </thead>
  605. <tbody>
  606. <tr>
  607. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  608. <p>blur scale</p>
  609. </div></div></td>
  610. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  611. <p><code>setBlurScale(float)</code></p>
  612. </div></div></td>
  613. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  614. <p>1.5f</p>
  615. </div></div></td>
  616. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  617. <p>the scale of the bloom effect, but be careful, high values does artifacts</p>
  618. </div></div></td>
  619. </tr>
  620. <tr>
  621. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  622. <p>exposure Power</p>
  623. </div></div></td>
  624. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  625. <p><code>setExposurePower(float)</code></p>
  626. </div></div></td>
  627. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  628. <p>5.0f</p>
  629. </div></div></td>
  630. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  631. <p>the glowing channel color is raised to the value power</p>
  632. </div></div></td>
  633. </tr>
  634. <tr>
  635. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  636. <p>exposure cut-off</p>
  637. </div></div></td>
  638. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  639. <p><code>setExposureCutOff(float)</code></p>
  640. </div></div></td>
  641. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  642. <p>0.0f</p>
  643. </div></div></td>
  644. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  645. <p>the threshold of color to bloom during extraction</p>
  646. </div></div></td>
  647. </tr>
  648. <tr>
  649. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  650. <p>bloom intensity</p>
  651. </div></div></td>
  652. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  653. <p><code>setBloomIntensity(float)</code></p>
  654. </div></div></td>
  655. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  656. <p>2.0f</p>
  657. </div></div></td>
  658. <td class="tableblock halign-left valign-top"><div><div class="paragraph">
  659. <p>the resulting bloom value is multiplied by this intensity</p>
  660. </div></div></td>
  661. </tr>
  662. </tbody>
  663. </table>
  664. <div class="paragraph">
  665. <p>You&#8217;ll probably need to adjust those parameters depending on your scene.</p>
  666. </div>
  667. <h1 id="bloom-with-a-glow-map" class="sect0">Bloom with a glow map</h1>
  668. <div class="paragraph">
  669. <p>Sometimes, you want to have more control over what glows and does not glow.
  670. The bloom filter supports a glow map or a glow color.</p>
  671. </div>
  672. <div class="sect4">
  673. <h5 id="creating-a-glow-map">Creating a glow-map</h5>
  674. <div class="paragraph">
  675. <p>Let&#8217;s take the hover tank example bundled with JME3 test data.+</p>
  676. </div>
  677. <div class="paragraph">
  678. <p>Here you can see the diffuse map of the tank, and the associated glow map that only contains the parts of the texture that will glow and their glowing color:<br></p>
  679. </div>
  680. <div class="paragraph">
  681. <p><span class="image"><img src="../../jme3/advanced/tank_diffuse_ss.png" alt="Tank diffuse map" height=""></span>
  682. <span class="image"><img src="../../jme3/advanced/tank_glow_map_ss.png" alt="Tank glow map" height=""></span></p>
  683. </div>
  684. <div class="paragraph">
  685. <p>Glow maps work with Lighting.j3md, Particles.j3md and SolidColor.j3md material definitions.
  686. The tank material looks like this :</p>
  687. </div>
  688. <div class="listingblock">
  689. <div class="content">
  690. <pre class="CodeRay highlight"><code>Material My Material : Common/MatDefs/Light/Lighting.j3md {
  691. MaterialParameters {
  692. SpecularMap : Models/HoverTank/tank_specular.png
  693. Shininess : 8
  694. NormalMap : Models/HoverTank/tank_normals.png
  695. DiffuseMap : Models/HoverTank/tank_diffuse.png
  696. GlowMap : Models/HoverTank/tank_glow_map_highres.png
  697. UseMaterialColors : true
  698. Ambient : 0.0 0.0 0.0 1.0
  699. Diffuse : 1.0 1.0 1.0 1.0
  700. Specular : 1.0 1.0 1.0 1.0
  701. }
  702. }</code></pre>
  703. </div>
  704. </div>
  705. <div class="paragraph">
  706. <p>The glow map is defined here : <strong>GlowMap : Models/HoverTank/tank_glow_map_highres.png</strong></p>
  707. </div>
  708. </div>
  709. <div class="sect4">
  710. <h5 id="usage">Usage</h5>
  711. <div class="olist arabic">
  712. <ol class="arabic">
  713. <li>
  714. <p>Create a FilterPostProcessor</p>
  715. </li>
  716. <li>
  717. <p>Create a BloomFilter with the GlowMode.Objects parameter</p>
  718. </li>
  719. <li>
  720. <p>Add the filter to the processor</p>
  721. </li>
  722. <li>
  723. <p>Add the processor to the viewPort</p>
  724. </li>
  725. </ol>
  726. </div>
  727. <div class="listingblock">
  728. <div class="content">
  729. <pre class="CodeRay highlight"><code> FilterPostProcessor fpp=new FilterPostProcessor(assetManager);
  730. BloomFilter bf=new BloomFilter(BloomFilter.GlowMode.Objects);
  731. fpp.addFilter(bf);
  732. viewPort.addProcessor(fpp);</code></pre>
  733. </div>
  734. </div>
  735. <div class="paragraph">
  736. <p>Here is the result :<br></p>
  737. </div>
  738. <div class="paragraph">
  739. <p><span class="image"><img src="../../jme3/advanced/tanlglow1.png" alt="Glowing hover tank" height=""></span></p>
  740. </div>
  741. </div>
  742. <h1 id="bloom-with-a-glow-color" class="sect0">Bloom with a glow color</h1>
  743. <div class="paragraph">
  744. <p>Sometimes you need an entire object to glow, not just parts of it.
  745. In this case you&#8217;ll need to use the glow color parameter.</p>
  746. </div>
  747. <div class="sect4">
  748. <h5 id="usage-2">Usage</h5>
  749. <div class="olist arabic">
  750. <ol class="arabic">
  751. <li>
  752. <p>Create a material for your object and set the GlowColor parameter</p>
  753. </li>
  754. <li>
  755. <p>Create a FilterPostProcessor</p>
  756. </li>
  757. <li>
  758. <p>Create a BloomFilter with the GlowMode.Objects parameter</p>
  759. </li>
  760. <li>
  761. <p>Add the filter to the processor</p>
  762. </li>
  763. <li>
  764. <p>Add the processor to the viewPort</p>
  765. </li>
  766. </ol>
  767. </div>
  768. <div class="listingblock">
  769. <div class="content">
  770. <pre class="CodeRay highlight"><code> Material mat = new Material(getAssetManager(), "Common/MatDefs/Misc/SolidColor.j3md");
  771. mat.setColor("Color", ColorRGBA.Green);
  772. mat.setColor("GlowColor", ColorRGBA.Green);
  773. fpp=new FilterPostProcessor(assetManager);
  774. bloom= new BloomFilter(BloomFilter.GlowMode.Objects);
  775. fpp.addFilter(bloom);
  776. viewPort.addProcessor(fpp);</code></pre>
  777. </div>
  778. </div>
  779. <div class="paragraph">
  780. <p>Here is the result on Oto&#8217;s plasma ball (before and after) :<br></p>
  781. </div>
  782. <div class="imageblock" style="text-align: left">
  783. <div class="content">
  784. <img src="../../jme3/advanced/otonobloom.png" alt="Oto's plasma ball is just a big pea" height="">
  785. </div>
  786. </div>
  787. <div class="imageblock" style="text-align: left">
  788. <div class="content">
  789. <img src="../../jme3/advanced/otoglow.png" alt="Oto's plasma ball radiates incredible power!!!" height="">
  790. </div>
  791. </div>
  792. </div>
  793. <h1 id="hints-and-tricks" class="sect0">Hints and tricks</h1>
  794. <div class="sect4">
  795. <h5 id="increasing-the-blur-range-and-reducing-fps-cost">Increasing the blur range and reducing fps cost</h5>
  796. <div class="paragraph">
  797. <p>The glow render is sampled on a texture that has the same dimensions as the viewport.
  798. You can reduce the size of the bloom sampling just by using the setDownSamplingFactor method like this :<br></p>
  799. </div>
  800. <div class="listingblock">
  801. <div class="content">
  802. <pre class="CodeRay highlight"><code data-lang="java"> BloomFilter bloom=<span class="keyword">new</span> BloomFilter();
  803. bloom.setDownSamplingFactor(<span class="float">2.0f</span>);</code></pre>
  804. </div>
  805. </div>
  806. <div class="paragraph">
  807. <p>In this example the sampling size is divided by 4 (width/2,height/2), resulting in less work to blur the scene.
  808. The resulting texture is then up sampled to the screen size using hardware bilinear filtering. this results in a wider blur range.</p>
  809. </div>
  810. </div>
  811. <div class="sect4">
  812. <h5 id="using-classic-bloom-combined-with-a-glow-map">Using classic bloom combined with a glow map</h5>
  813. <div class="paragraph">
  814. <p>let&#8217;s say you want a global bloom on your scene, but you have also a glowing object on it.
  815. You can use only one bloom filter for both effects like that</p>
  816. </div>
  817. <div class="listingblock">
  818. <div class="content">
  819. <pre class="CodeRay highlight"><code data-lang="java">BloomFilter bloom=<span class="keyword">new</span> BloomFilter(BloomFilter.GlowMode.SceneAndObjects);</code></pre>
  820. </div>
  821. </div>
  822. <div class="paragraph">
  823. <p>However, note that both effects will share the same values of attribute, and sometimes, it won&#8217;t be what you need.</p>
  824. </div>
  825. </div>
  826. <div class="sect4">
  827. <h5 id="making-your-home-brewed-material-definition-support-glow">Making your home brewed material definition support Glow</h5>
  828. <div class="paragraph">
  829. <p>Let&#8217;s say you have made a custom material on your own, and that you want it to support glow maps and glow color.
  830. In your material definition you need to add those lines in the MaterialParameters section :</p>
  831. </div>
  832. <div class="listingblock">
  833. <div class="content">
  834. <pre class="CodeRay highlight"><code> MaterialParameters {
  835. ....
  836. // Texture of the glowing parts of the material
  837. Texture2D GlowMap
  838. // The glow color of the object
  839. Color GlowColor
  840. }</code></pre>
  841. </div>
  842. </div>
  843. <div class="paragraph">
  844. <p>Then add the following technique :</p>
  845. </div>
  846. <div class="listingblock">
  847. <div class="content">
  848. <pre class="CodeRay highlight"><code> Technique Glow {
  849. LightMode SinglePass
  850. VertexShader GLSL100: Common/MatDefs/Misc/SimpleTextured.vert
  851. FragmentShader GLSL100: Common/MatDefs/Light/Glow.frag
  852. WorldParameters {
  853. WorldViewProjectionMatrix
  854. }
  855. Defines {
  856. HAS_GLOWMAP : GlowMap
  857. HAS_GLOWCOLOR : GlowColor
  858. }
  859. }</code></pre>
  860. </div>
  861. </div>
  862. <div class="paragraph">
  863. <p>Then you can use this material with the BloomFilter</p>
  864. </div>
  865. </div>
  866. <div class="sect4">
  867. <h5 id="make-a-glowing-object-stop-to-glow">Make a glowing object stop to glow</h5>
  868. <div class="paragraph">
  869. <p>If you are using a glow map, remove the texture from the material.</p>
  870. </div>
  871. <div class="listingblock">
  872. <div class="content">
  873. <pre class="CodeRay highlight"><code>material.clearTextureParam("GlowMap");</code></pre>
  874. </div>
  875. </div>
  876. <div class="paragraph">
  877. <p>If you are using a glow color, set it to black</p>
  878. </div>
  879. <div class="listingblock">
  880. <div class="content">
  881. <pre class="CodeRay highlight"><code>material.setColor("GlowColor",ColorRGBA.Black);</code></pre>
  882. </div>
  883. </div>
  884. </div>
  885. </div>
  886. <div id="footer">
  887. <div id="footer-text">
  888. Version <br>
  889. Last updated 2016-06-05 15:58:32 UTC
  890. </div>
  891. </div>
  892. </body>
  893. </html>