java
/
jMonkeyEngine-wiki
mirror of https://github.com/jMonkeyEngine/wiki.git


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>JME 3 Tutorial - Visualizing 3D Charts :: jMonkeyEngine Docs</title>
    <link rel="canonical" href="https://wiki.jmonkeyengine.org/docs/3.8/contributions/tools/charts.html">
    <link rel="prev" href="navigation.html">
    <link rel="next" href="../projects/rise_of_mutants_project.html">
    <meta name="generator" content="Antora 3.0.1">
    <link rel="stylesheet" href="../../../../_/css/site.css">
<meta property="og:image" content="https://wiki.jmonkeyengine.org/_/img/iconx128.png">
<meta property="og:description" content="JME 3 Tutorial - Visualizing 3D Charts">
<meta property="og:title" content="jMonkeyEngine Docs">
<link rel="stylesheet" href="../../../../_/css/site-extra.css">
<link rel="stylesheet" href="../../../../_/css/vendor/docsearch.min.css">
<!-- fetched from https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css -->
<link rel="icon" href="../../../../_/img/favicon.ico" type="image/x-icon">
  </head>
  <body class="article">
<header class="header">
  <nav class="navbar">
    <div class="navbar-brand">
      <a class="navbar-item" href="https://wiki.jmonkeyengine.org">
        <img alt="" src="../../../../_/img/jme-logo.png" height="32" type="image/x-icon">
      </a>
      <div class="navbar-item hide-for-print">
        <input id="search-input" type="text" placeholder="Search docs">
      </div>
      <button class="navbar-burger" data-target="topbar-nav">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
    <div id="topbar-nav" class="navbar-menu">
      <div class="navbar-end">
        <div class="navbar-item theme-switch-wrapper">
          <label class="theme-switch" for="checkbox">
            <input type="checkbox" id="checkbox" />
            <div class="slider round"></div>
          </label>
        </div>
        <a class="navbar-item" href="https://github.com/jmonkeyengine/wiki">Github</a>
      </div>
    </div>
  </nav>
</header>
<div class="body">
<div class="nav-container" data-component="docs" data-version="3.4">
  <aside class="nav">
    <div class="panels">
<div class="nav-panel-menu is-active" data-panel="menu">
  <nav class="nav-menu">
    <h3 class="title"><a href="../../documentation.html">JME</a></h3>
<ul class="nav-list">
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="../../documentation.html">Getting Started</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="https://javadoc.jmonkeyengine.org/v3.4.1-stable">JavaDoc</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="../../release.html">Release Guide</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../tutorials/beginner/beginner.html">Beginner Tutorials</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/beginner/hello_simpleapplication.html">Hello SimpleApplication</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/beginner/hello_node.html">Hello Node</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/beginner/hello_asset.html">Hello Asset</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/beginner/hello_main_event_loop.html">Hello Update Loop</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/beginner/hello_input_system.html">Hello Input System</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/beginner/hello_material.html">Hello Material</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/beginner/hello_animation.html">Hello Animation</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/beginner/hello_picking.html">Hello Picking</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/beginner/hello_collision.html">Hello Collision</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/beginner/hello_terrain.html">Hello Terrain</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/beginner/hello_audio.html">Hello Audio</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/beginner/hello_effects.html">Hello Effects</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/beginner/hello_physics.html">Hello Physics</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Key Concepts</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/concepts/best_practices.html">Best Practices</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/concepts/optimization.html">Optimization</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/concepts/faq.html">Frequently Asked Questions</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/concepts/math_for_dummies.html">Math for Dummies</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/concepts/math.html">Math overview</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/concepts/math_cheet_sheet.html">3D math "cheat sheet"</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/concepts/rotate.html">3-D Rotation</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/concepts/math_video_tutorials.html">Math video tutorial series</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/concepts/multi-media_asset_pipeline.html">Multi-Media Asset Pipeline</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/concepts/the_scene_graph.html">The Scene Graph</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/concepts/scenegraph_for_dummies.html">Scene Graph for Dummies</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/concepts/terminology.html">3D Graphics Terminology</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/concepts/transparency_sorting.html">Transparency Sorting</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Articles and How-to&#8217;s</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">How to Model</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../tutorials/how-to/modeling/3dsmax/3dsmax.html">3dsmax</a>
  </li>
  <li class="nav-item" data-depth="3">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../tutorials/how-to/modeling/blender/blender.html">Blender</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../tutorials/how-to/modeling/blender/blender_buffer_clearing.html">Buffer Clearing</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../tutorials/how-to/modeling/blender/blender_gltf.html">Export as GlTF</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../tutorials/how-to/modeling/blender/blender_ogre_export.html">Export as Ogre XML</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../tutorials/how-to/modeling/blender/blender_ogre_compatibility.html">Ogre Compatibility</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../tutorials/how-to/modeling/blender/makehuman.html">MakeHuman</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../tutorials/how-to/modeling/blender/makehuman_blender_ogrexml_toolchain.html">MakeHuman toolchain</a>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">How to Animate</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Mixamo</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../tutorials/how-to/modeling/blender/mixamo.html">Blender Models</a>
  </li>
  <li class="nav-item" data-depth="4">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Video</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="5">
    <a class="nav-link" href="https://youtu.be/jHgAgTWIers?list=PLv6qR9TGkz8RcUr-fOHI2SksWA4BAU9TS">Part 1- Download Model</a>
  </li>
  <li class="nav-item" data-depth="5">
    <a class="nav-link" href="https://youtu.be/GQJSrOpNQwI?list=PLv6qR9TGkz8RcUr-fOHI2SksWA4BAU9TS">Part 2- Rig and Animate</a>
  </li>
  <li class="nav-item" data-depth="5">
    <a class="nav-link" href="https://youtu.be/JzRe2Dxbcmc?list=PLv6qR9TGkz8RcUr-fOHI2SksWA4BAU9TS">Part 3- Import to JME</a>
  </li>
  <li class="nav-item" data-depth="5">
    <a class="nav-link" href="https://youtu.be/8wwDRDJop7k?list=PLv6qR9TGkz8RcUr-fOHI2SksWA4BAU9TS">Part 4- Play Animation</a>
  </li>
</ul>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/how-to/debugging.html">Debugging with Wireframes</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../tutorials/how-to/util/free_skymaps.html">How to create free skymaps</a>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Java Tips</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../tutorials/how-to/java/localization.html">Localization</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../tutorials/how-to/java/swing_canvas.html">Swing Canvas</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../tutorials/how-to/java/logging.html">Logging</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../tutorials/how-to/java/read_graphic_card_capabilites.html">Read Graphics Capabilities</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Articles</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Physically Based Rendering</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../tutorials/how-to/articles/pbr/pbr_part1.html">PBR – Part one</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../tutorials/how-to/articles/pbr/pbr_part2.html">PBR – Part two</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../tutorials/how-to/articles/pbr/pbr_part3.html">PBR – Part three</a>
  </li>
