hello_material.html 54 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002
  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>jMonkeyEngine 3 Tutorial (6) - Hello Materials</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>jMonkeyEngine 3 Tutorial (6) - Hello Materials</h1>
  515. <div id="toc" class="toc2">
  516. <div id="toctitle">Table of Contents</div>
  517. <ul class="sectlevel1">
  518. <li><a href="#sample-code">Sample Code</a></li>
  519. </ul>
  520. </div>
  521. </div>
  522. <div id="content">
  523. <div id="preamble">
  524. <div class="sectionbody">
  525. <div class="paragraph">
  526. <p>Previous: <a href="hello_input_system.html">Hello Input System</a>,
  527. Next: <a href="hello_animation.html">Hello Animation</a></p>
  528. </div>
  529. <div class="paragraph">
  530. <p>The term Material includes everything that influences what the surface of a 3D model looks like: The color, texture, shininess, and opacity/transparency. Plain coloring is covered in <a href="hello_node.html">Hello Node</a>. Loading models that come with materials is covered in <a href="hello_asset.html">Hello Asset</a>. In this tutorial you learn to create and use custom JME3 Material Definitions.</p>
  531. </div>
  532. <div class="imageblock" style="text-align: center">
  533. <div class="content">
  534. <img src="images/beginner-materials.png" alt="beginner-materials.png" height="240">
  535. </div>
  536. </div>
  537. <div class="paragraph">
  538. <p>““““</p>
  539. </div>
  540. </div>
  541. </div>
  542. <div class="sect1">
  543. <h2 id="sample-code">Sample Code</h2>
  544. <div class="sectionbody">
  545. <div class="listingblock">
  546. <div class="content">
  547. <pre class="CodeRay highlight"><code data-lang="java">----<span class="keyword">package</span> <span class="namespace">jme3test.helloworld</span>;</code></pre>
  548. </div>
  549. </div>
  550. <div class="paragraph">
  551. <p>import com.jme3.app.SimpleApplication;
  552. import com.jme3.light.DirectionalLight;
  553. import com.jme3.material.Material;
  554. import com.jme3.material.RenderState.BlendMode;
  555. import com.jme3.math.ColorRGBA;
  556. import com.jme3.math.Vector3f;
  557. import com.jme3.renderer.queue.RenderQueue.Bucket;
  558. import com.jme3.scene.Geometry;
  559. import com.jme3.scene.shape.Box;
  560. import com.jme3.scene.shape.Sphere;
  561. import com.jme3.texture.Texture;
  562. import com.jme3.util.TangentBinormalGenerator;</p>
  563. </div>
  564. <div class="paragraph">
  565. <p>/** Sample 6 - how to give an object&#8217;s surface a material and texture.
  566. * How to make objects transparent. How to make bumpy and shiny surfaces. */
  567. public class HelloMaterial extends SimpleApplication {</p>
  568. </div>
  569. <div class="literalblock">
  570. <div class="content">
  571. <pre>public static void main(String[] args) {
  572. HelloMaterial app = new HelloMaterial();
  573. app.start();
  574. }</pre>
  575. </div>
  576. </div>
  577. <div class="literalblock">
  578. <div class="content">
  579. <pre>@Override
  580. public void simpleInitApp() {</pre>
  581. </div>
  582. </div>
  583. <div class="literalblock">
  584. <div class="content">
  585. <pre>/** A simple textured cube -- in good MIP map quality. */
  586. Box cube1Mesh = new Box( 1f,1f,1f);
  587. Geometry cube1Geo = new Geometry("My Textured Box", cube1Mesh);
  588. cube1Geo.setLocalTranslation(new Vector3f(-3f,1.1f,0f));
  589. Material cube1Mat = new Material(assetManager,
  590. "Common/MatDefs/Misc/Unshaded.j3md");
  591. Texture cube1Tex = assetManager.loadTexture(
  592. "Interface/Logo/Monkey.jpg");
  593. cube1Mat.setTexture("ColorMap", cube1Tex);
  594. cube1Geo.setMaterial(cube1Mat);
  595. rootNode.attachChild(cube1Geo);</pre>
  596. </div>
  597. </div>
  598. <div class="literalblock">
  599. <div class="content">
  600. <pre>/** A translucent/transparent texture, similar to a window frame. */
  601. Box cube2Mesh = new Box( 1f,1f,0.01f);
  602. Geometry cube2Geo = new Geometry("window frame", cube2Mesh);
  603. Material cube2Mat = new Material(assetManager,
  604. "Common/MatDefs/Misc/Unshaded.j3md");
  605. cube2Mat.setTexture("ColorMap",
  606. assetManager.loadTexture("Textures/ColoredTex/Monkey.png"));
  607. cube2Mat.getAdditionalRenderState().setBlendMode(BlendMode.Alpha);
  608. cube2Geo.setQueueBucket(Bucket.Transparent);
  609. cube2Geo.setMaterial(cube2Mat);
  610. rootNode.attachChild(cube2Geo);</pre>
  611. </div>
  612. </div>
  613. <div class="literalblock">
  614. <div class="content">
  615. <pre>/** A bumpy rock with a shiny light effect.*/
  616. Sphere sphereMesh = new Sphere(32,32, 2f);
  617. Geometry sphereGeo = new Geometry("Shiny rock", sphereMesh);
  618. sphereMesh.setTextureMode(Sphere.TextureMode.Projected); // better quality on spheres
  619. TangentBinormalGenerator.generate(sphereMesh); // for lighting effect
  620. Material sphereMat = new Material(assetManager,
  621. "Common/MatDefs/Light/Lighting.j3md");
  622. sphereMat.setTexture("DiffuseMap",
  623. assetManager.loadTexture("Textures/Terrain/Pond/Pond.jpg"));
  624. sphereMat.setTexture("NormalMap",
  625. assetManager.loadTexture("Textures/Terrain/Pond/Pond_normal.png"));
  626. sphereMat.setBoolean("UseMaterialColors",true);
  627. sphereMat.setColor("Diffuse",ColorRGBA.White);
  628. sphereMat.setColor("Specular",ColorRGBA.White);
  629. sphereMat.setFloat("Shininess", 64f); // [0,128]
  630. sphereGeo.setMaterial(sphereMat);
  631. sphereGeo.setLocalTranslation(0,2,-2); // Move it a bit
  632. sphereGeo.rotate(1.6f, 0, 0); // Rotate it a bit
  633. rootNode.attachChild(sphereGeo);</pre>
  634. </div>
  635. </div>
  636. <div class="literalblock">
  637. <div class="content">
  638. <pre>/** Must add a light to make the lit object visible! */
  639. DirectionalLight sun = new DirectionalLight();
  640. sun.setDirection(new Vector3f(1,0,-2).normalizeLocal());
  641. sun.setColor(ColorRGBA.White);
  642. rootNode.addLight(sun);</pre>
  643. </div>
  644. </div>
  645. <div class="literalblock">
  646. <div class="content">
  647. <pre> }
  648. }</pre>
  649. </div>
  650. </div>
  651. <div class="listingblock">
  652. <div class="content">
  653. <pre>You should see
  654. * Left – A cube with a brown monkey texture.
  655. * Right – A translucent monkey picture in front of a shiny bumpy rock.
  656. Move around with the WASD keys to have a closer look at the translucency, and the rock's bumpiness.
  657. == Simple Unshaded Texture
  658. Typically you want to give objects in your scene textures: It can be rock, grass, brick, wood, water, metal, paper… A texture is a normal image file in JPG or PNG format. In this example, you create a box with a simple unshaded Monkey texture as material.
  659. [source,java]</pre>
  660. </div>
  661. </div>
  662. <div class="literalblock">
  663. <div class="content">
  664. <pre>/** A simple textured cube -- in good MIP map quality. */
  665. Box cube1Mesh = new Box( 1f,1f,1f);
  666. Geometry cube1Geo = new Geometry("My Textured Box", cube1Mesh);
  667. cube1Geo.setLocalTranslation(new Vector3f(-3f,1.1f,0f));
  668. Material cube1Mat = new Material(assetManager,
  669. "Common/MatDefs/Misc/Unshaded.j3md");
  670. Texture cube1Tex = assetManager.loadTexture(
  671. "Interface/Logo/Monkey.jpg");
  672. cube1Mat.setTexture("ColorMap", cube1Tex);
  673. cube1Geo.setMaterial(cube1Mat);
  674. rootNode.attachChild(cube1Geo);</pre>
  675. </div>
  676. </div>
  677. <div class="listingblock">
  678. <div class="content">
  679. <pre>Here is what we did: to create a textured box:
  680. . Create a Geometry `cube1Geo` from a Box mesh `cube1Mesh`.
  681. . Create a Material `cube1Mat` based on jME3's default `Unshaded.j3md` material definition.
  682. . Create a texture `cube1Tex` from the `Monkey.jpg` file in the `assets/Interface/Logo/` directory of the project.
  683. . Load the texture `cube1Tex` into the `ColorMap` layer of the material `cube1Mat`.
  684. . Apply the material to the cube, and attach the cube to the rootnode.
  685. == Transparent Unshaded Texture
  686. `Monkey.png` is the same texture as `Monkey.jpg`, but with an added alpha channel. The alpha channel allows you to specify which areas of the texture you want to be opaque or transparent: Black areas of the alpha channel remain opaque, gray areas become translucent, and white areas become transparent.
  687. For a partially translucent/transparent texture, you need:
  688. * A Texture with alpha channel
  689. * A Texture with blend mode of `BlendMode.Alpha`
  690. * A Geometry in the `Bucket.Transparent` render bucket. +
  691. This bucket ensures that the transparent object is drawn on top of objects behind it, and they show up correctly under the transparent parts.
  692. [source,java]</pre>
  693. </div>
  694. </div>
  695. <div class="literalblock">
  696. <div class="content">
  697. <pre>/** A translucent/transparent texture, similar to a window frame. */
  698. Box cube2Mesh = new Box( 1f,1f,0.01f);
  699. Geometry cube2Geo = new Geometry("window frame", cube2Mesh);
  700. Material cube2Mat = new Material(assetManager,
  701. "Common/MatDefs/Misc/Unshaded.j3md");
  702. cube2Mat.setTexture("ColorMap",
  703. assetManager.loadTexture("Textures/ColoredTex/Monkey.png"));
  704. cube2Mat.getAdditionalRenderState().setBlendMode(BlendMode.Alpha); // !
  705. cube2Geo.setQueueBucket(Bucket.Transparent); // !
  706. cube2Geo.setMaterial(cube2Mat);
  707. rootNode.attachChild(cube2Geo);</pre>
  708. </div>
  709. </div>
  710. <div class="listingblock">
  711. <div class="content">
  712. <pre>For non-transparent objects, the drawing order is not so important, because the z-buffer already keeps track of whether a pixel is behind something else or not, and the color of an opaque pixel doesn't depend on the pixels under it, this is why opaque Geometries can be drawn in any order.
  713. What you did for the transparent texture is the same as before, with only one added step for the transparency.
  714. . Create a Geometry `cube2Geo` from a Box mesh `cube2Mesh`. This Box Geometry is flat upright box (because z=0.01f).
  715. . Create a Material `cube2Mat` based on jME3's default `Unshaded.j3md` material definition.
  716. . Create a texture `cube2Tex` from the `Monkey.png` file in the `assets/Textures/ColoredTex/` directory of the project. This PNG file must have an alpha layer.
  717. . *Activate transparency in the material by setting the blend mode to Alpha.*
  718. . *Set the QueueBucket of the Geometry to `Bucket.Transparent`.*
  719. . Load the texture `cube2Tex` into the `ColorMap` layer of the material `cube2Mat`.
  720. . Apply the material to the cube, and attach the cube to the rootnode.
  721. *Tip:* Learn more about creating PNG images with an alpha layer in the help system of your graphic editor.
  722. == Shininess and Bumpiness
  723. But textures are not all. Have a close look at the shiny sphere – you cannot get such a nice bumpy material with just a plain texture. You see that JME3 also supports so-called Phong-illuminated materials:
  724. In a lit material, the standard texture layer is refered to as _DiffuseMap_, any material can use this layer. A lit material can additionally have lighting effects such as _Shininess_ used together with the _SpecularMap_ layer and _Specular_ color. And you can even get a realistically bumpy or cracked surface with help of the _NormalMap_ layer.
  725. Let's have a look at the part of the code example where you create the shiny bumpy rock.
  726. . Create a Geometry from a Sphere shape. Note that this shape is a normal smooth sphere mesh.
  727. [source,java]</pre>
  728. </div>
  729. </div>
  730. <div class="literalblock">
  731. <div class="content">
  732. <pre> Sphere sphereMesh = new Sphere(32,32, 2f);
  733. Geometry sphereGeo = new Geometry("Shiny rock", sphereMesh);----
  734. .. (Only for Spheres) Change the sphere's TextureMode to make the square texture project better onto the sphere.</pre>
  735. </div>
  736. </div>
  737. <div class="listingblock">
  738. <div class="content">
  739. <pre class="CodeRay highlight"><code data-lang="java"> sphereMesh.setTextureMode(Sphere.TextureMode.Projected);----
  740. .. You must generate TangentBinormals <span class="keyword">for</span> the mesh so you can use the NormalMap layer of the texture.
  741. [source,java]</code></pre>
  742. </div>
  743. </div>
  744. <div class="literalblock">
  745. <div class="content">
  746. <pre>TangentBinormalGenerator.generate(sphereMesh);----</pre>
  747. </div>
  748. </div>
  749. <div class="olist arabic">
  750. <ol class="arabic">
  751. <li>
  752. <p>Create a material based on the <code>Lighting.j3md</code> default material.</p>
  753. </li>
  754. </ol>
  755. </div>
  756. <div class="listingblock">
  757. <div class="content">
  758. <pre> Material sphereMat = new Material(assetManager,
  759. "Common/MatDefs/Light/Lighting.j3md");----
  760. .. Set a standard rocky texture in the `DiffuseMap` layer. +
  761. image::http///jmonkeyengine.googlecode.com/svn/trunk/engine/test-data/Textures/Terrain/Pond/Pond.jpg[Pond.jpg,with="64",height="64",align="right"]
  762. [source,java]</pre>
  763. </div>
  764. </div>
  765. <div class="literalblock">
  766. <div class="content">
  767. <pre>sphereMat.setTexture("DiffuseMap",
  768. assetManager.loadTexture("Textures/Terrain/Pond/Pond.jpg"));</pre>
  769. </div>
  770. </div>
  771. <div class="listingblock">
  772. <div class="content">
  773. <pre>.. Set the `NormalMap` layer that contains the bumpiness. The NormalMap was generated for this particular DiffuseMap with a special tool (e.g. Blender).
  774. image::http///jmonkeyengine.googlecode.com/svn/trunk/engine/test-data/Textures/Terrain/Pond/Pond_normal.png[Pond_normal.png,with="64",height="64",align="right"]
  775. [source,java]</pre>
  776. </div>
  777. </div>
  778. <div class="literalblock">
  779. <div class="content">
  780. <pre> sphereMat.setTexture("NormalMap",
  781. assetManager.loadTexture("Textures/Terrain/Pond/Pond_normal.png"));----
  782. .. Set the Material's Shininess to a value between 1 and 128. For a rock, a low fuzzy shininess is appropriate. Use material colors to define the shiny Specular color.</pre>
  783. </div>
  784. </div>
  785. <div class="listingblock">
  786. <div class="content">
  787. <pre class="CodeRay highlight"><code data-lang="java"> sphereMat.setBoolean(<span class="string"><span class="delimiter">&quot;</span><span class="content">UseMaterialColors</span><span class="delimiter">&quot;</span></span>,<span class="predefined-constant">true</span>);
  788. sphereMat.setColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">Diffuse</span><span class="delimiter">&quot;</span></span>,ColorRGBA.White); <span class="comment">// minimum material color</span>
  789. sphereMat.setColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">Specular</span><span class="delimiter">&quot;</span></span>,ColorRGBA.White); <span class="comment">// for shininess</span>
  790. sphereMat.setFloat(<span class="string"><span class="delimiter">&quot;</span><span class="content">Shininess</span><span class="delimiter">&quot;</span></span>, <span class="float">64f</span>); <span class="comment">// [1,128] for shininess----</span>
  791. . Assign your newly created material to the Geometry.
  792. [source,java]</code></pre>
  793. </div>
  794. </div>
  795. <div class="literalblock">
  796. <div class="content">
  797. <pre> sphereGeo.setMaterial(sphereMat);----
  798. . Let's move and rotate the geometry a bit to position it better.</pre>
  799. </div>
  800. </div>
  801. <div class="listingblock">
  802. <div class="content">
  803. <pre class="CodeRay highlight"><code data-lang="java"> sphereGeo.setLocalTranslation(<span class="integer">0</span>,<span class="integer">2</span>,-<span class="integer">2</span>); <span class="comment">// Move it a bit</span>
  804. sphereGeo.rotate(<span class="float">1.6f</span>, <span class="integer">0</span>, <span class="integer">0</span>); <span class="comment">// Rotate it a bit</span>
  805. rootNode.attachChild(sphereGeo);----
  806. Remember that any Lighting.j3md-based material requires a light source, as shown in the full code sample above.
  807. *Tip:* To deactivate Shininess, <span class="keyword">do</span> not set <span class="error">`</span>Shininess<span class="error">`</span> to <span class="integer">0</span>, but instead set the <span class="error">`</span>Specular<span class="error">`</span> color to <span class="error">`</span>ColorRGBA.Black<span class="error">`</span>.
  808. == Default Material Definitions
  809. As you have seen, you can find the following <span class="keyword">default</span> materials in <span class="error">`</span>jme/core-data/Common/<span class="error">…</span><span class="error">`</span>.
  810. [cols=<span class="string"><span class="delimiter">&quot;</span><span class="content">3</span><span class="delimiter">&quot;</span></span>, options=<span class="string"><span class="delimiter">&quot;</span><span class="content">header</span><span class="delimiter">&quot;</span></span>]
  811. |===
  812. a| Default Definition
  813. a| Usage
  814. &lt;a| Parameters
  815. a| <span class="error">`</span>Common/MatDefs/Misc/Unshaded.j3md<span class="error">`</span>
  816. a| Colored: Use with mat.setColor() and ColorRGBA. +
  817. Textured: Use with mat.setTexture() and Texture.
  818. a| <span class="predefined-type">Color</span> : <span class="predefined-type">Color</span> +
  819. ColorMap : Texture2D
  820. &lt;a| <span class="error">`</span>Common/MatDefs/Light/Lighting.j3md<span class="error">`</span>
  821. a| Use with shiny Textures, Bump- and NormalMaps textures. +
  822. Requires a light source.
  823. a| Ambient, Diffuse, Specular : <span class="predefined-type">Color</span> +
  824. DiffuseMap, NormalMap, SpecularMap : Texture2D +
  825. Shininess : <span class="predefined-type">Float</span>
  826. |===
  827. For a game, you create custom Materials based on these existing MaterialDefintions <span class="error">–</span> as you have just seen in the example with the shiny rock<span class="string"><span class="delimiter">'</span><span class="content">s material.
  828. == Exercises
  829. === Exercise 1: Custom .j3m Material
  830. Look at the shiny rocky sphere above again. It takes several lines to create and set the Material.
  831. * Note how it loads the `Lighting.j3md` Material definition.
  832. * Note how it sets the `DiffuseMap` and `NormalMap` to a texture path.
  833. * Note how it activates `UseMaterialColors` and sets `Specular` and `Diffuse` to 4 float values (RGBA color).
  834. * Note how it sets `Shininess` to 64.
  835. If you want to use one custom material for several models, you can store it in a .j3m file, and save a few lines of code every time.
  836. You create a j3m file as follows:
  837. . Create a plain text file `assets/Materials/MyCustomMaterial.j3m` in your project directory, with the following content:
  838. [source]
  839. ----Material My shiny custom material : Common/MatDefs/Light/Lighting.j3md {
  840. MaterialParameters {
  841. DiffuseMap : Textures/Terrain/Pond/Pond.jpg
  842. NormalMap : Textures/Terrain/Pond/Pond_normal.png
  843. UseMaterialColors : true
  844. Specular : 1.0 1.0 1.0 1.0
  845. Diffuse : 1.0 1.0 1.0 1.0
  846. Shininess : 64.0
  847. }
  848. }</span></span></code></pre>
  849. </div>
  850. </div>
  851. <div class="ulist">
  852. <ul>
  853. <li>
  854. <p>Note that <code>Material</code> is a fixed keyword.</p>
  855. </li>
  856. <li>
  857. <p>Note that <code>My shiny custom material</code> is a String that you can choose to describe the material.</p>
  858. </li>
  859. <li>
  860. <p>Note how the code sets all the same properties as before!</p>
  861. <div class="olist arabic">
  862. <ol class="arabic">
  863. <li>
  864. <p>In the code sample, comment out the eight lines that have <code>sphereMat</code> in them.</p>
  865. </li>
  866. <li>
  867. <p>Below this line, add the following line:</p>
  868. <div class="listingblock">
  869. <div class="content">
  870. <pre class="CodeRay highlight"><code data-lang="java">----sphereGeo.setMaterial((Material) assetManager.loadMaterial(
  871. <span class="string"><span class="delimiter">&quot;</span><span class="content">Materials/MyCustomMaterial.j3m</span><span class="delimiter">&quot;</span></span>));</code></pre>
  872. </div>
  873. </div>
  874. </li>
  875. </ol>
  876. </div>
  877. </li>
  878. </ul>
  879. </div>
  880. <div class="listingblock">
  881. <div class="content">
  882. <pre>. Run the app. The result is the same.
  883. Using this new custom material `MyCustomMaterial.j3m` only takes one line. You have replaced the eight lines of an on-the-fly material definition with one line that loads a custom material from a file. Using .j3m files is very handy if you use the same material often.
  884. === Exercise 2: Bumpiness and Shininess
  885. Go back to the bumpy rock sample above:
  886. . Comment out the DiffuseMap line, and run the app. (Uncomment it again.)
  887. ** Which property of the rock is lost?
  888. . Comment out the NormalMap line, and run the app. (Uncomment it again.)
  889. ** Which property of the rock is lost?
  890. . Change the value of Shininess to values like 0, 63, 127.
  891. ** What aspect of the Shininess changes?
  892. == Conclusion
  893. You have learned how to create a Material, specify its properties, and use it on a Geometry. You know how to load an image file (.png, .jpg) as texture into a material. You know to save texture files in a subfolder of your project's `assets/Textures/` directory.
  894. You have also learned that a material can be stored in a .j3m file. The file references a built-in MaterialDefinition and specifies values for properties of that MaterialDefinition. You know to save your custom .j3m files in your project's `assets/Materials/` directory.
  895. Now that you know how to load models and how to assign good-looking materials to them, let's have a look at how to animate models in the next chapter, &lt;&lt;jme3/beginner/hello_animation#,Hello Animation&gt;&gt;.
  896. '''
  897. See also
  898. * &lt;&lt;jme3/intermediate/how_to_use_materials#,How to Use Materials&gt;&gt;
  899. * &lt;&lt;sdk/material_editing#,Material Editing&gt;&gt;
  900. * link:http://www.jmonkeyengine.com/forum/index.php?topic=14179.0[Materials] forum thread
  901. * link:http://jmonkeyengine.googlecode.com/files/jME3_materials.pdf[jME3 Materials documentation] (PDF)
  902. * link:http://www.youtube.com/watch?v=Feu3-mrpolc[Video Tutorial: Editing and Assigning Materials to Models in jMonkeyEngine SDK (from 2010, is there a newer one?]
  903. * link:http://www.blender.org/education-help/tutorials/materials/[Creating textures in Blender]
  904. * link:http://www.shaders.org/ifw2_textures/whatsin10.htm[Various Material screenshots] (Not done with JME3, this is just to show the fantastic range of Material parameters in the hands of an expert, until we have a JME3 demo for it.)
  905. &lt;tags&gt;&lt;tag target="documentation" /&gt;&lt;tag target="beginner" /&gt;&lt;tag target="intro" /&gt;&lt;tag target="model" /&gt;&lt;tag target="material" /&gt;&lt;tag target="color" /&gt;&lt;tag target="texture" /&gt;&lt;tag target="transparency" /&gt;&lt;/tags&gt;</pre>
  906. </div>
  907. </div>
  908. </div>
  909. </div>
  910. </div>
  911. <div id="footer">
  912. <div id="footer-text">
  913. Last updated 2016-05-21 23:44:18 UTC
  914. </div>
  915. </div>
  916. </body>
  917. </html>