hello_terrain.html 67 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1">
  6. <title>jMonkeyEngine 3 Tutorial (10) - Hello Terrain :: jMonkeyEngine Docs</title>
  7. <link rel="canonical" href="https://wiki.jmonkeyengine.org/docs/3.8/tutorials/beginner/hello_terrain.html">
  8. <link rel="prev" href="hello_collision.html">
  9. <link rel="next" href="hello_audio.html">
  10. <meta name="keywords" content="beginner, heightmap, documentation, terrain, texture">
  11. <meta name="generator" content="Antora 3.0.1">
  12. <link rel="stylesheet" href="../../../../_/css/site.css">
  13. <meta property="og:image" content="https://wiki.jmonkeyengine.org/_/img/iconx128.png">
  14. <meta property="og:description" content="jMonkeyEngine 3 Tutorial (10) - Hello Terrain">
  15. <meta property="og:title" content="jMonkeyEngine Docs">
  16. <link rel="stylesheet" href="../../../../_/css/site-extra.css">
  17. <link rel="stylesheet" href="../../../../_/css/vendor/docsearch.min.css">
  18. <!-- fetched from https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css -->
  19. <link rel="icon" href="../../../../_/img/favicon.ico" type="image/x-icon">
  20. </head>
  21. <body class="article">
  22. <header class="header">
  23. <nav class="navbar">
  24. <div class="navbar-brand">
  25. <a class="navbar-item" href="https://wiki.jmonkeyengine.org">
  26. <img alt="" src="../../../../_/img/jme-logo.png" height="32" type="image/x-icon">
  27. </a>
  28. <div class="navbar-item hide-for-print">
  29. <input id="search-input" type="text" placeholder="Search docs">
  30. </div>
  31. <button class="navbar-burger" data-target="topbar-nav">
  32. <span></span>
  33. <span></span>
  34. <span></span>
  35. </button>
  36. </div>
  37. <div id="topbar-nav" class="navbar-menu">
  38. <div class="navbar-end">
  39. <div class="navbar-item theme-switch-wrapper">
  40. <label class="theme-switch" for="checkbox">
  41. <input type="checkbox" id="checkbox" />
  42. <div class="slider round"></div>
  43. </label>
  44. </div>
  45. <a class="navbar-item" href="https://github.com/jmonkeyengine/wiki">Github</a>
  46. </div>
  47. </div>
  48. </nav>
  49. </header>
  50. <div class="body">
  51. <div class="nav-container" data-component="docs" data-version="3.8">
  52. <aside class="nav">
  53. <div class="panels">
  54. <div class="nav-panel-menu is-active" data-panel="menu">
  55. <nav class="nav-menu">
  56. <h3 class="title"><a href="../../documentation.html">JME</a></h3>
  57. <ul class="nav-list">
  58. <li class="nav-item" data-depth="0">
  59. <ul class="nav-list">
  60. <li class="nav-item" data-depth="1">
  61. <a class="nav-link" href="../../documentation.html">Getting Started</a>
  62. </li>
  63. <li class="nav-item" data-depth="1">
  64. <a class="nav-link" href="https://javadoc.jmonkeyengine.org/v3.4.1-stable">JavaDoc</a>
  65. </li>
  66. <li class="nav-item" data-depth="1">
  67. <a class="nav-link" href="../../release.html">Release Guide</a>
  68. </li>
  69. </ul>
  70. </li>
  71. <li class="nav-item" data-depth="0">
  72. <ul class="nav-list">
  73. <li class="nav-item" data-depth="1">
  74. <button class="nav-item-toggle"></button>
  75. <a class="nav-link" href="beginner.html">Beginner Tutorials</a>
  76. <ul class="nav-list">
  77. <li class="nav-item" data-depth="2">
  78. <a class="nav-link" href="hello_simpleapplication.html">Hello SimpleApplication</a>
  79. </li>
  80. <li class="nav-item" data-depth="2">
  81. <a class="nav-link" href="hello_node.html">Hello Node</a>
  82. </li>
  83. <li class="nav-item" data-depth="2">
  84. <a class="nav-link" href="hello_asset.html">Hello Asset</a>
  85. </li>
  86. <li class="nav-item" data-depth="2">
  87. <a class="nav-link" href="hello_main_event_loop.html">Hello Update Loop</a>
  88. </li>
  89. <li class="nav-item" data-depth="2">
  90. <a class="nav-link" href="hello_input_system.html">Hello Input System</a>
  91. </li>
  92. <li class="nav-item" data-depth="2">
  93. <a class="nav-link" href="hello_material.html">Hello Material</a>
  94. </li>
  95. <li class="nav-item" data-depth="2">
  96. <a class="nav-link" href="hello_animation.html">Hello Animation</a>
  97. </li>
  98. <li class="nav-item" data-depth="2">
  99. <a class="nav-link" href="hello_picking.html">Hello Picking</a>
  100. </li>
  101. <li class="nav-item" data-depth="2">
  102. <a class="nav-link" href="hello_collision.html">Hello Collision</a>
  103. </li>
  104. <li class="nav-item is-current-page" data-depth="2">
  105. <a class="nav-link" href="hello_terrain.html">Hello Terrain</a>
  106. </li>
  107. <li class="nav-item" data-depth="2">
  108. <a class="nav-link" href="hello_audio.html">Hello Audio</a>
  109. </li>
  110. <li class="nav-item" data-depth="2">
  111. <a class="nav-link" href="hello_effects.html">Hello Effects</a>
  112. </li>
  113. <li class="nav-item" data-depth="2">
  114. <a class="nav-link" href="hello_physics.html">Hello Physics</a>
  115. </li>
  116. </ul>
  117. </li>
  118. <li class="nav-item" data-depth="1">
  119. <button class="nav-item-toggle"></button>
  120. <span class="nav-text">Key Concepts</span>
  121. <ul class="nav-list">
  122. <li class="nav-item" data-depth="2">
  123. <a class="nav-link" href="../concepts/best_practices.html">Best Practices</a>
  124. </li>
  125. <li class="nav-item" data-depth="2">
  126. <a class="nav-link" href="../concepts/optimization.html">Optimization</a>
  127. </li>
  128. <li class="nav-item" data-depth="2">
  129. <a class="nav-link" href="../concepts/faq.html">Frequently Asked Questions</a>
  130. </li>
  131. <li class="nav-item" data-depth="2">
  132. <a class="nav-link" href="../concepts/math_for_dummies.html">Math for Dummies</a>
  133. </li>
  134. <li class="nav-item" data-depth="2">
  135. <a class="nav-link" href="../concepts/math.html">Math overview</a>
  136. </li>
  137. <li class="nav-item" data-depth="2">
  138. <a class="nav-link" href="../concepts/math_cheet_sheet.html">3D math "cheat sheet"</a>
  139. </li>
  140. <li class="nav-item" data-depth="2">
  141. <a class="nav-link" href="../concepts/rotate.html">3-D Rotation</a>
  142. </li>
  143. <li class="nav-item" data-depth="2">
  144. <a class="nav-link" href="../concepts/math_video_tutorials.html">Math video tutorial series</a>
  145. </li>
  146. <li class="nav-item" data-depth="2">
  147. <a class="nav-link" href="../concepts/multi-media_asset_pipeline.html">Multi-Media Asset Pipeline</a>
  148. </li>
  149. <li class="nav-item" data-depth="2">
  150. <a class="nav-link" href="../concepts/the_scene_graph.html">The Scene Graph</a>
  151. </li>
  152. <li class="nav-item" data-depth="2">
  153. <a class="nav-link" href="../concepts/scenegraph_for_dummies.html">Scene Graph for Dummies</a>
  154. </li>
  155. <li class="nav-item" data-depth="2">
  156. <a class="nav-link" href="../concepts/terminology.html">3D Graphics Terminology</a>
  157. </li>
  158. <li class="nav-item" data-depth="2">
  159. <a class="nav-link" href="../concepts/transparency_sorting.html">Transparency Sorting</a>
  160. </li>
  161. </ul>
  162. </li>
  163. <li class="nav-item" data-depth="1">
  164. <button class="nav-item-toggle"></button>
  165. <span class="nav-text">Articles and How-to&#8217;s</span>
  166. <ul class="nav-list">
  167. <li class="nav-item" data-depth="2">
  168. <button class="nav-item-toggle"></button>
  169. <span class="nav-text">How to Model</span>
  170. <ul class="nav-list">
  171. <li class="nav-item" data-depth="3">
  172. <a class="nav-link" href="../how-to/modeling/3dsmax/3dsmax.html">3dsmax</a>
  173. </li>
  174. <li class="nav-item" data-depth="3">
  175. <button class="nav-item-toggle"></button>
  176. <a class="nav-link" href="../how-to/modeling/blender/blender.html">Blender</a>
  177. <ul class="nav-list">
  178. <li class="nav-item" data-depth="4">
  179. <a class="nav-link" href="../how-to/modeling/blender/blender_buffer_clearing.html">Buffer Clearing</a>
  180. </li>
  181. <li class="nav-item" data-depth="4">
  182. <a class="nav-link" href="../how-to/modeling/blender/blender_gltf.html">Export as GlTF</a>
  183. </li>
  184. <li class="nav-item" data-depth="4">
  185. <a class="nav-link" href="../how-to/modeling/blender/blender_ogre_export.html">Export as Ogre XML</a>
  186. </li>
  187. <li class="nav-item" data-depth="4">
  188. <a class="nav-link" href="../how-to/modeling/blender/blender_ogre_compatibility.html">Ogre Compatibility</a>
  189. </li>
  190. <li class="nav-item" data-depth="4">
  191. <a class="nav-link" href="../how-to/modeling/blender/makehuman.html">MakeHuman</a>
  192. </li>
  193. <li class="nav-item" data-depth="4">
  194. <a class="nav-link" href="../how-to/modeling/blender/makehuman_blender_ogrexml_toolchain.html">MakeHuman toolchain</a>
  195. </li>
  196. </ul>
  197. </li>
  198. </ul>
  199. </li>
  200. <li class="nav-item" data-depth="2">
  201. <button class="nav-item-toggle"></button>
  202. <span class="nav-text">How to Animate</span>
  203. <ul class="nav-list">
  204. <li class="nav-item" data-depth="3">
  205. <button class="nav-item-toggle"></button>
  206. <span class="nav-text">Mixamo</span>
  207. <ul class="nav-list">
  208. <li class="nav-item" data-depth="4">
  209. <a class="nav-link" href="../how-to/modeling/blender/mixamo.html">Blender Models</a>
  210. </li>
  211. </ul>
  212. </li>
  213. </ul>
  214. </li>
  215. <li class="nav-item" data-depth="2">
  216. <a class="nav-link" href="../how-to/debugging.html">Debugging with Wireframes</a>
  217. </li>
  218. <li class="nav-item" data-depth="2">
  219. <a class="nav-link" href="../how-to/util/free_skymaps.html">How to create free skymaps</a>
  220. </li>
  221. <li class="nav-item" data-depth="2">
  222. <button class="nav-item-toggle"></button>
  223. <span class="nav-text">Java Tips</span>
  224. <ul class="nav-list">
  225. <li class="nav-item" data-depth="3">
  226. <a class="nav-link" href="../how-to/java/localization.html">Localization</a>
  227. </li>
  228. <li class="nav-item" data-depth="3">
  229. <a class="nav-link" href="../how-to/java/swing_canvas.html">Swing Canvas</a>
  230. </li>
  231. <li class="nav-item" data-depth="3">
  232. <a class="nav-link" href="../how-to/java/logging.html">Logging</a>
  233. </li>
  234. <li class="nav-item" data-depth="3">
  235. <a class="nav-link" href="../how-to/java/read_graphic_card_capabilites.html">Read Graphics Capabilities</a>
  236. </li>
  237. </ul>
  238. </li>
  239. <li class="nav-item" data-depth="2">
  240. <button class="nav-item-toggle"></button>
  241. <span class="nav-text">Articles</span>
  242. <ul class="nav-list">
  243. <li class="nav-item" data-depth="3">
  244. <button class="nav-item-toggle"></button>
  245. <span class="nav-text">Physically Based Rendering</span>
  246. <ul class="nav-list">
  247. <li class="nav-item" data-depth="4">
  248. <a class="nav-link" href="../how-to/articles/pbr/pbr_part1.html">PBR – Part one</a>
  249. </li>
  250. <li class="nav-item" data-depth="4">
  251. <a class="nav-link" href="../how-to/articles/pbr/pbr_part2.html">PBR – Part two</a>
  252. </li>
  253. <li class="nav-item" data-depth="4">
  254. <a class="nav-link" href="../how-to/articles/pbr/pbr_part3.html">PBR – Part three</a>
  255. </li>
  256. </ul>
  257. </li>
  258. </ul>
  259. </li>
  260. </ul>
  261. </li>
  262. </ul>
  263. </li>
  264. <li class="nav-item" data-depth="0">
  265. <ul class="nav-list">
  266. <li class="nav-item" data-depth="1">
  267. <button class="nav-item-toggle"></button>
  268. <span class="nav-text">Core Engine</span>
  269. <ul class="nav-list">
  270. <li class="nav-item" data-depth="2">
  271. <a class="nav-link" href="../../core/app/simpleapplication.html">SimpleApplication</a>
  272. </li>
  273. <li class="nav-item" data-depth="2">
  274. <a class="nav-link" href="../../core/system/appsettings.html">AppSettings</a>
  275. </li>
  276. </ul>
  277. </li>
  278. <li class="nav-item" data-depth="1">
  279. <button class="nav-item-toggle"></button>
  280. <span class="nav-text">Controlling Game Logic</span>
  281. <ul class="nav-list">
  282. <li class="nav-item" data-depth="2">
  283. <a class="nav-link" href="../../core/app/update_loop.html">Update Loop</a>
  284. </li>
  285. <li class="nav-item" data-depth="2">
  286. <a class="nav-link" href="../../core/app/state/application_states.html">Application States</a>
  287. </li>
  288. <li class="nav-item" data-depth="2">
  289. <button class="nav-item-toggle"></button>
  290. <a class="nav-link" href="../../core/scene/control/custom_controls.html">Custom Controls</a>
  291. <ul class="nav-list">
  292. <li class="nav-item" data-depth="3">
  293. <button class="nav-item-toggle"></button>
  294. <span class="nav-text">Video</span>
  295. <ul class="nav-list">
  296. <li class="nav-item" data-depth="4">
  297. <a class="nav-link" href="https://www.youtube.com/watch?v=MNDiZ9YHIpM">Control any scene node</a>
  298. </li>
  299. <li class="nav-item" data-depth="4">
  300. <a class="nav-link" href="https://www.youtube.com/watch?v=-OzRZscLlHY">Control a character</a>
  301. </li>
  302. <li class="nav-item" data-depth="4">
  303. <a class="nav-link" href="https://wiki.jmonkeyengine.org/Scenes/SDK-UsecaseDemo_1.zip">Video Source Code</a>
  304. </li>
  305. </ul>
  306. </li>
  307. </ul>
  308. </li>
  309. <li class="nav-item" data-depth="2">
  310. <a class="nav-link" href="../../core/app/multithreading.html">Multithreading</a>
  311. </li>
  312. </ul>
  313. </li>
  314. <li class="nav-item" data-depth="1">
  315. <button class="nav-item-toggle"></button>
  316. <span class="nav-text">Scene Graph</span>
  317. <ul class="nav-list">
  318. <li class="nav-item" data-depth="2">
  319. <a class="nav-link" href="../../core/scene/traverse_scenegraph.html">Traverse SceneGraph</a>
  320. </li>
  321. <li class="nav-item" data-depth="2">
  322. <a class="nav-link" href="../../core/scene/spatial.html">Spatial: Node vs Geometry</a>
  323. </li>
  324. <li class="nav-item" data-depth="2">
  325. <button class="nav-item-toggle"></button>
  326. <a class="nav-link" href="../../core/scene/mesh.html">Mesh</a>
  327. <ul class="nav-list">
  328. <li class="nav-item" data-depth="3">
  329. <a class="nav-link" href="../../core/scene/custom_meshes.html">Custom Meshes</a>
  330. </li>
  331. <li class="nav-item" data-depth="3">
  332. <a class="nav-link" href="../../core/scene/shape/shape.html">Shape</a>
  333. </li>
  334. <li class="nav-item" data-depth="3">
  335. <a class="nav-link" href="../../core/scene/3d_models.html">3D Models</a>
  336. </li>
  337. </ul>
  338. </li>
  339. <li class="nav-item" data-depth="2">
  340. <a class="nav-link" href="../../core/asset/asset_manager.html">Asset Manager</a>
  341. </li>
  342. <li class="nav-item" data-depth="2">
  343. <a class="nav-link" href="../../core/export/save_and_load.html">Saving and Loading Nodes</a>
  344. </li>
  345. <li class="nav-item" data-depth="2">
  346. <a class="nav-link" href="../../core/collision/collision_and_intersection.html">Collision and Intersection</a>
  347. </li>
  348. <li class="nav-item" data-depth="2">
  349. <a class="nav-link" href="../../core/scene/control/level_of_detail.html">Level of Detail</a>
  350. </li>
  351. </ul>
  352. </li>
  353. <li class="nav-item" data-depth="1">
  354. <button class="nav-item-toggle"></button>
  355. <span class="nav-text">Animation, Scene</span>
  356. <ul class="nav-list">
  357. <li class="nav-item" data-depth="2">
  358. <a class="nav-link" href="../../core/animation/animation_new.html">Animation with AnimComposer</a>
  359. </li>
  360. <li class="nav-item" data-depth="2">
  361. <a class="nav-link" href="../../core/animation/animation.html">Animation-Old (AnimControl)</a>
  362. </li>
  363. <li class="nav-item" data-depth="2">
  364. <a class="nav-link" href="../../core/cinematic/cinematics.html">Cinematics (cutscenes, fake destruction physics)</a>
  365. </li>
  366. <li class="nav-item" data-depth="2">
  367. <a class="nav-link" href="../../core/cinematic/motionpath.html">MotionPaths and Waypoints</a>
  368. </li>
  369. </ul>
  370. </li>
  371. <li class="nav-item" data-depth="1">
  372. <button class="nav-item-toggle"></button>
  373. <span class="nav-text">Material, Light, Shadow</span>
  374. <ul class="nav-list">
  375. <li class="nav-item" data-depth="2">
  376. <a class="nav-link" href="../../core/material/how_to_use_materials.html">How to use Materials</a>
  377. </li>
  378. <li class="nav-item" data-depth="2">
  379. <a class="nav-link" href="../../core/material/j3m_material_files.html">.j3m Material Files</a>
  380. </li>
  381. <li class="nav-item" data-depth="2">
  382. <a class="nav-link" href="../../core/material/material_definitions.html">.j3md Material Definitions</a>
  383. </li>
  384. <li class="nav-item" data-depth="2">
  385. <a class="nav-link" href="../../core/material/materials_overview.html">.j3md Properties</a>
  386. </li>
  387. <li class="nav-item" data-depth="2">
  388. <a class="nav-link" href="../../core/shader/jme3_shaders.html">Shaders and JME3</a>
  389. </li>
  390. <li class="nav-item" data-depth="2">
  391. <a class="nav-link" href="../../core/shader/jme3_shadernodes.html">Shader Node System</a>
  392. </li>
  393. <li class="nav-item" data-depth="2">
  394. <a class="nav-link" href="../../core/shader/shader_video_tutorials.html">Shader Video Tutorials</a>
  395. </li>
  396. <li class="nav-item" data-depth="2">
  397. <a class="nav-link" href="../../core/light/light_and_shadow.html">Light and Shadow</a>
  398. </li>
  399. <li class="nav-item" data-depth="2">
  400. <a class="nav-link" href="../../core/texture/anisotropic_filtering.html">Anisotropic Filtering</a>
  401. </li>
  402. <li class="nav-item" data-depth="2">
  403. <a class="nav-link" href="../../core/system/jme3_srgbpipeline.html">Gamma Correction</a>
  404. </li>
  405. <li class="nav-item" data-depth="2">
  406. <a class="nav-link" href="../../core/material/normal_types.html">Normal Map Conventions</a>
  407. </li>
  408. </ul>
  409. </li>
  410. <li class="nav-item" data-depth="1">
  411. <button class="nav-item-toggle"></button>
  412. <span class="nav-text">Audio, Video</span>
  413. <ul class="nav-list">
  414. <li class="nav-item" data-depth="2">
  415. <a class="nav-link" href="../../core/audio/audio.html">Playing Sounds</a>
  416. </li>
  417. <li class="nav-item" data-depth="2">
  418. <a class="nav-link" href="../../core/audio/audio_environment_presets.html">Audio Environment Presets</a>
  419. </li>
  420. <li class="nav-item" data-depth="2">
  421. <a class="nav-link" href="../../core/app/state/screenshots.html">Capture Screenshots</a>
  422. </li>
  423. <li class="nav-item" data-depth="2">
  424. <a class="nav-link" href="../../core/app/state/capture_audio_video_to_a_file.html">Capture Audio/Video</a>
  425. </li>
  426. </ul>
  427. </li>
  428. <li class="nav-item" data-depth="1">
  429. <button class="nav-item-toggle"></button>
  430. <span class="nav-text">Filter, Effect</span>
  431. <ul class="nav-list">
  432. <li class="nav-item" data-depth="2">
  433. <a class="nav-link" href="../../core/effect/effects_overview.html">Overview</a>
  434. </li>
  435. <li class="nav-item" data-depth="2">
  436. <a class="nav-link" href="../../core/effect/bloom_and_glow.html">Bloom and Glow</a>
  437. </li>
  438. <li class="nav-item" data-depth="2">
  439. <a class="nav-link" href="../../core/effect/particle_emitters.html">Particle Emitters</a>
  440. </li>
  441. </ul>
  442. </li>
  443. <li class="nav-item" data-depth="1">
  444. <button class="nav-item-toggle"></button>
  445. <span class="nav-text">Landscapes</span>
  446. <ul class="nav-list">
  447. <li class="nav-item" data-depth="2">
  448. <a class="nav-link" href="../../core/util/sky.html">Sky</a>
  449. </li>
  450. <li class="nav-item" data-depth="2">
  451. <a class="nav-link" href="../../core/terrain/terrain.html">Terrain (TerraMonkey)</a>
  452. </li>
  453. <li class="nav-item" data-depth="2">
  454. <a class="nav-link" href="../../core/collision/terrain_collision.html">Terrain Collision</a>
  455. </li>
  456. <li class="nav-item" data-depth="2">
  457. <a class="nav-link" href="../../core/effect/water.html">Simple Water</a>
  458. </li>
  459. <li class="nav-item" data-depth="2">
  460. <a class="nav-link" href="../../core/effect/post-processor_water.html">Post-Processor Water</a>
  461. </li>
  462. </ul>
  463. </li>
  464. <li class="nav-item" data-depth="1">
  465. <button class="nav-item-toggle"></button>
  466. <span class="nav-text">Camera</span>
  467. <ul class="nav-list">
  468. <li class="nav-item" data-depth="2">
  469. <a class="nav-link" href="../../core/renderer/camera.html">Camera</a>
  470. </li>
  471. <li class="nav-item" data-depth="2">
  472. <a class="nav-link" href="../../core/renderer/making_the_camera_follow_a_character.html">Follow a Character</a>
  473. </li>
  474. <li class="nav-item" data-depth="2">
  475. <a class="nav-link" href="../../core/renderer/remote-controlling_the_camera.html">Remote-Controlling</a>
  476. </li>
  477. <li class="nav-item" data-depth="2">
  478. <a class="nav-link" href="../../core/renderer/multiple_camera_views.html">Multiple Camera Views</a>
  479. </li>
  480. <li class="nav-item" data-depth="2">
  481. <a class="nav-link" href="../../core/renderer/jme3_renderbuckets.html">Render Buckets</a>
  482. </li>
  483. </ul>
  484. </li>
  485. <li class="nav-item" data-depth="1">
  486. <button class="nav-item-toggle"></button>
  487. <span class="nav-text">Rendering</span>
  488. <ul class="nav-list">
  489. <li class="nav-item" data-depth="2">
  490. <a class="nav-link" href="../../core/renderer/render_pipeline.html">Render Pipelines</a>
  491. </li>
  492. </ul>
  493. </li>
  494. <li class="nav-item" data-depth="1">
  495. <button class="nav-item-toggle"></button>
  496. <span class="nav-text">User Interaction</span>
  497. <ul class="nav-list">
  498. <li class="nav-item" data-depth="2">
  499. <a class="nav-link" href="../../core/input/input_handling.html">Input Handling</a>
  500. </li>
  501. <li class="nav-item" data-depth="2">
  502. <a class="nav-link" href="../../core/input/combo_moves.html">Combo Moves</a>
  503. </li>
  504. <li class="nav-item" data-depth="2">
  505. <a class="nav-link" href="../../core/input/mouse_picking.html">Mouse Picking</a>
  506. </li>
  507. </ul>
  508. </li>
  509. <li class="nav-item" data-depth="1">
  510. <button class="nav-item-toggle"></button>
  511. <a class="nav-link" href="../../core/gui/topic_gui.html">Graphical User Interface</a>
  512. <ul class="nav-list">
  513. <li class="nav-item" data-depth="2">
  514. <button class="nav-item-toggle"></button>
  515. <span class="nav-text">Nifty GUI</span>
  516. <ul class="nav-list">
  517. <li class="nav-item" data-depth="3">
  518. <a class="nav-link" href="../../core/gui/nifty_gui.html">Integration Tutorial</a>
  519. </li>
  520. <li class="nav-item" data-depth="3">
  521. <a class="nav-link" href="../../core/gui/nifty_gui_best_practices.html">Best Practices</a>
  522. </li>
  523. <li class="nav-item" data-depth="3">
  524. <a class="nav-link" href="../../core/gui/nifty_gui_scenarios.html">Scenarios</a>
  525. </li>
  526. </ul>
  527. </li>
  528. <li class="nav-item" data-depth="2">
  529. <a class="nav-link" href="../../core/ui/hud.html">Head-Up Display (HUD)</a>
  530. </li>
  531. </ul>
  532. </li>
  533. <li class="nav-item" data-depth="1">
  534. <button class="nav-item-toggle"></button>
  535. <span class="nav-text">Virtual Reality</span>
  536. <ul class="nav-list">
  537. <li class="nav-item" data-depth="2">
  538. <a class="nav-link" href="../../core/vr/virtualreality.html">Virtual Reality</a>
  539. </li>
  540. <li class="nav-item" data-depth="2">
  541. <a class="nav-link" href="../../core/vr/legacyOpenVr.html">Virtual Reality Legacy Support</a>
  542. </li>
  543. <li class="nav-item" data-depth="2">
  544. <a class="nav-link" href="../../core/vr/virtualrealitycontrollers.html">Virtual Reality Legacy Controller Support</a>
  545. </li>
  546. </ul>
  547. </li>
  548. </ul>
  549. </li>
  550. <li class="nav-item" data-depth="0">
  551. <ul class="nav-list">
  552. <li class="nav-item" data-depth="1">
  553. <button class="nav-item-toggle"></button>
  554. <a class="nav-link" href="../../physics/physics.html">Physics</a>
  555. <ul class="nav-list">
  556. <li class="nav-item" data-depth="2">
  557. <a class="nav-link" href="../../physics/bullet_multithreading.html">Multi-Threaded Physics</a>
  558. </li>
  559. <li class="nav-item" data-depth="2">
  560. <a class="nav-link" href="../../physics/collision/physics_listeners.html">Collision Detection</a>
  561. </li>
  562. <li class="nav-item" data-depth="2">
  563. <a class="nav-link" href="../../physics/joint/hinges_and_joints.html">Hinges and Joints</a>
  564. </li>
  565. <li class="nav-item" data-depth="2">
  566. <a class="nav-link" href="../../physics/control/walking_character.html">Walking Character</a>
  567. </li>
  568. <li class="nav-item" data-depth="2">
  569. <a class="nav-link" href="../../physics/control/ragdoll.html">Ragdoll</a>
  570. </li>
  571. <li class="nav-item" data-depth="2">
  572. <a class="nav-link" href="../../physics/control/vehicles.html">Vehicles</a>
  573. </li>
  574. <li class="nav-item" data-depth="2">
  575. <a class="nav-link" href="../../physics/control/softbody.html">Softbody</a>
  576. </li>
  577. <li class="nav-item" data-depth="2">
  578. <a class="nav-link" href="../../physics/bullet_pitfalls.html">Bullet Physics Pitfalls</a>
  579. </li>
  580. </ul>
  581. </li>
  582. </ul>
  583. </li>
  584. <li class="nav-item" data-depth="0">
  585. <ul class="nav-list">
  586. <li class="nav-item" data-depth="1">
  587. <button class="nav-item-toggle"></button>
  588. <span class="nav-text">Networking</span>
  589. <ul class="nav-list">
  590. <li class="nav-item" data-depth="2">
  591. <a class="nav-link" href="../../networking/networking.html">Networking (SpiderMonkey)</a>
  592. </li>
  593. <li class="nav-item" data-depth="2">
  594. <a class="nav-link" href="../../networking/headless_server.html">Headless Server</a>
  595. </li>
  596. <li class="nav-item" data-depth="2">
  597. <a class="nav-link" href="../../networking/monkey_zone.html">Multi-Player Demo Code</a>
  598. </li>
  599. <li class="nav-item" data-depth="2">
  600. <a class="nav-link" href="../../networking/networking_video_tutorials.html">Networking Video Tutorials</a>
  601. </li>
  602. </ul>
  603. </li>
  604. </ul>
  605. </li>
  606. <li class="nav-item" data-depth="0">
  607. <ul class="nav-list">
  608. <li class="nav-item" data-depth="1">
  609. <button class="nav-item-toggle"></button>
  610. <span class="nav-text">User Contributions</span>
  611. <ul class="nav-list">
  612. <li class="nav-item" data-depth="2">
  613. <a class="nav-link" href="../../contributions/contributions.html">User Made Utilities</a>
  614. </li>
  615. <li class="nav-item" data-depth="2">
  616. <button class="nav-item-toggle"></button>
  617. <span class="nav-text">Shader</span>
  618. <ul class="nav-list">
  619. <li class="nav-item" data-depth="3">
  620. <a class="nav-link" href="../../contributions/shader/shaderblow_project.html">ShaderBlow Project</a>
  621. </li>
  622. </ul>
  623. </li>
  624. <li class="nav-item" data-depth="2">
  625. <button class="nav-item-toggle"></button>
  626. <span class="nav-text">Landscapes</span>
  627. <ul class="nav-list">
  628. <li class="nav-item" data-depth="3">
  629. <a class="nav-link" href="../../contributions/lanscapes/vegetationsystem/vegetationsystem.html">Vegetation System</a>
  630. </li>
  631. </ul>
  632. </li>
  633. <li class="nav-item" data-depth="2">
  634. <button class="nav-item-toggle"></button>
  635. <span class="nav-text">Networking</span>
  636. <ul class="nav-list">
  637. <li class="nav-item" data-depth="3">
  638. <a class="nav-link" href="../../contributions/networking/open_game_finder.html">Open Game Finder</a>
  639. </li>
  640. </ul>
  641. </li>
  642. <li class="nav-item" data-depth="2">
  643. <button class="nav-item-toggle"></button>
  644. <span class="nav-text">Entity System</span>
  645. <ul class="nav-list">
  646. <li class="nav-item" data-depth="3">
  647. <a class="nav-link" href="#es/entitysystem.adoc">The Zay-ES Entity System</a>
  648. </li>
  649. </ul>
  650. </li>
  651. <li class="nav-item" data-depth="2">
  652. <button class="nav-item-toggle"></button>
  653. <span class="nav-text">Artificial Intelligence</span>
  654. <ul class="nav-list">
  655. <li class="nav-item" data-depth="3">
  656. <a class="nav-link" href="../../contributions/ai/recast.html">Recast Navigation</a>
  657. </li>
  658. <li class="nav-item" data-depth="3">
  659. <a class="nav-link" href="../../contributions/ai/building_recast.html">Updating and building Recast Native Bindings</a>
  660. </li>
  661. <li class="nav-item" data-depth="3">
  662. <a class="nav-link" href="../../contributions/ai/monkey_brains.html">Monkey Brains</a>
  663. </li>
  664. <li class="nav-item" data-depth="3">
  665. <a class="nav-link" href="../../contributions/ai/steer_behaviours.html">Steer Behaviours</a>
  666. </li>
  667. <li class="nav-item" data-depth="3">
  668. <a class="nav-link" href="../../contributions/ai/jme3_ai.html">jME3 Artificial Intelligence</a>
  669. </li>
  670. </ul>
  671. </li>
  672. <li class="nav-item" data-depth="2">
  673. <button class="nav-item-toggle"></button>
  674. <a class="nav-link" href="../../contributions/gui/topic_contributions_gui.html">GUI</a>
  675. <ul class="nav-list">
  676. <li class="nav-item" data-depth="3">
  677. <a class="nav-link" href="../../contributions/contributions.html#lemur-gui-library">Lemur - a native jME3 GUI library with scene graph tools</a>
  678. </li>
  679. <li class="nav-item" data-depth="3">
  680. <a class="nav-link" href="../../contributions/contributions.html#tonegodgui">tonegodGUI - a native jME3 GUI library</a>
  681. </li>
  682. <li class="nav-item" data-depth="3">
  683. <a class="nav-link" href="../../contributions/contributions.html#immediate-graphical-user-interface">Immediate graphical user interface</a>
  684. </li>
  685. </ul>
  686. </li>
  687. <li class="nav-item" data-depth="2">
  688. <button class="nav-item-toggle"></button>
  689. <span class="nav-text">Tools</span>
  690. <ul class="nav-list">
  691. <li class="nav-item" data-depth="3">
  692. <a class="nav-link" href="../../contributions/tools/navigation.html">Mercator Projection Tool (Marine Navigation)</a>
  693. </li>
  694. <li class="nav-item" data-depth="3">
  695. <a class="nav-link" href="../../contributions/tools/charts.html">Visualizing Maps in JME3 (Marine Charts)</a>
  696. </li>
  697. </ul>
  698. </li>
  699. <li class="nav-item" data-depth="2">
  700. <button class="nav-item-toggle"></button>
  701. <a class="nav-link" href="../../contributions/vr/topic_contributions_vr.html">Virtual Reality (And augmented reality)</a>
  702. <ul class="nav-list">
  703. <li class="nav-item" data-depth="3">
  704. <a class="nav-link" href="../../contributions/contributions.html#tamarin-openxr">Tamarin OpenXR</a>
  705. </li>
  706. </ul>
  707. </li>
  708. <li class="nav-item" data-depth="2">
  709. <button class="nav-item-toggle"></button>
  710. <span class="nav-text">Projects</span>
  711. <ul class="nav-list">
  712. <li class="nav-item" data-depth="3">
  713. <a class="nav-link" href="../../contributions/projects/rise_of_mutants_project.html">Rise of Mutants Project</a>
  714. </li>
  715. </ul>
  716. </li>
  717. </ul>
  718. </li>
  719. </ul>
  720. </li>
  721. <li class="nav-item" data-depth="0">
  722. <ul class="nav-list">
  723. <li class="nav-item" data-depth="1">
  724. <button class="nav-item-toggle"></button>
  725. <a class="nav-link" href="../../sdk/sdk.html">SDK</a>
  726. <ul class="nav-list">
  727. <li class="nav-item" data-depth="2">
  728. <button class="nav-item-toggle"></button>
  729. <span class="nav-text">Video Tutorials</span>
  730. <ul class="nav-list">
  731. <li class="nav-item" data-depth="3">
  732. <button class="nav-item-toggle"></button>
  733. <span class="nav-text">SDK Use Case Tutorials</span>
  734. <ul class="nav-list">
  735. <li class="nav-item" data-depth="4">
  736. <a class="nav-link" href="http://www.youtube.com/watch?v=-OzRZscLlHY">Demo 1 (Quixote demo)</a>
  737. </li>
  738. <li class="nav-item" data-depth="4">
  739. <a class="nav-link" href="http://www.youtube.com/watch?v=6-YWxD3JByE">Demo 2 (Models and Materials)</a>
  740. </li>
  741. </ul>
  742. </li>
  743. <li class="nav-item" data-depth="3">
  744. <button class="nav-item-toggle"></button>
  745. <span class="nav-text">SDK Tutorials</span>
  746. <ul class="nav-list">
  747. <li class="nav-item" data-depth="4">
  748. <a class="nav-link" href="http://www.youtube.com/watch?v=M1_0pbeyJzI">Basics</a>
  749. </li>
  750. <li class="nav-item" data-depth="4">
  751. <a class="nav-link" href="http://www.youtube.com/watch?v=nL7woH40i5c">Importing Models</a>
  752. </li>
  753. <li class="nav-item" data-depth="4">
  754. <a class="nav-link" href="http://www.youtube.com/watch?v=DUmgAjiNzhY">Dragging&amp;Dropping Nodes</a>
  755. </li>
  756. <li class="nav-item" data-depth="4">
  757. <a class="nav-link" href="http://www.youtube.com/watch?v=ntPAmtsQ6eM">Scene Composing</a>
  758. </li>
  759. <li class="nav-item" data-depth="4">
  760. <a class="nav-link" href="http://www.youtube.com/watch?v=zgPV3W6dD4s">Terrain with Collision Shape</a>
  761. </li>
  762. <li class="nav-item" data-depth="4">
  763. <a class="nav-link" href="http://www.youtube.com/watch?v=Feu3-mrpolc">Working with Materials</a>
  764. </li>
  765. <li class="nav-item" data-depth="4">
  766. <a class="nav-link" href="http://www.youtube.com/watch?v=MNDiZ9YHIpM">Custom Controls</a>
  767. </li>
  768. <li class="nav-item" data-depth="4">
  769. <a class="nav-link" href="http://www.youtube.com/watch?v=oZnssg8TBWQ">WebStart Deployment</a>
  770. </li>
  771. <li class="nav-item" data-depth="4">
  772. <a class="nav-link" href="http://www.youtube.com/watch?v=D7JM4VMKqPc">Animation and Effect TrackEditing</a>
  773. </li>
  774. </ul>
  775. </li>
  776. </ul>
  777. </li>
  778. <li class="nav-item" data-depth="2">
  779. <button class="nav-item-toggle"></button>
  780. <span class="nav-text">Getting Started</span>
  781. <ul class="nav-list">
  782. <li class="nav-item" data-depth="3">
  783. <a class="nav-link" href="../../sdk/update_center.html">Updating jMonkeyEngine SDK</a>
  784. </li>
  785. <li class="nav-item" data-depth="3">
  786. <a class="nav-link" href="../../sdk/troubleshooting.html">Troubleshooting</a>
  787. </li>
  788. </ul>
  789. </li>
  790. <li class="nav-item" data-depth="2">
  791. <button class="nav-item-toggle"></button>
  792. <span class="nav-text">Java Development Features</span>
  793. <ul class="nav-list">
  794. <li class="nav-item" data-depth="3">
  795. <a class="nav-link" href="../../sdk/project_creation.html">Project Creation</a>
  796. </li>
  797. <li class="nav-item" data-depth="3">
  798. <a class="nav-link" href="../../sdk/code_editor.html">Code Editor and Palette</a>
  799. </li>
  800. <li class="nav-item" data-depth="3">
  801. <a class="nav-link" href="../../sdk/version_control.html">File Version Control</a>
  802. </li>
  803. <li class="nav-item" data-depth="3">
  804. <a class="nav-link" href="../../sdk/debugging_profiling_testing.html">Debug, Profile, Test</a>
  805. </li>
  806. <li class="nav-item" data-depth="3">
  807. <button class="nav-item-toggle"></button>
  808. <a class="nav-link" href="../../sdk/application_deployment.html">Application Deployment</a>
  809. <ul class="nav-list">
  810. <li class="nav-item" data-depth="4">
  811. <a class="nav-link" href="../../sdk/default_build_script.html">Default Build Script</a>
  812. </li>
  813. <li class="nav-item" data-depth="4">
  814. <a class="nav-link" href="../../sdk/android.html">Android</a>
  815. </li>
  816. <li class="nav-item" data-depth="4">
  817. <a class="nav-link" href="../../sdk/android_cheat_sheet.html">Android Cheat Sheet</a>
  818. </li>
  819. <li class="nav-item" data-depth="4">
  820. <a class="nav-link" href="../../sdk/ios.html">iOS</a>
  821. </li>
  822. </ul>
  823. </li>
  824. </ul>
  825. </li>
  826. <li class="nav-item" data-depth="2">
  827. <button class="nav-item-toggle"></button>
  828. <span class="nav-text">Unique Features</span>
  829. <ul class="nav-list">
  830. <li class="nav-item" data-depth="3">
  831. <button class="nav-item-toggle"></button>
  832. <a class="nav-link" href="../../sdk/model_loader_and_viewer.html">Import, View, Convert Models</a>
  833. <ul class="nav-list">
  834. <li class="nav-item" data-depth="4">
  835. <a class="nav-link" href="../../sdk/asset_packs.html">Asset Packs</a>
  836. </li>
  837. </ul>
  838. </li>
  839. <li class="nav-item" data-depth="3">
  840. <a class="nav-link" href="../../sdk/scene_explorer.html">The SceneExplorer</a>
  841. </li>
  842. <li class="nav-item" data-depth="3">
  843. <a class="nav-link" href="../../sdk/scene_composer.html">Composing a Scene</a>
  844. </li>
  845. <li class="nav-item" data-depth="3">
  846. <a class="nav-link" href="../../sdk/terrain_editor.html">Terrain Editor</a>
  847. </li>
  848. <li class="nav-item" data-depth="3">
  849. <a class="nav-link" href="../../sdk/sample_code.html">Sample Code</a>
  850. </li>
  851. <li class="nav-item" data-depth="3">
  852. <a class="nav-link" href="../../sdk/material_editing.html">Material Editing</a>
  853. </li>
  854. <li class="nav-item" data-depth="3">
  855. <a class="nav-link" href="../../sdk/font_creation.html">Creating Bitmap Fonts</a>
  856. </li>
  857. <li class="nav-item" data-depth="3">
  858. <button class="nav-item-toggle"></button>
  859. <a class="nav-link" href="https://hub.jmonkeyengine.org/t/effecttrack-and-audiotrack-editing-in-the-sdk/23378">Audio and Effect Track Editing</a>
  860. <ul class="nav-list">
  861. <li class="nav-item" data-depth="4">
  862. <a class="nav-link" href="https://www.youtube.com/watch?v=D7JM4VMKqPc">Video: Effect and AudioTrack editing in jMonkeyEngine 3 sdk</a>
  863. </li>
  864. </ul>
  865. </li>
  866. <li class="nav-item" data-depth="3">
  867. <a class="nav-link" href="../../sdk/filters.html">Post-Processor Filter Editor and Viewer</a>
  868. </li>
  869. <li class="nav-item" data-depth="3">
  870. <a class="nav-link" href="../../core/app/state/application_states.html">Application States</a>
  871. </li>
  872. <li class="nav-item" data-depth="3">
  873. <a class="nav-link" href="../../core/scene/control/custom_controls.html">Custom Controls</a>
  874. </li>
  875. <li class="nav-item" data-depth="3">
  876. <a class="nav-link" href="../../sdk/vehicle_creator.html">Vehicle Creator</a>
  877. </li>
  878. <li class="nav-item" data-depth="3">
  879. <a class="nav-link" href="../../sdk/assetbrowser.html">Asset Browser</a>
  880. </li>
  881. <li class="nav-item" data-depth="3">
  882. <a class="nav-link" href="../../sdk/animations.html">Animations</a>
  883. </li>
  884. </ul>
  885. </li>
  886. <li class="nav-item" data-depth="2">
  887. <button class="nav-item-toggle"></button>
  888. <span class="nav-text">Advanced Usage</span>
  889. <ul class="nav-list">
  890. <li class="nav-item" data-depth="3">
  891. <a class="nav-link" href="../../sdk/build_platform.html">Building jMonkeyEngine SDK</a>
  892. </li>
  893. <li class="nav-item" data-depth="3">
  894. <a class="nav-link" href="../../sdk/use_own_jme.html#.adoc">Using your own (modified) version of jME3 in jMonkeyEngine SDK</a>
  895. </li>
  896. <li class="nav-item" data-depth="3">
  897. <a class="nav-link" href="../../sdk/increasing_heap_memory.html">Increasing Heap Memory</a>
  898. </li>
  899. <li class="nav-item" data-depth="3">
  900. <a class="nav-link" href="../../sdk/log_files.html">Log Files</a>
  901. </li>
  902. </ul>
  903. </li>
  904. <li class="nav-item" data-depth="2">
  905. <button class="nav-item-toggle"></button>
  906. <span class="nav-text">Available external plugins</span>
  907. <ul class="nav-list">
  908. <li class="nav-item" data-depth="3">
  909. <a class="nav-link" href="../../contributions/contributions.html">Contributions</a>
  910. </li>
  911. <li class="nav-item" data-depth="3">
  912. <a class="nav-link" href="../../sdk/neotexture.html">Neo Texture Editor for procedural textures</a>
  913. </li>
  914. <li class="nav-item" data-depth="3">
  915. <a class="nav-link" href="http://www.youtube.com/watch?v=yS9a9o4WzL8">Video: Mesh Tool &amp; Physics Editor</a>
  916. </li>
  917. </ul>
  918. </li>
  919. <li class="nav-item" data-depth="2">
  920. <button class="nav-item-toggle"></button>
  921. <a class="nav-link" href="../../sdk/development.html">Developing plugins for jMonkeyEngine SDK</a>
  922. <ul class="nav-list">
  923. <li class="nav-item" data-depth="3">
  924. <a class="nav-link" href="../../sdk/development/setup.html">Creating a plugin</a>
  925. </li>
  926. <li class="nav-item" data-depth="3">
  927. <a class="nav-link" href="../../sdk/development/general.html">Creating components</a>
  928. </li>
  929. <li class="nav-item" data-depth="3">
  930. <a class="nav-link" href="../../sdk/development/scene.html">The Main Scene</a>
  931. </li>
  932. <li class="nav-item" data-depth="3">
  933. <a class="nav-link" href="../../sdk/development/sceneexplorer.html">The Scene Explorer</a>
  934. </li>
  935. <li class="nav-item" data-depth="3">
  936. <a class="nav-link" href="../../sdk/development/projects_assets.html">Projects and Assets</a>
  937. </li>
  938. <li class="nav-item" data-depth="3">
  939. <a class="nav-link" href="../../sdk/development/extension_library.html">Create a library plugin from a jar file</a>
  940. </li>
  941. <li class="nav-item" data-depth="3">
  942. <a class="nav-link" href="../../sdk/development/model_loader.html">Create a new or custom model filetype and loader</a>
  943. </li>
  944. </ul>
  945. </li>
  946. </ul>
  947. </li>
  948. </ul>
  949. </li>
  950. </ul>
  951. </nav>
  952. </div>
  953. <div class="nav-panel-explore" data-panel="explore">
  954. <div class="context">
  955. <span class="title">JME</span>
  956. <span class="version">3.8</span>
  957. </div>
  958. <ul class="components">
  959. <li class="component is-current">
  960. <span class="title">JME</span>
  961. <ul class="versions">
  962. <li class="version is-current">
  963. <a href="../../documentation.html">3.8</a>
  964. </li>
  965. <li class="version">
  966. <a href="../../../3.4/documentation.html">3.4</a>
  967. </li>
  968. <li class="version">
  969. <a href="../../../3.3/documentation.html">3.3</a>
  970. </li>
  971. <li class="version">
  972. <a href="../../../3.2/documentation.html">3.2</a>
  973. </li>
  974. </ul>
  975. </li>
  976. <li class="component">
  977. <span class="title">Wiki Contribution</span>
  978. <ul class="versions">
  979. <li class="version">
  980. <a href="../../../../docs-wiki/3.8/wiki_contributor.html">3.8</a>
  981. </li>
  982. </ul>
  983. </li>
  984. <li class="component">
  985. <span class="title">Wiki UI</span>
  986. <ul class="versions">
  987. <li class="version">
  988. <a href="../../../../wiki-ui/index.html">master</a>
  989. </li>
  990. </ul>
  991. </li>
  992. </ul>
  993. </div>
  994. </div>
  995. </aside>
  996. </div>
  997. <main class="article">
  998. <div class="toolbar" role="navigation">
  999. <button class="nav-toggle"></button>
  1000. <nav class="breadcrumbs" aria-label="breadcrumbs">
  1001. <ul>
  1002. <li><a href="../../documentation.html">JME</a></li>
  1003. <li><a href="beginner.html">Beginner Tutorials</a></li>
  1004. <li><a href="hello_terrain.html">Hello Terrain</a></li>
  1005. </ul>
  1006. </nav>
  1007. <div class="page-versions">
  1008. <button class="version-menu-toggle" title="Show other versions of page">3.8</button>
  1009. <div class="version-menu">
  1010. <a class="version is-current" href="hello_terrain.html">3.8</a>
  1011. <a class="version" href="../../../3.4/tutorials/beginner/hello_terrain.html">3.4</a>
  1012. <a class="version" href="../../../3.3/tutorials/beginner/hello_terrain.html">3.3</a>
  1013. <a class="version" href="../../../3.2/tutorials/beginner/hello_terrain.html">3.2</a>
  1014. </div>
  1015. </div>
  1016. <div class="edit-this-page"><a href="https://github.com/jMonkeyEngine/wiki/edit/master/docs/modules/tutorials/pages/beginner/hello_terrain.adoc">Edit this Page</a></div>
  1017. </div>
  1018. <div class="content">
  1019. <article class="doc">
  1020. <h1 class="page">jMonkeyEngine 3 Tutorial (10) - Hello Terrain</h1>
  1021. <div id="preamble">
  1022. <div class="sectionbody">
  1023. <div class="paragraph">
  1024. <p>One way to create a 3D landscape is to sculpt a huge terrain model. This gives you a lot of artistic freedom – but rendering such a huge model can be quite slow. This tutorial explains how to create fast-rendering terrains from heightmaps, and how to use texture splatting to make the terrain look good.</p>
  1025. </div>
  1026. <div class="imageblock text-center">
  1027. <div class="content">
  1028. <img src="../_images/beginner/beginner-terrain.png" alt="beginner-terrain.png" width="360" height="291">
  1029. </div>
  1030. </div>
  1031. <div class="admonitionblock tip">
  1032. <table>
  1033. <tr>
  1034. <td class="icon">
  1035. <i class="fa icon-tip" title="Tip"></i>
  1036. </td>
  1037. <td class="content">
  1038. <div class="paragraph">
  1039. <p>To use the example assets in a new jMonkeyEngine SDK project, right-click your project, select <span class="menuseq"><b class="menu">Properties</b>&#160;<i class="fa fa-angle-right caret"></i> <b class="submenu">Libraries</b>&#160;<i class="fa fa-angle-right caret"></i> <b class="menuitem">Add Library</b></span>, and add the &#8220;jme3-test-data&#8221; library.</p>
  1040. </div>
  1041. </td>
  1042. </tr>
  1043. </table>
  1044. </div>
  1045. </div>
  1046. </div>
  1047. <div class="sect1">
  1048. <h2 id="sample-code"><a class="anchor" href="#sample-code"></a>Sample Code</h2>
  1049. <div class="sectionbody">
  1050. <div class="listingblock">
  1051. <div class="content">
  1052. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">package jme3test.helloworld;
  1053. import com.jme3.app.SimpleApplication;
  1054. import com.jme3.material.Material;
  1055. import com.jme3.terrain.geomipmap.TerrainLodControl;
  1056. import com.jme3.terrain.heightmap.AbstractHeightMap;
  1057. import com.jme3.terrain.geomipmap.TerrainQuad;
  1058. import com.jme3.terrain.geomipmap.lodcalc.DistanceLodCalculator;
  1059. import com.jme3.terrain.heightmap.HillHeightMap; // for exercise 2
  1060. import com.jme3.terrain.heightmap.ImageBasedHeightMap;
  1061. import com.jme3.texture.Texture;
  1062. import com.jme3.texture.Texture.WrapMode;
  1063. /** Sample 10 - How to create fast-rendering terrains from heightmaps,
  1064. and how to use texture splatting to make the terrain look good. */
  1065. public class HelloTerrain extends SimpleApplication {
  1066. public static void main(String[] args) {
  1067. HelloTerrain app = new HelloTerrain();
  1068. app.start();
  1069. }
  1070. @Override
  1071. public void simpleInitApp() {
  1072. flyCam.setMoveSpeed(50);
  1073. /** 1. Create terrain material and load four textures into it. */
  1074. Material mat_terrain = new Material(assetManager,
  1075. "Common/MatDefs/Terrain/Terrain.j3md");
  1076. /** 1.1) Add ALPHA map (for red-blue-green coded splat textures) */
  1077. mat_terrain.setTexture("Alpha", assetManager.loadTexture(
  1078. "Textures/Terrain/splat/alphamap.png"));
  1079. /** 1.2) Add GRASS texture into the red layer (Tex1). */
  1080. Texture grass = assetManager.loadTexture(
  1081. "Textures/Terrain/splat/grass.jpg");
  1082. grass.setWrap(WrapMode.Repeat);
  1083. mat_terrain.setTexture("Tex1", grass);
  1084. mat_terrain.setFloat("Tex1Scale", 64f);
  1085. /** 1.3) Add DIRT texture into the green layer (Tex2) */
  1086. Texture dirt = assetManager.loadTexture(
  1087. "Textures/Terrain/splat/dirt.jpg");
  1088. dirt.setWrap(WrapMode.Repeat);
  1089. mat_terrain.setTexture("Tex2", dirt);
  1090. mat_terrain.setFloat("Tex2Scale", 32f);
  1091. /** 1.4) Add ROAD texture into the blue layer (Tex3) */
  1092. Texture rock = assetManager.loadTexture(
  1093. "Textures/Terrain/splat/road.jpg");
  1094. rock.setWrap(WrapMode.Repeat);
  1095. mat_terrain.setTexture("Tex3", rock);
  1096. mat_terrain.setFloat("Tex3Scale", 128f);
  1097. /* 2.a Create a custom height map from an image */
  1098. AbstractHeightMap heightmap = null;
  1099. Texture heightMapImage = assetManager.loadTexture(
  1100. "Textures/Terrain/splat/mountains512.png");
  1101. heightmap = new ImageBasedHeightMap(heightMapImage.getImage());
  1102. /* 2.b Create a random height map */
  1103. // HillHeightMap heightmap = null;
  1104. // HillHeightMap.NORMALIZE_RANGE = 100;
  1105. // try {
  1106. // heightmap = new HillHeightMap(513, 1000, 50, 100, (byte) 3);
  1107. // } catch (Exception ex) {
  1108. // ex.printStackTrace();
  1109. // }
  1110. heightmap.load();
  1111. /** 3. We have prepared material and heightmap.
  1112. * Now we create the actual terrain:
  1113. * 3.1) Create a TerrainQuad and name it "my terrain".
  1114. * 3.2) A good value for terrain tiles is 64x64 -- so we supply 64+1=65.
  1115. * 3.3) We prepared a heightmap of size 512x512 -- so we supply 512+1=513.
  1116. * 3.4) As LOD step scale we supply Vector3f(1,1,1).
  1117. * 3.5) We supply the prepared heightmap itself.
  1118. */
  1119. int patchSize = 65;
  1120. TerrainQuad terrain = new TerrainQuad("my terrain", patchSize, 513, heightmap.getHeightMap());
  1121. /** 4. We give the terrain its material, position &amp; scale it, and attach it. */
  1122. terrain.setMaterial(mat_terrain);
  1123. terrain.setLocalTranslation(0, -100, 0);
  1124. terrain.setLocalScale(2f, 1f, 2f);
  1125. rootNode.attachChild(terrain);
  1126. /** 5. The LOD (level of detail) depends on were the camera is: */
  1127. TerrainLodControl control = new TerrainLodControl(terrain, getCamera());
  1128. control.setLodCalculator( new DistanceLodCalculator(patchSize, 2.7f) ); // patch size, and a multiplier
  1129. terrain.addControl(control);
  1130. }
  1131. }</code></pre>
  1132. </div>
  1133. </div>
  1134. <div class="paragraph">
  1135. <p>When you run this sample you should see a landscape with dirt mountains, grass plains, plus some winding roads in between.</p>
  1136. </div>
  1137. </div>
  1138. </div>
  1139. <div class="sect1">
  1140. <h2 id="what-is-a-heightmap"><a class="anchor" href="#what-is-a-heightmap"></a>What is a Heightmap?</h2>
  1141. <div class="sectionbody">
  1142. <div class="paragraph">
  1143. <p>Heightmaps are an efficient way of representing the shape of a hilly landscape. Not every pixel of the landscape is stored, instead, a grid of sample values is used to outline the terrain height at certain points. The heights between the samples is interpolated.</p>
  1144. </div>
  1145. <div class="paragraph">
  1146. <p>In Java, a heightmap is a float array containing height values between 0f and 255f. Here is a very simple example of a terrain generated from a heightmap with 5x5=25 height values.</p>
  1147. </div>
  1148. <div class="imageblock">
  1149. <div class="content">
  1150. <img src="../_images/beginner/terrain-from-float-array.png" alt="terrain-from-float-array.png" width="" height="">
  1151. </div>
  1152. </div>
  1153. <div class="paragraph">
  1154. <p>Important things to note:</p>
  1155. </div>
  1156. <div class="ulist">
  1157. <ul>
  1158. <li>
  1159. <p>Low values (e.g. 0 or 50) are valleys.</p>
  1160. </li>
  1161. <li>
  1162. <p>High values (e.g. 200, 255) are hills.</p>
  1163. </li>
  1164. <li>
  1165. <p>The heightmap only specifies a few points, and the engine interpolates the rest. Interpolation is more efficient than creating a model with several millions vertices.</p>
  1166. </li>
  1167. </ul>
  1168. </div>
  1169. <div class="paragraph">
  1170. <p>When looking at Java data types to hold an array of floats between 0 and 255, the Image class comes to mind. Storing a terrain&#8217;s height values as a grayscale image has one big advantage: The outcome is a very userfriendly, like a topographical map:</p>
  1171. </div>
  1172. <div class="ulist">
  1173. <ul>
  1174. <li>
  1175. <p>Low values (e.g. 0 or 50) are dark gray – these are valleys.</p>
  1176. </li>
  1177. <li>
  1178. <p>High values (e.g. 200, 255) are light grays – these are hills.</p>
  1179. </li>
  1180. </ul>
  1181. </div>
  1182. <div class="paragraph">
  1183. <p>Look at the next screenshot: In the top left you see a 128x128 grayscale image (heightmap) that was used as a base to generate the depicted terrain. To make the hilly shape better visible, the mountain tops are colored white, valleys brown, and the areas inbetween green:</p>
  1184. </div>
  1185. <div class="imageblock">
  1186. <div class="content">
  1187. <img src="../_images/beginner/terrain-from-heightmap.png" alt="terrain-from-heightmap.png" width="" height="">
  1188. </div>
  1189. </div>
  1190. <div class="paragraph">
  1191. <p>In a real game, you will want to use more complex and smoother terrains than the simple heightmaps shown here. Heightmaps typically have square sizes of 512x512 or 1024x1024, and contain hundred thousands to 1 million height values. No matter which size, the concept is the same as described here.</p>
  1192. </div>
  1193. <div class="sect2">
  1194. <h3 id="looking-at-the-heightmap-code"><a class="anchor" href="#looking-at-the-heightmap-code"></a>Looking at the Heightmap Code</h3>
  1195. <div class="paragraph">
  1196. <p>The first step of terrain creation is the heightmap. You can create one yourself in any standard graphic application. Make sure it has the following properties:</p>
  1197. </div>
  1198. <div class="ulist">
  1199. <ul>
  1200. <li>
  1201. <p>The size must be square, and a power of two.</p>
  1202. <div class="ulist">
  1203. <ul>
  1204. <li>
  1205. <p>Examples: 128x128, 256x256, 512x512, 1024x1024</p>
  1206. </li>
  1207. </ul>
  1208. </div>
  1209. </li>
  1210. <li>
  1211. <p>Color mode must be 255 grayscales.</p>
  1212. <div class="ulist">
  1213. <ul>
  1214. <li>
  1215. <p>Don&#8217;t supply a color image, it will be interpreted as grayscale, with possibly weird results.</p>
  1216. </li>
  1217. </ul>
  1218. </div>
  1219. </li>
  1220. <li>
  1221. <p>Save the map as a .jpg or .png image file</p>
  1222. </li>
  1223. </ul>
  1224. </div>
  1225. <div class="imageblock text-right right text-left">
  1226. <div class="content">
  1227. <img src="../_images/beginner/mountains512.png" alt="mountains512.png" width="128" height="128">
  1228. </div>
  1229. <div class="title">mountains512.png</div>
  1230. </div>
  1231. <div class="paragraph">
  1232. <p>The file <code>mountains512.png</code> that you see here is a typical example of an image heightmap.</p>
  1233. </div>
  1234. <div class="paragraph">
  1235. <p>Here is how you create the heightmap object in your jME code:</p>
  1236. </div>
  1237. <div class="olist arabic">
  1238. <ol class="arabic">
  1239. <li>
  1240. <p>Create a Texture object.</p>
  1241. </li>
  1242. <li>
  1243. <p>Load your prepared heightmap image into the texture object.</p>
  1244. </li>
  1245. <li>
  1246. <p>Create an AbstractHeightMap object from an ImageBasedHeightMap.<br>
  1247. It requires an image from a JME Texture.</p>
  1248. </li>
  1249. <li>
  1250. <p>Load the heightmap.</p>
  1251. </li>
  1252. </ol>
  1253. </div>
  1254. <div class="listingblock">
  1255. <div class="content">
  1256. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java"> AbstractHeightMap heightmap = null;
  1257. Texture heightMapImage = assetManager.loadTexture(
  1258. "Textures/Terrain/splat/mountains512.png");
  1259. heightmap = new ImageBasedHeightMap(heightMapImage.getImage());
  1260. heightmap.load();</code></pre>
  1261. </div>
  1262. </div>
  1263. </div>
  1264. </div>
  1265. </div>
  1266. <div class="sect1">
  1267. <h2 id="what-is-texture-splatting"><a class="anchor" href="#what-is-texture-splatting"></a>What is Texture Splatting?</h2>
  1268. <div class="sectionbody">
  1269. <div class="paragraph">
  1270. <p>Previously you learned how to create a material for a simple shape such as a cube. All sides of the cube have the same color. You can apply the same material to a terrain, but then you have one big meadow, one big rock desert, etc. This is not always what you want.</p>
  1271. </div>
  1272. <div class="paragraph">
  1273. <p>Texture splatting allows you create a custom material, and &#8216;paint textures&#8217; on it like with a &#8216;paint brush&#8217;. This is very useful for terrains: As you see in the example here, you can paint a grass texture into the valleys, a dirt texture onto the mountains, and free-form roads inbetween.</p>
  1274. </div>
  1275. <div class="admonitionblock tip">
  1276. <table>
  1277. <tr>
  1278. <td class="icon">
  1279. <i class="fa icon-tip" title="Tip"></i>
  1280. </td>
  1281. <td class="content">
  1282. <div class="paragraph">
  1283. <p>The jMonkeyEngine SDK comes with a <a href="../../sdk/terrain_editor.html" class="xref page">TerrainEditor plugin</a>. Using the TerrainEditor plugin, you can sculpt the terrain with the mouse, and save the result as heightmap. You can paint textures on the terrain and the plugin saves the resulting splat textures as alphamap(s). The following paragraphs describe the manual process for you.</p>
  1284. </div>
  1285. </td>
  1286. </tr>
  1287. </table>
  1288. </div>
  1289. <div class="paragraph">
  1290. <p>Splat textures are based on the <code>Terrain.j3md</code> material definition. If you open the Terrain.j3md file, and look in the Material Parameters section, you see that you have several texture layers to paint on: <code>Tex1</code>, <code>Tex2</code>, <code>Tex3</code>, etc.</p>
  1291. </div>
  1292. <div class="paragraph">
  1293. <p>Before you can start painting, you have to make a few decisions:</p>
  1294. </div>
  1295. <div class="olist arabic">
  1296. <ol class="arabic">
  1297. <li>
  1298. <p>Choose three textures. For example grass.jpg, dirt.jpg, and road.jpg.<br>
  1299. <span class="image"><img src="../_images/beginner/grass.jpg" alt="grass.jpg" width="64" height="64"></span> <span class="image"><img src="../_images/beginner/dirt.jpg" alt="dirt.jpg" width="64" height="64"></span> <span class="image"><img src="../_images/beginner/road.jpg" alt="road.jpg" width="64" height="64"></span></p>
  1300. </li>
  1301. <li>
  1302. <p>You &#8216;paint&#8217; three texture layers by using three colors: Red, blue and, green. You arbitrarily decide that…</p>
  1303. <div class="olist loweralpha">
  1304. <ol class="loweralpha" type="a">
  1305. <li>
  1306. <p>Red is grass – red is layer <code>Tex1</code>, so put the grass texture into Tex1.</p>
  1307. </li>
  1308. <li>
  1309. <p>Green is dirt – green is layer <code>Tex2</code>, so put the dirt texture into Tex2.</p>
  1310. </li>
  1311. <li>
  1312. <p>Blue is roads – blue is layer <code>Tex3</code>, so put the roads texture into Tex3.</p>
  1313. </li>
  1314. </ol>
  1315. </div>
  1316. </li>
  1317. </ol>
  1318. </div>
  1319. <div class="paragraph">
  1320. <p>Now you start painting the texture:</p>
  1321. </div>
  1322. <div class="olist arabic">
  1323. <ol class="arabic">
  1324. <li>
  1325. <p>Make a copy of your terrains heightmap, <code>mountains512.png</code>. You want it as a reference for the shape of the landscape.</p>
  1326. </li>
  1327. <li>
  1328. <p>Name the copy <code>alphamap.png</code>.</p>
  1329. </li>
  1330. <li>
  1331. <p>Open <code>alphamap.png</code> in a graphic editor and switch the image mode to color image.</p>
  1332. <div class="olist loweralpha">
  1333. <ol class="loweralpha" type="a">
  1334. <li>
  1335. <p>Paint the black valleys red – this will be the grass.</p>
  1336. </li>
  1337. <li>
  1338. <p>Paint the white hills green – this will be the dirt of the mountains.</p>
  1339. </li>
  1340. <li>
  1341. <p>Paint blue lines where you want roads to criss-cross the landscape.</p>
  1342. </li>
  1343. </ol>
  1344. </div>
  1345. </li>
  1346. <li>
  1347. <p>The end result should look similar to this:<br>
  1348. <span class="image"><img src="../_images/beginner/mountains512.png" alt="mountains512.png" width="64" height="64"></span> &#8658; <span class="image"><img src="../_images/beginner/alphamap.png" alt="alphamap.png" width="64" height="64"></span></p>
  1349. </li>
  1350. </ol>
  1351. </div>
  1352. <div class="sect2">
  1353. <h3 id="looking-at-the-texturing-code"><a class="anchor" href="#looking-at-the-texturing-code"></a>Looking at the Texturing Code</h3>
  1354. <div class="paragraph">
  1355. <p>As usual, you create a Material object. Base it on the Material Definition <code>Terrain.j3md</code> that is included in the jME3 framework.</p>
  1356. </div>
  1357. <div class="listingblock">
  1358. <div class="content">
  1359. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">Material mat_terrain = new Material(assetManager, "Common/MatDefs/Terrain/Terrain.j3md");</code></pre>
  1360. </div>
  1361. </div>
  1362. <div class="paragraph">
  1363. <p>Load four textures into this material. The first one, <code>Alpha</code>, is the alphamap that you just created.</p>
  1364. </div>
  1365. <div class="listingblock">
  1366. <div class="content">
  1367. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">mat_terrain.setTexture("Alpha", assetManager.loadTexture(
  1368. "Textures/Terrain/splat/alphamap.png"));</code></pre>
  1369. </div>
  1370. </div>
  1371. <div class="paragraph">
  1372. <p>The three other textures are the layers that you have previously decided to paint: grass, dirt, and road. You create texture objects and load the three textures as usual. Note how you assign them to their respective texture layers (Tex1, Tex2, and Tex3) inside the Material!</p>
  1373. </div>
  1374. <div class="listingblock">
  1375. <div class="content">
  1376. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java"> /** 1.2) Add GRASS texture into the red layer (Tex1). */
  1377. Texture grass = assetManager.loadTexture(
  1378. "Textures/Terrain/splat/grass.jpg");
  1379. grass.setWrap(WrapMode.Repeat);
  1380. mat_terrain.setTexture("Tex1", grass);
  1381. mat_terrain.setFloat("Tex1Scale", 64f);
  1382. /** 1.3) Add DIRT texture into the green layer (Tex2) */
  1383. Texture dirt = assetManager.loadTexture(
  1384. "Textures/Terrain/splat/dirt.jpg");
  1385. dirt.setWrap(WrapMode.Repeat);
  1386. mat_terrain.setTexture("Tex2", dirt);
  1387. mat_terrain.setFloat("Tex2Scale", 32f);
  1388. /** 1.4) Add ROAD texture into the blue layer (Tex3) */
  1389. Texture rock = assetManager.loadTexture(
  1390. "Textures/Terrain/splat/road.jpg");
  1391. rock.setWrap(WrapMode.Repeat);
  1392. mat_terrain.setTexture("Tex3", rock);
  1393. mat_terrain.setFloat("Tex3Scale", 128f);</code></pre>
  1394. </div>
  1395. </div>
  1396. <div class="paragraph">
  1397. <p>The individual texture scales (e.g. <code>mat_terrain.setFloat("Tex3Scale", 128f);</code>) depend on the size of the textures you use.</p>
  1398. </div>
  1399. <div class="ulist">
  1400. <ul>
  1401. <li>
  1402. <p>You can tell you picked too small a scale if, for example, your road tiles appear like tiny grains of sand.</p>
  1403. </li>
  1404. <li>
  1405. <p>You can tell you picked too big a scale if, for example, the blades of grass look like twigs.</p>
  1406. </li>
  1407. </ul>
  1408. </div>
  1409. <div class="paragraph">
  1410. <p>Use <code>setWrap(WrapMode.Repeat)</code> to make the small texture fill the wide area. If the repetition is too visible, try adjusting the respective <code>Tex*Scale</code> value.</p>
  1411. </div>
  1412. </div>
  1413. </div>
  1414. </div>
  1415. <div class="sect1">
  1416. <h2 id="what-is-a-terrain"><a class="anchor" href="#what-is-a-terrain"></a>What is a Terrain?</h2>
  1417. <div class="sectionbody">
  1418. <div class="paragraph">
  1419. <p>Internally, the generated terrain mesh is broken down into tiles and blocks. This is an optimization to make culling easier. You do not need to worry about &#8216;tiles&#8217; and &#8216;blocks&#8217; too much, just use recommended values for now – 64 is a good start.</p>
  1420. </div>
  1421. <div class="paragraph">
  1422. <p>Let&#8217;s assume you want to generate a 512x512 terrain. You already have created the heightmap object. Here are the steps that you perform every time you create a new terrain.</p>
  1423. </div>
  1424. <div class="paragraph">
  1425. <p>Create a TerrainQuad with the following arguments:</p>
  1426. </div>
  1427. <div class="olist arabic">
  1428. <ol class="arabic">
  1429. <li>
  1430. <p>Specify a name: E.g. <code>my terrain</code>.</p>
  1431. </li>
  1432. <li>
  1433. <p>Specify tile size: You want to terrain tiles of size 64x64, so you supply 64+1 = 65.</p>
  1434. <div class="ulist">
  1435. <ul>
  1436. <li>
  1437. <p>In general, 64 is a good starting value for terrain tiles.</p>
  1438. </li>
  1439. </ul>
  1440. </div>
  1441. </li>
  1442. <li>
  1443. <p>Specify block size: Since you prepared a heightmap of size 512x512, you supply 512+1 = 513.</p>
  1444. <div class="ulist">
  1445. <ul>
  1446. <li>
  1447. <p>If you supply a block size of 2x the heightmap size (1024+1=1025), you get a stretched out, wider, flatter terrain.</p>
  1448. </li>
  1449. <li>
  1450. <p>If you supply a block size 1/2 the heightmap size (256+1=257), you get a smaller, more detailed terrain.</p>
  1451. </li>
  1452. </ul>
  1453. </div>
  1454. </li>
  1455. <li>
  1456. <p>Supply the 512x512 heightmap object that you created.</p>
  1457. </li>
  1458. </ol>
  1459. </div>
  1460. <div class="sect2">
  1461. <h3 id="looking-at-the-terrain-code"><a class="anchor" href="#looking-at-the-terrain-code"></a>Looking at the Terrain Code</h3>
  1462. <div class="paragraph">
  1463. <p>Here&#8217;s the code:</p>
  1464. </div>
  1465. <div class="listingblock">
  1466. <div class="content">
  1467. <pre class="highlightjs highlight"><code class="language-none hljs">TerrainQuad terrain = new TerrainQuad(
  1468. "my terrain", // name
  1469. patchSize, // tile size
  1470. 513, // block size
  1471. heightmap.getHeightMap()); // heightmap</code></pre>
  1472. </div>
  1473. </div>
  1474. <div class="paragraph">
  1475. <p>You have created the terrain object.</p>
  1476. </div>
  1477. <div class="olist arabic">
  1478. <ol class="arabic">
  1479. <li>
  1480. <p>Remember to apply the created material:</p>
  1481. <div class="listingblock">
  1482. <div class="content">
  1483. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">terrain.setMaterial(mat_terrain);</code></pre>
  1484. </div>
  1485. </div>
  1486. </li>
  1487. <li>
  1488. <p>Remember to attach the terrain to the rootNode.</p>
  1489. <div class="listingblock">
  1490. <div class="content">
  1491. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">rootNode.attachChild(terrain);</code></pre>
  1492. </div>
  1493. </div>
  1494. </li>
  1495. <li>
  1496. <p>If needed, scale and translate the terrain object, just like any other Spatial.</p>
  1497. </li>
  1498. </ol>
  1499. </div>
  1500. <div class="admonitionblock tip">
  1501. <table>
  1502. <tr>
  1503. <td class="icon">
  1504. <i class="fa icon-tip" title="Tip"></i>
  1505. </td>
  1506. <td class="content">
  1507. <div class="paragraph">
  1508. <p>Terrain.j3md is an unshaded material definition, so you do not need a light source. You can also use TerrainLighting.j3md plus a light, if you want a shaded terrain.</p>
  1509. </div>
  1510. </td>
  1511. </tr>
  1512. </table>
  1513. </div>
  1514. </div>
  1515. </div>
  1516. </div>
  1517. <div class="sect1">
  1518. <h2 id="what-is-lod-level-of-detail"><a class="anchor" href="#what-is-lod-level-of-detail"></a>What is LOD (Level of Detail)?</h2>
  1519. <div class="sectionbody">
  1520. <div class="paragraph">
  1521. <p>JME3 includes an optimization that adjusts the level of detail (LOD) of the rendered terrain depending on how close or far the camera is.</p>
  1522. </div>
  1523. <div class="listingblock">
  1524. <div class="content">
  1525. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java"> TerrainLodControl control = new TerrainLodControl(terrain, getCamera());
  1526. control.setLodCalculator( new DistanceLodCalculator(patchSize, 2.7f) ); // patch size, and a multiplier
  1527. terrain.addControl(control);</code></pre>
  1528. </div>
  1529. </div>
  1530. <div class="paragraph">
  1531. <p>Close parts of the terrain are rendered in full detail. Terrain parts that are further away are not clearly visible anyway, and JME3 improves performance by rendering them less detailed. This way you can afford to load huge terrains with no penalty caused by invisible details.</p>
  1532. </div>
  1533. </div>
  1534. </div>
  1535. <div class="sect1">
  1536. <h2 id="exercises"><a class="anchor" href="#exercises"></a>Exercises</h2>
  1537. <div class="sectionbody">
  1538. <div class="sect2">
  1539. <h3 id="exercise-1-texture-layers"><a class="anchor" href="#exercise-1-texture-layers"></a>Exercise 1: Texture Layers</h3>
  1540. <div class="paragraph">
  1541. <p>What happens when you swap two layers, for example <code>Tex1</code> and <code>Tex2</code>?</p>
  1542. </div>
  1543. <div class="listingblock">
  1544. <div class="content">
  1545. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">...
  1546. mat_terrain.setTexture("Tex2", grass);
  1547. ...
  1548. mat_terrain.setTexture("Tex1", dirt);</code></pre>
  1549. </div>
  1550. </div>
  1551. <div class="paragraph">
  1552. <p>You see it&#8217;s easier to swap layers in the code, than to change the colors in the alphamap.</p>
  1553. </div>
  1554. </div>
  1555. <div class="sect2">
  1556. <h3 id="exercise-2-randomized-terrains"><a class="anchor" href="#exercise-2-randomized-terrains"></a>Exercise 2: Randomized Terrains</h3>
  1557. <div class="paragraph">
  1558. <p>The following three lines generate the heightmap object based on your user-defined image:</p>
  1559. </div>
  1560. <div class="listingblock">
  1561. <div class="content">
  1562. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java"> AbstractHeightMap heightmap = null;
  1563. Texture heightMapImage = assetManager.loadTexture(
  1564. "Textures/Terrain/splat/mountains512.png");
  1565. heightmap = new ImageBasedHeightMap(heightMapImage.getImage());</code></pre>
  1566. </div>
  1567. </div>
  1568. <div class="paragraph">
  1569. <p>Instead, you can also let JME3 generate a random landscape for you:</p>
  1570. </div>
  1571. <div class="olist arabic">
  1572. <ol class="arabic">
  1573. <li>
  1574. <p>What result do you get when you replace the above three heightmap lines by the following lines and run the sample?</p>
  1575. <div class="listingblock">
  1576. <div class="content">
  1577. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">HillHeightMap heightmap = null;
  1578. HillHeightMap.NORMALIZE_RANGE = 100; // optional
  1579. try {
  1580. heightmap = new HillHeightMap(513, 1000, 50, 100, (byte) 3); // byte 3 is a random seed
  1581. } catch (Exception ex) {
  1582. ex.printStackTrace();
  1583. }</code></pre>
  1584. </div>
  1585. </div>
  1586. </li>
  1587. <li>
  1588. <p>Change one parameter at a time, and the run the sample again. Note the differences. Can you find out which of the values has which effect on the generated terrain (look at the javadoc also)?</p>
  1589. <div class="ulist">
  1590. <ul>
  1591. <li>
  1592. <p>Which value controls the size?</p>
  1593. <div class="ulist">
  1594. <ul>
  1595. <li>
  1596. <p>What happens if the size is not a square number +1 ?</p>
  1597. </li>
  1598. </ul>
  1599. </div>
  1600. </li>
  1601. <li>
  1602. <p>Which value controls the number of hills generated?</p>
  1603. </li>
  1604. <li>
  1605. <p>Which values control the size and steepness of the hills?</p>
  1606. <div class="ulist">
  1607. <ul>
  1608. <li>
  1609. <p>What happens if the min is bigger than or equal to max?</p>
  1610. </li>
  1611. <li>
  1612. <p>What happens if both min and max are small values (e.g. 10/20)?</p>
  1613. </li>
  1614. <li>
  1615. <p>What happens if both min and max are large values (e.g. 1000/1500)?</p>
  1616. </li>
  1617. <li>
  1618. <p>What happens if min and max are very close(e.g. 1000/1001, 20/21)? Very far apart (e.g. 10/1000)?</p>
  1619. </li>
  1620. </ul>
  1621. </div>
  1622. </li>
  1623. </ul>
  1624. </div>
  1625. </li>
  1626. </ol>
  1627. </div>
  1628. <div class="paragraph">
  1629. <p>You see the variety of hilly landscapes that can be generated using this method.</p>
  1630. </div>
  1631. <div class="admonitionblock tip">
  1632. <table>
  1633. <tr>
  1634. <td class="icon">
  1635. <i class="fa icon-tip" title="Tip"></i>
  1636. </td>
  1637. <td class="content">
  1638. <div class="paragraph">
  1639. <p>For this exercise, you can keep using the splat Material from the sample code above. Just don&#8217;t be surprised that the Material does not match the shape of the newly randomized landscape. If you want to generate real matching splat textures for randomized heightmaps, you need to write a custom method that, for example, creates an alphamap from the heightmap by replacing certain grayscales with certain RGB values.</p>
  1640. </div>
  1641. </td>
  1642. </tr>
  1643. </table>
  1644. </div>
  1645. </div>
  1646. <div class="sect2">
  1647. <h3 id="exercise-3-solid-terrains"><a class="anchor" href="#exercise-3-solid-terrains"></a>Exercise 3: Solid Terrains</h3>
  1648. <div class="paragraph">
  1649. <p>Can you combine what you learned here and in <a href="hello_collision.html" class="xref page">Hello Collision</a>, and <a href="../../core/collision/terrain_collision.html" class="xref page">make the terrain solid</a>?</p>
  1650. </div>
  1651. </div>
  1652. </div>
  1653. </div>
  1654. <div class="sect1">
  1655. <h2 id="conclusion"><a class="anchor" href="#conclusion"></a>Conclusion</h2>
  1656. <div class="sectionbody">
  1657. <div class="paragraph">
  1658. <p>You have learned how to create terrains that are more efficient than loading one giant model. You know how to generate random or create handmade heightmaps. You can add a LOD control to render large terrains faster. You are aware that you can combine what you learned about collision detection to make the terrain solid to a physical player. You are also able to texture a terrain, like a boss, using layered Materials and texture splatting. You are aware that the jMonkeyEngine SDK provides a TerrainEditor that helps with most of these manual tasks.</p>
  1659. </div>
  1660. <div class="paragraph">
  1661. <p><strong>See also:</strong></p>
  1662. </div>
  1663. <div class="ulist">
  1664. <ul>
  1665. <li>
  1666. <p><a href="../../core/collision/terrain_collision.html" class="xref page">Terrain Collision</a></p>
  1667. </li>
  1668. <li>
  1669. <p><a href="../../core/terrain/terrain.html" class="xref page">Advanced Terrain</a></p>
  1670. </li>
  1671. </ul>
  1672. </div>
  1673. </div>
  1674. </div>
  1675. <nav class="pagination">
  1676. <span class="prev"><a href="hello_collision.html">Hello Collision</a></span>
  1677. <span class="next"><a href="hello_audio.html">Hello Audio</a></span>
  1678. </nav>
  1679. </article>
  1680. <aside class="toc sidebar" data-title="Contents" data-levels="2">
  1681. <div class="toc-menu"></div>
  1682. </aside>
  1683. </div>
  1684. </main>
  1685. </div>
  1686. <footer class="footer">
  1687. <p>Copyright 2020 jMonkeyEngine Wiki Contributors. Licensed BSD-3.</p>
  1688. </footer>
  1689. <script src="../../../../_/js/vendor/docsearch.min.js"></script>
  1690. <!-- fetched from https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js -->
  1691. <script>
  1692. var search = docsearch({
  1693. apiKey: 'a736b6d93de805e26ec2f49b55013fbd',
  1694. indexName: 'jmonkeyengine',
  1695. inputSelector: '#search-input',
  1696. autocompleteOptions: { hint: false, keyboardShortcuts: ['s'] },
  1697. algoliaOptions: { hitsPerPage: 10 }
  1698. }).autocomplete
  1699. search.on('autocomplete:closed', function () { search.autocomplete.setVal() })
  1700. function focusSearchInput () { document.querySelector('#search-input').focus() }
  1701. if (document.querySelector('.home-link.is-current')) window.addEventListener('load', focusSearchInput)
  1702. </script>
  1703. <script src="../../../../_/js/site.js"></script>
  1704. <script async src="../../../../_/js/vendor/highlight.js"></script>
  1705. </body>
  1706. </html>