</ul>
  </li>
</ul>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Core Engine</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/app/simpleapplication.html">SimpleApplication</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/system/appsettings.html">AppSettings</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Controlling Game Logic</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/app/update_loop.html">Update Loop</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/app/state/application_states.html">Application States</a>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../core/scene/control/custom_controls.html">Custom Controls</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Video</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="https://www.youtube.com/watch?v=MNDiZ9YHIpM">Control any scene node</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="https://www.youtube.com/watch?v=-OzRZscLlHY">Control a character</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="https://wiki.jmonkeyengine.org/Scenes/SDK-UsecaseDemo_1.zip">Video Source Code</a>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/app/multithreading.html">Multithreading</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Scene Graph</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/scene/traverse_scenegraph.html">Traverse SceneGraph</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/scene/spatial.html">Spatial: Node vs Geometry</a>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../core/scene/mesh.html">Mesh</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../core/scene/custom_meshes.html">Custom Meshes</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../core/scene/shape/shape.html">Shape</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../core/scene/3d_models.html">3D Models</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/asset/asset_manager.html">Asset Manager</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/export/save_and_load.html">Saving and Loading Nodes</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/collision/collision_and_intersection.html">Collision and Intersection</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/scene/control/level_of_detail.html">Level of Detail</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Animation, Scene</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/animation/animation.html">Animation-Old</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/cinematic/cinematics.html">Cinematics (cutscenes, fake destruction physics)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/cinematic/motionpath.html">MotionPaths and Waypoints</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Material, Light, Shadow</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/material/how_to_use_materials.html">How to use Materials</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/material/j3m_material_files.html">.j3m Material Files</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/material/material_definitions.html">.j3md Material Definitions</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/material/materials_overview.html">.j3md Properties</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/shader/jme3_shaders.html">Shaders and JME3</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/shader/jme3_shadernodes.html">Shader Node System</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/shader/shader_video_tutorials.html">Shader Video Tutorials</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/light/light_and_shadow.html">Light and Shadow</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/texture/anisotropic_filtering.html">Anisotropic Filtering</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/system/jme3_srgbpipeline.html">Gamma Correction</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Audio, Video</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/audio/audio.html">Playing Sounds</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/audio/audio_environment_presets.html">Audio Environment Presets</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/app/state/screenshots.html">Capture Screenshots</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/app/state/capture_audio_video_to_a_file.html">Capture Audio/Video</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Filter, Effect</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/effect/effects_overview.html">Overview</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/effect/bloom_and_glow.html">Bloom and Glow</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/effect/particle_emitters.html">Particle Emitters</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Landscapes</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/util/sky.html">Sky</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/terrain/terrain.html">Terrain (TerraMonkey)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/collision/terrain_collision.html">Terrain Collision</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/effect/water.html">Simple Water</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/effect/post-processor_water.html">Post-Processor Water</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Camera</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/renderer/camera.html">Camera</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/renderer/making_the_camera_follow_a_character.html">Follow a Character</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/renderer/remote-controlling_the_camera.html">Remote-Controlling</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/renderer/multiple_camera_views.html">Multiple Camera Views</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/renderer/jme3_renderbuckets.html">Render Buckets</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">User Interaction</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/input/input_handling.html">Input Handling</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/input/combo_moves.html">Combo Moves</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/input/mouse_picking.html">Mouse Picking</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../core/gui/topic_gui.html">Graphical User Interface</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Nifty GUI</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../core/gui/nifty_gui.html">Integration Tutorial</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../core/gui/nifty_gui_best_practices.html">Best Practices</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../core/gui/nifty_gui_scenarios.html">Scenarios</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/ui/hud.html">Head-Up Display (HUD)</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Virtual Reality</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/vr/virtualreality.html">Virtual Reality</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/vr/virtualrealitycontrollers.html">Virtual Reality Controllers</a>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../physics/physics.html">Physics</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../physics/bullet_multithreading.html">Multi-Threaded Physics</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../physics/collision/physics_listeners.html">Collision Detection</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../physics/joint/hinges_and_joints.html">Hinges and Joints</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../physics/control/walking_character.html">Walking Character</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../physics/control/ragdoll.html">Ragdoll</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../physics/control/vehicles.html">Vehicles</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../physics/control/softbody.html">Softbody</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../physics/bullet_pitfalls.html">Bullet Physics Pitfalls</a>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Networking</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../networking/networking.html">Networking (SpiderMonkey)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../networking/headless_server.html">Headless Server</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../networking/monkey_zone.html">Multi-Player Demo Code</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../networking/networking_video_tutorials.html">Networking Video Tutorials</a>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">User Contributions</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../contributions.html">User Made Utilities</a>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Shader</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../shader/shaderblow_project.html">ShaderBlow Project</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Landscapes</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../lanscapes/vegetationsystem/vegetationsystem.html">Vegetation System</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Networking</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../networking/open_game_finder.html">Open Game Finder</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Entity System</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="#es/entitysystem.adoc">The Zay-ES Entity System</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Artificial Intelligence</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../ai/recast.html">Recast Navigation</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../ai/building_recast.html">Updating and building Recast Native Bindings</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../ai/monkey_brains.html">Monkey Brains</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../ai/steer_behaviours.html">Steer Behaviours</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../ai/jme3_ai.html">jME3 Artificial Intelligence</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../gui/topic_contributions_gui.html">GUI</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../contributions.html#lemur-gui-library">Lemur - a native jME3 GUI library with scene graph tools</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../contributions.html#tonegodgui">tonegodGUI - a native jME3 GUI library</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../contributions.html#immediate-graphical-user-interface">Immediate graphical user interface</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Tools</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="navigation.html">Mercator Projection Tool (Marine Navigation)</a>
  </li>
  <li class="nav-item is-current-page" data-depth="3">
    <a class="nav-link" href="charts.html">Visualizing Maps in JME3 (Marine Charts)</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Projects</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../projects/rise_of_mutants_project.html">Rise of Mutants Project</a>
  </li>
