jme3_shadernodes.html 65 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289
  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. <title>Shader Nodes</title>
  9. <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">
  10. <style>
  11. /* Asciidoctor default stylesheet | MIT License | http://asciidoctor.org */
  12. /* Remove comment around @import statement below when using as a custom stylesheet */
  13. /*@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";*/
  14. article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
  15. audio,canvas,video{display:inline-block}
  16. audio:not([controls]){display:none;height:0}
  17. [hidden],template{display:none}
  18. script{display:none!important}
  19. html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
  20. body{margin:0}
  21. a{background:transparent}
  22. a:focus{outline:thin dotted}
  23. a:active,a:hover{outline:0}
  24. h1{font-size:2em;margin:.67em 0}
  25. abbr[title]{border-bottom:1px dotted}
  26. b,strong{font-weight:bold}
  27. dfn{font-style:italic}
  28. hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
  29. mark{background:#ff0;color:#000}
  30. code,kbd,pre,samp{font-family:monospace;font-size:1em}
  31. pre{white-space:pre-wrap}
  32. q{quotes:"\201C" "\201D" "\2018" "\2019"}
  33. small{font-size:80%}
  34. sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
  35. sup{top:-.5em}
  36. sub{bottom:-.25em}
  37. img{border:0}
  38. svg:not(:root){overflow:hidden}
  39. figure{margin:0}
  40. fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
  41. legend{border:0;padding:0}
  42. button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
  43. button,input{line-height:normal}
  44. button,select{text-transform:none}
  45. button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
  46. button[disabled],html input[disabled]{cursor:default}
  47. input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
  48. input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
  49. input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
  50. button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
  51. textarea{overflow:auto;vertical-align:top}
  52. table{border-collapse:collapse;border-spacing:0}
  53. *,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
  54. html,body{font-size:100%}
  55. 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}
  56. a:hover{cursor:pointer}
  57. img,object,embed{max-width:100%;height:auto}
  58. object,embed{height:100%}
  59. img{-ms-interpolation-mode:bicubic}
  60. .left{float:left!important}
  61. .right{float:right!important}
  62. .text-left{text-align:left!important}
  63. .text-right{text-align:right!important}
  64. .text-center{text-align:center!important}
  65. .text-justify{text-align:justify!important}
  66. .hide{display:none}
  67. body{-webkit-font-smoothing:antialiased}
  68. img,object,svg{display:inline-block;vertical-align:middle}
  69. textarea{height:auto;min-height:50px}
  70. select{width:100%}
  71. .center{margin-left:auto;margin-right:auto}
  72. .spread{width:100%}
  73. p.lead,.paragraph.lead>p,#preamble>.sectionbody>.paragraph:first-of-type p{font-size:1.21875em;line-height:1.6}
  74. .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}
  75. 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}
  76. a{color:#2156a5;text-decoration:underline;line-height:inherit}
  77. a:hover,a:focus{color:#1d4b8f}
  78. a img{border:none}
  79. p{font-family:inherit;font-weight:400;font-size:1em;line-height:1.6;margin-bottom:1.25em;text-rendering:optimizeLegibility}
  80. p aside{font-size:.875em;line-height:1.35;font-style:italic}
  81. 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}
  82. 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}
  83. h1{font-size:2.125em}
  84. h2{font-size:1.6875em}
  85. h3,#toctitle,.sidebarblock>.content>.title{font-size:1.375em}
  86. h4,h5{font-size:1.125em}
  87. h6{font-size:1em}
  88. hr{border:solid #ddddd8;border-width:1px 0 0;clear:both;margin:1.25em 0 1.1875em;height:0}
  89. em,i{font-style:italic;line-height:inherit}
  90. strong,b{font-weight:bold;line-height:inherit}
  91. small{font-size:60%;line-height:inherit}
  92. code{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;color:rgba(0,0,0,.9)}
  93. ul,ol,dl{font-size:1em;line-height:1.6;margin-bottom:1.25em;list-style-position:outside;font-family:inherit}
  94. ul,ol,ul.no-bullet,ol.no-bullet{margin-left:1.5em}
  95. ul li ul,ul li ol{margin-left:1.25em;margin-bottom:0;font-size:1em}
  96. ul.square li ul,ul.circle li ul,ul.disc li ul{list-style:inherit}
  97. ul.square{list-style-type:square}
  98. ul.circle{list-style-type:circle}
  99. ul.disc{list-style-type:disc}
  100. ul.no-bullet{list-style:none}
  101. ol li ul,ol li ol{margin-left:1.25em;margin-bottom:0}
  102. dl dt{margin-bottom:.3125em;font-weight:bold}
  103. dl dd{margin-bottom:1.25em}
  104. abbr,acronym{text-transform:uppercase;font-size:90%;color:rgba(0,0,0,.8);border-bottom:1px dotted #ddd;cursor:help}
  105. abbr{text-transform:none}
  106. blockquote{margin:0 0 1.25em;padding:.5625em 1.25em 0 1.1875em;border-left:1px solid #ddd}
  107. blockquote cite{display:block;font-size:.9375em;color:rgba(0,0,0,.6)}
  108. blockquote cite:before{content:"\2014 \0020"}
  109. blockquote cite a,blockquote cite a:visited{color:rgba(0,0,0,.6)}
  110. blockquote,blockquote p{line-height:1.6;color:rgba(0,0,0,.85)}
  111. @media only screen and (min-width:768px){h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2}
  112. h1{font-size:2.75em}
  113. h2{font-size:2.3125em}
  114. h3,#toctitle,.sidebarblock>.content>.title{font-size:1.6875em}
  115. h4{font-size:1.4375em}}
  116. table{background:#fff;margin-bottom:1.25em;border:solid 1px #dedede}
  117. table thead,table tfoot{background:#f7f8f7;font-weight:bold}
  118. 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}
  119. table tr th,table tr td{padding:.5625em .625em;font-size:inherit;color:rgba(0,0,0,.8)}
  120. table tr.even,table tr.alt,table tr:nth-of-type(even){background:#f8f8f7}
  121. 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}
  122. body{tab-size:4}
  123. h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2;word-spacing:-.05em}
  124. h1 strong,h2 strong,h3 strong,#toctitle strong,.sidebarblock>.content>.title strong,h4 strong,h5 strong,h6 strong{font-weight:400}
  125. .clearfix:before,.clearfix:after,.float-group:before,.float-group:after{content:" ";display:table}
  126. .clearfix:after,.float-group:after{clear:both}
  127. *: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}
  128. 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}
  129. .keyseq{color:rgba(51,51,51,.8)}
  130. 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}
  131. .keyseq kbd:first-child{margin-left:0}
  132. .keyseq kbd:last-child{margin-right:0}
  133. .menuseq,.menu{color:rgba(0,0,0,.8)}
  134. b.button:before,b.button:after{position:relative;top:-1px;font-weight:400}
  135. b.button:before{content:"[";padding:0 3px 0 2px}
  136. b.button:after{content:"]";padding:0 2px 0 3px}
  137. p a>code:hover{color:rgba(0,0,0,.9)}
  138. #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}
  139. #header:before,#header:after,#content:before,#content:after,#footnotes:before,#footnotes:after,#footer:before,#footer:after{content:" ";display:table}
  140. #header:after,#content:after,#footnotes:after,#footer:after{clear:both}
  141. #content{margin-top:1.25em}
  142. #content:before{content:none}
  143. #header>h1:first-child{color:rgba(0,0,0,.85);margin-top:2.25rem;margin-bottom:0}
  144. #header>h1:first-child+#toc{margin-top:8px;border-top:1px solid #ddddd8}
  145. #header>h1:only-child,body.toc2 #header>h1:nth-last-child(2){border-bottom:1px solid #ddddd8;padding-bottom:8px}
  146. #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}
  147. #header .details span:first-child{margin-left:-.125em}
  148. #header .details span.email a{color:rgba(0,0,0,.85)}
  149. #header .details br{display:none}
  150. #header .details br+span:before{content:"\00a0\2013\00a0"}
  151. #header .details br+span.author:before{content:"\00a0\22c5\00a0";color:rgba(0,0,0,.85)}
  152. #header .details br+span#revremark:before{content:"\00a0|\00a0"}
  153. #header #revnumber{text-transform:capitalize}
  154. #header #revnumber:after{content:"\00a0"}
  155. #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}
  156. #toc{border-bottom:1px solid #efefed;padding-bottom:.5em}
  157. #toc>ul{margin-left:.125em}
  158. #toc ul.sectlevel0>li>a{font-style:italic}
  159. #toc ul.sectlevel0 ul.sectlevel1{margin:.5em 0}
  160. #toc ul{font-family:"Open Sans","DejaVu Sans",sans-serif;list-style-type:none}
  161. #toc li{line-height:1.3334;margin-top:.3334em}
  162. #toc a{text-decoration:none}
  163. #toc a:active{text-decoration:underline}
  164. #toctitle{color:#7a2518;font-size:1.2em}
  165. @media only screen and (min-width:768px){#toctitle{font-size:1.375em}
  166. body.toc2{padding-left:15em;padding-right:0}
  167. #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}
  168. #toc.toc2 #toctitle{margin-top:0;margin-bottom:.8rem;font-size:1.2em}
  169. #toc.toc2>ul{font-size:.9em;margin-bottom:0}
  170. #toc.toc2 ul ul{margin-left:0;padding-left:1em}
  171. #toc.toc2 ul.sectlevel0 ul.sectlevel1{padding-left:0;margin-top:.5em;margin-bottom:.5em}
  172. body.toc2.toc-right{padding-left:0;padding-right:15em}
  173. body.toc2.toc-right #toc.toc2{border-right-width:0;border-left:1px solid #efefed;left:auto;right:0}}
  174. @media only screen and (min-width:1280px){body.toc2{padding-left:20em;padding-right:0}
  175. #toc.toc2{width:20em}
  176. #toc.toc2 #toctitle{font-size:1.375em}
  177. #toc.toc2>ul{font-size:.95em}
  178. #toc.toc2 ul ul{padding-left:1.25em}
  179. body.toc2.toc-right{padding-left:0;padding-right:20em}}
  180. #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}
  181. #content #toc>:first-child{margin-top:0}
  182. #content #toc>:last-child{margin-bottom:0}
  183. #footer{max-width:100%;background-color:rgba(0,0,0,.8);padding:1.25em}
  184. #footer-text{color:rgba(255,255,255,.8);line-height:1.44}
  185. .sect1{padding-bottom:.625em}
  186. @media only screen and (min-width:768px){.sect1{padding-bottom:1.25em}}
  187. .sect1+.sect1{border-top:1px solid #efefed}
  188. #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}
  189. #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}
  190. #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}
  191. #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}
  192. #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}
  193. .audioblock,.imageblock,.literalblock,.listingblock,.stemblock,.videoblock{margin-bottom:1.25em}
  194. .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}
  195. table.tableblock>caption.title{white-space:nowrap;overflow:visible;max-width:0}
  196. .paragraph.lead>p,#preamble>.sectionbody>.paragraph:first-of-type p{color:rgba(0,0,0,.85)}
  197. table.tableblock #preamble>.sectionbody>.paragraph:first-of-type p{font-size:inherit}
  198. .admonitionblock>table{border-collapse:separate;border:0;background:none;width:100%}
  199. .admonitionblock>table td.icon{text-align:center;width:80px}
  200. .admonitionblock>table td.icon img{max-width:none}
  201. .admonitionblock>table td.icon .title{font-weight:bold;font-family:"Open Sans","DejaVu Sans",sans-serif;text-transform:uppercase}
  202. .admonitionblock>table td.content{padding-left:1.125em;padding-right:1.25em;border-left:1px solid #ddddd8;color:rgba(0,0,0,.6)}
  203. .admonitionblock>table td.content>:last-child>:last-child{margin-bottom:0}
  204. .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}
  205. .exampleblock>.content>:first-child{margin-top:0}
  206. .exampleblock>.content>:last-child{margin-bottom:0}
  207. .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}
  208. .sidebarblock>:first-child{margin-top:0}
  209. .sidebarblock>:last-child{margin-bottom:0}
  210. .sidebarblock>.content>.title{color:#7a2518;margin-top:0;text-align:center}
  211. .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}
  212. .literalblock pre,.listingblock pre:not(.highlight),.listingblock pre[class="highlight"],.listingblock pre[class^="highlight "],.listingblock pre.CodeRay,.listingblock pre.prettyprint{background:#f7f7f8}
  213. .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}
  214. .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}
  215. .literalblock pre.nowrap,.literalblock pre[class].nowrap,.listingblock pre.nowrap,.listingblock pre[class].nowrap{overflow-x:auto;white-space:pre;word-wrap:normal}
  216. @media only screen and (min-width:768px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:.90625em}}
  217. @media only screen and (min-width:1280px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:1em}}
  218. .literalblock.output pre{color:#f7f7f8;background-color:rgba(0,0,0,.9)}
  219. .listingblock pre.highlightjs{padding:0}
  220. .listingblock pre.highlightjs>code{padding:1em;-webkit-border-radius:4px;border-radius:4px}
  221. .listingblock pre.prettyprint{border-width:0}
  222. .listingblock>.content{position:relative}
  223. .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}
  224. .listingblock:hover code[data-lang]:before{display:block}
  225. .listingblock.terminal pre .command:before{content:attr(data-prompt);padding-right:.5em;color:#999}
  226. .listingblock.terminal pre .command:not([data-prompt]):before{content:"$"}
  227. table.pyhltable{border-collapse:separate;border:0;margin-bottom:0;background:none}
  228. table.pyhltable td{vertical-align:top;padding-top:0;padding-bottom:0;line-height:1.45}
  229. table.pyhltable td.code{padding-left:.75em;padding-right:0}
  230. pre.pygments .lineno,table.pyhltable td:not(.code){color:#999;padding-left:0;padding-right:.5em;border-right:1px solid #ddddd8}
  231. pre.pygments .lineno{display:inline-block;margin-right:.25em}
  232. table.pyhltable .linenodiv{background:none!important;padding-right:0!important}
  233. .quoteblock{margin:0 1em 1.25em 1.5em;display:table}
  234. .quoteblock>.title{margin-left:-1.5em;margin-bottom:.75em}
  235. .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}
  236. .quoteblock blockquote{margin:0;padding:0;border:0}
  237. .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)}
  238. .quoteblock blockquote>.paragraph:last-child p{margin-bottom:0}
  239. .quoteblock .attribution{margin-top:.5em;margin-right:.5ex;text-align:right}
  240. .quoteblock .quoteblock{margin-left:0;margin-right:0;padding:.5em 0;border-left:3px solid rgba(0,0,0,.6)}
  241. .quoteblock .quoteblock blockquote{padding:0 0 0 .75em}
  242. .quoteblock .quoteblock blockquote:before{display:none}
  243. .verseblock{margin:0 1em 1.25em 1em}
  244. .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}
  245. .verseblock pre strong{font-weight:400}
  246. .verseblock .attribution{margin-top:1.25rem;margin-left:.5ex}
  247. .quoteblock .attribution,.verseblock .attribution{font-size:.9375em;line-height:1.45;font-style:italic}
  248. .quoteblock .attribution br,.verseblock .attribution br{display:none}
  249. .quoteblock .attribution cite,.verseblock .attribution cite{display:block;letter-spacing:-.025em;color:rgba(0,0,0,.6)}
  250. .quoteblock.abstract{margin:0 0 1.25em 0;display:block}
  251. .quoteblock.abstract blockquote,.quoteblock.abstract blockquote p{text-align:left;word-spacing:0}
  252. .quoteblock.abstract blockquote:before,.quoteblock.abstract blockquote p:first-of-type:before{display:none}
  253. table.tableblock{max-width:100%;border-collapse:separate}
  254. 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}
  255. table.tableblock,th.tableblock,td.tableblock{border:0 solid #dedede}
  256. table.grid-all th.tableblock,table.grid-all td.tableblock{border-width:0 1px 1px 0}
  257. table.grid-all tfoot>tr>th.tableblock,table.grid-all tfoot>tr>td.tableblock{border-width:1px 1px 0 0}
  258. table.grid-cols th.tableblock,table.grid-cols td.tableblock{border-width:0 1px 0 0}
  259. table.grid-all *>tr>.tableblock:last-child,table.grid-cols *>tr>.tableblock:last-child{border-right-width:0}
  260. table.grid-rows th.tableblock,table.grid-rows td.tableblock{border-width:0 0 1px 0}
  261. 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}
  262. table.grid-rows tfoot>tr>th.tableblock,table.grid-rows tfoot>tr>td.tableblock{border-width:1px 0 0 0}
  263. table.frame-all{border-width:1px}
  264. table.frame-sides{border-width:0 1px}
  265. table.frame-topbot{border-width:1px 0}
  266. th.halign-left,td.halign-left{text-align:left}
  267. th.halign-right,td.halign-right{text-align:right}
  268. th.halign-center,td.halign-center{text-align:center}
  269. th.valign-top,td.valign-top{vertical-align:top}
  270. th.valign-bottom,td.valign-bottom{vertical-align:bottom}
  271. th.valign-middle,td.valign-middle{vertical-align:middle}
  272. table thead th,table tfoot th{font-weight:bold}
  273. tbody tr th{display:table-cell;line-height:1.6;background:#f7f8f7}
  274. tbody tr th,tbody tr th p,tfoot tr th,tfoot tr th p{color:rgba(0,0,0,.8);font-weight:bold}
  275. p.tableblock>code:only-child{background:none;padding:0}
  276. p.tableblock{font-size:1em}
  277. td>div.verse{white-space:pre}
  278. ol{margin-left:1.75em}
  279. ul li ol{margin-left:1.5em}
  280. dl dd{margin-left:1.125em}
  281. dl dd:last-child,dl dd:last-child>:last-child{margin-bottom:0}
  282. ol>li p,ul>li p,ul dd,ol dd,.olist .olist,.ulist .ulist,.ulist .olist,.olist .ulist{margin-bottom:.625em}
  283. ul.unstyled,ol.unnumbered,ul.checklist,ul.none{list-style-type:none}
  284. ul.unstyled,ol.unnumbered,ul.checklist{margin-left:.625em}
  285. 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}
  286. ul.checklist li>p:first-child>input[type="checkbox"]:first-child{width:1em;position:relative;top:1px}
  287. ul.inline{margin:0 auto .625em auto;margin-left:-1.375em;margin-right:0;padding:0;list-style:none;overflow:hidden}
  288. ul.inline>li{list-style:none;float:left;margin-left:1.375em;display:block}
  289. ul.inline>li>*{display:block}
  290. .unstyled dl dt{font-weight:400;font-style:normal}
  291. ol.arabic{list-style-type:decimal}
  292. ol.decimal{list-style-type:decimal-leading-zero}
  293. ol.loweralpha{list-style-type:lower-alpha}
  294. ol.upperalpha{list-style-type:upper-alpha}
  295. ol.lowerroman{list-style-type:lower-roman}
  296. ol.upperroman{list-style-type:upper-roman}
  297. ol.lowergreek{list-style-type:lower-greek}
  298. .hdlist>table,.colist>table{border:0;background:none}
  299. .hdlist>table>tbody>tr,.colist>table>tbody>tr{background:none}
  300. td.hdlist1,td.hdlist2{vertical-align:top;padding:0 .625em}
  301. td.hdlist1{font-weight:bold;padding-bottom:1.25em}
  302. .literalblock+.colist,.listingblock+.colist{margin-top:-.5em}
  303. .colist>table tr>td:first-of-type{padding:0 .75em;line-height:1}
  304. .colist>table tr>td:last-of-type{padding:.25em 0}
  305. .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}
  306. .imageblock.left,.imageblock[style*="float: left"]{margin:.25em .625em 1.25em 0}
  307. .imageblock.right,.imageblock[style*="float: right"]{margin:.25em 0 1.25em .625em}
  308. .imageblock>.title{margin-bottom:0}
  309. .imageblock.thumb,.imageblock.th{border-width:6px}
  310. .imageblock.thumb>.title,.imageblock.th>.title{padding:0 .125em}
  311. .image.left,.image.right{margin-top:.25em;margin-bottom:.25em;display:inline-block;line-height:0}
  312. .image.left{margin-right:.625em}
  313. .image.right{margin-left:.625em}
  314. a.image{text-decoration:none;display:inline-block}
  315. a.image object{pointer-events:none}
  316. sup.footnote,sup.footnoteref{font-size:.875em;position:static;vertical-align:super}
  317. sup.footnote a,sup.footnoteref a{text-decoration:none}
  318. sup.footnote a:active,sup.footnoteref a:active{text-decoration:underline}
  319. #footnotes{padding-top:.75em;padding-bottom:.75em;margin-bottom:.625em}
  320. #footnotes hr{width:20%;min-width:6.25em;margin:-.25em 0 .75em 0;border-width:1px 0 0 0}
  321. #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}
  322. #footnotes .footnote a:first-of-type{font-weight:bold;text-decoration:none}
  323. #footnotes .footnote:last-of-type{margin-bottom:0}
  324. #content #footnotes{margin-top:-.625em;margin-bottom:0;padding:.75em 0}
  325. .gist .file-data>table{border:0;background:#fff;width:100%;margin-bottom:0}
  326. .gist .file-data>table td.line-data{width:99%}
  327. div.unbreakable{page-break-inside:avoid}
  328. .big{font-size:larger}
  329. .small{font-size:smaller}
  330. .underline{text-decoration:underline}
  331. .overline{text-decoration:overline}
  332. .line-through{text-decoration:line-through}
  333. .aqua{color:#00bfbf}
  334. .aqua-background{background-color:#00fafa}
  335. .black{color:#000}
  336. .black-background{background-color:#000}
  337. .blue{color:#0000bf}
  338. .blue-background{background-color:#0000fa}
  339. .fuchsia{color:#bf00bf}
  340. .fuchsia-background{background-color:#fa00fa}
  341. .gray{color:#606060}
  342. .gray-background{background-color:#7d7d7d}
  343. .green{color:#006000}
  344. .green-background{background-color:#007d00}
  345. .lime{color:#00bf00}
  346. .lime-background{background-color:#00fa00}
  347. .maroon{color:#600000}
  348. .maroon-background{background-color:#7d0000}
  349. .navy{color:#000060}
  350. .navy-background{background-color:#00007d}
  351. .olive{color:#606000}
  352. .olive-background{background-color:#7d7d00}
  353. .purple{color:#600060}
  354. .purple-background{background-color:#7d007d}
  355. .red{color:#bf0000}
  356. .red-background{background-color:#fa0000}
  357. .silver{color:#909090}
  358. .silver-background{background-color:#bcbcbc}
  359. .teal{color:#006060}
  360. .teal-background{background-color:#007d7d}
  361. .white{color:#bfbfbf}
  362. .white-background{background-color:#fafafa}
  363. .yellow{color:#bfbf00}
  364. .yellow-background{background-color:#fafa00}
  365. span.icon>.fa{cursor:default}
  366. .admonitionblock td.icon [class^="fa icon-"]{font-size:2.5em;text-shadow:1px 1px 2px rgba(0,0,0,.5);cursor:default}
  367. .admonitionblock td.icon .icon-note:before{content:"\f05a";color:#19407c}
  368. .admonitionblock td.icon .icon-tip:before{content:"\f0eb";text-shadow:1px 1px 2px rgba(155,155,0,.8);color:#111}
  369. .admonitionblock td.icon .icon-warning:before{content:"\f071";color:#bf6900}
  370. .admonitionblock td.icon .icon-caution:before{content:"\f06d";color:#bf3400}
  371. .admonitionblock td.icon .icon-important:before{content:"\f06a";color:#bf0000}
  372. .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}
  373. .conum[data-value] *{color:#fff!important}
  374. .conum[data-value]+b{display:none}
  375. .conum[data-value]:after{content:attr(data-value)}
  376. pre .conum[data-value]{position:relative;top:-.125em}
  377. b.conum *{color:inherit!important}
  378. .conum:not([data-value]):empty{display:none}
  379. dt,th.tableblock,td.content,div.footnote{text-rendering:optimizeLegibility}
  380. h1,h2,p,td.content,span.alt{letter-spacing:-.01em}
  381. p strong,td.content strong,div.footnote strong{letter-spacing:-.005em}
  382. p,blockquote,dt,td.content,span.alt{font-size:1.0625rem}
  383. p{margin-bottom:1.25rem}
  384. .sidebarblock p,.sidebarblock dt,.sidebarblock td.content,p.tableblock{font-size:1em}
  385. .exampleblock>.content{background-color:#fffef7;border-color:#e0e0dc;-webkit-box-shadow:0 1px 4px #e0e0dc;box-shadow:0 1px 4px #e0e0dc}
  386. .print-only{display:none!important}
  387. @media print{@page{margin:1.25cm .75cm}
  388. *{-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important}
  389. a{color:inherit!important;text-decoration:underline!important}
  390. a.bare,a[href^="#"],a[href^="mailto:"]{text-decoration:none!important}
  391. a[href^="http:"]:not(.bare):after,a[href^="https:"]:not(.bare):after{content:"(" attr(href) ")";display:inline-block;font-size:.875em;padding-left:.25em}
  392. abbr[title]:after{content:" (" attr(title) ")"}
  393. pre,blockquote,tr,img,object,svg{page-break-inside:avoid}
  394. thead{display:table-header-group}
  395. svg{max-width:100%}
  396. p,blockquote,dt,td.content{font-size:1em;orphans:3;widows:3}
  397. h2,h3,#toctitle,.sidebarblock>.content>.title{page-break-after:avoid}
  398. #toc,.sidebarblock,.exampleblock>.content{background:none!important}
  399. #toc{border-bottom:1px solid #ddddd8!important;padding-bottom:0!important}
  400. .sect1{padding-bottom:0!important}
  401. .sect1+.sect1{border:0!important}
  402. #header>h1:first-child{margin-top:1.25rem}
  403. body.book #header{text-align:center}
  404. body.book #header>h1:first-child{border:0!important;margin:2.5em 0 1em 0}
  405. body.book #header .details{border:0!important;display:block;padding:0!important}
  406. body.book #header .details span:first-child{margin-left:0!important}
  407. body.book #header .details br{display:block}
  408. body.book #header .details br+span:before{content:none!important}
  409. body.book #toc{border:0!important;text-align:left!important;padding:0!important;margin:0!important}
  410. body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-break-before:always}
  411. .listingblock code[data-lang]:before{display:block}
  412. #footer{background:none!important;padding:0 .9375em}
  413. #footer-text{color:rgba(0,0,0,.6)!important;font-size:.9em}
  414. .hide-on-print{display:none!important}
  415. .print-only{display:block!important}
  416. .hide-for-print{display:none!important}
  417. .show-for-print{display:inherit!important}}
  418. </style>
  419. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  420. <style>
  421. /* Stylesheet for CodeRay to match GitHub theme | MIT License | http://foundation.zurb.com */
  422. /*pre.CodeRay {background-color:#f7f7f8;}*/
  423. .CodeRay .line-numbers{border-right:1px solid #d8d8d8;padding:0 0.5em 0 .25em}
  424. .CodeRay span.line-numbers{display:inline-block;margin-right:.5em;color:rgba(0,0,0,.3)}
  425. .CodeRay .line-numbers strong{color:rgba(0,0,0,.4)}
  426. table.CodeRay{border-collapse:separate;border-spacing:0;margin-bottom:0;border:0;background:none}
  427. table.CodeRay td{vertical-align: top;line-height:1.45}
  428. table.CodeRay td.line-numbers{text-align:right}
  429. table.CodeRay td.line-numbers>pre{padding:0;color:rgba(0,0,0,.3)}
  430. table.CodeRay td.code{padding:0 0 0 .5em}
  431. table.CodeRay td.code>pre{padding:0}
  432. .CodeRay .debug{color:#fff !important;background:#000080 !important}
  433. .CodeRay .annotation{color:#007}
  434. .CodeRay .attribute-name{color:#000080}
  435. .CodeRay .attribute-value{color:#700}
  436. .CodeRay .binary{color:#509}
  437. .CodeRay .comment{color:#998;font-style:italic}
  438. .CodeRay .char{color:#04d}
  439. .CodeRay .char .content{color:#04d}
  440. .CodeRay .char .delimiter{color:#039}
  441. .CodeRay .class{color:#458;font-weight:bold}
  442. .CodeRay .complex{color:#a08}
  443. .CodeRay .constant,.CodeRay .predefined-constant{color:#008080}
  444. .CodeRay .color{color:#099}
  445. .CodeRay .class-variable{color:#369}
  446. .CodeRay .decorator{color:#b0b}
  447. .CodeRay .definition{color:#099}
  448. .CodeRay .delimiter{color:#000}
  449. .CodeRay .doc{color:#970}
  450. .CodeRay .doctype{color:#34b}
  451. .CodeRay .doc-string{color:#d42}
  452. .CodeRay .escape{color:#666}
  453. .CodeRay .entity{color:#800}
  454. .CodeRay .error{color:#808}
  455. .CodeRay .exception{color:inherit}
  456. .CodeRay .filename{color:#099}
  457. .CodeRay .function{color:#900;font-weight:bold}
  458. .CodeRay .global-variable{color:#008080}
  459. .CodeRay .hex{color:#058}
  460. .CodeRay .integer,.CodeRay .float{color:#099}
  461. .CodeRay .include{color:#555}
  462. .CodeRay .inline{color:#000}
  463. .CodeRay .inline .inline{background:#ccc}
  464. .CodeRay .inline .inline .inline{background:#bbb}
  465. .CodeRay .inline .inline-delimiter{color:#d14}
  466. .CodeRay .inline-delimiter{color:#d14}
  467. .CodeRay .important{color:#555;font-weight:bold}
  468. .CodeRay .interpreted{color:#b2b}
  469. .CodeRay .instance-variable{color:#008080}
  470. .CodeRay .label{color:#970}
  471. .CodeRay .local-variable{color:#963}
  472. .CodeRay .octal{color:#40e}
  473. .CodeRay .predefined{color:#369}
  474. .CodeRay .preprocessor{color:#579}
  475. .CodeRay .pseudo-class{color:#555}
  476. .CodeRay .directive{font-weight:bold}
  477. .CodeRay .type{font-weight:bold}
  478. .CodeRay .predefined-type{color:inherit}
  479. .CodeRay .reserved,.CodeRay .keyword {color:#000;font-weight:bold}
  480. .CodeRay .key{color:#808}
  481. .CodeRay .key .delimiter{color:#606}
  482. .CodeRay .key .char{color:#80f}
  483. .CodeRay .value{color:#088}
  484. .CodeRay .regexp .delimiter{color:#808}
  485. .CodeRay .regexp .content{color:#808}
  486. .CodeRay .regexp .modifier{color:#808}
  487. .CodeRay .regexp .char{color:#d14}
  488. .CodeRay .regexp .function{color:#404;font-weight:bold}
  489. .CodeRay .string{color:#d20}
  490. .CodeRay .string .string .string{background:#ffd0d0}
  491. .CodeRay .string .content{color:#d14}
  492. .CodeRay .string .char{color:#d14}
  493. .CodeRay .string .delimiter{color:#d14}
  494. .CodeRay .shell{color:#d14}
  495. .CodeRay .shell .delimiter{color:#d14}
  496. .CodeRay .symbol{color:#990073}
  497. .CodeRay .symbol .content{color:#a60}
  498. .CodeRay .symbol .delimiter{color:#630}
  499. .CodeRay .tag{color:#008080}
  500. .CodeRay .tag-special{color:#d70}
  501. .CodeRay .variable{color:#036}
  502. .CodeRay .insert{background:#afa}
  503. .CodeRay .delete{background:#faa}
  504. .CodeRay .change{color:#aaf;background:#007}
  505. .CodeRay .head{color:#f8f;background:#505}
  506. .CodeRay .insert .insert{color:#080}
  507. .CodeRay .delete .delete{color:#800}
  508. .CodeRay .change .change{color:#66f}
  509. .CodeRay .head .head{color:#f4f}
  510. </style>
  511. </head>
  512. <body class="article toc2 toc-left">
  513. <div id="header">
  514. <h1>Shader Nodes</h1>
  515. <div id="toc" class="toc2">
  516. <div id="toctitle">Table of Contents</div>
  517. <ul class="sectlevel2">
  518. <li><a href="#motivations">Motivations</a></li>
  519. <li><a href="#what-is-a-shader-node">What is a Shader Node?</a></li>
  520. <li><a href="#shader-node-definition">Shader Node definition</a></li>
  521. <li><a href="#shader-node-code">Shader Node code</a></li>
  522. <li><a href="#shader-node-declaration">Shader Node declaration</a></li>
  523. <li><a href="#complete-material-definition-and-shader-nodes-example">Complete material definition and Shader Nodes example</a></li>
  524. </ul>
  525. </div>
  526. </div>
  527. <div id="content">
  528. <div class="sect2">
  529. <h3 id="motivations">Motivations</h3>
  530. <div class="paragraph">
  531. <p>jME3 material system is entirely based on shaders. While it&#8217;s pretty powerful, this system has some issues and limitations :</p>
  532. </div>
  533. <div class="ulist">
  534. <ul>
  535. <li>
  536. <p>Monolithic shaders have a serious lack of flexibility, and it can be daunting to get into the code for inexperienced users.</p>
  537. </li>
  538. <li>
  539. <p>Maintenance ease of such shaders is poor. (for example the whole lighting shaders represent around 500 lines of code, and it could be a lot worse with more features)</p>
  540. </li>
  541. <li>
  542. <p>Adding new features to those shaders decrease the ease of maintenance a lot. This point made us reluctant to do so and some feature were never added (Fog to name it, but many more).</p>
  543. </li>
  544. <li>
  545. <p>Users can&#8217;t add their own feature to the shader unless they fork it, and fall back to the same issues explained in previous points.</p>
  546. </li>
  547. </ul>
  548. </div>
  549. <div class="paragraph">
  550. <p>Shader Nodes were designed with this in mind and are the fruit of many long discussions in the core chat balancing the pros and cons of this or that pattern.+</p>
  551. </div>
  552. <div class="paragraph">
  553. <p>At first this system was referred to as “Shader injection. The basic idea was to allow users to inject code into shaders with a tag replacement system.+</p>
  554. </div>
  555. <div class="paragraph">
  556. <p>We finally came with a different concept called Shader Nodes, that is inspired from blender nodes system for textures and post process.+</p>
  557. </div>
  558. <div class="paragraph">
  559. <p><strong>The final shader is generated at run time by the system by assembling shader nodes together.</strong></p>
  560. </div>
  561. </div>
  562. <div class="sect2">
  563. <h3 id="what-is-a-shader-node">What is a Shader Node?</h3>
  564. <div class="paragraph">
  565. <p>Conceptually, it&#8217;s just a self sufficient piece of glsl code that accepts inputs and produce some outputs.+</p>
  566. </div>
  567. <div class="paragraph">
  568. <p>Inputs are glsl variables that may be fed by previous nodes output values.+</p>
  569. </div>
  570. <div class="paragraph">
  571. <p>Outputs are glsl variables fed with values computed in the shader node code.+</p>
  572. </div>
  573. <div class="paragraph">
  574. <p>In practice it&#8217;s a bit more than that.A shader node is declined in several parts :</p>
  575. </div>
  576. <div class="ulist">
  577. <ul>
  578. <li>
  579. <p>A shader node definition, defining :</p>
  580. <div class="ulist">
  581. <ul>
  582. <li>
  583. <p>The type of shader node (Vertex or Fragment for now)</p>
  584. </li>
  585. <li>
  586. <p>The minimal glsl version needed for the shader node</p>
  587. </li>
  588. <li>
  589. <p>The path to the shader file (containing the shader code heh)</p>
  590. </li>
  591. <li>
  592. <p><strong>A mandatory documentation block</strong> for this Shader node. As I hope many users will do their own nodes and contribute them back this point is crucial.</p>
  593. </li>
  594. <li>
  595. <p>A list of inputs accepted by this shader (typed glsl variable optional or needed for the code to run properly)</p>
  596. </li>
  597. <li>
  598. <p>A list of outputs produced by this shader (typed glsl variable computed and fed by the node&#8217;s code)</p>
  599. </li>
  600. </ul>
  601. </div>
  602. </li>
  603. <li>
  604. <p>The actual shader code file (.vert or .frag depending on the node&#8217;s type like any shader file)</p>
  605. </li>
  606. <li>
  607. <p>A shader node declaration having :</p>
  608. <div class="ulist">
  609. <ul>
  610. <li>
  611. <p>A unique name(in the shader scope)</p>
  612. </li>
  613. <li>
  614. <p>The shader node definition it&#8217;s based on</p>
  615. </li>
  616. <li>
  617. <p>An optional activation condition (based on the actual define system)</p>
  618. </li>
  619. <li>
  620. <p>A list of input mapping (what will be actually fed to those inputs)</p>
  621. </li>
  622. <li>
  623. <p>A list of output mapping (what will be output to the global output of the shader)</p>
  624. </li>
  625. </ul>
  626. </div>
  627. </li>
  628. </ul>
  629. </div>
  630. </div>
  631. <div class="sect2">
  632. <h3 id="shader-node-definition">Shader Node definition</h3>
  633. <div class="paragraph">
  634. <p>First ShaderNodes have to be defined either in a separate file (j3sn for jme3 shader node) or directly embed in the Technique block of the j3md file.+</p>
  635. </div>
  636. <div class="paragraph">
  637. <p>Please refer to this documentation for global structure of a j3md file
  638. <a href="jme3/advanced/material_specification.html">jMonkeyEngine3 Material Specification</a></p>
  639. </div>
  640. <div class="paragraph">
  641. <p>All is included in a <strong>ShaderNodeDefinitions</strong> bloc. This block can have several nodes defined (it&#8217;s recommended to define nodes that have strong dependencies with each other in the same j3sn file).+</p>
  642. </div>
  643. <div class="paragraph">
  644. <p>A ShaderNode is declared in a <strong>ShaderNodeDefinition</strong> block.+</p>
  645. </div>
  646. <div class="paragraph">
  647. <p>global structure should look like this :+</p>
  648. </div>
  649. <div class="listingblock">
  650. <div class="content">
  651. <pre class="CodeRay highlight"><code data-lang="java">ShaderNodeDefinitions{
  652. ShaderNodeDefinition &lt;NodeDefName&gt;{
  653. <span class="predefined-type">Type</span> : &lt;ShaderType&gt;
  654. Shader &lt;ShaderLangAndVersion&gt; : &lt;ShaderPath&gt;
  655. [Shader &lt;ShaderLangAndVersion&gt; : &lt;ShaderPath&gt;]
  656. [...]
  657. Documentation {
  658. &lt;DocContent&gt;
  659. }
  660. Input {
  661. &lt;GlslVarType&gt; &lt;VarName&gt;
  662. [&lt;GlslVarType&gt; &lt;VarName&gt;]
  663. [...]
  664. }
  665. Output {
  666. &lt;GlslVarType&gt; &lt;VarName&gt;
  667. [&lt;GlslVarType&gt; &lt;VarName&gt;]
  668. [...]
  669. }
  670. }
  671. [ShaderNodeDefinition &lt;NodeDef2Name&gt; {
  672. [...]
  673. }]
  674. [...]
  675. }</code></pre>
  676. </div>
  677. </div>
  678. <div class="paragraph">
  679. <p>All that is not between [] is mandatory.+</p>
  680. </div>
  681. <div class="ulist">
  682. <ul>
  683. <li>
  684. <p><u>ShaderNodeDefinition</u> : the definition block. You can have several definition in the same ShaderNodeDefinitions block.</p>
  685. <div class="ulist">
  686. <ul>
  687. <li>
  688. <p><strong>NodeDefName</strong> : The name of this ShaderNodeDefinition</p>
  689. </li>
  690. </ul>
  691. </div>
  692. </li>
  693. <li>
  694. <p><u>Type</u> : define the type of this shader node</p>
  695. <div class="ulist">
  696. <ul>
  697. <li>
  698. <p><strong>ShaderType</strong> : The type of shader for this definition. For now only “Vertex and “Fragment are supported.</p>
  699. </li>
  700. </ul>
  701. </div>
  702. </li>
  703. <li>
  704. <p><u>Shader</u> : the version and path of the shader code to use. note that you can have several shader with different GLSL version. The generator will pick the relevant one according to GPU capabilities.</p>
  705. <div class="ulist">
  706. <ul>
  707. <li>
  708. <p><strong>ShaderLangAndVersion</strong> : follows the same syntax than the shader declaration in the j3md file : GLSL&lt;version&gt;, version being 100 for glsl 1.0 , 130 for glsl 1.3, 150 for glsl 1.5 and so on. Note that this is the <strong>minimum</strong> glsl version this shader supports</p>
  709. </li>
  710. <li>
  711. <p><strong>ShaderPath</strong> the path to the shader code file (relative to the asset folder)</p>
  712. </li>
  713. </ul>
  714. </div>
  715. </li>
  716. <li>
  717. <p><u>Documentation</u> : the documentation block. This is mandatory and I really recommend filling this if you want to contribute your shader nodes. This documentation will be read buy the SDK and presented to users willing to add this node to their material definitions. This should contain a brief description of the node and a description for each input and ouput.</p>
  718. <div class="ulist">
  719. <ul>
  720. <li>
  721. <p><strong>@input</strong> can be use to prefix an input name so the sdk recognize it and format it accordingly. the syntax id @input &lt;inputName&gt; &lt;description&gt;.</p>
  722. </li>
  723. <li>
  724. <p><strong>@output</strong> can be use to prefix an output name so the sdk recognize it and format it accordingly. the syntax id @output &lt;inputName&gt; &lt;description&gt;</p>
  725. </li>
  726. </ul>
  727. </div>
  728. </li>
  729. <li>
  730. <p><u>Input</u> : The input block containing all the inputs of this node. A node can have 1 or several inputs.</p>
  731. <div class="ulist">
  732. <ul>
  733. <li>
  734. <p><strong>GlslVarType</strong> : a valid glsl variable type that will be used in the shader for this input. see <a href="http://www.opengl.org/wiki/GLSL_Type">http://www.opengl.org/wiki/GLSL_Type</a> and the “Declare an array chapter</p>
  735. </li>
  736. <li>
  737. <p><strong>VarName</strong> : the name of the variable. Note that you can&#8217;t have several inputs with the same name.</p>
  738. </li>
  739. </ul>
  740. </div>
  741. </li>
  742. <li>
  743. <p><u>Output</u> : The output block containing all the outputs of this node. A node can have 1 or several outputs.</p>
  744. <div class="ulist">
  745. <ul>
  746. <li>
  747. <p><strong>GlslVarType</strong> : a valid glsl variable type that will be used in the shader for this input. see <a href="http://www.opengl.org/wiki/GLSL_Type">http://www.opengl.org/wiki/GLSL_Type</a> and the “Declare an array chapter</p>
  748. </li>
  749. <li>
  750. <p><strong>VarName</strong> : the name of the variable. Note that you can&#8217;t have several outputs with the same name.</p>
  751. </li>
  752. </ul>
  753. </div>
  754. </li>
  755. <li>
  756. <p>Note that if you use the same name for an input and an ouput, the generator will consider them as the SAME variable so they should be of the same glsl type.*</p>
  757. </li>
  758. </ul>
  759. </div>
  760. <div class="sect3">
  761. <h4 id="example">Example</h4>
  762. <div class="paragraph">
  763. <p>Here is a typical shader node definition</p>
  764. </div>
  765. <div class="listingblock">
  766. <div class="content">
  767. <pre class="CodeRay highlight"><code data-lang="java">ShaderNodeDefinitions{
  768. ShaderNodeDefinition LightMapping{
  769. <span class="predefined-type">Type</span>: Fragment
  770. Shader GLSL100: Common/MatDefs/ShaderNodes/LightMapping/lightMap.frag
  771. Documentation {
  772. This Node is responsible <span class="keyword">for</span> multiplying a light mapping contribution to a given color.
  773. <span class="annotation">@input</span> texCoord the texture coordinates to use <span class="keyword">for</span> light mapping
  774. <span class="annotation">@input</span> lightMap the texture to use <span class="keyword">for</span> light mapping
  775. <span class="annotation">@input</span> color the color the lightmap color will be multiplied to
  776. <span class="annotation">@output</span> color the resulting color
  777. }
  778. Input{
  779. vec2 texCoord
  780. sampler2D lightMap
  781. vec4 color
  782. }
  783. Output{
  784. vec4 color
  785. }
  786. }
  787. }</code></pre>
  788. </div>
  789. </div>
  790. </div>
  791. <div class="sect3">
  792. <h4 id="declare-an-array">Declare an array</h4>
  793. <div class="paragraph">
  794. <p>To declare an array you have to specify its size between square brackets.+</p>
  795. </div>
  796. <div class="paragraph">
  797. <p><strong>Constant size</strong>+</p>
  798. </div>
  799. <div class="paragraph">
  800. <p>The size can be an int constant+</p>
  801. </div>
  802. <div class="paragraph">
  803. <p><em>Example</em></p>
  804. </div>
  805. <div class="listingblock">
  806. <div class="content">
  807. <pre class="CodeRay highlight"><code> float myArray[10]</code></pre>
  808. </div>
  809. </div>
  810. <div class="paragraph">
  811. <p>this will declare a float array with 10 elements.
  812. Any material parameter mapped with this array should be of FloatArray type and it&#8217;s size will be assumed as 10 when the shader is generated.+</p>
  813. </div>
  814. <div class="paragraph">
  815. <p><strong>Material parameter driven size</strong>+</p>
  816. </div>
  817. <div class="paragraph">
  818. <p>The size can be dynamic and driven by a material parameter. GLSL does not support non constant values for array declaration so this material parameter will be mapped to a define.+</p>
  819. </div>
  820. <div class="paragraph">
  821. <p><em>Example</em></p>
  822. </div>
  823. <div class="listingblock">
  824. <div class="content">
  825. <pre class="CodeRay highlight"><code> float myArray[NumberOfElements]</code></pre>
  826. </div>
  827. </div>
  828. <div class="paragraph">
  829. <p>This declares a float array with the size depending on the value of the NumberOfElement material parameter.+</p>
  830. </div>
  831. <div class="paragraph">
  832. <p>NumberOfElement <strong>HAS</strong> to be declared in the material definition as a material parameter. It will be mapped to a define and used in the shader.
  833. Not that if this value change the shader will have to be recompiled, due to the fact that it&#8217;s mapped to a define.</p>
  834. </div>
  835. </div>
  836. </div>
  837. <div class="sect2">
  838. <h3 id="shader-node-code">Shader Node code</h3>
  839. <div class="paragraph">
  840. <p>The shader code associated with a Shader node is similar to any shader code.+</p>
  841. </div>
  842. <div class="paragraph">
  843. <p>the code for a Vertex shader node should be in a .vert file and the code for a Fragment shader node should be in a .frag file.
  844. It has a declarative part containing variable declaration, function declaration and so on… And a main part that is embed in a “void main(){} block.+</p>
  845. </div>
  846. <div class="paragraph">
  847. <p>Input and output variables declared in the shader node definition can be used <strong>without</strong> being declared in the shader code. ( they shouldn&#8217;t even or you&#8217;ll have issues).+</p>
  848. </div>
  849. <div class="paragraph">
  850. <p>Here is a the code of the LightMap.frag shader.+</p>
  851. </div>
  852. <div class="listingblock">
  853. <div class="content">
  854. <pre class="CodeRay highlight"><code data-lang="java"><span class="type">void</span> main(){
  855. color *= texture2D(lightMap, texCoord);
  856. }</code></pre>
  857. </div>
  858. </div>
  859. <div class="paragraph">
  860. <p>Very simple, it&#8217;s just a texture fetch, but of course anything can be done.+</p>
  861. </div>
  862. <div class="paragraph">
  863. <p><strong>Do not declare uniforms, attributes or varyings in a shader node code</strong>, the Generator will handle this, just use the inputs and outputs and optional local variables you may need.</p>
  864. </div>
  865. </div>
  866. <div class="sect2">
  867. <h3 id="shader-node-declaration">Shader Node declaration</h3>
  868. <div class="paragraph">
  869. <p>To create a shader we need to plug shader nodes to each other, but also interact with built in glsl inputs and outputs.
  870. Shader nodes are declared inside the Technique block. The vertex nodes are declared in the VertexShaderNodes block and the fragment nodes are declared in the FragmentShaderNodes block.+</p>
  871. </div>
  872. <div class="paragraph">
  873. <p>Note that if the j3md has ember shader nodes definition (in a ShaderNodesDefinitions block) it <strong>must</strong> be declared before the VertexShaderNodes and FragmentShaderNodes blocks.
  874. Of course there can be several ShaderNode declaration in those block.+</p>
  875. </div>
  876. <div class="paragraph">
  877. <p>Here is how a ShaderNode declaration should look :</p>
  878. </div>
  879. <div class="listingblock">
  880. <div class="content">
  881. <pre class="CodeRay highlight"><code data-lang="java">ShaderNode &lt;ShaderNodeName&gt;{
  882. Definition : &lt;DefinitionName&gt; [: &lt;DefinitionPath&gt;]
  883. [<span class="predefined-type">Condition</span> : &lt;ActivationCondition&gt;]
  884. InputMapping{
  885. &lt;InputVariableName&gt;[.&lt;Swizzle&gt;] = &lt;NameSpace&gt;.&lt;VarName&gt;[.&lt;Swizzle&gt;] [: &lt;MappingCondition&gt;]
  886. [...]
  887. }
  888. [OutputMapping{
  889. &lt;NameSpace&gt;.&lt;VarName&gt;[.&lt;Swizzle&gt;] = &lt;OutputVariableName&gt;[.&lt;Swizzle&gt;] [: &lt;MappingCondition&gt;]
  890. [...]
  891. }]
  892. }</code></pre>
  893. </div>
  894. </div>
  895. <div class="ulist">
  896. <ul>
  897. <li>
  898. <p><u>ShaderNode</u> the shader node block</p>
  899. <div class="ulist">
  900. <ul>
  901. <li>
  902. <p><strong>ShaderNodeName</strong> the name of this shader node, can be anything, but has to be <strong>unique</strong> in the shader scope</p>
  903. </li>
  904. </ul>
  905. </div>
  906. </li>
  907. <li>
  908. <p><u>Definition</u> : a reference to the shader node definition</p>
  909. <div class="ulist">
  910. <ul>
  911. <li>
  912. <p><strong>DefinitionName</strong> : the name of the definition this Node use. this definition can be declared in the same j3md or in its own j3sn file.</p>
  913. </li>
  914. <li>
  915. <p><strong>DefinitionPath</strong> : in case the definition is declared in it&#8217;s own j3sn file, you have to set the path to this file here.</p>
  916. </li>
  917. </ul>
  918. </div>
  919. </li>
  920. <li>
  921. <p><u>Condition</u> a condition that dictates if the node is active or not.</p>
  922. <div class="ulist">
  923. <ul>
  924. <li>
  925. <p><strong>Activationcondition</strong> : The condition for this node to be used. Today we use Defines to use different blocks of code used depending on the state of a Material Parameter. The condition here use the exact same paradigm. A valid condition must be the name of a material parameter or any combinations using logical operators “||,“&amp;&amp;,“! or grouping characters “( and “). The generator will create the corresponding define and the shader node code will be embed into and #ifdef statement.+</p>
  926. <div class="literalblock">
  927. <div class="content">
  928. <pre>For example, let's say we have a Color and ColorMap material parameter, this condition “Color || ColorMap will generate this statement :</pre>
  929. </div>
  930. </div>
  931. </li>
  932. </ul>
  933. </div>
  934. </li>
  935. </ul>
  936. </div>
  937. <div class="listingblock">
  938. <div class="content">
  939. <pre class="CodeRay highlight"><code data-lang="java"> <span class="error">#</span><span class="keyword">if</span> defined(COLOR) || defined(COLORMAP)
  940. ...
  941. <span class="error">#</span>endif</code></pre>
  942. </div>
  943. </div>
  944. <div class="ulist">
  945. <ul>
  946. <li>
  947. <p><u>InputMapping</u> the wiring of the inputs of this node, coming from previous node&#8217;s outputs or from built in glsl inputs.</p>
  948. <div class="ulist">
  949. <ul>
  950. <li>
  951. <p><strong>InputVariableName</strong> : the name of the variable to map as declared in the definition.</p>
  952. </li>
  953. <li>
  954. <p><strong>Swizzle</strong> : Swizling for the preceding variable. More information on glsl swizzling on this page <a href="http://www.opengl.org/wiki/GLSL_Type">http://www.opengl.org/wiki/GLSL_Type</a></p>
  955. </li>
  956. <li>
  957. <p><strong>NameSpace</strong> : The generator will use variable name space to avoid collision between variable names. Name space can be one of these values :</p>
  958. <div class="ulist">
  959. <ul>
  960. <li>
  961. <p><strong>MatParam</strong> : the following variable is a Material Parameter declared in the MaterialParameters block of the materialDefinition</p>
  962. </li>
  963. <li>
  964. <p><strong>WorldParam</strong> : the following variable is a World Parameter declared in the WorldParameters block of the current technique block. World parameters can be one of those declared in this file : <a href="https://github.com/jMonkeyEngine/jmonkeyengine/blob/master/jme3-core/src/main/java/com/jme3/shader/UniformBinding.java">https://github.com/jMonkeyEngine/jmonkeyengine/blob/master/jme3-core/src/main/java/com/jme3/shader/UniformBinding.java</a></p>
  965. </li>
  966. <li>
  967. <p><strong>Attr</strong> : the following variable is a shader attribute. It can be one those declared in the Type enum of the VertexBuffer class <a href="https://github.com/jMonkeyEngine/jmonkeyengine/blob/master/jme3-core/src/main/java/com/jme3/scene/VertexBuffer.java">https://github.com/jMonkeyEngine/jmonkeyengine/blob/master/jme3-core/src/main/java/com/jme3/scene/VertexBuffer.java</a></p>
  968. </li>
  969. <li>
  970. <p><strong>Global</strong> : the variable is a global variable to the shader. Global variables will be assign at the end of the shader to glsl built in outputs : gl_Position for the vertex shader, or to one of the possible outputs of the fragment shader (for example gl_FragColor). The global variable can have what ever name pleases you, it will assigned in the order they&#8217;ve been found in the declaration to the shader output. <strong>Global variables can be inputs of a shader node. Global variables are forced to be vec4 and are defaulted to the value of the attribute inPosition in the vertex shader and vec4(1.0)(opaque white color) in the fragment shader</strong>.</p>
  971. </li>
  972. <li>
  973. <p><strong>The name of a previous shader node</strong> : this must be followed by and output variable of a the named shader node. This is what allows one to plug outputs from a node to inputs of another.</p>
  974. </li>
  975. </ul>
  976. </div>
  977. </li>
  978. <li>
  979. <p><strong>VarName</strong> : the name of the variable to assign to the input. This variable must be known in name space declared before.</p>
  980. </li>
  981. <li>
  982. <p><strong>MappingCondition</strong> : Follows the same rules as the activation condition for the shaderNode, this mapping will be embed in a #ifdef statement n the resulting shader.</p>
  983. </li>
  984. </ul>
  985. </div>
  986. </li>
  987. <li>
  988. <p><u>OutputMapping</u> : This block is optional, as mapping of output will be done in input mapping block of following shaderNodes, ecept if you want to output a value to the Global output of the shader.</p>
  989. <div class="ulist">
  990. <ul>
  991. <li>
  992. <p><strong>NameSpace</strong> : the name space of the output to assign, this can only be “Global here.</p>
  993. </li>
  994. <li>
  995. <p><strong>VarName</strong> : the name of a global output (can be anything, just be aware that 2 different names result in 2 different outputs)</p>
  996. </li>
  997. <li>
  998. <p><strong>OutputVariable</strong> : Must be an output of the current node&#8217;s definition.</p>
  999. </li>
  1000. <li>
  1001. <p><strong>MappingCondition</strong> : Same as before.</p>
  1002. </li>
  1003. </ul>
  1004. </div>
  1005. </li>
  1006. </ul>
  1007. </div>
  1008. </div>
  1009. <div class="sect2">
  1010. <h3 id="complete-material-definition-and-shader-nodes-example">Complete material definition and Shader Nodes example</h3>
  1011. <div class="paragraph">
  1012. <p>Here is an example of a very simple Material definition that just displays a solid color (controlled by a material parameter) on a mesh.</p>
  1013. </div>
  1014. <div class="listingblock">
  1015. <div class="content">
  1016. <pre class="CodeRay highlight"><code data-lang="java">MaterialDef Simple {
  1017. MaterialParameters {
  1018. <span class="predefined-type">Color</span> <span class="predefined-type">Color</span>
  1019. }
  1020. Technique {
  1021. WorldParameters {
  1022. WorldViewProjectionMatrix
  1023. }
  1024. VertexShaderNodes {
  1025. ShaderNode CommonVert {
  1026. Definition : CommonVert : Common/MatDefs/ShaderNodes/Common/CommonVert.j3sn
  1027. InputMappings {
  1028. worldViewProjectionMatrix = WorldParam.WorldViewProjectionMatrix
  1029. modelPosition = Global.position.xyz
  1030. }
  1031. OutputMappings {
  1032. Global.position = projPosition
  1033. }
  1034. }
  1035. }
  1036. FragmentShaderNodes {
  1037. ShaderNode ColorMult {
  1038. Definition : ColorMult : Common/MatDefs/ShaderNodes/Basic/ColorMult.j3sn
  1039. InputMappings {
  1040. color1 = MatParam.Color
  1041. color2 = Global.color
  1042. }
  1043. OutputMappings {
  1044. Global.color = outColor
  1045. }
  1046. }
  1047. }
  1048. }
  1049. }</code></pre>
  1050. </div>
  1051. </div>
  1052. <div class="paragraph">
  1053. <p>This Material definition has one Default technique with 2 node declarations.+</p>
  1054. </div>
  1055. <div class="paragraph">
  1056. <p><u>*CommonVert Definition*</u>+</p>
  1057. </div>
  1058. <div class="paragraph">
  1059. <p>CommonVert is a vertex shader node that has commonly used input and outputs of a vertex shader. It also computes the position of the vertex in projection space
  1060. here is the definition content (Common/MatDefs/ShaderNodes/Common/CommonVert.j3sn) :</p>
  1061. </div>
  1062. <div class="listingblock">
  1063. <div class="content">
  1064. <pre class="CodeRay highlight"><code data-lang="java">ShaderNodesDefinitions {
  1065. ShaderNodeDefinition CommonVert {
  1066. <span class="predefined-type">Type</span>: Vertex
  1067. Shader GLSL100: Common/MatDefs/ShaderNodes/Common/commonVert.vert
  1068. Documentation {
  1069. This Node is responsible <span class="keyword">for</span> computing vertex position in projection space.
  1070. It also can pass texture coordinates <span class="integer">1</span> &amp; <span class="integer">2</span>, and vertexColor to the frgment shader as varying (or inputs <span class="keyword">for</span> glsl &gt;=<span class="float">1.3</span>)
  1071. <span class="annotation">@input</span> modelPosition the vertex position in model space (usually assigned with Attr.inPosition or Global.position)
  1072. <span class="annotation">@input</span> worldViewProjectionMatrix the World <span class="predefined-type">View</span> Projection Matrix transforms model space to projection space.
  1073. <span class="annotation">@input</span> texCoord1 The first texture coordinates of the vertex (usually assigned with Attr.inTexCoord)
  1074. <span class="annotation">@input</span> texCoord2 The second texture coordinates of the vertex (usually assigned with Attr.inTexCoord2)
  1075. <span class="annotation">@input</span> vertColor The color of the vertex (usually assigned with Attr.inColor)
  1076. <span class="annotation">@output</span> projPosition <span class="predefined-type">Position</span> of the vertex in projection space.(usually assigned to Global.position)
  1077. <span class="annotation">@output</span> vec2 texCoord1 The first texture coordinates of the vertex (output as a varying)
  1078. <span class="annotation">@output</span> vec2 texCoord2 The second texture coordinates of the vertex (output as a varying)
  1079. <span class="annotation">@output</span> vec4 vertColor The color of the vertex (output as a varying)
  1080. }
  1081. Input{
  1082. vec3 modelPosition
  1083. mat4 worldViewProjectionMatrix
  1084. vec2 texCoord1
  1085. vec2 texCoord2
  1086. vec4 vertColor
  1087. }
  1088. Output{
  1089. vec4 projPosition
  1090. vec2 texCoord1
  1091. vec2 texCoord2
  1092. vec4 vertColor
  1093. }
  1094. }
  1095. }</code></pre>
  1096. </div>
  1097. </div>
  1098. <div class="paragraph">
  1099. <p>here is the shader Node code ( Common/MatDefs/ShaderNodes/Common/commonVert.vert)</p>
  1100. </div>
  1101. <div class="listingblock">
  1102. <div class="content">
  1103. <pre class="CodeRay highlight"><code data-lang="java"><span class="type">void</span> main(){
  1104. projPosition = worldViewProjectionMatrix * vec4(modelPosition, <span class="float">1.0</span>);
  1105. }</code></pre>
  1106. </div>
  1107. </div>
  1108. <div class="paragraph">
  1109. <p>As you can see all the inputs and outputs are not used. that&#8217;s because most of them are attributes meant to be passed to the fragment shader as varyings. all the wiring will be handled by the generator only if those variables are used in an input or output mapping.+</p>
  1110. </div>
  1111. <div class="paragraph">
  1112. <p><u>*CommonVert input mapping*</u>+</p>
  1113. </div>
  1114. <div class="paragraph">
  1115. <p>here we have the most basic yet mandatory thing in a vertex shader, computing vertex position in projection space. for this we have 2 mapping :</p>
  1116. </div>
  1117. <div class="ulist">
  1118. <ul>
  1119. <li>
  1120. <p><strong>worldViewProjectionMatrix = WorldParam.WorldViewProjectionMatrix</strong> : the input parameter worldViewProjectionMatrix is assigned with the WorldViewProjectionMatrix World parameter declared in the WorlParameters block of the technique.</p>
  1121. </li>
  1122. <li>
  1123. <p><strong>modelPosition = Global.position.xyz</strong> : the modelPosition (understand the vertex position in the model coordinate space) is assigned with the Global position variable.</p>
  1124. </li>
  1125. </ul>
  1126. </div>
  1127. <div class="paragraph">
  1128. <p><u>*CommonVert output mapping*</u>+</p>
  1129. </div>
  1130. <div class="ulist">
  1131. <ul>
  1132. <li>
  1133. <p><strong>Global.position = projPosition</strong> : The result of the multiplication of the worldViewProjectionMatrix and the modelPosition is assigned to the Globale position</p>
  1134. </li>
  1135. </ul>
  1136. </div>
  1137. <div class="paragraph">
  1138. <p><u>*ColorMult Definition*</u>+</p>
  1139. </div>
  1140. <div class="paragraph">
  1141. <p>ColorMult is a very basic Shader Node that takes two colors as input and multiply them.
  1142. here is the definition content (Common/MatDefs/ShaderNodes/Basic/ColorMult.j3sn) :</p>
  1143. </div>
  1144. <div class="listingblock">
  1145. <div class="content">
  1146. <pre class="CodeRay highlight"><code data-lang="java">ShaderNodeDefinitions{
  1147. ShaderNodeDefinition ColorMult {
  1148. <span class="predefined-type">Type</span>: Fragment
  1149. Shader GLSL100: Common/MatDefs/ShaderNodes/Basic/colorMult.frag
  1150. Documentation{
  1151. Multiplies two colors
  1152. <span class="annotation">@input</span> color1 the first color
  1153. <span class="annotation">@input</span> color2 the second color
  1154. <span class="annotation">@output</span> outColor the resulting color
  1155. }
  1156. Input {
  1157. vec4 color1
  1158. vec4 color2
  1159. }
  1160. Output {
  1161. vec4 outColor
  1162. }
  1163. }
  1164. }</code></pre>
  1165. </div>
  1166. </div>
  1167. <div class="paragraph">
  1168. <p>here is the shader Node code (Common/MatDefs/ShaderNodes/Basic/colorMult.frag)</p>
  1169. </div>
  1170. <div class="listingblock">
  1171. <div class="content">
  1172. <pre class="CodeRay highlight"><code data-lang="java"><span class="type">void</span> main(){
  1173. outColor = color1 * color2;
  1174. }</code></pre>
  1175. </div>
  1176. </div>
  1177. <div class="paragraph">
  1178. <p><u>*ColorMult input mapping*</u>+</p>
  1179. </div>
  1180. <div class="paragraph">
  1181. <p>All inputs are mapped here :</p>
  1182. </div>
  1183. <div class="ulist">
  1184. <ul>
  1185. <li>
  1186. <p><strong>color1 = MatParam.Color</strong> : The first color is assigned to the Color Material parameter declared in the MaterialParameter block of the material definition</p>
  1187. </li>
  1188. <li>
  1189. <p><strong>color2 = Global.color</strong> : The second color is assigned with the Global color variable. this is defaulted to vec4(1.0) (opaque white). Note that in a much complex material def this variable could already have been assigned with a previous Shader Node output</p>
  1190. </li>
  1191. </ul>
  1192. </div>
  1193. <div class="paragraph">
  1194. <p><u>*ColorMult output mapping*</u>+</p>
  1195. </div>
  1196. <div class="ulist">
  1197. <ul>
  1198. <li>
  1199. <p><strong>Global.color = outColor</strong> : the resulting color is assigned to the Global color variable.</p>
  1200. </li>
  1201. </ul>
  1202. </div>
  1203. <div class="paragraph">
  1204. <p><u>*Generated shader code*</u>+</p>
  1205. </div>
  1206. <div class="paragraph">
  1207. <p>Vertex Shader (glsl 1.0)</p>
  1208. </div>
  1209. <div class="listingblock">
  1210. <div class="content">
  1211. <pre class="CodeRay highlight"><code data-lang="java">uniform mat4 g_WorldViewProjectionMatrix;
  1212. attribute vec4 inPosition;
  1213. <span class="type">void</span> main(){
  1214. vec4 Global_position = inPosition;
  1215. <span class="comment">//CommonVert : Begin</span>
  1216. vec3 CommonVert_modelPosition = Global_position.xyz;
  1217. vec4 CommonVert_projPosition;
  1218. vec2 CommonVert_texCoord1;
  1219. vec2 CommonVert_texCoord2;
  1220. vec4 CommonVert_vertColor;
  1221. CommonVert_projPosition = g_WorldViewProjectionMatrix * vec4(CommonVert_modelPosition, <span class="float">1.0</span>);
  1222. Global_position = CommonVert_projPosition;
  1223. <span class="comment">//CommonVert : End</span>
  1224. gl_Position = Global_position;
  1225. }</code></pre>
  1226. </div>
  1227. </div>
  1228. <div class="paragraph">
  1229. <p>All materials parameter, world parameters, attributes varying are declared first. then for each shader node, the declarative part is appended.+</p>
  1230. </div>
  1231. <div class="paragraph">
  1232. <p>For the main function, for each shader node, the input mappings are declared and assigned, the output are declared.+</p>
  1233. </div>
  1234. <div class="paragraph">
  1235. <p>Then the variable names are replaced in the sahder node code with there complete name (NameSpace_varName), material parameters are replaced in the shader code as is.+</p>
  1236. </div>
  1237. <div class="paragraph">
  1238. <p>Then, the output are mapped.+</p>
  1239. </div>
  1240. <div class="paragraph">
  1241. <p>As you can see texCoord1/2 and vertColor are declared but never used. That&#8217;s because the generator is not aware of that. By default it will declare all inputs in case they are used in the shaderNode code.
  1242. Note that most glsl compiler will optimize this when compiling the shader on the GPU.</p>
  1243. </div>
  1244. <div class="paragraph">
  1245. <p>Fragment Shader (glsl 1.0)</p>
  1246. </div>
  1247. <div class="listingblock">
  1248. <div class="content">
  1249. <pre class="CodeRay highlight"><code data-lang="java">uniform vec4 m_Color;
  1250. <span class="type">void</span> main(){
  1251. vec4 Global_color = vec4(<span class="float">1.0</span>);
  1252. <span class="comment">//ColorMult : Begin</span>
  1253. vec4 ColorMult_color2 = Global_color;
  1254. vec4 ColorMult_outColor;
  1255. ColorMult_outColor = m_Color * ColorMult_color2;
  1256. Global_color = ColorMult_outColor;
  1257. <span class="comment">//ColorMult : End</span>
  1258. gl_FragColor = Global_color;
  1259. }</code></pre>
  1260. </div>
  1261. </div>
  1262. <div class="paragraph">
  1263. <p>Same as for the Vertex shader. note that the color1 is not declared, because it&#8217;s directly replaced by the material parameter.</p>
  1264. </div>
  1265. <div class="paragraph">
  1266. <p>For more explanations and design decisions please refer to the <abbr title="specification">spec</abbr> here
  1267. <a href="https://docs.google.com/document/d/1S6xO3d1TBz0xcKe_MPTqY9V-QI59AKdg1OGy3U-HeVY/edit?usp=sharing">https://docs.google.com/document/d/1S6xO3d1TBz0xcKe_MPTqY9V-QI59AKdg1OGy3U-HeVY/edit?usp=sharing</a></p>
  1268. </div>
  1269. <div class="paragraph">
  1270. <p>Thank you for the brave ones that came through all this reading. i&#8217;m not gonna offer you a prize in exchange of a password, because we ran out of JME thongs…</p>
  1271. </div>
  1272. </div>
  1273. </div>
  1274. <div id="footer">
  1275. <div id="footer-text">
  1276. Last updated 2016-05-21 23:44:18 UTC
  1277. </div>
  1278. </div>
  1279. </body>
  1280. </html>