custom_meshes.html 58 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="generator" content="Asciidoctor 1.5.4">
  8. <meta name="keywords" content="spatial, node, mesh, geometry, scenegraph">
  9. <title>Custom Mesh Shapes</title>
  10. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700">
  11. <style>
  12. /* Asciidoctor default stylesheet | MIT License | http://asciidoctor.org */
  13. /* Remove comment around @import statement below when using as a custom stylesheet */
  14. /*@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700";*/
  15. article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
  16. audio,canvas,video{display:inline-block}
  17. audio:not([controls]){display:none;height:0}
  18. [hidden],template{display:none}
  19. script{display:none!important}
  20. html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
  21. body{margin:0}
  22. a{background:transparent}
  23. a:focus{outline:thin dotted}
  24. a:active,a:hover{outline:0}
  25. h1{font-size:2em;margin:.67em 0}
  26. abbr[title]{border-bottom:1px dotted}
  27. b,strong{font-weight:bold}
  28. dfn{font-style:italic}
  29. hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
  30. mark{background:#ff0;color:#000}
  31. code,kbd,pre,samp{font-family:monospace;font-size:1em}
  32. pre{white-space:pre-wrap}
  33. q{quotes:"\201C" "\201D" "\2018" "\2019"}
  34. small{font-size:80%}
  35. sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
  36. sup{top:-.5em}
  37. sub{bottom:-.25em}
  38. img{border:0}
  39. svg:not(:root){overflow:hidden}
  40. figure{margin:0}
  41. fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
  42. legend{border:0;padding:0}
  43. button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
  44. button,input{line-height:normal}
  45. button,select{text-transform:none}
  46. button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
  47. button[disabled],html input[disabled]{cursor:default}
  48. input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
  49. input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
  50. input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
  51. button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
  52. textarea{overflow:auto;vertical-align:top}
  53. table{border-collapse:collapse;border-spacing:0}
  54. *,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
  55. html,body{font-size:100%}
  56. body{background:#fff;color:rgba(0,0,0,.8);padding:0;margin:0;font-family:"Noto Serif","DejaVu Serif",serif;font-weight:400;font-style:normal;line-height:1;position:relative;cursor:auto}
  57. a:hover{cursor:pointer}
  58. img,object,embed{max-width:100%;height:auto}
  59. object,embed{height:100%}
  60. img{-ms-interpolation-mode:bicubic}
  61. .left{float:left!important}
  62. .right{float:right!important}
  63. .text-left{text-align:left!important}
  64. .text-right{text-align:right!important}
  65. .text-center{text-align:center!important}
  66. .text-justify{text-align:justify!important}
  67. .hide{display:none}
  68. body{-webkit-font-smoothing:antialiased}
  69. img,object,svg{display:inline-block;vertical-align:middle}
  70. textarea{height:auto;min-height:50px}
  71. select{width:100%}
  72. .center{margin-left:auto;margin-right:auto}
  73. .spread{width:100%}
  74. p.lead,.paragraph.lead>p,#preamble>.sectionbody>.paragraph:first-of-type p{font-size:1.21875em;line-height:1.6}
  75. .subheader,.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{line-height:1.45;color:#7a2518;font-weight:400;margin-top:0;margin-bottom:.25em}
  76. div,dl,dt,dd,ul,ol,li,h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6,pre,form,p,blockquote,th,td{margin:0;padding:0;direction:ltr}
  77. a{color:#2156a5;text-decoration:underline;line-height:inherit}
  78. a:hover,a:focus{color:#1d4b8f}
  79. a img{border:none}
  80. p{font-family:inherit;font-weight:400;font-size:1em;line-height:1.6;margin-bottom:1.25em;text-rendering:optimizeLegibility}
  81. p aside{font-size:.875em;line-height:1.35;font-style:italic}
  82. h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{font-family:"Open Sans","DejaVu Sans",sans-serif;font-weight:300;font-style:normal;color:#ba3925;text-rendering:optimizeLegibility;margin-top:1em;margin-bottom:.5em;line-height:1.0125em}
  83. h1 small,h2 small,h3 small,#toctitle small,.sidebarblock>.content>.title small,h4 small,h5 small,h6 small{font-size:60%;color:#e99b8f;line-height:0}
  84. h1{font-size:2.125em}
  85. h2{font-size:1.6875em}
  86. h3,#toctitle,.sidebarblock>.content>.title{font-size:1.375em}
  87. h4,h5{font-size:1.125em}
  88. h6{font-size:1em}
  89. hr{border:solid #ddddd8;border-width:1px 0 0;clear:both;margin:1.25em 0 1.1875em;height:0}
  90. em,i{font-style:italic;line-height:inherit}
  91. strong,b{font-weight:bold;line-height:inherit}
  92. small{font-size:60%;line-height:inherit}
  93. code{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;color:rgba(0,0,0,.9)}
  94. ul,ol,dl{font-size:1em;line-height:1.6;margin-bottom:1.25em;list-style-position:outside;font-family:inherit}
  95. ul,ol,ul.no-bullet,ol.no-bullet{margin-left:1.5em}
  96. ul li ul,ul li ol{margin-left:1.25em;margin-bottom:0;font-size:1em}
  97. ul.square li ul,ul.circle li ul,ul.disc li ul{list-style:inherit}
  98. ul.square{list-style-type:square}
  99. ul.circle{list-style-type:circle}
  100. ul.disc{list-style-type:disc}
  101. ul.no-bullet{list-style:none}
  102. ol li ul,ol li ol{margin-left:1.25em;margin-bottom:0}
  103. dl dt{margin-bottom:.3125em;font-weight:bold}
  104. dl dd{margin-bottom:1.25em}
  105. abbr,acronym{text-transform:uppercase;font-size:90%;color:rgba(0,0,0,.8);border-bottom:1px dotted #ddd;cursor:help}
  106. abbr{text-transform:none}
  107. blockquote{margin:0 0 1.25em;padding:.5625em 1.25em 0 1.1875em;border-left:1px solid #ddd}
  108. blockquote cite{display:block;font-size:.9375em;color:rgba(0,0,0,.6)}
  109. blockquote cite:before{content:"\2014 \0020"}
  110. blockquote cite a,blockquote cite a:visited{color:rgba(0,0,0,.6)}
  111. blockquote,blockquote p{line-height:1.6;color:rgba(0,0,0,.85)}
  112. @media only screen and (min-width:768px){h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2}
  113. h1{font-size:2.75em}
  114. h2{font-size:2.3125em}
  115. h3,#toctitle,.sidebarblock>.content>.title{font-size:1.6875em}
  116. h4{font-size:1.4375em}}
  117. table{background:#fff;margin-bottom:1.25em;border:solid 1px #dedede}
  118. table thead,table tfoot{background:#f7f8f7;font-weight:bold}
  119. table thead tr th,table thead tr td,table tfoot tr th,table tfoot tr td{padding:.5em .625em .625em;font-size:inherit;color:rgba(0,0,0,.8);text-align:left}
  120. table tr th,table tr td{padding:.5625em .625em;font-size:inherit;color:rgba(0,0,0,.8)}
  121. table tr.even,table tr.alt,table tr:nth-of-type(even){background:#f8f8f7}
  122. table thead tr th,table tfoot tr th,table tbody tr td,table tr td,table tfoot tr td{display:table-cell;line-height:1.6}
  123. body{tab-size:4}
  124. h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2;word-spacing:-.05em}
  125. h1 strong,h2 strong,h3 strong,#toctitle strong,.sidebarblock>.content>.title strong,h4 strong,h5 strong,h6 strong{font-weight:400}
  126. .clearfix:before,.clearfix:after,.float-group:before,.float-group:after{content:" ";display:table}
  127. .clearfix:after,.float-group:after{clear:both}
  128. *:not(pre)>code{font-size:.9375em;font-style:normal!important;letter-spacing:0;padding:.1em .5ex;word-spacing:-.15em;background-color:#f7f7f8;-webkit-border-radius:4px;border-radius:4px;line-height:1.45;text-rendering:optimizeSpeed}
  129. pre,pre>code{line-height:1.45;color:rgba(0,0,0,.9);font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;text-rendering:optimizeSpeed}
  130. .keyseq{color:rgba(51,51,51,.8)}
  131. kbd{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;display:inline-block;color:rgba(0,0,0,.8);font-size:.65em;line-height:1.45;background-color:#f7f7f7;border:1px solid #ccc;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em white inset;box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em #fff inset;margin:0 .15em;padding:.2em .5em;vertical-align:middle;position:relative;top:-.1em;white-space:nowrap}
  132. .keyseq kbd:first-child{margin-left:0}
  133. .keyseq kbd:last-child{margin-right:0}
  134. .menuseq,.menu{color:rgba(0,0,0,.8)}
  135. b.button:before,b.button:after{position:relative;top:-1px;font-weight:400}
  136. b.button:before{content:"[";padding:0 3px 0 2px}
  137. b.button:after{content:"]";padding:0 2px 0 3px}
  138. p a>code:hover{color:rgba(0,0,0,.9)}
  139. #header,#content,#footnotes,#footer{width:100%;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;max-width:62.5em;*zoom:1;position:relative;padding-left:.9375em;padding-right:.9375em}
  140. #header:before,#header:after,#content:before,#content:after,#footnotes:before,#footnotes:after,#footer:before,#footer:after{content:" ";display:table}
  141. #header:after,#content:after,#footnotes:after,#footer:after{clear:both}
  142. #content{margin-top:1.25em}
  143. #content:before{content:none}
  144. #header>h1:first-child{color:rgba(0,0,0,.85);margin-top:2.25rem;margin-bottom:0}
  145. #header>h1:first-child+#toc{margin-top:8px;border-top:1px solid #ddddd8}
  146. #header>h1:only-child,body.toc2 #header>h1:nth-last-child(2){border-bottom:1px solid #ddddd8;padding-bottom:8px}
  147. #header .details{border-bottom:1px solid #ddddd8;line-height:1.45;padding-top:.25em;padding-bottom:.25em;padding-left:.25em;color:rgba(0,0,0,.6);display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-flow:row wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap}
  148. #header .details span:first-child{margin-left:-.125em}
  149. #header .details span.email a{color:rgba(0,0,0,.85)}
  150. #header .details br{display:none}
  151. #header .details br+span:before{content:"\00a0\2013\00a0"}
  152. #header .details br+span.author:before{content:"\00a0\22c5\00a0";color:rgba(0,0,0,.85)}
  153. #header .details br+span#revremark:before{content:"\00a0|\00a0"}
  154. #header #revnumber{text-transform:capitalize}
  155. #header #revnumber:after{content:"\00a0"}
  156. #content>h1:first-child:not([class]){color:rgba(0,0,0,.85);border-bottom:1px solid #ddddd8;padding-bottom:8px;margin-top:0;padding-top:1rem;margin-bottom:1.25rem}
  157. #toc{border-bottom:1px solid #efefed;padding-bottom:.5em}
  158. #toc>ul{margin-left:.125em}
  159. #toc ul.sectlevel0>li>a{font-style:italic}
  160. #toc ul.sectlevel0 ul.sectlevel1{margin:.5em 0}
  161. #toc ul{font-family:"Open Sans","DejaVu Sans",sans-serif;list-style-type:none}
  162. #toc li{line-height:1.3334;margin-top:.3334em}
  163. #toc a{text-decoration:none}
  164. #toc a:active{text-decoration:underline}
  165. #toctitle{color:#7a2518;font-size:1.2em}
  166. @media only screen and (min-width:768px){#toctitle{font-size:1.375em}
  167. body.toc2{padding-left:15em;padding-right:0}
  168. #toc.toc2{margin-top:0!important;background-color:#f8f8f7;position:fixed;width:15em;left:0;top:0;border-right:1px solid #efefed;border-top-width:0!important;border-bottom-width:0!important;z-index:1000;padding:1.25em 1em;height:100%;overflow:auto}
  169. #toc.toc2 #toctitle{margin-top:0;margin-bottom:.8rem;font-size:1.2em}
  170. #toc.toc2>ul{font-size:.9em;margin-bottom:0}
  171. #toc.toc2 ul ul{margin-left:0;padding-left:1em}
  172. #toc.toc2 ul.sectlevel0 ul.sectlevel1{padding-left:0;margin-top:.5em;margin-bottom:.5em}
  173. body.toc2.toc-right{padding-left:0;padding-right:15em}
  174. body.toc2.toc-right #toc.toc2{border-right-width:0;border-left:1px solid #efefed;left:auto;right:0}}
  175. @media only screen and (min-width:1280px){body.toc2{padding-left:20em;padding-right:0}
  176. #toc.toc2{width:20em}
  177. #toc.toc2 #toctitle{font-size:1.375em}
  178. #toc.toc2>ul{font-size:.95em}
  179. #toc.toc2 ul ul{padding-left:1.25em}
  180. body.toc2.toc-right{padding-left:0;padding-right:20em}}
  181. #content #toc{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
  182. #content #toc>:first-child{margin-top:0}
  183. #content #toc>:last-child{margin-bottom:0}
  184. #footer{max-width:100%;background-color:rgba(0,0,0,.8);padding:1.25em}
  185. #footer-text{color:rgba(255,255,255,.8);line-height:1.44}
  186. .sect1{padding-bottom:.625em}
  187. @media only screen and (min-width:768px){.sect1{padding-bottom:1.25em}}
  188. .sect1+.sect1{border-top:1px solid #efefed}
  189. #content h1>a.anchor,h2>a.anchor,h3>a.anchor,#toctitle>a.anchor,.sidebarblock>.content>.title>a.anchor,h4>a.anchor,h5>a.anchor,h6>a.anchor{position:absolute;z-index:1001;width:1.5ex;margin-left:-1.5ex;display:block;text-decoration:none!important;visibility:hidden;text-align:center;font-weight:400}
  190. #content h1>a.anchor:before,h2>a.anchor:before,h3>a.anchor:before,#toctitle>a.anchor:before,.sidebarblock>.content>.title>a.anchor:before,h4>a.anchor:before,h5>a.anchor:before,h6>a.anchor:before{content:"\00A7";font-size:.85em;display:block;padding-top:.1em}
  191. #content h1:hover>a.anchor,#content h1>a.anchor:hover,h2:hover>a.anchor,h2>a.anchor:hover,h3:hover>a.anchor,#toctitle:hover>a.anchor,.sidebarblock>.content>.title:hover>a.anchor,h3>a.anchor:hover,#toctitle>a.anchor:hover,.sidebarblock>.content>.title>a.anchor:hover,h4:hover>a.anchor,h4>a.anchor:hover,h5:hover>a.anchor,h5>a.anchor:hover,h6:hover>a.anchor,h6>a.anchor:hover{visibility:visible}
  192. #content h1>a.link,h2>a.link,h3>a.link,#toctitle>a.link,.sidebarblock>.content>.title>a.link,h4>a.link,h5>a.link,h6>a.link{color:#ba3925;text-decoration:none}
  193. #content h1>a.link:hover,h2>a.link:hover,h3>a.link:hover,#toctitle>a.link:hover,.sidebarblock>.content>.title>a.link:hover,h4>a.link:hover,h5>a.link:hover,h6>a.link:hover{color:#a53221}
  194. .audioblock,.imageblock,.literalblock,.listingblock,.stemblock,.videoblock{margin-bottom:1.25em}
  195. .admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{text-rendering:optimizeLegibility;text-align:left;font-family:"Noto Serif","DejaVu Serif",serif;font-size:1rem;font-style:italic}
  196. table.tableblock>caption.title{white-space:nowrap;overflow:visible;max-width:0}
  197. .paragraph.lead>p,#preamble>.sectionbody>.paragraph:first-of-type p{color:rgba(0,0,0,.85)}
  198. table.tableblock #preamble>.sectionbody>.paragraph:first-of-type p{font-size:inherit}
  199. .admonitionblock>table{border-collapse:separate;border:0;background:none;width:100%}
  200. .admonitionblock>table td.icon{text-align:center;width:80px}
  201. .admonitionblock>table td.icon img{max-width:none}
  202. .admonitionblock>table td.icon .title{font-weight:bold;font-family:"Open Sans","DejaVu Sans",sans-serif;text-transform:uppercase}
  203. .admonitionblock>table td.content{padding-left:1.125em;padding-right:1.25em;border-left:1px solid #ddddd8;color:rgba(0,0,0,.6)}
  204. .admonitionblock>table td.content>:last-child>:last-child{margin-bottom:0}
  205. .exampleblock>.content{border-style:solid;border-width:1px;border-color:#e6e6e6;margin-bottom:1.25em;padding:1.25em;background:#fff;-webkit-border-radius:4px;border-radius:4px}
  206. .exampleblock>.content>:first-child{margin-top:0}
  207. .exampleblock>.content>:last-child{margin-bottom:0}
  208. .sidebarblock{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
  209. .sidebarblock>:first-child{margin-top:0}
  210. .sidebarblock>:last-child{margin-bottom:0}
  211. .sidebarblock>.content>.title{color:#7a2518;margin-top:0;text-align:center}
  212. .exampleblock>.content>:last-child>:last-child,.exampleblock>.content .olist>ol>li:last-child>:last-child,.exampleblock>.content .ulist>ul>li:last-child>:last-child,.exampleblock>.content .qlist>ol>li:last-child>:last-child,.sidebarblock>.content>:last-child>:last-child,.sidebarblock>.content .olist>ol>li:last-child>:last-child,.sidebarblock>.content .ulist>ul>li:last-child>:last-child,.sidebarblock>.content .qlist>ol>li:last-child>:last-child{margin-bottom:0}
  213. .literalblock pre,.listingblock pre:not(.highlight),.listingblock pre[class="highlight"],.listingblock pre[class^="highlight "],.listingblock pre.CodeRay,.listingblock pre.prettyprint{background:#f7f7f8}
  214. .sidebarblock .literalblock pre,.sidebarblock .listingblock pre:not(.highlight),.sidebarblock .listingblock pre[class="highlight"],.sidebarblock .listingblock pre[class^="highlight "],.sidebarblock .listingblock pre.CodeRay,.sidebarblock .listingblock pre.prettyprint{background:#f2f1f1}
  215. .literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{-webkit-border-radius:4px;border-radius:4px;word-wrap:break-word;padding:1em;font-size:.8125em}
  216. .literalblock pre.nowrap,.literalblock pre[class].nowrap,.listingblock pre.nowrap,.listingblock pre[class].nowrap{overflow-x:auto;white-space:pre;word-wrap:normal}
  217. @media only screen and (min-width:768px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:.90625em}}
  218. @media only screen and (min-width:1280px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:1em}}
  219. .literalblock.output pre{color:#f7f7f8;background-color:rgba(0,0,0,.9)}
  220. .listingblock pre.highlightjs{padding:0}
  221. .listingblock pre.highlightjs>code{padding:1em;-webkit-border-radius:4px;border-radius:4px}
  222. .listingblock pre.prettyprint{border-width:0}
  223. .listingblock>.content{position:relative}
  224. .listingblock code[data-lang]:before{display:none;content:attr(data-lang);position:absolute;font-size:.75em;top:.425rem;right:.5rem;line-height:1;text-transform:uppercase;color:#999}
  225. .listingblock:hover code[data-lang]:before{display:block}
  226. .listingblock.terminal pre .command:before{content:attr(data-prompt);padding-right:.5em;color:#999}
  227. .listingblock.terminal pre .command:not([data-prompt]):before{content:"$"}
  228. table.pyhltable{border-collapse:separate;border:0;margin-bottom:0;background:none}
  229. table.pyhltable td{vertical-align:top;padding-top:0;padding-bottom:0;line-height:1.45}
  230. table.pyhltable td.code{padding-left:.75em;padding-right:0}
  231. pre.pygments .lineno,table.pyhltable td:not(.code){color:#999;padding-left:0;padding-right:.5em;border-right:1px solid #ddddd8}
  232. pre.pygments .lineno{display:inline-block;margin-right:.25em}
  233. table.pyhltable .linenodiv{background:none!important;padding-right:0!important}
  234. .quoteblock{margin:0 1em 1.25em 1.5em;display:table}
  235. .quoteblock>.title{margin-left:-1.5em;margin-bottom:.75em}
  236. .quoteblock blockquote,.quoteblock blockquote p{color:rgba(0,0,0,.85);font-size:1.15rem;line-height:1.75;word-spacing:.1em;letter-spacing:0;font-style:italic;text-align:justify}
  237. .quoteblock blockquote{margin:0;padding:0;border:0}
  238. .quoteblock blockquote:before{content:"\201c";float:left;font-size:2.75em;font-weight:bold;line-height:.6em;margin-left:-.6em;color:#7a2518;text-shadow:0 1px 2px rgba(0,0,0,.1)}
  239. .quoteblock blockquote>.paragraph:last-child p{margin-bottom:0}
  240. .quoteblock .attribution{margin-top:.5em;margin-right:.5ex;text-align:right}
  241. .quoteblock .quoteblock{margin-left:0;margin-right:0;padding:.5em 0;border-left:3px solid rgba(0,0,0,.6)}
  242. .quoteblock .quoteblock blockquote{padding:0 0 0 .75em}
  243. .quoteblock .quoteblock blockquote:before{display:none}
  244. .verseblock{margin:0 1em 1.25em 1em}
  245. .verseblock pre{font-family:"Open Sans","DejaVu Sans",sans;font-size:1.15rem;color:rgba(0,0,0,.85);font-weight:300;text-rendering:optimizeLegibility}
  246. .verseblock pre strong{font-weight:400}
  247. .verseblock .attribution{margin-top:1.25rem;margin-left:.5ex}
  248. .quoteblock .attribution,.verseblock .attribution{font-size:.9375em;line-height:1.45;font-style:italic}
  249. .quoteblock .attribution br,.verseblock .attribution br{display:none}
  250. .quoteblock .attribution cite,.verseblock .attribution cite{display:block;letter-spacing:-.025em;color:rgba(0,0,0,.6)}
  251. .quoteblock.abstract{margin:0 0 1.25em 0;display:block}
  252. .quoteblock.abstract blockquote,.quoteblock.abstract blockquote p{text-align:left;word-spacing:0}
  253. .quoteblock.abstract blockquote:before,.quoteblock.abstract blockquote p:first-of-type:before{display:none}
  254. table.tableblock{max-width:100%;border-collapse:separate}
  255. table.tableblock td>.paragraph:last-child p>p:last-child,table.tableblock th>p:last-child,table.tableblock td>p:last-child{margin-bottom:0}
  256. table.tableblock,th.tableblock,td.tableblock{border:0 solid #dedede}
  257. table.grid-all th.tableblock,table.grid-all td.tableblock{border-width:0 1px 1px 0}
  258. table.grid-all tfoot>tr>th.tableblock,table.grid-all tfoot>tr>td.tableblock{border-width:1px 1px 0 0}
  259. table.grid-cols th.tableblock,table.grid-cols td.tableblock{border-width:0 1px 0 0}
  260. table.grid-all *>tr>.tableblock:last-child,table.grid-cols *>tr>.tableblock:last-child{border-right-width:0}
  261. table.grid-rows th.tableblock,table.grid-rows td.tableblock{border-width:0 0 1px 0}
  262. table.grid-all tbody>tr:last-child>th.tableblock,table.grid-all tbody>tr:last-child>td.tableblock,table.grid-all thead:last-child>tr>th.tableblock,table.grid-rows tbody>tr:last-child>th.tableblock,table.grid-rows tbody>tr:last-child>td.tableblock,table.grid-rows thead:last-child>tr>th.tableblock{border-bottom-width:0}
  263. table.grid-rows tfoot>tr>th.tableblock,table.grid-rows tfoot>tr>td.tableblock{border-width:1px 0 0 0}
  264. table.frame-all{border-width:1px}
  265. table.frame-sides{border-width:0 1px}
  266. table.frame-topbot{border-width:1px 0}
  267. th.halign-left,td.halign-left{text-align:left}
  268. th.halign-right,td.halign-right{text-align:right}
  269. th.halign-center,td.halign-center{text-align:center}
  270. th.valign-top,td.valign-top{vertical-align:top}
  271. th.valign-bottom,td.valign-bottom{vertical-align:bottom}
  272. th.valign-middle,td.valign-middle{vertical-align:middle}
  273. table thead th,table tfoot th{font-weight:bold}
  274. tbody tr th{display:table-cell;line-height:1.6;background:#f7f8f7}
  275. tbody tr th,tbody tr th p,tfoot tr th,tfoot tr th p{color:rgba(0,0,0,.8);font-weight:bold}
  276. p.tableblock>code:only-child{background:none;padding:0}
  277. p.tableblock{font-size:1em}
  278. td>div.verse{white-space:pre}
  279. ol{margin-left:1.75em}
  280. ul li ol{margin-left:1.5em}
  281. dl dd{margin-left:1.125em}
  282. dl dd:last-child,dl dd:last-child>:last-child{margin-bottom:0}
  283. ol>li p,ul>li p,ul dd,ol dd,.olist .olist,.ulist .ulist,.ulist .olist,.olist .ulist{margin-bottom:.625em}
  284. ul.unstyled,ol.unnumbered,ul.checklist,ul.none{list-style-type:none}
  285. ul.unstyled,ol.unnumbered,ul.checklist{margin-left:.625em}
  286. ul.checklist li>p:first-child>.fa-square-o:first-child,ul.checklist li>p:first-child>.fa-check-square-o:first-child{width:1em;font-size:.85em}
  287. ul.checklist li>p:first-child>input[type="checkbox"]:first-child{width:1em;position:relative;top:1px}
  288. ul.inline{margin:0 auto .625em auto;margin-left:-1.375em;margin-right:0;padding:0;list-style:none;overflow:hidden}
  289. ul.inline>li{list-style:none;float:left;margin-left:1.375em;display:block}
  290. ul.inline>li>*{display:block}
  291. .unstyled dl dt{font-weight:400;font-style:normal}
  292. ol.arabic{list-style-type:decimal}
  293. ol.decimal{list-style-type:decimal-leading-zero}
  294. ol.loweralpha{list-style-type:lower-alpha}
  295. ol.upperalpha{list-style-type:upper-alpha}
  296. ol.lowerroman{list-style-type:lower-roman}
  297. ol.upperroman{list-style-type:upper-roman}
  298. ol.lowergreek{list-style-type:lower-greek}
  299. .hdlist>table,.colist>table{border:0;background:none}
  300. .hdlist>table>tbody>tr,.colist>table>tbody>tr{background:none}
  301. td.hdlist1,td.hdlist2{vertical-align:top;padding:0 .625em}
  302. td.hdlist1{font-weight:bold;padding-bottom:1.25em}
  303. .literalblock+.colist,.listingblock+.colist{margin-top:-.5em}
  304. .colist>table tr>td:first-of-type{padding:0 .75em;line-height:1}
  305. .colist>table tr>td:last-of-type{padding:.25em 0}
  306. .thumb,.th{line-height:0;display:inline-block;border:solid 4px #fff;-webkit-box-shadow:0 0 0 1px #ddd;box-shadow:0 0 0 1px #ddd}
  307. .imageblock.left,.imageblock[style*="float: left"]{margin:.25em .625em 1.25em 0}
  308. .imageblock.right,.imageblock[style*="float: right"]{margin:.25em 0 1.25em .625em}
  309. .imageblock>.title{margin-bottom:0}
  310. .imageblock.thumb,.imageblock.th{border-width:6px}
  311. .imageblock.thumb>.title,.imageblock.th>.title{padding:0 .125em}
  312. .image.left,.image.right{margin-top:.25em;margin-bottom:.25em;display:inline-block;line-height:0}
  313. .image.left{margin-right:.625em}
  314. .image.right{margin-left:.625em}
  315. a.image{text-decoration:none;display:inline-block}
  316. a.image object{pointer-events:none}
  317. sup.footnote,sup.footnoteref{font-size:.875em;position:static;vertical-align:super}
  318. sup.footnote a,sup.footnoteref a{text-decoration:none}
  319. sup.footnote a:active,sup.footnoteref a:active{text-decoration:underline}
  320. #footnotes{padding-top:.75em;padding-bottom:.75em;margin-bottom:.625em}
  321. #footnotes hr{width:20%;min-width:6.25em;margin:-.25em 0 .75em 0;border-width:1px 0 0 0}
  322. #footnotes .footnote{padding:0 .375em 0 .225em;line-height:1.3334;font-size:.875em;margin-left:1.2em;text-indent:-1.05em;margin-bottom:.2em}
  323. #footnotes .footnote a:first-of-type{font-weight:bold;text-decoration:none}
  324. #footnotes .footnote:last-of-type{margin-bottom:0}
  325. #content #footnotes{margin-top:-.625em;margin-bottom:0;padding:.75em 0}
  326. .gist .file-data>table{border:0;background:#fff;width:100%;margin-bottom:0}
  327. .gist .file-data>table td.line-data{width:99%}
  328. div.unbreakable{page-break-inside:avoid}
  329. .big{font-size:larger}
  330. .small{font-size:smaller}
  331. .underline{text-decoration:underline}
  332. .overline{text-decoration:overline}
  333. .line-through{text-decoration:line-through}
  334. .aqua{color:#00bfbf}
  335. .aqua-background{background-color:#00fafa}
  336. .black{color:#000}
  337. .black-background{background-color:#000}
  338. .blue{color:#0000bf}
  339. .blue-background{background-color:#0000fa}
  340. .fuchsia{color:#bf00bf}
  341. .fuchsia-background{background-color:#fa00fa}
  342. .gray{color:#606060}
  343. .gray-background{background-color:#7d7d7d}
  344. .green{color:#006000}
  345. .green-background{background-color:#007d00}
  346. .lime{color:#00bf00}
  347. .lime-background{background-color:#00fa00}
  348. .maroon{color:#600000}
  349. .maroon-background{background-color:#7d0000}
  350. .navy{color:#000060}
  351. .navy-background{background-color:#00007d}
  352. .olive{color:#606000}
  353. .olive-background{background-color:#7d7d00}
  354. .purple{color:#600060}
  355. .purple-background{background-color:#7d007d}
  356. .red{color:#bf0000}
  357. .red-background{background-color:#fa0000}
  358. .silver{color:#909090}
  359. .silver-background{background-color:#bcbcbc}
  360. .teal{color:#006060}
  361. .teal-background{background-color:#007d7d}
  362. .white{color:#bfbfbf}
  363. .white-background{background-color:#fafafa}
  364. .yellow{color:#bfbf00}
  365. .yellow-background{background-color:#fafa00}
  366. span.icon>.fa{cursor:default}
  367. .admonitionblock td.icon [class^="fa icon-"]{font-size:2.5em;text-shadow:1px 1px 2px rgba(0,0,0,.5);cursor:default}
  368. .admonitionblock td.icon .icon-note:before{content:"\f05a";color:#19407c}
  369. .admonitionblock td.icon .icon-tip:before{content:"\f0eb";text-shadow:1px 1px 2px rgba(155,155,0,.8);color:#111}
  370. .admonitionblock td.icon .icon-warning:before{content:"\f071";color:#bf6900}
  371. .admonitionblock td.icon .icon-caution:before{content:"\f06d";color:#bf3400}
  372. .admonitionblock td.icon .icon-important:before{content:"\f06a";color:#bf0000}
  373. .conum[data-value]{display:inline-block;color:#fff!important;background-color:rgba(0,0,0,.8);-webkit-border-radius:100px;border-radius:100px;text-align:center;font-size:.75em;width:1.67em;height:1.67em;line-height:1.67em;font-family:"Open Sans","DejaVu Sans",sans-serif;font-style:normal;font-weight:bold}
  374. .conum[data-value] *{color:#fff!important}
  375. .conum[data-value]+b{display:none}
  376. .conum[data-value]:after{content:attr(data-value)}
  377. pre .conum[data-value]{position:relative;top:-.125em}
  378. b.conum *{color:inherit!important}
  379. .conum:not([data-value]):empty{display:none}
  380. dt,th.tableblock,td.content,div.footnote{text-rendering:optimizeLegibility}
  381. h1,h2,p,td.content,span.alt{letter-spacing:-.01em}
  382. p strong,td.content strong,div.footnote strong{letter-spacing:-.005em}
  383. p,blockquote,dt,td.content,span.alt{font-size:1.0625rem}
  384. p{margin-bottom:1.25rem}
  385. .sidebarblock p,.sidebarblock dt,.sidebarblock td.content,p.tableblock{font-size:1em}
  386. .exampleblock>.content{background-color:#fffef7;border-color:#e0e0dc;-webkit-box-shadow:0 1px 4px #e0e0dc;box-shadow:0 1px 4px #e0e0dc}
  387. .print-only{display:none!important}
  388. @media print{@page{margin:1.25cm .75cm}
  389. *{-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important}
  390. a{color:inherit!important;text-decoration:underline!important}
  391. a.bare,a[href^="#"],a[href^="mailto:"]{text-decoration:none!important}
  392. a[href^="http:"]:not(.bare):after,a[href^="https:"]:not(.bare):after{content:"(" attr(href) ")";display:inline-block;font-size:.875em;padding-left:.25em}
  393. abbr[title]:after{content:" (" attr(title) ")"}
  394. pre,blockquote,tr,img,object,svg{page-break-inside:avoid}
  395. thead{display:table-header-group}
  396. svg{max-width:100%}
  397. p,blockquote,dt,td.content{font-size:1em;orphans:3;widows:3}
  398. h2,h3,#toctitle,.sidebarblock>.content>.title{page-break-after:avoid}
  399. #toc,.sidebarblock,.exampleblock>.content{background:none!important}
  400. #toc{border-bottom:1px solid #ddddd8!important;padding-bottom:0!important}
  401. .sect1{padding-bottom:0!important}
  402. .sect1+.sect1{border:0!important}
  403. #header>h1:first-child{margin-top:1.25rem}
  404. body.book #header{text-align:center}
  405. body.book #header>h1:first-child{border:0!important;margin:2.5em 0 1em 0}
  406. body.book #header .details{border:0!important;display:block;padding:0!important}
  407. body.book #header .details span:first-child{margin-left:0!important}
  408. body.book #header .details br{display:block}
  409. body.book #header .details br+span:before{content:none!important}
  410. body.book #toc{border:0!important;text-align:left!important;padding:0!important;margin:0!important}
  411. body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-break-before:always}
  412. .listingblock code[data-lang]:before{display:block}
  413. #footer{background:none!important;padding:0 .9375em}
  414. #footer-text{color:rgba(0,0,0,.6)!important;font-size:.9em}
  415. .hide-on-print{display:none!important}
  416. .print-only{display:block!important}
  417. .hide-for-print{display:none!important}
  418. .show-for-print{display:inherit!important}}
  419. </style>
  420. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  421. <style>
  422. /* Stylesheet for CodeRay to match GitHub theme | MIT License | http://foundation.zurb.com */
  423. /*pre.CodeRay {background-color:#f7f7f8;}*/
  424. .CodeRay .line-numbers{border-right:1px solid #d8d8d8;padding:0 0.5em 0 .25em}
  425. .CodeRay span.line-numbers{display:inline-block;margin-right:.5em;color:rgba(0,0,0,.3)}
  426. .CodeRay .line-numbers strong{color:rgba(0,0,0,.4)}
  427. table.CodeRay{border-collapse:separate;border-spacing:0;margin-bottom:0;border:0;background:none}
  428. table.CodeRay td{vertical-align: top;line-height:1.45}
  429. table.CodeRay td.line-numbers{text-align:right}
  430. table.CodeRay td.line-numbers>pre{padding:0;color:rgba(0,0,0,.3)}
  431. table.CodeRay td.code{padding:0 0 0 .5em}
  432. table.CodeRay td.code>pre{padding:0}
  433. .CodeRay .debug{color:#fff !important;background:#000080 !important}
  434. .CodeRay .annotation{color:#007}
  435. .CodeRay .attribute-name{color:#000080}
  436. .CodeRay .attribute-value{color:#700}
  437. .CodeRay .binary{color:#509}
  438. .CodeRay .comment{color:#998;font-style:italic}
  439. .CodeRay .char{color:#04d}
  440. .CodeRay .char .content{color:#04d}
  441. .CodeRay .char .delimiter{color:#039}
  442. .CodeRay .class{color:#458;font-weight:bold}
  443. .CodeRay .complex{color:#a08}
  444. .CodeRay .constant,.CodeRay .predefined-constant{color:#008080}
  445. .CodeRay .color{color:#099}
  446. .CodeRay .class-variable{color:#369}
  447. .CodeRay .decorator{color:#b0b}
  448. .CodeRay .definition{color:#099}
  449. .CodeRay .delimiter{color:#000}
  450. .CodeRay .doc{color:#970}
  451. .CodeRay .doctype{color:#34b}
  452. .CodeRay .doc-string{color:#d42}
  453. .CodeRay .escape{color:#666}
  454. .CodeRay .entity{color:#800}
  455. .CodeRay .error{color:#808}
  456. .CodeRay .exception{color:inherit}
  457. .CodeRay .filename{color:#099}
  458. .CodeRay .function{color:#900;font-weight:bold}
  459. .CodeRay .global-variable{color:#008080}
  460. .CodeRay .hex{color:#058}
  461. .CodeRay .integer,.CodeRay .float{color:#099}
  462. .CodeRay .include{color:#555}
  463. .CodeRay .inline{color:#000}
  464. .CodeRay .inline .inline{background:#ccc}
  465. .CodeRay .inline .inline .inline{background:#bbb}
  466. .CodeRay .inline .inline-delimiter{color:#d14}
  467. .CodeRay .inline-delimiter{color:#d14}
  468. .CodeRay .important{color:#555;font-weight:bold}
  469. .CodeRay .interpreted{color:#b2b}
  470. .CodeRay .instance-variable{color:#008080}
  471. .CodeRay .label{color:#970}
  472. .CodeRay .local-variable{color:#963}
  473. .CodeRay .octal{color:#40e}
  474. .CodeRay .predefined{color:#369}
  475. .CodeRay .preprocessor{color:#579}
  476. .CodeRay .pseudo-class{color:#555}
  477. .CodeRay .directive{font-weight:bold}
  478. .CodeRay .type{font-weight:bold}
  479. .CodeRay .predefined-type{color:inherit}
  480. .CodeRay .reserved,.CodeRay .keyword {color:#000;font-weight:bold}
  481. .CodeRay .key{color:#808}
  482. .CodeRay .key .delimiter{color:#606}
  483. .CodeRay .key .char{color:#80f}
  484. .CodeRay .value{color:#088}
  485. .CodeRay .regexp .delimiter{color:#808}
  486. .CodeRay .regexp .content{color:#808}
  487. .CodeRay .regexp .modifier{color:#808}
  488. .CodeRay .regexp .char{color:#d14}
  489. .CodeRay .regexp .function{color:#404;font-weight:bold}
  490. .CodeRay .string{color:#d20}
  491. .CodeRay .string .string .string{background:#ffd0d0}
  492. .CodeRay .string .content{color:#d14}
  493. .CodeRay .string .char{color:#d14}
  494. .CodeRay .string .delimiter{color:#d14}
  495. .CodeRay .shell{color:#d14}
  496. .CodeRay .shell .delimiter{color:#d14}
  497. .CodeRay .symbol{color:#990073}
  498. .CodeRay .symbol .content{color:#a60}
  499. .CodeRay .symbol .delimiter{color:#630}
  500. .CodeRay .tag{color:#008080}
  501. .CodeRay .tag-special{color:#d70}
  502. .CodeRay .variable{color:#036}
  503. .CodeRay .insert{background:#afa}
  504. .CodeRay .delete{background:#faa}
  505. .CodeRay .change{color:#aaf;background:#007}
  506. .CodeRay .head{color:#f8f;background:#505}
  507. .CodeRay .insert .insert{color:#080}
  508. .CodeRay .delete .delete{color:#800}
  509. .CodeRay .change .change{color:#66f}
  510. .CodeRay .head .head{color:#f4f}
  511. </style>
  512. </head>
  513. <body class="article toc2 toc-left">
  514. <div id="header">
  515. <h1>Custom Mesh Shapes</h1>
  516. <div class="details">
  517. <span id="author" class="author"></span><br>
  518. <span id="revnumber">version ,</span>
  519. <span id="revdate">2016/03/17 20:48</span>
  520. </div>
  521. <div id="toc" class="toc2">
  522. <div id="toctitle">Table of Contents</div>
  523. <ul class="sectlevel1">
  524. <li><a href="#polygon-meshes">Polygon Meshes</a></li>
  525. <li><a href="#creating-a-quad-mesh">Creating a Quad Mesh</a>
  526. <ul class="sectlevel2">
  527. <li><a href="#the-mesh-object">The Mesh Object</a></li>
  528. <li><a href="#vertex-coordinates">Vertex Coordinates</a></li>
  529. <li><a href="#texture-coordinates">Texture Coordinates</a></li>
  530. <li><a href="#connecting-the-dots">Connecting the Dots</a></li>
  531. <li><a href="#setting-the-mesh-buffer">Setting the Mesh Buffer</a></li>
  532. </ul>
  533. </li>
  534. <li><a href="#using-the-mesh-in-a-scene">Using the Mesh in a Scene</a></li>
  535. <li><a href="#using-a-quad-instead">Using a Quad instead</a></li>
  536. <li><a href="#dynamic-meshes">Dynamic Meshes</a></li>
  537. <li><a href="#optional-mesh-features">Optional Mesh Features</a>
  538. <ul class="sectlevel2">
  539. <li><a href="#example-vertex-colors">Example: Vertex Colors</a></li>
  540. <li><a href="#example-using-meshes-with-lighting-j3md">Example: Using Meshes With Lighting.j3md</a></li>
  541. <li><a href="#example-point-mode">Example: Point Mode</a></li>
  542. </ul>
  543. </li>
  544. <li><a href="#debugging-tip-culling">Debugging Tip: Culling</a></li>
  545. </ul>
  546. </div>
  547. </div>
  548. <div id="content">
  549. <div id="preamble">
  550. <div class="sectionbody">
  551. <div class="imageblock" style="text-align: left">
  552. <div class="content">
  553. <img src="http://wiki.jmonkeyengine.org/lib/exe/fetch.php/jme3:advanced:custom_mesh.png" alt="custom_mesh.png" height="150">
  554. </div>
  555. </div>
  556. <div class="paragraph">
  557. <p>Use the Mesh class to create custom shapes that go beyond Quad, Box, Cylinder, and Sphere, even procedural shapes are possible. Thank you to KayTrance for providing the sample code!</p>
  558. </div>
  559. <div class="paragraph">
  560. <p><strong>Note:</strong> In this tutorial, we (re)create a very simple rectangular mesh (a quad), and we have a look at different ways of coloring it. Coding a custom quad may not be very useful because it&#8217;s exactly the same as the built-in <code>com.jme3.scene.shape.Quad</code>. We chose a simple quad to teach you how to build any shape out of triangles, without the distractions of more complex shapes.</p>
  561. </div>
  562. <div class="ulist">
  563. <ul>
  564. <li>
  565. <p>Full code sample: <a href="https://github.com/jMonkeyEngine/jmonkeyengine/blob/master/jme3-examples/src/main/java/jme3test/model/shape/TestCustomMesh.java">TestCustomMesh.java</a></p>
  566. </li>
  567. </ul>
  568. </div>
  569. </div>
  570. </div>
  571. <div class="sect1">
  572. <h2 id="polygon-meshes">Polygon Meshes</h2>
  573. <div class="sectionbody">
  574. <div class="paragraph">
  575. <p>Polygon <a href="../../jme3/advanced/mesh.html">mesh</a>es are made up of triangles. The corners of the triangles are called vertices. When ever you create any new shape, you break it down into triangles.</p>
  576. </div>
  577. <div class="paragraph">
  578. <p><strong>Example:</strong> Let&#8217;s look at a cube. A cube is made up of 6 rectangles. Each rectangle can be broken down into two triangles. This means you need 12 triangles to describe a cube mesh. Therefor you must provide the coordinates of the triangles' 8 corners (called vertices).</p>
  579. </div>
  580. <div class="paragraph">
  581. <p>The important thing is that you have to specify the vertices of each triangle in the right order: Each triangle separately, counter-clockwise.</p>
  582. </div>
  583. <div class="paragraph">
  584. <p>Sounds harder than it is – let&#8217;s create a simple custom mesh, a quad.</p>
  585. </div>
  586. </div>
  587. </div>
  588. <div class="sect1">
  589. <h2 id="creating-a-quad-mesh">Creating a Quad Mesh</h2>
  590. <div class="sectionbody">
  591. <div class="paragraph">
  592. <p>In this tutorial we want to create a 3x3 Quad. The quad has four vertices, and is made up of two triangles. In our example, we decide that the bottom left corner is at 0/0/0 and the top right is at 3/3/0.</p>
  593. </div>
  594. <div class="listingblock">
  595. <div class="content">
  596. <pre class="CodeRay highlight"><code>0,3,0--3,3,0
  597. | \ |
  598. | \ |
  599. | \ |
  600. | \ |
  601. | \|
  602. 0,0,0--3,0,0</code></pre>
  603. </div>
  604. </div>
  605. <div class="sect2">
  606. <h3 id="the-mesh-object">The Mesh Object</h3>
  607. <div class="paragraph">
  608. <p>The base class for creating meshes is <code>com.jme3.scene.Mesh</code>.</p>
  609. </div>
  610. <div class="listingblock">
  611. <div class="content">
  612. <pre class="CodeRay highlight"><code data-lang="java">Mesh mesh = <span class="keyword">new</span> Mesh();</code></pre>
  613. </div>
  614. </div>
  615. <div class="paragraph">
  616. <p>Tip: If you create your own Mesh-based class (<code>public class MyMesh extends Mesh { }</code>), replace the variable <code>mesh</code> by <code>this</code> in the following examples.</p>
  617. </div>
  618. </div>
  619. <div class="sect2">
  620. <h3 id="vertex-coordinates">Vertex Coordinates</h3>
  621. <div class="paragraph">
  622. <p>To define your own shape, determine the shape&#8217;s <strong>vertex coordinates</strong> in 3D space. Store the list of corner positions in an <code>com.jme3.math.Vector3f</code> array. For a Quad, we need four vertices: Bottom left, bottom right, top left, top right. We name the array <code>vertices[]</code>.</p>
  623. </div>
  624. <div class="listingblock">
  625. <div class="content">
  626. <pre class="CodeRay highlight"><code data-lang="java">Vector3f <span class="type">[]</span> vertices = <span class="keyword">new</span> Vector3f[<span class="integer">4</span>];
  627. vertices[<span class="integer">0</span>] = <span class="keyword">new</span> Vector3f(<span class="integer">0</span>,<span class="integer">0</span>,<span class="integer">0</span>);
  628. vertices[<span class="integer">1</span>] = <span class="keyword">new</span> Vector3f(<span class="integer">3</span>,<span class="integer">0</span>,<span class="integer">0</span>);
  629. vertices[<span class="integer">2</span>] = <span class="keyword">new</span> Vector3f(<span class="integer">0</span>,<span class="integer">3</span>,<span class="integer">0</span>);
  630. vertices[<span class="integer">3</span>] = <span class="keyword">new</span> Vector3f(<span class="integer">3</span>,<span class="integer">3</span>,<span class="integer">0</span>);</code></pre>
  631. </div>
  632. </div>
  633. </div>
  634. <div class="sect2">
  635. <h3 id="texture-coordinates">Texture Coordinates</h3>
  636. <div class="paragraph">
  637. <p>Next, we define the Quad&#8217;s 2D <strong>texture coordinates</strong> for each vertex, in the same order as the vertices: Bottom left, bottom right, top left, top right. We name this Vector2f array <code>texCoord[]</code></p>
  638. </div>
  639. <div class="listingblock">
  640. <div class="content">
  641. <pre class="CodeRay highlight"><code data-lang="java">Vector2f<span class="type">[]</span> texCoord = <span class="keyword">new</span> Vector2f[<span class="integer">4</span>];
  642. texCoord[<span class="integer">0</span>] = <span class="keyword">new</span> Vector2f(<span class="integer">0</span>,<span class="integer">0</span>);
  643. texCoord[<span class="integer">1</span>] = <span class="keyword">new</span> Vector2f(<span class="integer">1</span>,<span class="integer">0</span>);
  644. texCoord[<span class="integer">2</span>] = <span class="keyword">new</span> Vector2f(<span class="integer">0</span>,<span class="integer">1</span>);
  645. texCoord[<span class="integer">3</span>] = <span class="keyword">new</span> Vector2f(<span class="integer">1</span>,<span class="integer">1</span>);</code></pre>
  646. </div>
  647. </div>
  648. <div class="paragraph">
  649. <p>This syntax means, when you apply a texture to this mesh, the texture will fill the quad from corner to corner at 100% percent size. Especially when you stitch together a larger mesh, you use this to tell the renderer whether, and how exactly, you want to cover the whole mesh. E.g. if you use .5f or 2f as texture coordinates instead of 1f, textures will be stretched or shrunk accordingly.</p>
  650. </div>
  651. </div>
  652. <div class="sect2">
  653. <h3 id="connecting-the-dots">Connecting the Dots</h3>
  654. <div class="paragraph">
  655. <p>Next we turn these unrelated coordinates into <strong>triangles</strong>: We define the order in which each triangle is constructed. Think of these indexes as coming in groups of three. Each group of indexes describes one triangle. If the corners are identical, you can (and should!) reuse an index for several triangles.</p>
  656. </div>
  657. <div class="paragraph">
  658. <p>Remember that you must specify the vertices counter-clockwise.</p>
  659. </div>
  660. <div class="listingblock">
  661. <div class="content">
  662. <pre class="CodeRay highlight"><code data-lang="java"><span class="type">int</span> <span class="type">[]</span> indexes = { <span class="integer">2</span>,<span class="integer">0</span>,<span class="integer">1</span>, <span class="integer">1</span>,<span class="integer">3</span>,<span class="integer">2</span> };</code></pre>
  663. </div>
  664. </div>
  665. <div class="paragraph">
  666. <p>This syntax means:</p>
  667. </div>
  668. <div class="ulist">
  669. <ul>
  670. <li>
  671. <p>The indices 0,1,2,3 stand for the four vertices that you specified for the quad in <code>vertices[]</code>.</p>
  672. </li>
  673. <li>
  674. <p>The 2,0,1 triangle starts at top left, continues bottom left, and ends at bottom right.</p>
  675. </li>
  676. <li>
  677. <p>The 1,3,2 triangle start at bottom right, continues top right, and ends at top left.</p>
  678. </li>
  679. </ul>
  680. </div>
  681. <div class="listingblock">
  682. <div class="content">
  683. <pre class="CodeRay highlight"><code>2\2--3
  684. | \ | Counter-clockwise
  685. | \ |
  686. 0--1\1</code></pre>
  687. </div>
  688. </div>
  689. <div class="paragraph">
  690. <p>If the shape is more complex, it has more triangles, and therefor also more vertices/indices. Just continue expanding the list by adding groups of three indices for each triangle. (For example a three-triangle “house shape has 5 vertices/indices and you&#8217;d specify three groups: <code>int [] indexes = { 2,0,1, 1,3,2, 2,3,4 };</code>.)</p>
  691. </div>
  692. <div class="paragraph">
  693. <p><a href="../../jme3/advanced/spatial.html">Spatial</a>`FaceCullMode.Back`“</p>
  694. </div>
  695. </div>
  696. <div class="sect2">
  697. <h3 id="setting-the-mesh-buffer">Setting the Mesh Buffer</h3>
  698. <div class="paragraph">
  699. <p>You store the Mesh data in a buffer.</p>
  700. </div>
  701. <div class="olist arabic">
  702. <ol class="arabic">
  703. <li>
  704. <p>Using <code>com.jme3.util.BufferUtils</code>, we create three buffers for the three types of information we have:</p>
  705. <div class="ulist">
  706. <ul>
  707. <li>
  708. <p>vertex coordinates,</p>
  709. </li>
  710. <li>
  711. <p>texture coordinates,</p>
  712. </li>
  713. <li>
  714. <p>indices.</p>
  715. </li>
  716. </ul>
  717. </div>
  718. </li>
  719. <li>
  720. <p>We assign the data to the appropriate type of buffer inside the <code>Mesh</code> object. The three buffer types (<code>Position</code>, <code>TextCoord</code>, <code>Index</code>) are taken from an enum in <code>com.jme3.scene.VertexBuffer.Type</code>.</p>
  721. </li>
  722. <li>
  723. <p>The integer parameter describes the number of components of the values. Vertex postions are 3 float values, texture coordinates are 2 float values, and the indices are 3 ints representing 3 vertices in a triangle.</p>
  724. </li>
  725. <li>
  726. <p>To render the mesh in the scene, we need to pre-calculate the bounding volume of our new mesh: Call the <code>updateBound()</code> method on it.</p>
  727. </li>
  728. </ol>
  729. </div>
  730. <div class="listingblock">
  731. <div class="content">
  732. <pre class="CodeRay highlight"><code data-lang="java">mesh.setBuffer(<span class="predefined-type">Type</span>.Position, <span class="integer">3</span>, BufferUtils.createFloatBuffer(vertices));
  733. mesh.setBuffer(<span class="predefined-type">Type</span>.TexCoord, <span class="integer">2</span>, BufferUtils.createFloatBuffer(texCoord));
  734. mesh.setBuffer(<span class="predefined-type">Type</span>.Index, <span class="integer">3</span>, BufferUtils.createIntBuffer(indexes));
  735. mesh.updateBound();</code></pre>
  736. </div>
  737. </div>
  738. <div class="paragraph">
  739. <p>Our Mesh is ready! Now we want to see it.</p>
  740. </div>
  741. </div>
  742. </div>
  743. </div>
  744. <div class="sect1">
  745. <h2 id="using-the-mesh-in-a-scene">Using the Mesh in a Scene</h2>
  746. <div class="sectionbody">
  747. <div class="paragraph">
  748. <p>We create a <code>com.jme3.scene.Geometry</code> and <code>com.jme3.material.Material`from our `mesh</code>, apply a simple color material to it, and attach it to the rootNode to make it appear in the scene.</p>
  749. </div>
  750. <div class="listingblock">
  751. <div class="content">
  752. <pre class="CodeRay highlight"><code data-lang="java">Geometry geo = <span class="keyword">new</span> Geometry(<span class="string"><span class="delimiter">&quot;</span><span class="content">OurMesh</span><span class="delimiter">&quot;</span></span>, mesh); <span class="comment">// using our custom mesh object</span>
  753. Material mat = <span class="keyword">new</span> Material(assetManager,
  754. <span class="string"><span class="delimiter">&quot;</span><span class="content">Common/MatDefs/Misc/Unshaded.j3md</span><span class="delimiter">&quot;</span></span>);
  755. mat.setColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">Color</span><span class="delimiter">&quot;</span></span>, ColorRGBA.Blue);
  756. geo.setMaterial(mat);
  757. rootNode.attachChild(geo);</code></pre>
  758. </div>
  759. </div>
  760. <div class="paragraph">
  761. <p>Library for assetManager?
  762. Ta-daa!</p>
  763. </div>
  764. </div>
  765. </div>
  766. <div class="sect1">
  767. <h2 id="using-a-quad-instead">Using a Quad instead</h2>
  768. <div class="sectionbody">
  769. <div class="paragraph">
  770. <p>We created a quad Mesh it can be replace by a Quad such as :</p>
  771. </div>
  772. <div class="listingblock">
  773. <div class="content">
  774. <pre class="CodeRay highlight"><code data-lang="java">Quad quad = <span class="keyword">new</span> Quad(<span class="integer">1</span>,<span class="integer">1</span>); <span class="comment">// replace the definition of Vertex and Textures Coordinates plus indexes</span>
  775. Geometry geo = <span class="keyword">new</span> Geometry(<span class="string"><span class="delimiter">&quot;</span><span class="content">OurQuad</span><span class="delimiter">&quot;</span></span>, quad); <span class="comment">// using Quad object</span>
  776. Material mat = <span class="keyword">new</span> Material(assetManager,
  777. <span class="string"><span class="delimiter">&quot;</span><span class="content">Common/MatDefs/Misc/Unshaded.j3md</span><span class="delimiter">&quot;</span></span>);
  778. mat.setColor(<span class="string"><span class="delimiter">&quot;</span><span class="content">Color</span><span class="delimiter">&quot;</span></span>, ColorRGBA.Blue);
  779. geo.setMaterial(mat);
  780. rootNode.attachChild(geo);</code></pre>
  781. </div>
  782. </div>
  783. <div class="paragraph">
  784. <p>If you want to change the Textures Coordinates, in order to change the scale of the texture, use :</p>
  785. </div>
  786. <div class="listingblock">
  787. <div class="content">
  788. <pre class="CodeRay highlight"><code data-lang="java">Quad quad = <span class="keyword">new</span> Quad(<span class="integer">1</span>,<span class="integer">1</span>);
  789. quad.scaleTextureCoordinates(<span class="keyword">new</span> Vector2f(width , height));</code></pre>
  790. </div>
  791. </div>
  792. </div>
  793. </div>
  794. <div class="sect1">
  795. <h2 id="dynamic-meshes">Dynamic Meshes</h2>
  796. <div class="sectionbody">
  797. <div class="paragraph">
  798. <p>If you are modifying a mesh dynamically in a way which changes the model&#8217;s bounds, you need to update it:</p>
  799. </div>
  800. <div class="olist arabic">
  801. <ol class="arabic">
  802. <li>
  803. <p>Call <code>updateBound()</code> on the mesh object, and then</p>
  804. </li>
  805. <li>
  806. <p>call <code>updateModelBound()</code> on the Geometry object containing the mesh.</p>
  807. </li>
  808. </ol>
  809. </div>
  810. <div class="paragraph">
  811. <p>The updateModelBound() method warns you about not usually needing to use it, but that can be ignored in this special case.</p>
  812. </div>
  813. <div class="paragraph">
  814. <p>_N.B.: This does not work on TerrainQuad. Please use the TerrainQuad.adjustHeight() function to edit the TerrainQuad mesh instead. Additionally, if you want to use collisions on them afterwards, you need to call TerrainPatch.getMesh().createCollisionData(); to update the collision data, else it will collide with what seems to be the old mesh. _</p>
  815. </div>
  816. </div>
  817. </div>
  818. <div class="sect1">
  819. <h2 id="optional-mesh-features">Optional Mesh Features</h2>
  820. <div class="sectionbody">
  821. <div class="paragraph">
  822. <p>There are more vertex buffers in a Mesh than the three shown above. For an overview, see also <a href="../../jme3/advanced/mesh.html">mesh</a>.</p>
  823. </div>
  824. <div class="sect2">
  825. <h3 id="example-vertex-colors">Example: Vertex Colors</h3>
  826. <div class="paragraph">
  827. <p>Vertex coloring is a simple way of coloring meshes. Instead of just assigning one solid color, each vertex (corner) has a color assigned. The faces between the vertices are then colored with a gradient. For this demo, you can use the same mesh <code>mesh</code> object that you defined above.</p>
  828. </div>
  829. <div class="listingblock">
  830. <div class="content">
  831. <pre class="CodeRay highlight"><code data-lang="java">Geometry geo = <span class="keyword">new</span> Geometry (<span class="string"><span class="delimiter">&quot;</span><span class="content">ColoredMesh</span><span class="delimiter">&quot;</span></span>, mesh); <span class="comment">// using the custom mesh</span>
  832. Material matVC = <span class="keyword">new</span> Material(assetManager, <span class="string"><span class="delimiter">&quot;</span><span class="content">Common/MatDefs/Misc/Unshaded.j3md</span><span class="delimiter">&quot;</span></span>);
  833. matVC.setBoolean(<span class="string"><span class="delimiter">&quot;</span><span class="content">VertexColor</span><span class="delimiter">&quot;</span></span>, <span class="predefined-constant">true</span>);</code></pre>
  834. </div>
  835. </div>
  836. <div class="paragraph">
  837. <p>You create a float array color buffer:</p>
  838. </div>
  839. <div class="ulist">
  840. <ul>
  841. <li>
  842. <p>Assign 4 color values, RGBA, to each vertex.</p>
  843. <div class="ulist">
  844. <ul>
  845. <li>
  846. <p>To loop over the 4 color values, use a color index</p>
  847. </li>
  848. </ul>
  849. </div>
  850. </li>
  851. </ul>
  852. </div>
  853. <div class="listingblock">
  854. <div class="content">
  855. <pre>int colorIndex = 0;</pre>
  856. </div>
  857. </div>
  858. <div class="ulist">
  859. <ul>
  860. <li>
  861. <p>The color buffer contains four color values for each vertex.</p>
  862. <div class="ulist">
  863. <ul>
  864. <li>
  865. <p>The Quad in this example has 4 vertices.</p>
  866. </li>
  867. </ul>
  868. </div>
  869. </li>
  870. </ul>
  871. </div>
  872. <div class="listingblock">
  873. <div class="content">
  874. <pre>float[] colorArray = new float[4*4];</pre>
  875. </div>
  876. </div>
  877. <div class="ulist">
  878. <ul>
  879. <li>
  880. <p>Tip: If your mesh has a different number of vertices, you would write:</p>
  881. </li>
  882. </ul>
  883. </div>
  884. <div class="listingblock">
  885. <div class="content">
  886. <pre>float[] colorArray = new float[yourVertexCount * 4]</pre>
  887. </div>
  888. </div>
  889. <div class="paragraph">
  890. <p>Loop over the colorArray buffer to quickly set some RGBA value for each vertex. As usual, RGBA color values range from 0.0f to 1.0f. <strong>Note that the color values in this example are arbitrarily chosen.</strong> It&#8217;s just a quick loop to give every vertex a different RGBA value (a purplish gray, purple, a greenish gray, green, see screenshot), without writing too much code. For your own mesh, you&#8217;d assign meaningful values for the color buffer depending on which color you want your mesh to have.</p>
  891. </div>
  892. <div class="listingblock">
  893. <div class="content">
  894. <pre class="CodeRay highlight"><code data-lang="java"><span class="comment">// note: the red and green values are arbitray in this example</span>
  895. <span class="keyword">for</span>(<span class="type">int</span> i = <span class="integer">0</span>; i &lt; <span class="integer">4</span>; i++){
  896. <span class="comment">// Red value (is increased by .2 on each next vertex here)</span>
  897. colorArray[colorIndex++]= <span class="float">0.1f</span>+(<span class="float">.2f</span>*i);
  898. <span class="comment">// Green value (is reduced by .2 on each next vertex)</span>
  899. colorArray[colorIndex++]= <span class="float">0.9f</span>-(<span class="float">0.2f</span>*i);
  900. <span class="comment">// Blue value (remains the same in our case)</span>
  901. colorArray[colorIndex++]= <span class="float">0.5f</span>;
  902. <span class="comment">// Alpha value (no transparency set here)</span>
  903. colorArray[colorIndex++]= <span class="float">1.0f</span>;
  904. }</code></pre>
  905. </div>
  906. </div>
  907. <div class="paragraph">
  908. <p>Next, set the color buffer. An RGBA color value contains four float components, thus the parameter <code>4</code>.</p>
  909. </div>
  910. <div class="listingblock">
  911. <div class="content">
  912. <pre class="CodeRay highlight"><code data-lang="java">mesh.setBuffer(<span class="predefined-type">Type</span>.Color, <span class="integer">4</span>, colorArray);
  913. geo.setMaterial(matVC);</code></pre>
  914. </div>
  915. </div>
  916. <div class="paragraph">
  917. <p>When you run this code, you see a gradient color extending from each vertex.</p>
  918. </div>
  919. </div>
  920. <div class="sect2">
  921. <h3 id="example-using-meshes-with-lighting-j3md">Example: Using Meshes With Lighting.j3md</h3>
  922. <div class="paragraph">
  923. <p>The previous examples used the mesh together with the <code>Unshaded.j3md</code> material. If you want to use the mesh with a Phong illuminated material (such as <code>Lighting.j3md</code>), the mesh must include information about its Normals. (Normal Vectors encode in which direction a mesh polygon is facing, which is important for calculating light and shadow!)</p>
  924. </div>
  925. <div class="listingblock">
  926. <div class="content">
  927. <pre class="CodeRay highlight"><code data-lang="java"><span class="type">float</span><span class="type">[]</span> normals = <span class="keyword">new</span> <span class="type">float</span>[<span class="integer">12</span>];
  928. normals = <span class="keyword">new</span> <span class="type">float</span><span class="type">[]</span>{<span class="integer">0</span>,<span class="integer">0</span>,<span class="integer">1</span>, <span class="integer">0</span>,<span class="integer">0</span>,<span class="integer">1</span>, <span class="integer">0</span>,<span class="integer">0</span>,<span class="integer">1</span>, <span class="integer">0</span>,<span class="integer">0</span>,<span class="integer">1</span>};
  929. mesh.setBuffer(<span class="predefined-type">Type</span>.Normal, <span class="integer">3</span>, BufferUtils.createFloatBuffer(normals));</code></pre>
  930. </div>
  931. </div>
  932. <div class="paragraph">
  933. <p>You need to specify as many normals as the polygon has vertices. For a flat quad, the four normals point in the same direction. In this case, the direction is the Z unit vector (0,0,1), this means our quad is facing the camera.</p>
  934. </div>
  935. <div class="paragraph">
  936. <p>If the mesh is more complex or rounded, calculate cross products of neighbouring vertices to identify normal vectors!</p>
  937. </div>
  938. </div>
  939. <div class="sect2">
  940. <h3 id="example-point-mode">Example: Point Mode</h3>
  941. <div class="paragraph">
  942. <p>Additionally to coloring the faces as just described, you can hide the faces and show only the vertices as colored corner points.</p>
  943. </div>
  944. <div class="listingblock">
  945. <div class="content">
  946. <pre class="CodeRay highlight"><code data-lang="java">Geometry coloredMesh = <span class="keyword">new</span> Geometry (<span class="string"><span class="delimiter">&quot;</span><span class="content">ColoredMesh</span><span class="delimiter">&quot;</span></span>, cMesh);
  947. ...
  948. mesh.setMode(Mesh.Mode.Points);
  949. mesh.setPointSize(<span class="float">10f</span>);
  950. mesh.updateBound();
  951. mesh.setStatic();
  952. Geometry points = <span class="keyword">new</span> Geometry(<span class="string"><span class="delimiter">&quot;</span><span class="content">Points</span><span class="delimiter">&quot;</span></span>, mesh);
  953. points.setMaterial(mat);
  954. rootNode.attachChild(points);
  955. rootNode.attachChild(geo);</code></pre>
  956. </div>
  957. </div>
  958. <div class="paragraph">
  959. <p>This will result in a 10 px dot being rendered for each of the four vertices. The dot has the vertex color you specified above. The Quad&#8217;s faces are not rendered at all in this mode. You can use this to visualize a special debugging or editing mode in your game.</p>
  960. </div>
  961. </div>
  962. </div>
  963. </div>
  964. <div class="sect1">
  965. <h2 id="debugging-tip-culling">Debugging Tip: Culling</h2>
  966. <div class="sectionbody">
  967. <div class="paragraph">
  968. <p>By default, jME3 optimizes a mesh by “backface culling, this means not drawing the inside. It determines the side of a triangle by the order of the vertices: The frontface is the face where the vertices are specified counter-clockwise.</p>
  969. </div>
  970. <div class="paragraph">
  971. <p>This means for you that, by default, your custom mesh is invisible when seen from “behind or from the inside. This may not be a problem, typically this is even intended, because it&#8217;s faster. The player will not look at the inside of most things anyway. For example, if your custom mesh is a closed polyhedron, or a flat wallpaper-like object, then rendering the backfaces (the inside of the pillar, the back of the painting, etc) would indeed be a waste of resources.</p>
  972. </div>
  973. <div class="paragraph">
  974. <p>In case however that your usecase requires the backfaces be visible, you have two options:</p>
  975. </div>
  976. <div class="ulist">
  977. <ul>
  978. <li>
  979. <p>If you have a very simple scene, you can simply deactivate backface culling for this one mesh&#8217;s material.</p>
  980. </li>
  981. </ul>
  982. </div>
  983. <div class="listingblock">
  984. <div class="content">
  985. <pre>mat.getAdditionalRenderState().setFaceCullMode(FaceCullMode.Off);</pre>
  986. </div>
  987. </div>
  988. <div class="ulist">
  989. <ul>
  990. <li>
  991. <p>Another solution for truly double-sided meshes is to specify each triangle twice, the second time with the opposite order of vertices. The second (reversed) triangle is a second frontface that covers up the culled backface.</p>
  992. </li>
  993. </ul>
  994. </div>
  995. <div class="listingblock">
  996. <div class="content">
  997. <pre>int[] indexes = { 2,0,1, 1,3,2, 2,3,1, 1,0,2 };</pre>
  998. </div>
  999. </div>
  1000. <hr>
  1001. <div class="paragraph">
  1002. <p>See also:</p>
  1003. </div>
  1004. <div class="ulist">
  1005. <ul>
  1006. <li>
  1007. <p><a href="../../jme3/advanced/spatial.html">Spatial</a> – contains more info about how to debug custom meshes (that do not render as expected) by changing the default culling behaviour.</p>
  1008. </li>
  1009. <li>
  1010. <p><a href="../../jme3/advanced/mesh.html">Mesh</a> – more details about advanced Mesh properties</p>
  1011. </li>
  1012. </ul>
  1013. </div>
  1014. </div>
  1015. </div>
  1016. </div>
  1017. <div id="footer">
  1018. <div id="footer-text">
  1019. Version <br>
  1020. Last updated 2016-06-05 15:58:32 UTC
  1021. </div>
  1022. </div>
  1023. </body>
  1024. </html>