</ul>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../sdk/sdk.html">SDK</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Video Tutorials</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">SDK Use Case Tutorials</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="http://www.youtube.com/watch?v=-OzRZscLlHY">Demo 1 (Quixote demo)</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="http://www.youtube.com/watch?v=6-YWxD3JByE">Demo 2 (Models and Materials)</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="3">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">SDK Tutorials</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="http://www.youtube.com/watch?v=M1_0pbeyJzI">Basics</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="http://www.youtube.com/watch?v=nL7woH40i5c">Importing Models</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="http://www.youtube.com/watch?v=DUmgAjiNzhY">Dragging&amp;Dropping Nodes</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="http://www.youtube.com/watch?v=ntPAmtsQ6eM">Scene Composing</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="http://www.youtube.com/watch?v=zgPV3W6dD4s">Terrain with Collision Shape</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="http://www.youtube.com/watch?v=Feu3-mrpolc">Working with Materials</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="http://www.youtube.com/watch?v=MNDiZ9YHIpM">Custom Controls</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="http://www.youtube.com/watch?v=oZnssg8TBWQ">WebStart Deployment</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="http://www.youtube.com/watch?v=D7JM4VMKqPc">Animation and Effect TrackEditing</a>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Getting Started</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/update_center.html">Updating jMonkeyEngine SDK</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/troubleshooting.html">Troubleshooting</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Java Development Features</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/project_creation.html">Project Creation</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/code_editor.html">Code Editor and Palette</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/version_control.html">File Version Control</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/debugging_profiling_testing.html">Debug, Profile, Test</a>
  </li>
  <li class="nav-item" data-depth="3">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../sdk/application_deployment.html">Application Deployment</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../sdk/default_build_script.html">Default Build Script</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../sdk/android.html">Android</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../sdk/android_cheat_sheet.html">Android Cheat Sheet</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../sdk/ios.html">iOS</a>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Unique Features</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../sdk/model_loader_and_viewer.html">Import, View, Convert Models</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../sdk/asset_packs.html">Asset Packs</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/scene_explorer.html">The SceneExplorer</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/scene_composer.html">Composing a Scene</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/terrain_editor.html">Terrain Editor</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/sample_code.html">Sample Code</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/material_editing.html">Material Editing</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/font_creation.html">Creating Bitmap Fonts</a>
  </li>
  <li class="nav-item" data-depth="3">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="https://hub.jmonkeyengine.org/t/effecttrack-and-audiotrack-editing-in-the-sdk/23378">Audio and Effect Track Editing</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="https://www.youtube.com/watch?v=D7JM4VMKqPc">Video: Effect and AudioTrack editing in jMonkeyEngine 3 sdk</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/filters.html">Post-Processor Filter Editor and Viewer</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../core/app/state/application_states.html">Application States</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../core/scene/control/custom_controls.html">Custom Controls</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/vehicle_creator.html">Vehicle Creator</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Advanced Usage</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/build_platform.html">Building jMonkeyEngine SDK</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/use_own_jme.html#.adoc">Using your own (modified) version of jME3 in jMonkeyEngine SDK</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/increasing_heap_memory.html">Increasing Heap Memory</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/log_files.html">Log Files</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Available external plugins</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../contributions.html">Contributions</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/neotexture.html">Neo Texture Editor for procedural textures</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="http://www.youtube.com/watch?v=yS9a9o4WzL8">Video: Mesh Tool &amp; Physics Editor</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../sdk/development.html">Developing plugins for jMonkeyEngine SDK</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/development/setup.html">Creating a plugin</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/development/general.html">Creating components</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/development/scene.html">The Main Scene</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/development/sceneexplorer.html">The Scene Explorer</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/development/projects_assets.html">Projects and Assets</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/development/extension_library.html">Create a library plugin from a jar file</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/development/model_loader.html">Create a new or custom model filetype and loader</a>
  </li>
</ul>
  </li>
</ul>
  </li>
</ul>
  </li>
</ul>
  </nav>
</div>
<div class="nav-panel-explore" data-panel="explore">
  <div class="context">
    <span class="title">JME</span>
    <span class="version">3.4</span>
  </div>
  <ul class="components">
    <li class="component is-current">
      <span class="title">JME</span>
      <ul class="versions">
        <li class="version">
          <a href="../../../3.8/documentation.html">3.8</a>
        </li>
        <li class="version is-current">
          <a href="../../documentation.html">3.4</a>
        </li>
        <li class="version">
          <a href="../../../3.3/documentation.html">3.3</a>
        </li>
        <li class="version">
          <a href="../../../3.2/documentation.html">3.2</a>
        </li>
      </ul>
    </li>
    <li class="component">
      <span class="title">Wiki Contribution</span>
      <ul class="versions">
        <li class="version">
          <a href="../../../../docs-wiki/3.8/wiki_contributor.html">3.8</a>
        </li>
      </ul>
    </li>
    <li class="component">
      <span class="title">Wiki UI</span>
      <ul class="versions">
        <li class="version">
          <a href="../../../../wiki-ui/index.html">master</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
    </div>
  </aside>
</div>
<main class="article">
<div class="toolbar" role="navigation">
<button class="nav-toggle"></button>
<nav class="breadcrumbs" aria-label="breadcrumbs">
  <ul>
    <li><a href="../../documentation.html">JME</a></li>
    <li>User Contributions</li>
    <li>Tools</li>
    <li><a href="charts.html">Visualizing Maps in JME3 (Marine Charts)</a></li>
  </ul>
</nav>
<div class="page-versions">
  <button class="version-menu-toggle" title="Show other versions of page">3.4</button>
  <div class="version-menu">
    <a class="version" href="../../../3.8/contributions/tools/charts.html">3.8</a>
    <a class="version is-current" href="charts.html">3.4</a>
    <a class="version" href="../../../3.3/contributions/tools/charts.html">3.3</a>
    <a class="version" href="../../../3.2/contributions/tools/charts.html">3.2</a>
  </div>
</div>
  <div class="edit-this-page"><a href="https://github.com/jMonkeyEngine/wiki/edit/v3.4/docs/modules/contributions/pages/tools/charts.adoc">Edit this Page</a></div>
  </div>
  <div class="content">
<article class="doc">
<h1 class="page">JME 3 Tutorial - Visualizing 3D Charts</h1>
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p>Previous: <a href="navigation.html" class="xref page">Navigation</a></p>
</div>
<div class="paragraph">
<p>In this tutorial we will have a look at creating a simple 3D cartography application that allows you to display 3D charts at different zoom levels.</p>
</div>
<div class="paragraph">
<p>This tutorial assumes that you know:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>About the <a href="navigation.html" class="xref page">Navigation package</a>.</p>
</li>
<li>
<p>How to create a <a href="../../tutorials/beginner/hello_terrain.html" class="xref page">3D landscape</a> using image-based heightmaps.</p>
</li>
</ul>
</div>
<div class="paragraph">
<p><span class="image"><img src="../_images/tools/mercator_grid_3d_small.png" alt="mercator_grid_3d_small.png" width="" height=""></span></p>
</div>
<div class="paragraph">
<p>You will learn that how to account for distortions that arise when mapping of one coordinate system into (i.e. when converting longitude/latitude into JME&#8217;s World Units), how to construct a tile tree and how to render a dynamic mercator grid.</p>
</div>
<div class="paragraph">
<p><strong>This article was sponsored by <a href="http://planetmayo.com/">PlanetMayo Ltd</a></strong></p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="displaying-your-first-chart"><a class="anchor" href="#displaying-your-first-chart"></a>Displaying your first chart</h2>
<div class="sectionbody">
<div class="paragraph">
<p>Let&#8217;s think about how we are going to get JME to display our terrain. The easiest way is to use JME&#8217;s`ImageBasedHeightMap`. Recall from the <a href="../../tutorials/beginner/hello_terrain.html" class="xref page">Hello Terrain</a> tutorial that these are grayscale images which JME uses to create a terrain quad. So, in order to display a chart, we need an image of a (two-dimensional) mercator projection (such as the one depicted below), which we then load using:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">Texture heightMapImage = assetManager.loadTexture(DEFAULT_HEIGHTMAP);
heightmap = new ImageBasedHeightMap(heightMapImage.getImage());
heightmap.load();
terrain = new TerrainQuad("terrain", 257, TERRAIN_SIZE, heightmap.getHeightMap());
applyDefaultTexture();</code></pre>
</div>
</div>
<div class="paragraph">
<p><span class="image"><img src="../_images/tools/globe.png" alt="A 256x256 mercator projection of planet earth." width="" height=""></span></p>
</div>
<div class="paragraph">
<p>In essence, 3D chart visualization is achieved by converting the polygons composing planet earth&#8217;s landmass into float matrices whereby each value within the matrix represents a specific terrain height. For example, given a terrain of 100 x 100 world units, we construct a heightmap by creating a 100 x 100 matrix. Each cell within the matrix corresponds to a terrain coordinate; each cell’s value to that coordinate’s desired height. But you already knew that, so where&#8217;s the tricky part? Well, when visualizing a chart an accurate projection requires a translation of latitude/longitude coordinates into their equivalent world unit (x,y,z) counterparts. This translation however is not a straight forward mapping of one coordinate system into the other due to the distortion arising from projecting an oblate spheroid onto a flat surface (see my previous wiki article <a href="navigation.html" class="xref page">here</a>). This means that if one would adhere to a linear scale, the Mercator projection would distort the size and shape of objects as the object distances itself from the equator, eventually resulting in infinite scaling as the pole is reached. So the first task at hand, is to construct accurate 2D projections of planet earth which we can then use as heightmaps. We can achieve this using the jme3.tools.navigation package and co-ordinate sets available at <a href="https://maps.ngdc.noaa.gov/viewers/geophysics/">noaa.gov</a>.</p>
</div>
<div class="paragraph">
<p>As <a href="navigation.html" class="xref page">previously discussed</a>, the distortion in latitude is derived by using the difference in meridional parts between the chart’s centre and the current position as a baseline; through converting the difference to world units by dividing it by the number of world units contained within one minute, a latitude’s y-coordinate can be obtained. Calculating a position’s x-coordinate is somewhat easier as the distortion only applies to latitude, not longitude. Therefore x merely equals the sum or difference between itself and the viewport’s centre coordinate, depending on the relative location of the position itself and the chart’s centre. Despite being able to convert between the two coordinate systems, slight precision problems remain once the chart projection is scaled down past a level of 6 meters. This is caused by the pixel referencing system of modern displays being integer based; once the ratio of minutes to pixels exceeds the aforementioned threshold, slight inaccuracies are introduced into the display. However this is of little relevance to most GIS (such as Debrief) as a) the inaccuracies are a matter of meters (or even centimetres) and b) it is impossible to notice this variation as GPS exposes a much higher inaccuracy (between 10 - 100 meters).</p>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
<div class="paragraph">
<p>To lessen the computational load, coordinate system conversion should only takes place when either the chart is re-centered or a change in scale / resolution is requested. Once converted, the coordinate sets are rendered to a buffer whose contents is then drawn for every UI update cycle.</p>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="creating-your-heightmaps"><a class="anchor" href="#creating-your-heightmaps"></a>Creating your heightmaps</h2>
<div class="sectionbody">
<div class="paragraph">
<p>There are two ways to create your heightmaps (also referred to as 'tiles' as each heightmap is a tile that composes our chart of the world). One is to use third-party software such as <a href="http://geotools.org/">GeoTools</a>. The other is to use the jme3.tools.navigation package to write a tile generator:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">public class TileGenerator {
    private int lineCount;

    /* List of polygons representing the countries that are to be drawn. */
    private List&lt;PositionContainer&gt; polygons;

    /* The map projection used to generate the chart image. */
    private MapModel2D map;

    /* The chart's resolution in minutes of longitude per pixel. */
    private double mpp;

    /* The chart's centre. */
    private Position centre;

    /**
     * Constructs a new instance of TileGenerator.
     *
     * @param worldSize         The width of the chart for which tiles are to be
     *                          generated.
     * @since 1.0
     */
    public TileGenerator(int worldSize, double mpp, Position centre) {
        File dataDirectory = new File("data");
        map = new MapModel2D(worldSize);
        lineCount = 0;
        File[] files = dataDirectory.listFiles(new FileFilter() {

            public boolean accept(File pathname) {
                if (pathname.toString().endsWith(".out")) {
                    return true;
                }
                return false;
            }
        });
        loadChartData(files);
        this.mpp = mpp;
        this.centre = centre;
    }
    public void createImageMap(int worldSize) {
        map.setCentre(centre);
        map.calculateMinutesPerPixel(mpp);
        System.out.println("Generating chart with world width (in pixels): " + worldSize);
        System.out.println("Generating chart with meters per pixel: " + map.getMetersPerPixel());
        BufferedImage img = new BufferedImage(worldSize,
                worldSize, BufferedImage.TYPE_BYTE_GRAY);
        Graphics2D g = img.createGraphics();
        Point point1, point2;
        GeneralPath polygonPath;
        g.setColor(Color.WHITE);
        int containerSize;

        for (PositionContainer container : polygons) {
            polygonPath = new GeneralPath();
            containerSize = container.getPositions().size();
            for (int i = 1; i &lt; containerSize; i++) {
                point1 = map.toPixel(container.getPositions().get(i));
                point2 = map.toPixel(container.getPositions().get(i - 1));
                polygonPath.moveTo((double) point1.getX(), (double) point1.getY());
                polygonPath.lineTo((double) point1.getX(), (double) point1.getY());
                polygonPath.lineTo((double) point2.getX(), (double) point2.getY());
            }
            g.draw(polygonPath);
        }

        // Write resulting image to file
        try {
            ImageIO.write(img, "png", new File("map.png"));
        } catch (IOException ioe) {
            ioe.printStackTrace();
        }
    }


    /**
     * Draws depth contours.
     *
     * @param img           The image to draw to.
     * @param worldSize     The size of the chart.
     * @since 1.0
     */
    private void drawContours(BufferedImage img, int worldSize) {
        map.setCentre(centre);
        map.calculateMinutesPerPixel(mpp);
        BufferedImage img2 = new BufferedImage(worldSize,
                worldSize, BufferedImage.TYPE_BYTE_GRAY);
        Graphics2D g = img2.createGraphics();
        g.drawImage(img, null, null);
        Point point1, point2;
        GeneralPath polygonPath;
//        g.setColor(new Color(21, 21, 21));
        g.setColor(Color.WHITE);
        int containerSize;

        for (PositionContainer container : polygons) {
            polygonPath = new GeneralPath();
            containerSize = container.getPositions().size();
            for (int i = 1; i &lt; containerSize; i++) {
                point1 = map.toPixel(container.getPositions().get(i));
                point2 = map.toPixel(container.getPositions().get(i - 1));
                polygonPath.moveTo((double) point1.getX(), (double) point1.getY());
                polygonPath.lineTo((double) point1.getX(), (double) point1.getY());
                polygonPath.lineTo((double) point2.getX(), (double) point2.getY());
            }
            g.draw(polygonPath);
        }

        // Write resulting image to file
        try {
            ImageIO.write(img2, "png", new File("map.png"));
        } catch (IOException ioe) {
            ioe.printStackTrace();
        }
    }

    /**
     * Loads country border information from .out files, parses the information
     * and stores it as a PositionContainer which is later used to
     * produce the .png chart image.
     *
     * @param files             A List of files that contain
     *                          country border data.
     * @since 1.0
     */
    private void loadChartData(File[] files) {
        Scanner scan;
        PositionContainer countryBorderPosition;
        polygons = new ArrayList&lt;PositionContainer&gt;(300);
        String tmp = "";
        String tmpLat;
        String tmpLong;
        StringTokenizer stk;
        Position pos;
        for (File file : files) {
            try {
                scan = new Scanner(file);
                countryBorderPosition = new PositionContainer();
                while (scan.hasNext()) {
                    tmp = scan.nextLine();
                    if (tmp.startsWith("{") || tmp.startsWith("$") || tmp.startsWith(";")) {
                        continue;
                    }
                    if (tmp.equals("-1")) {
                        polygons.add(countryBorderPosition);
                        countryBorderPosition = new PositionContainer();
                        continue;
                    }
                    stk = new StringTokenizer(tmp, " +");
                    while (stk.hasMoreTokens()) {
                        tmpLat = stk.nextToken().trim();
                        if (tmpLat.equals("-1")) {
                            polygons.add(countryBorderPosition);
                            countryBorderPosition = new PositionContainer();
                            continue;
                        }
                        tmpLong = stk.nextToken().trim();
                        pos = new Position(Double.parseDouble(tmpLat), Double.parseDouble(tmpLong));
                        countryBorderPosition.add(pos);
                        lineCount++;
                    }
                }
            } catch (Exception e) {
                e.printStackTrace();
                System.err.println(tmp);
            }
        }
    }

    public static void main(String[] args) {
        System.out.println("Debug 3D Tile Generator");
        System.out.println("===========================");
        args = new String[3];
        args[0] = "1.2";
        args[1] = "51.8";
        args[2] = "-8.3";
        if (args.length &lt; 3 || args.length &gt; 3) {
            System.err.println("Incorrect argument usage. Should be mpp latitude longitude");
            System.err.println("Exiting");
            return;
        }
        String mppStr = args[0];
        String latitudeStr = args[1];
        String longitudeStr = args[2];
        double lon, lat, mpp;
        Position centre;
        try {
            mpp = Double.parseDouble(mppStr);
        } catch (Exception e) {
            System.err.println("MPP must be of type Double or Integer.");
            System.err.println("Exiting");
            return;
        }
        try {
            lat = Double.parseDouble(latitudeStr);
        } catch (Exception e) {
            System.err.println("Latitude must be of type Double or Integer.");
            System.err.println("Exiting");
            return;
        }
        try {
            lon = Double.parseDouble(longitudeStr);
        } catch (Exception e) {
            System.err.println("Longitude must be of type Double or Integer.");
            System.err.println("Exiting");
            return;
        }
        try {
            centre = new Position(lat, lon);
        } catch (InvalidPositionException ipe) {
            System.err.println("Invalid latitude or longitude coordinates.");
            System.err.println("Exiting");
            return;
        }
        System.out.println("Generating chart...Please wait...");
        TileGenerator generator = new TileGenerator(TerrainViewer.TERRAIN_SIZE - 1, mpp, centre);
        File chart = new File("map.png");
        if (!chart.exists()) {
            generator.createImageMap(TerrainViewer.TERRAIN_SIZE - 1);
        }
        try {
            BufferedImage img = ImageIO.read(chart);
            generator.drawContours(img, TerrainViewer.TERRAIN_SIZE - 1);

        } catch (Exception e) {
            e.printStackTrace();
        }
        System.out.println("Chart generated. Placed in file 'chart.png'. Exiting.");
    }
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>…where  .out file contains longitude / latitude coordinate pairs defining landmass contours. Here an extract:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-none hljs">51.79188150756147+-8.25435369629442
51.79184641740534+-8.254357553715453
51.79182071886024+-8.254353833180712
51.79181370477922+-8.254312317813477
51.79181369284153+-8.254267011113086
51.79182535405747+-8.254221642581026
51.79184870922772+-8.254183732747943
51.79188146269924+-8.254183530764353
51.79190724220316+-8.254221208836046
51.79190960635914+-8.254296874457655
51.79188150756147+-8.25435369629442
-1
51.79165344300885+-8.255042583168985
51.79161872648091+-8.255072177259352
51.79158175153456+-8.255082912194254
51.79156558301037+-8.255041382314799
51.79156556852833+-8.254985072910559
51.79158171385971+-8.254936452917438
51.79159555664058+-8.25487274689492
51.79161403682817+-8.254824070938184
51.79164411466118+-8.254798004805433
51.79168584436759+-8.254817161260844
51.79170675060084+-8.25487006519348
51.79169051462138+-8.254930145346941
51.79167197282713+-8.254993914789209
51.79165344300885+-8.255042583168985</code></pre>
</div>
</div>
<div class="paragraph">
<p>(-1 acts as a separator, denoting the end of one polygon and the beginning of another).</p>
</div>
<div class="paragraph">
<p>So what&#8217;s happening here? Well, we basically read the contents of all specified files, whereby each line is broken up into longitude/latitude pairs, converted into pixel (x,y) coordinates and used to construct a polygon which is added to a polygon container once a polygon separator is encountered. Once the object’s paint method is called, this polygon container is iterated and any polygons falling within the canvas (aka viewport) bounds are painted to the graphics context.
Essentially, this algorithm can be summarized as follows:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-none hljs">Constructor ( files ):
   for each file in files
      for each line in file
         if line == -1
            polygonList.add(polygon)
            new polygon
         else
            polygon.add(parse(line))

Paint ( graphics context ):
   for each polygon in polygonList
      if polygon inside view bounds
         graphics context.paint(polygon)</code></pre>
</div>
</div>
<div class="paragraph">
<p><span class="image"><img src="../_images/tools/heightmap_modelling.png" alt="Summarizing process of visualizing a chart. From left to right: We draw the coordinates downloaded from noaa.gov. Ideally" width="" height=""></span>
<strong>Above:</strong> Summarizing process of visualizing a chart. From left to right: We draw the coordinates downloaded from noaa.gov. Ideally, each polygon should be filled in a light colour, whilst the surrounding ocean remains dark. JME uses these images to create an internal representation of the terrain (a float matrix).</p>
</div>
<div class="paragraph">
<p>The heightmaps produced by the <code>TileGenerator</code> are essentially arrays containing float values ranging from 0 to 255. For convenience and efficiency, JME treats these arrays as Portable Network Graphic (PNG) images (again, see the Hello Terrain tutorial). This allows us to store each tile as an image, meaning that each tile will only need to be constructed once. Essentially what the tile generator therefore does is draw a greyscale image of each tile whereby dark colours (i.e. low values from 0 - 50) are valleys and high values (200 - 255) become mountains or hills. In order to maintain scale, these values are scaled by dividing the seabed’s maximum height (in meters) by the meters per pixel of the current chart.
With only a few specified points, JME interpolates the rest, making terrain construction using heightmaps more efficient than defining individual vertices for each pixel on the chart.
A tile’s texture is defined by its ”Alphamap”. This is a copy of its heightmap, but instead of defining height values, the floats composing the alphamap image define textures. For this purpose, a method known as ”texture splatting” is employed, whereby texture data is colour coded. That is, assuming that a spatial has two texture layers (let’s call them Tex1 and Tex2), each layer is associated with a colour: in the case of Debrief 3D, blue refers to a sand texture and red refers to dirt/grass textures. Although such an approach to texturing may sound confusing at first, it has the advantages that both heightmaps and alphamaps can be created in one go, and, as they are based on the same principle, can easily be modified in batch rather than individually.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="whats-all-this-talk-about-tiles"><a class="anchor" href="#whats-all-this-talk-about-tiles"></a>What&#8217;s all this talk about tiles?</h2>
<div class="sectionbody">
<div class="paragraph">
<p>A tile tree is our way of keeping track of individual tiles. All that it is, is a set of nested sub-directories that holds charts. The top-level directory (our root) contains a chart of the entire world, and each sub-directory an enlarged area of our planet. For example, inside the root, we may have folders that contain a chart just for Ireland, the UK and France. As we traverse the tree further, we get the individual counties or provinces for each country. One way for us to represent this mess of directories, is via a <a href="http://en.wikipedia.org/wiki/Search_tree">Search Tree</a>.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="creating-a-tile-tree"><a class="anchor" href="#creating-a-tile-tree"></a>Creating a tile tree</h2>
<div class="sectionbody">
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">try {
            File resourceDirectory = new File(worldResourcesDirectory);
            if (!resourceDirectory.isDirectory()) {
                System.out.println("Resource path must be a directory");
                System.exit(1);
            }
            worldStructure = new TileTree(resourceDirectory);
        } catch (Exception e) {
            e.printStackTrace();
        }</code></pre>
</div>
</div>
<div class="paragraph">
<p>Upon initialization, these tiles are read into memory by the <code>TileTree</code> object which treats, as the name suggests, the tiles composing the chart as a tree whereby the root node refers to the entire globe. Its children refer to sub-sections of the globe, and its children in turn to sub-sections of that sub-section. For example, the ”Ireland” node is a direct child of the root node. The ”Cork Harbour” node in turn is a direct child of the ”Ireland” node and represents an enlarged version of a sub-section of the Irish coast. Each such Node consists of a unique ID (used to identify the node), a list of child nodes, a path to the heightmap (tile) that it represents, the zoom level (referred to as the longitude level as the zoom is defined by minutes of longitude per pixel) and a latitude/longitude pair denoting the tile’s centre.</p>
</div>
<div class="paragraph">
<p>Each heightmap is rendered depending on which ID the user selects (where each node in the tree is listed by its unique ID). As an ID is selected, the tree is traversed to find the node matching the given ID. The path to its heightmap is extracted and the heightmap is rendered by extracting the float array from the loaded image (that is, a texture object is created and loaded with the heightmap. A ImageBasedHeightMap object is then used to convert the heightmap and alphamap into corresponding height and texture arrays). → again, see JME tutorial on terrain.</p>
</div>
<div class="paragraph">
<p>The Tile Tree’s contents is stored in assets/Heightmaps, and each directory level is composed of one descriptor file, one heightmap (in the form of a PNG image) and one alphamap (also in the form of a PNG image). The descriptor files end in a.desc filename extension and contain the geo-coordinate centre of the tile as well as the resolution of the node that they are representing (as always, the resolution is represented in minutes per pixel (mpp)). A descriptor file’s sole purpose is to allow the re-construction of the tile tree upon application initialization. Specifically, this is achieved by the ChartModel object which instantiates the TileTree, passing a reference to <em>assets/Heightmaps</em>, which <code>TileTree</code> then recursively scans, constructing the tree by interpreting the descriptor files. It is worth noting that all files per level should be named according to the heightmap tile that it represents. That is, if your level represents a chart of Ireland and your heightmap is named Ireland.png then your descriptor file should be named <em>Ireland.desc</em>, while your alphamap should be named <em>Ireland.png.Alphamap.png</em>.</p>
</div>
<div class="paragraph">
<p><span class="image"><img src="../_images/tools/slide1.jpg" alt="The Tile Tree" width="" height=""></span>
<span class="image"><img src="../_images/tools/slide2.jpg" alt="Looking inside a node&#8230;&#8203;" width="" height=""></span>
<strong>Above:</strong> A look inside the &#8220;Ireland&#8221; node. We can see the heightmap, descriptor file and alphamap.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package util.datastructure;

import java.io.File;
import java.util.ArrayList;
import java.util.List;
import java.util.Scanner;
import jme3tools.navigation.Position;

/**
 * The TileTree handles the storage and retrieval of individual
 * charts. Each Node corresponds to one chart (a node's value being
 * the chart's absolute path. It's ID being the ID under which it is displayed).
 *
 * The tree reflects the application's chart directory structure, with the world
 * as its root and individual countries as its children. Sub-children of these nodes
 * represent "close up" version of each country / geographic sub areas of those countries.
 *
 * @author Benjamin Jakobus
 * @since 1.0
 * @version 1.0
 */
public class TileTree {

    /* The tree's root node. */
    private Node root;

    /**
     * Creates a new instance of TileTree. Nodes are generated
     * depending on the contents of the resource directory.
     *
     * @param resourceDirectory         The root of the application's resource
     *                                  directory (the resource directory being the
     *                                  directory in which all charts (aka Heightmaps)
     *                                  are being stored).
     * @since 1.0
     */
    public TileTree(File resourceDirectory) {
        File directory = null;
        for (File f : resourceDirectory.listFiles()) {
            if (f.isDirectory()) {
                directory = f;
                continue;
            }
            if (f.getName().endsWith(".desc")) {
                root = initNode(f);

            }
        }
        initTileTree(directory, root);
    }

    /**
     * Initializes the tree's children. The root node should be initialized
     * prior to calling this method.
     *
     * @param resourceDirectory         The root of the application's resource
     *                                  directory (the resource directory being the
     *                                  directory in which all charts (aka Heightmaps)
     *                                  are being stored).
     * @param parentNode                The Node to which all
     *                                  subsequent nodes should be attached.
     * @since 1.0
     */
    private void initTileTree(File resourceDirectory, Node parentNode) {
        File directory = null;
        Node node = null;
        if (parentNode == null || resourceDirectory == null) {
            return;
        }
        for (File f : resourceDirectory.listFiles()) {
            if (f.isDirectory()) {
                directory = f;
                continue;
            }
            if (!f.getName().endsWith(".desc")) {
                continue;
            } else {
                node = initNode(f);
            }
        }
        parentNode.attachChild(node);
        node = parentNode;
        initTileTree(directory, parentNode);
    }

    /**
     * Initializes an individual node depending on the contents of the descriptor
     * file (for information on descriptor files, refer to the software documentation).
     *
     * @param file                          The descriptor File with
     *                                      which to initialize the node's contents.
     * @return                              A new Node.
     * @since 1.0
     */
    private Node initNode(File file) {
        Node node = null;
        Scanner scan;
        String resourcePath = null;
        String nodeID = null;
        String longitudeLevel = null;
        Position centre = null;
        int currentLine = 0;
        if (file == null) {
            return node;
        }
        try {
            scan = new Scanner(file);
            resourcePath = file.getAbsolutePath().replace(".desc", ".png");
            resourcePath = resourcePath.substring(resourcePath.indexOf("assets"));
            nodeID =  file.getName().replace(".desc", "") + "_" + file.getParentFile().getName();
            while (scan.hasNextLine()) {
                if (currentLine == 0) {
                    String tmp = scan.nextLine();
                    String[] array = tmp.split("\\+");
                    centre = new Position(Double.parseDouble(array[0]),
                            Double.parseDouble(array[1]));
                    currentLine++;
                } else {
                    longitudeLevel = scan.nextLine().trim();
                }
            }
            node = new Node(nodeID, resourcePath, longitudeLevel, centre);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return node;
    }

    /**
     * Returns the Node matching the given ID.
     *
     * @param nodeID                The ID of the Node that you
     *                              wish to retrieve.
     * @return                      The Node matching the given ID.
     * @since 1.0
     */
    public Node find(String nodeID) {
        return find(root, nodeID);
    }

    /**
     * Returns the Node matching the given ID. This method is similar
     * to find() with the exception that it only begins searching from
     * a certain node downwards.
     *
     * @param nodeToSearch          The Node from which to start searching.
     * @param nodeID                The ID of the Node that you
     *                              wish to retrieve.
     * @return                      The Node matching the given ID.
     * @since 1.0
     */
    private Node find(Node nodeToSearch, String nodeID) {
        Node newNode = null;
        if (nodeToSearch == null) {
            return newNode;
        }
        if (nodeToSearch.getNodeID().trim().compareTo(nodeID.trim()) == 0) {
            return nodeToSearch;
        } else {
            for (Node n : nodeToSearch.getChildren()) {
                newNode = find(n, nodeID);
                if (newNode != null) {
                    return newNode;
                }
            }
        }
        return newNode;
    }

    /**
     * Retrieves all nodes within the tree.
     *
     * @return                      A List of all nodes within the
     *                              tree.
     * @since 1.0
     */
    public List&lt;Node&gt; getNodes() {
        List&lt;Node&gt; nodes = new ArrayList&lt;Node&gt;();
        getNodes(root, nodes);
        return nodes;
    }

    /**
     * Returns all the children of a specific Node.
     *
     * @param node                  The Node whose children you want.
     * @param nodes                 The List to which to add these children.
     * @since 1.0
     */
    private void getNodes(Node node, List&lt;Node&gt; nodes) {
        if (node == null) {
            return;
        }
        for (Node n : node.getChildren()) {
            getNodes(n, nodes);
        }
        nodes.add(node);
    }
}</code></pre>
</div>
</div>
<div class="listingblock">
<div class="title">.and the Node:</div>
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">package util.datastructure;

import java.util.ArrayList;
import java.util.List;
import jme3tools.navigation.Position;

/**
 * An individual node within the TileTree. Each Node
 * represents an individual tile (i.e. heightmap + alphamap).
 *
 * @author Benjamin Jakobus
 * @since 1.0
 * @version 1.0
 */
public class Node {
    /* The node's unique identifier. */
    private String nodeID;

    /* Path to the resource that the node represents (aka the node's value). */
    private String resource;

    /* The node's children. */
    private List&lt;Node&gt; children;

    /* The resolution (width in degrees of longitude) represented by this node.
     * i.e. the resolution of the chart that the node represents.
     */
    private double longitudeLevel;

    /* The centre of the chart (aka tile) that the node represents. */
    private Position centre;

    /**
     * Constructor.
     *
     * @param nodeID                The node's unique identifier.
     * @param resource              Path to the resource that the node represents
     *                              (aka the node's value).
     * @param longitudeLevel        The resolution (width in degrees of longitude)
     *                              represented by this node.
     * @param centre                The centre of the chart (aka tile) that the
     *                              node represents.
     * @since 1.0
     */
    public Node(String nodeID, String resource, String longitudeLevel, Position centre) {
        this.nodeID = nodeID;
        this.resource = resource;
        this.longitudeLevel = Double.parseDouble(longitudeLevel);
        this.centre = centre;
        children = new ArrayList&lt;Node&gt;();
    }

    /**
     * Returns all of the node's children.
     *
     * @return          A List containing all of the node's children.
     * @since 1.0
     */
    public List&lt;Node&gt; getChildren() {
        return children;
    }

    /**
     * Returns the node's ID.
     *
     * @return          The node's unique identifier.
     * @since 1.0
     */
    public String getNodeID() {
        return nodeID;
    }

    /**
     * Returns the path to the tile that the node represents.
     *
     * @return          The path to the tile that the node represents.
     * @since 1.0
     */
    public String getResource() {
        return resource;
    }

    /**
     * Attaches a child to this node.
     *
     * @param child     The Node to attach.
     * @since 1.0
     */
    public void attachChild(Node child) {
        children.add(child);
    }

    /**
     * Returns the width in degrees of longitude of the chart / resource that this
     * node represents.
     *
     * @return          the width in degrees of longitude of the chart / resource
     *                  that this node represents.
     * @since 1.0
     */
    public double getLongitudeLevel() {
        return longitudeLevel;
    }

    /**
     * The centre coordinate of the tile / chart that this node represents.
     *
     * @return          The chart's centre in terms of latitude / longitude.
     * @since 1.0
     */
    public Position getCentre() {
        return centre;
    }
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>Loading a new chart is simple: all that we need to do is get the TileTree to find the chart for us (it&#8217;ll handle loading the descriptor file and just return a node):</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">Node node = tileTree.find(chartID);</code></pre>
</div>
</div>
<div class="paragraph">
<p>We then use the returned node, to adjust our zoom-level:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">mapModel.calculateMinutesPerWorldUnit(node.getLongitudeLevel());
mapModel.setCentre(node.getCentre());</code></pre>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="drawing-the-mercator-grid"><a class="anchor" href="#drawing-the-mercator-grid"></a>Drawing the Mercator Grid</h2>
<div class="sectionbody">
<div class="paragraph">
<p>A mercator grid reflects the ”stretching” of the flat Mercator chart through the widening of the longitude / latitude lines. Using JME’s Mesh class, a 3D representation of the grid can be drawn procedurally (as opposed to pre-defining the mesh’s vertices using a 3D modelling tool such as Blender). This is achieved by defining a vector of positions, whereby each entry i within the vector denotes the starting point of a grid line, and i + 1 defining the line’s end-point. Next, the the order in which the mesh is constructed from these coordinates is defined. These are basically index pairs as the mesh consists of a set of lines, each having a start and end point. Finally, the coordinates vector and the indices are added to the mesh, which in turn is used to define the Geometry that is added to the scene graph:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">public void createGrid(double longitudeLevel, float increment) {
        granularity = increment;
        Mesh m = new Mesh();
        m.setMode(Mesh.Mode.Lines);
        m.setLineWidth(1f);

        float max = (longitudeLevel &lt; 8 ? 2 : 85);
        float max2 = (longitudeLevel &lt; 8 ? 180 / 8 : 180);
        Vector3f[] positions = new Vector3f[(int) (Math.ceil(max / increment) * 4) + (int) (Math.ceil(max2 / increment) * 4)];
        Position pos;

        int i = 0;
        try {
            // Calculate initial spacings for the meridians and
            // parallels


            // Approach the grid construction from north to south and
            // east to west.
            positions[0] = new Vector3f(0, 0, 0);

            // Latitude lines for northern hemisphere
            for (float lat = 0; lat &lt; max; lat += increment, i += 2) {
                pos = new Position(lat, 180);
                positions[i] = TerrainViewer.mapModel.toWorldUnit(new Position(lat, -180));
                positions[i + 1] = TerrainViewer.mapModel.toWorldUnit(pos);
            }

            // Latitude lines for southern hemisphere
            for (float lat = 0; lat &lt; max; lat += increment, i += 2) {
                pos = new Position(lat * -1, 180);
                positions[i] = TerrainViewer.mapModel.toWorldUnit(new Position(lat * -1, -180));
                positions[i + 1] = TerrainViewer.mapModel.toWorldUnit(pos);
            }

            max = (longitudeLevel &lt; 8 ? 180 / 8 : 180);
            // Longitude lines for northern hemisphere
            for (float lon = 0; lon &lt; max; lon += increment, i += 2) {
                pos = new Position(85, lon);
                positions[i] = TerrainViewer.mapModel.toWorldUnit(new Position(-85, lon));
                positions[i + 1] = TerrainViewer.mapModel.toWorldUnit(pos);
            }

            // Longitude lines for southern hemisphere
            for (float lon = 0; lon &lt; max; lon += increment, i += 2) {
                pos = new Position(85, lon * -1);
                positions[i] = TerrainViewer.mapModel.toWorldUnit(new Position(-85, lon * -1));
                positions[i + 1] = TerrainViewer.mapModel.toWorldUnit(pos);
            }
        } catch (Exception ipe) {

        }

        int[] indices = new int[i];
        int v;
        for (i = 0, v = 0; i &lt; indices.length; i += 2, v++) {
            indices[i] = i;
            indices[i + 1] = i + 1;
        }

        m.setBuffer(Type.Position, 3, BufferUtils.createFloatBuffer(positions));

        m.setBuffer(Type.Index, 1, indices);
        m.updateBound();
        m.updateCounts();
        Material mat = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md");
        mat.setColor("m_Color", ColorRGBA.Gray);
        gridGeometry = new Geometry("Grid", m);
        gridGeometry.setMaterial(mat);
        Vector3f worldCentre = TerrainViewer.mapModel.getCentreWu();
        gridGeometry.setLocalTranslation(new Vector3f(worldCentre.getX(),
                gridHeight, worldCentre.getZ()));
    }</code></pre>
</div>
</div>
<div class="paragraph">
<p><span class="image"><img src="../_images/tools/screen_shot_2011-12-18_at_13.12.01.png" alt="screen_shot_2011-12-18_at_13.12.01.png" width="" height=""></span></p>
</div>
</div>
</div>
<nav class="pagination">
  <span class="prev"><a href="navigation.html">Mercator Projection Tool (Marine Navigation)</a></span>
  <span class="next"><a href="../projects/rise_of_mutants_project.html">Rise of Mutants Project</a></span>
</nav>
</article>
<aside class="toc sidebar" data-title="Contents" data-levels="2">
  <div class="toc-menu"></div>
</aside>
  </div>
</main>
</div>
<footer class="footer">
  <p>Copyright 2020 jMonkeyEngine Wiki Contributors. Licensed BSD-3.</p>
</footer>
<script src="../../../../_/js/vendor/docsearch.min.js"></script>
<!-- fetched from https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js -->
<script>
var search = docsearch({
  apiKey: 'a736b6d93de805e26ec2f49b55013fbd',
  indexName: 'jmonkeyengine',
  inputSelector: '#search-input',
  autocompleteOptions: { hint: false, keyboardShortcuts: ['s'] },
  algoliaOptions: { hitsPerPage: 10 }
}).autocomplete
search.on('autocomplete:closed', function () { search.autocomplete.setVal() })
function focusSearchInput () { document.querySelector('#search-input').focus() }
if (document.querySelector('.home-link.is-current')) window.addEventListener('load', focusSearchInput)
</script>
<script src="../../../../_/js/site.js"></script>
<script async src="../../../../_/js/vendor/highlight.js"></script>
  </body>
</html>