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


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Shader Nodes :: jMonkeyEngine Docs</title>
    <link rel="canonical" href="https://wiki.jmonkeyengine.org/docs/3.8/core/shader/jme3_shadernodes.html">
    <link rel="prev" href="jme3_shaders.html">
    <link rel="next" href="shader_video_tutorials.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="Shader Nodes">
<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.8">
  <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>
</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="../app/simpleapplication.html">SimpleApplication</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../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="../app/update_loop.html">Update Loop</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../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="../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="../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="../scene/traverse_scenegraph.html">Traverse SceneGraph</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../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="../scene/mesh.html">Mesh</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../scene/custom_meshes.html">Custom Meshes</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../scene/shape/shape.html">Shape</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../scene/3d_models.html">3D Models</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../asset/asset_manager.html">Asset Manager</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../export/save_and_load.html">Saving and Loading Nodes</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../collision/collision_and_intersection.html">Collision and Intersection</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../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="../animation/animation_new.html">Animation with AnimComposer</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../animation/animation.html">Animation-Old (AnimControl)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../cinematic/cinematics.html">Cinematics (cutscenes, fake destruction physics)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../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="../material/how_to_use_materials.html">How to use Materials</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../material/j3m_material_files.html">.j3m Material Files</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../material/material_definitions.html">.j3md Material Definitions</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../material/materials_overview.html">.j3md Properties</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="jme3_shaders.html">Shaders and JME3</a>
  </li>
  <li class="nav-item is-current-page" data-depth="2">
    <a class="nav-link" href="jme3_shadernodes.html">Shader Node System</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="shader_video_tutorials.html">Shader Video Tutorials</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../light/light_and_shadow.html">Light and Shadow</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../texture/anisotropic_filtering.html">Anisotropic Filtering</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../system/jme3_srgbpipeline.html">Gamma Correction</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../material/normal_types.html">Normal Map Conventions</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="../audio/audio.html">Playing Sounds</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../audio/audio_environment_presets.html">Audio Environment Presets</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../app/state/screenshots.html">Capture Screenshots</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../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="../effect/effects_overview.html">Overview</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../effect/bloom_and_glow.html">Bloom and Glow</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../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="../util/sky.html">Sky</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../terrain/terrain.html">Terrain (TerraMonkey)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../collision/terrain_collision.html">Terrain Collision</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../effect/water.html">Simple Water</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../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="../renderer/camera.html">Camera</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../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="../renderer/remote-controlling_the_camera.html">Remote-Controlling</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../renderer/multiple_camera_views.html">Multiple Camera Views</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../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">Rendering</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../renderer/render_pipeline.html">Render Pipelines</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="../input/input_handling.html">Input Handling</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../input/combo_moves.html">Combo Moves</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../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="../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="../gui/nifty_gui.html">Integration Tutorial</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../gui/nifty_gui_best_practices.html">Best Practices</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../gui/nifty_gui_scenarios.html">Scenarios</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../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="../vr/virtualreality.html">Virtual Reality</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../vr/legacyOpenVr.html">Virtual Reality Legacy Support</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../vr/virtualrealitycontrollers.html">Virtual Reality Legacy Controller Support</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/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="../../contributions/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="../../contributions/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="../../contributions/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="../../contributions/ai/recast.html">Recast Navigation</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../contributions/ai/building_recast.html">Updating and building Recast Native Bindings</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../contributions/ai/monkey_brains.html">Monkey Brains</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../contributions/ai/steer_behaviours.html">Steer Behaviours</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../contributions/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="../../contributions/gui/topic_contributions_gui.html">GUI</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../contributions/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/contributions.html#tonegodgui">tonegodGUI - a native jME3 GUI library</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../contributions/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="../../contributions/tools/navigation.html">Mercator Projection Tool (Marine Navigation)</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../contributions/tools/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>
    <a class="nav-link" href="../../contributions/vr/topic_contributions_vr.html">Virtual Reality (And augmented reality)</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../contributions/contributions.html#tamarin-openxr">Tamarin OpenXR</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="../../contributions/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="../app/state/application_states.html">Application States</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../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>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/assetbrowser.html">Asset Browser</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../sdk/animations.html">Animations</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/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.8</span>
  </div>
  <ul class="components">
    <li class="component is-current">
      <span class="title">JME</span>
      <ul class="versions">
        <li class="version is-current">
          <a href="../../documentation.html">3.8</a>
        </li>
        <li class="version">
          <a href="../../../3.4/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>Material, Light, Shadow</li>
    <li><a href="jme3_shadernodes.html">Shader Node System</a></li>
  </ul>
</nav>
<div class="page-versions">
  <button class="version-menu-toggle" title="Show other versions of page">3.8</button>
  <div class="version-menu">
    <a class="version is-current" href="jme3_shadernodes.html">3.8</a>
    <a class="version" href="../../../3.4/core/shader/jme3_shadernodes.html">3.4</a>
    <a class="version" href="../../../3.3/core/shader/jme3_shadernodes.html">3.3</a>
    <a class="version" href="../../../3.2/core/shader/jme3_shadernodes.html">3.2</a>
  </div>
</div>
  <div class="edit-this-page"><a href="https://github.com/jMonkeyEngine/wiki/edit/master/docs/modules/core/pages/shader/jme3_shadernodes.adoc">Edit this Page</a></div>
  </div>
  <div class="content">
<article class="doc">
<h1 class="page">Shader Nodes</h1>
<div class="sect1">
<h2 id="motivations"><a class="anchor" href="#motivations"></a>Motivations</h2>
<div class="sectionbody">
<div class="paragraph">
<p>jME3 material system is entirely based on shaders. While it&#8217;s pretty powerful, this system has some issues and limitations :</p>
</div>
<div class="ulist">
<ul>
<li>
<p>Monolithic shaders have a serious lack of flexibility, and it can be daunting to get into the code for inexperienced users.</p>
</li>
<li>
<p>Maintenance ease of such shaders is poor. (for example the whole lighting shaders represent around 500 lines of code, and it could be a lot worse with more features)</p>
</li>
<li>
<p>Adding new features to those shaders decrease the ease of maintenance a lot. This point made us reluctant to do so and some feature were never added (Fog to name it, but many more).</p>
</li>
<li>
<p>Users can&#8217;t add their own feature to the shader unless they fork it, and fall back to the same issues explained in previous points.</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>Shader Nodes were designed with this in mind and are the fruit of many long discussions in the core chat balancing the pros and cons of this or that pattern.<br>
At first this system was referred to as &#8220;Shader&#8221; injection. The basic idea was to allow users to inject code into shaders with a tag replacement system.<br>
We finally came with a different concept called Shader Nodes, that is inspired from blender nodes system for textures and post process.<br>
<strong>The final shader is generated at run time by the system by assembling shader nodes together.</strong></p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="what-is-a-shader-node"><a class="anchor" href="#what-is-a-shader-node"></a>What is a Shader Node?</h2>
<div class="sectionbody">
<div class="paragraph">
<p>Conceptually, it&#8217;s just a self sufficient piece of glsl code that accepts inputs and produce some outputs.<br>
Inputs are glsl variables that may be fed by previous nodes output values.<br>
Outputs are glsl variables fed with values computed in the shader node code.<br></p>
</div>
<div class="paragraph">
<p>In practice it&#8217;s a bit more than that.A shader node is declined in several parts :</p>
</div>
<div class="ulist">
<ul>
<li>
<p>A shader node definition, defining :</p>
<div class="ulist">
<ul>
<li>
<p>The type of shader node (Vertex or Fragment for now)</p>
</li>
<li>
<p>The minimal glsl version needed for the shader node</p>
</li>
<li>
<p>The path to the shader file (containing the shader code heh)</p>
</li>
<li>
<p><strong>A mandatory documentation block</strong> for this Shader node. As I hope many users will do their own nodes and contribute them back this point is crucial.</p>
</li>
<li>
<p>A list of inputs accepted by this shader (typed glsl variable optional or needed for the code to run properly)</p>
</li>
<li>
<p>A list of outputs produced by this shader (typed glsl variable computed and fed by the node&#8217;s code)</p>
</li>
</ul>
</div>
</li>
<li>
<p>The actual shader code file (.vert or .frag depending on the node&#8217;s type like any shader file)</p>
</li>
<li>
<p>A shader node declaration having :</p>
<div class="ulist">
<ul>
<li>
<p>A unique name(in the shader scope)</p>
</li>
<li>
<p>The shader node definition it&#8217;s based on</p>
</li>
<li>
<p>An optional activation condition (based on the actual define system)</p>
</li>
<li>
<p>A list of input mapping (what will be actually fed to those inputs)</p>
</li>
<li>
<p>A list of output mapping (what will be output to the global output of the shader)</p>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="sect1">
<h2 id="shader-node-definition"><a class="anchor" href="#shader-node-definition"></a>Shader Node definition</h2>
<div class="sectionbody">
<div class="paragraph">
<p>First ShaderNodes have to be defined either in a separate file (j3sn for jme3 shader node) or directly embed in the Technique block of the j3md file.<br>
Please refer to this documentation for global structure of a j3md file
<a href="../material/material_specification.html" class="xref page">jMonkeyEngine3 Material Specification</a></p>
</div>
<div class="paragraph">
<p>All is included in a <strong>ShaderNodeDefinitions</strong> bloc. This block can have several nodes defined (it&#8217;s recommended to define nodes that have strong dependencies with each other in the same j3sn file).<br>
A ShaderNode is declared in a <strong>ShaderNodeDefinition</strong> block.<br>
The global structure should look like this :</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">ShaderNodeDefinitions{
      ShaderNodeDefinition &lt;NodeDefName&gt;{
            Type : &lt;ShaderType&gt;
            Shader &lt;ShaderLangAndVersion&gt; : &lt;ShaderPath&gt;
            [Shader &lt;ShaderLangAndVersion&gt; : &lt;ShaderPath&gt;]
            [...]
            Documentation {
                &lt;DocContent&gt;
            }
            Input {
                &lt;GlslVarType&gt; &lt;VarName&gt;
                [&lt;GlslVarType&gt; &lt;VarName&gt;]
                [...]
            }
            Output {
                &lt;GlslVarType&gt; &lt;VarName&gt;
                [&lt;GlslVarType&gt; &lt;VarName&gt;]
                [...]
            }
      }
      [ShaderNodeDefinition &lt;NodeDef2Name&gt; {
         [...]
      }]
      [...]
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>All that is not between [] is mandatory.</p>
</div>
<div class="ulist">
<ul>
<li>
<p><u>ShaderNodeDefinition</u> : the definition block. You can have several definition in the same ShaderNodeDefinitions block.</p>
<div class="ulist">
<ul>
<li>
<p><strong>NodeDefName</strong> : The name of this ShaderNodeDefinition</p>
</li>
</ul>
</div>
</li>
<li>
<p><u>Type</u> : define the type of this shader node</p>
<div class="ulist">
<ul>
<li>
<p><strong>ShaderType</strong> : The type of shader for this definition. For now only &#8220;Vertex&#8221; and &#8220;Fragment&#8221; are supported.</p>
</li>
</ul>
</div>
</li>
<li>
<p><u>Shader</u> : the version and path of the shader code to use. note that you can have several shader with different GLSL version. The generator will pick the relevant one according to GPU capabilities.</p>
<div class="ulist">
<ul>
<li>
<p><strong>ShaderLangAndVersion</strong> : follows the same syntax than the shader declaration in the j3md file : GLSL&lt;version&gt;, version being 100 for glsl 1.0 , 130 for glsl 1.3, 150 for glsl 1.5 and so on. Note that this is the <strong>minimum</strong> glsl version this shader supports</p>
</li>
<li>
<p><strong>ShaderPath</strong> the path to the shader code file (relative to the asset folder)</p>
</li>
</ul>
</div>
</li>
<li>
<p><u>Documentation</u> : the documentation block. This is mandatory and I really recommend filling this if you want to contribute your shader nodes. This documentation will be read buy the SDK and presented to users willing to add this node to their material definitions. This should contain a brief description of the node and a description for each input and output.</p>
<div class="ulist">
<ul>
<li>
<p><strong>@input</strong> can be use to prefix an input name so the sdk recognize it and format it accordingly. the syntax id @input &lt;inputName&gt; &lt;description&gt;.</p>
</li>
<li>
<p><strong>@output</strong> can be use to prefix an output name so the sdk recognize it and format it accordingly. the syntax id @output &lt;inputName&gt; &lt;description&gt;</p>
</li>
</ul>
</div>
</li>
<li>
<p><u>Input</u> : The input block containing all the inputs of this node. A node can have 1 or several inputs.</p>
<div class="ulist">
<ul>
<li>
<p><strong>GlslVarType</strong> : a valid glsl variable type that will be used in the shader for this input. see <a href="https://www.khronos.org/opengl/wiki/GLSL_Type">https://www.khronos.org/opengl/wiki/GLSL_Type</a> and the &#8220;Declare&#8221; an array chapter</p>
</li>
<li>
<p><strong>VarName</strong> : the name of the variable. Note that you can&#8217;t have several inputs with the same name.</p>
</li>
</ul>
</div>
</li>
<li>
<p><u>Output</u> : The output block containing all the outputs of this node. A node can have 1 or several outputs.</p>
<div class="ulist">
<ul>
<li>
<p><strong>GlslVarType</strong> : a valid glsl variable type that will be used in the shader for this input. see <a href="https://www.khronos.org/opengl/wiki/GLSL_Type">https://www.khronos.org/opengl/wiki/GLSL_Type</a> and the &#8220;Declare&#8221; an array chapter</p>
</li>
<li>
<p><strong>VarName</strong> : the name of the variable. Note that you can&#8217;t have several outputs with the same name.</p>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
<div class="paragraph">
<p>If you use the same name for an input and an output, the generator will consider them as the SAME variable so they should be of the same glsl type.</p>
</div>
</td>
</tr>
</table>
</div>
<div class="sect2">
<h3 id="example"><a class="anchor" href="#example"></a>Example</h3>
<div class="paragraph">
<p>Here is a typical shader node definition.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">ShaderNodeDefinitions{
     ShaderNodeDefinition LightMapping{
        Type: Fragment
        Shader GLSL100: Common/MatDefs/ShaderNodes/LightMapping/lightMap.frag
        Documentation {
            This Node is responsible for multiplying a light mapping contribution to a given color.
            @input texCoord the texture coordinates to use for light mapping
            @input lightMap the texture to use for light mapping
            @input color the color the lightmap color will be multiplied to
            @output color the resulting color
        }
        Input{
            vec2 texCoord
            sampler2D lightMap
            vec4 color
        }
        Output{
            vec4 color
        }
    }
}</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="declare-an-array"><a class="anchor" href="#declare-an-array"></a>Declare an array</h3>
<div class="paragraph">
<p>To declare an array you have to specify its size between square brackets.<br>
<strong>Constant size</strong><br>
The size can be an int constant.<br>
<em>Example</em></p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-none hljs">      float myArray[10]</code></pre>
</div>
</div>
<div class="paragraph">
<p>This will declare a float array with 10 elements.
Any material parameter mapped with this array should be of FloatArray type and it&#8217;s size will be assumed as 10 when the shader is generated.</p>
</div>
<div class="paragraph">
<p><strong>Material parameter driven size</strong><br>
The size can be dynamic and driven by a material parameter. GLSL does not support non constant values for array declaration so this material parameter will be mapped to a define.<br>
<em>Example</em></p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-none hljs">     float myArray[NumberOfElements]</code></pre>
</div>
</div>
<div class="paragraph">
<p>This declares a float array with the size depending on the value of the NumberOfElements material parameter.<br>
NumberOfElements <strong>HAS</strong> to be declared in the material definition as a material parameter. It will be mapped to a define and used in the shader.</p>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
<div class="paragraph">
<p>If this value change the shader will have to be recompiled, due to the fact that it&#8217;s mapped to a define.</p>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="shader-node-code"><a class="anchor" href="#shader-node-code"></a>Shader Node code</h2>
<div class="sectionbody">
<div class="paragraph">
<p>The shader code associated with a Shader node is similar to any shader code.<br>
The code for a Vertex shader node should be in a .vert file and the code for a Fragment shader node should be in a .frag file.
It has a declarative part containing variable declaration, function declaration and so on… And a main part that is embed in a &#8220;void main(){}&#8221; block.<br>
Input and output variables declared in the shader node definition can be used <strong>without</strong> being declared in the shader code. ( they shouldn&#8217;t even or you&#8217;ll have issues).<br>
Here is a the code of the LightMap.frag shader.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">void main(){
    color *= texture2D(lightMap, texCoord);
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>Very simple, it&#8217;s just a texture fetch, but of course anything can be done.<br>
<strong>Do not declare uniforms, attributes or varyings in a shader node code</strong>, the Generator will handle this, just use the inputs and outputs and optional local variables you may need.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="shader-node-declaration"><a class="anchor" href="#shader-node-declaration"></a>Shader Node declaration</h2>
<div class="sectionbody">
<div class="paragraph">
<p>To create a shader we need to plug shader nodes to each other, but also interact with built in glsl inputs and outputs.
Shader nodes are declared inside the Technique block. The vertex nodes are declared in the VertexShaderNodes block and the fragment nodes are declared in the FragmentShaderNodes block.<br>
Note that if the j3md has ember shader nodes definition (in a ShaderNodesDefinitions block) it <strong>must</strong> be declared before the VertexShaderNodes and FragmentShaderNodes blocks.
Of course there can be several ShaderNode declaration in those block.<br>
Here is how a ShaderNode declaration should look :</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">ShaderNode &lt;ShaderNodeName&gt;{
     Definition : &lt;DefinitionName&gt; [: &lt;DefinitionPath&gt;]
     [Condition : &lt;ActivationCondition&gt;]
     InputMapping{
          &lt;InputVariableName&gt;[.&lt;Swizzle&gt;] = &lt;NameSpace&gt;.&lt;VarName&gt;[.&lt;Swizzle&gt;] [: &lt;MappingCondition&gt;]
          [...]
     }
     [OutputMapping{
          &lt;NameSpace&gt;.&lt;VarName&gt;[.&lt;Swizzle&gt;] = &lt;OutputVariableName&gt;[.&lt;Swizzle&gt;] [: &lt;MappingCondition&gt;]
          [...]
     }]
}</code></pre>
</div>
</div>
<div class="ulist">
<ul>
<li>
<p><u>ShaderNode</u> the shader node block</p>
<div class="ulist">
<ul>
<li>
<p><strong>ShaderNodeName</strong> the name of this shader node, can be anything, but has to be <strong>unique</strong> in the shader scope.</p>
</li>
</ul>
</div>
</li>
<li>
<p><u>Definition</u> : a reference to the shader node definition.</p>
<div class="ulist">
<ul>
<li>
<p><strong>DefinitionName</strong> : the name of the definition this Node use. this definition can be declared in the same j3md or in its own j3sn file.</p>
</li>
<li>
<p><strong>DefinitionPath</strong> : in case the definition is declared in it&#8217;s own j3sn file, you have to set the path to this file here.</p>
</li>
</ul>
</div>
</li>
<li>
<p><u>Condition</u> a condition that dictates if the node is active or not.</p>
<div class="ulist">
<ul>
<li>
<p><strong>ActivationCondition</strong> : The condition for this node to be used. Today we use Defines to use different blocks of code used depending on the state of a Material Parameter. The condition here use the exact same paradigm. A valid condition must be the name of a material parameter or any combinations using logical operators &#8220;||,&#8220;&amp;&amp;&#8221;, &#8220;!&#8221; or grouping characters &#8220;(&#8221; and &#8220;)&#8221;. The generator will create the corresponding define and the shader node code will be embed into and #ifdef statement.</p>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="paragraph">
<p>For example, let&#8217;s say we have a Color and ColorMap material parameter, this condition &#8220;Color || ColorMap&#8221; will generate this statement :</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">        #if defined(COLOR) || defined(COLORMAP)
            ...
        #endif</code></pre>
</div>
</div>
<div class="ulist">
<ul>
<li>
<p><u>InputMapping</u> the wiring of the inputs of this node, coming from previous node&#8217;s outputs or from built in glsl inputs.</p>
<div class="ulist">
<ul>
<li>
<p><strong>InputVariableName</strong> : the name of the variable to map as declared in the definition.</p>
</li>
<li>
<p><strong>Swizzle</strong> : Swizzling for the preceding variable. More information on glsl swizzling on this page <a href="https://www.khronos.org/opengl/wiki/GLSL_Type">https://www.khronos.org/opengl/wiki/GLSL_Type</a>.</p>
</li>
<li>
<p><strong>NameSpace</strong> : The generator will use variable name space to avoid collision between variable names. Name space can be one of these values :</p>
<div class="ulist">
<ul>
<li>
<p><strong>MatParam</strong> : the following variable is a Material Parameter declared in the MaterialParameters block of the materialDefinition.</p>
</li>
<li>
<p><strong>WorldParam</strong> : the following variable is a World Parameter declared in the WorldParameters block of the current technique block. World parameters can be one of those declared in this file : <a href="https://github.com/jMonkeyEngine/jmonkeyengine/blob/master/jme3-core/src/main/java/com/jme3/shader/UniformBinding.java">https://github.com/jMonkeyEngine/jmonkeyengine/blob/master/jme3-core/src/main/java/com/jme3/shader/UniformBinding.java</a></p>
</li>
<li>
<p><strong>Attr</strong> : the following variable is a shader attribute. It can be one those declared in the Type enum of the VertexBuffer class <a href="https://github.com/jMonkeyEngine/jmonkeyengine/blob/master/jme3-core/src/main/java/com/jme3/scene/VertexBuffer.java">https://github.com/jMonkeyEngine/jmonkeyengine/blob/master/jme3-core/src/main/java/com/jme3/scene/VertexBuffer.java</a>.</p>
</li>
<li>
<p><strong>Global</strong> : the variable is a global variable to the shader. Global variables will be assign at the end of the shader to glsl built in outputs : gl_Position for the vertex shader, or to one of the possible outputs of the fragment shader (for example  gl_FragColor). The global variable can have what ever name pleases you, it will assigned in the order they&#8217;ve been found in the declaration to the shader output. <strong>Global variables can be inputs of a shader node. Global variables are forced to be vec4 and are defaulted to the value of the attribute inPosition in the vertex shader and vec4(1.0)(opaque white color) in the fragment shader</strong>.</p>
</li>
<li>
<p><strong>The name of a previous shader node</strong> : this must be followed by and output variable of a the named shader node. This is what allows one to plug outputs from a node to inputs of another.</p>
</li>
</ul>
</div>
</li>
<li>
<p><strong>VarName</strong> : the name of the variable to assign to the input. This variable must be known in name space declared before.</p>
</li>
<li>
<p><strong>MappingCondition</strong> : Follows the same rules as the activation condition for the shaderNode, this mapping will be embed in a #ifdef statement n the resulting shader.</p>
</li>
</ul>
</div>
</li>
<li>
<p><u>OutputMapping</u> : This block is optional, as mapping of output will be done in input mapping block of following shaderNodes, except if you want to output a value to the Global output of the shader.</p>
<div class="ulist">
<ul>
<li>
<p><strong>NameSpace</strong> : the name space of the output to assign, this can only be &#8220;Global&#8221; here.</p>
</li>
<li>
<p><strong>VarName</strong> : the name of a global output (can be anything, just be aware that 2 different names result in 2 different outputs).</p>
</li>
<li>
<p><strong>OutputVariable</strong> : Must be an output of the current node&#8217;s definition.</p>
</li>
<li>
<p><strong>MappingCondition</strong> : Same as before.</p>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="sect1">
<h2 id="complete-material-definition-and-shader-nodes-example"><a class="anchor" href="#complete-material-definition-and-shader-nodes-example"></a>Complete material definition and Shader Nodes example</h2>
<div class="sectionbody">
<div class="paragraph">
<p>Here is an example of a very simple Material definition that just displays a solid color (controlled by a material parameter) on a mesh.</p>
</div>
<div class="admonitionblock important">
<table>
<tr>
<td class="icon">
<i class="fa icon-important" title="Important"></i>
</td>
<td class="content">
<div class="paragraph">
<p>Shader Nodes only work if there is no shader declared in the technique. If you want to bypass the Shader Nodes, you can put a VertexShader and a FragmentShader statement in the technique and the shader nodes will be ignored.</p>
</div>
</td>
</tr>
</table>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">MaterialDef Simple {
    MaterialParameters {
        Color Color
    }
    Technique {
        WorldParameters {
            WorldViewProjectionMatrix
        }
        VertexShaderNodes {
            ShaderNode CommonVert {
                Definition : CommonVert : Common/MatDefs/ShaderNodes/Common/CommonVert.j3sn
                InputMappings {
                    worldViewProjectionMatrix = WorldParam.WorldViewProjectionMatrix
                    modelPosition = Global.position.xyz
                }
                OutputMappings {
                    Global.position = projPosition
                }
            }
        }
        FragmentShaderNodes {
            ShaderNode ColorMult {
                Definition : ColorMult : Common/MatDefs/ShaderNodes/Basic/ColorMult.j3sn
                InputMappings {
                    color1 = MatParam.Color
                    color2 = Global.color
                }
                OutputMappings {
                    Global.color = outColor
                }
            }
        }
    }
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>This Material definition has one Default technique with 2 node declarations.<br>
<strong><u>CommonVert Definition</u></strong><br>
CommonVert is a vertex shader node that has commonly used input and outputs of a vertex shader. It also computes the position of the vertex in projection space.<br>
Here is the definition content (Common/MatDefs/ShaderNodes/Common/CommonVert.j3sn) :</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">ShaderNodesDefinitions {
    ShaderNodeDefinition CommonVert {
        Type: Vertex
        Shader GLSL100: Common/MatDefs/ShaderNodes/Common/commonVert.vert
        Documentation {
            This Node is responsible for computing vertex position in projection space.
            It also can pass texture coordinates 1 &amp; 2, and vertexColor to the fragment shader as varying (or inputs for glsl &gt;=1.3)
            @input modelPosition the vertex position in model space (usually assigned with Attr.inPosition or Global.position)
            @input worldViewProjectionMatrix the World View Projection Matrix transforms model space to projection space.
            @input texCoord1 The first texture coordinates of the vertex (usually assigned with Attr.inTexCoord)
            @input texCoord2 The second texture coordinates of the vertex (usually assigned with Attr.inTexCoord2)
            @input vertColor The color of the vertex (usually assigned with Attr.inColor)
            @output projPosition Position of the vertex in projection space.(usually assigned to Global.position)
            @output vec2 texCoord1 The first texture coordinates of the vertex (output as a varying)
            @output vec2 texCoord2 The second texture coordinates of the vertex (output as a varying)
            @output vec4 vertColor The color of the vertex (output as a varying)
        }
        Input{
            vec3 modelPosition
            mat4 worldViewProjectionMatrix
            vec2 texCoord1
            vec2 texCoord2
            vec4 vertColor
        }
        Output{
            vec4 projPosition
            vec2 texCoord1
            vec2 texCoord2
            vec4 vertColor
        }
    }
}</code></pre>
</div>
</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>Note that texCoord1/2 and vertColor are declared both as input and output. The generator will use the same variables for them.</p>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>Here is the shader Node code ( Common/MatDefs/ShaderNodes/Common/commonVert.vert).</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">void main(){
    projPosition = worldViewProjectionMatrix * vec4(modelPosition, 1.0);
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>As you can see all the inputs and outputs are not used. That&#8217;s because most of them are attributes meant to be passed to the fragment shader as varyings. All the wiring will be handled by the generator only if those variables are used in an input or output mapping.</p>
</div>
<div class="paragraph">
<p><strong><u>CommonVert input mapping</u></strong><br>
Here we have the most basic yet mandatory thing in a vertex shader, computing vertex position in projection space. For this we have 2 mappings :</p>
</div>
<div class="ulist">
<ul>
<li>
<p><strong>worldViewProjectionMatrix = WorldParam.WorldViewProjectionMatrix</strong> : the input parameter worldViewProjectionMatrix is assigned with the WorldViewProjectionMatrix World parameter declared in the WorldParameters block of the technique.</p>
</li>
<li>
<p><strong>modelPosition = Global.position.xyz</strong> : the modelPosition (understand the vertex position in the model coordinate space) is assigned with the Global position variable.</p>
</li>
</ul>
</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>As mentioned before Global position is initialized with the attribute inPosition, so this is equivalent to :</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">modelPosition = Attr.inPosition.xyz</code></pre>
</div>
</div>
</td>
</tr>
</table>
</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>Also note the swizzle of the Global.position variable. ModelPosition is a vec3 and GlobalPosition is a vec4 so we just take the first 3 components.</p>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p><strong><u>CommonVert output mapping</u></strong><br></p>
</div>
<div class="ulist">
<ul>
<li>
<p><strong>Global.position = projPosition</strong> : The result of the multiplication of the worldViewProjectionMatrix and the modelPosition is assigned to the Global position.</p>
</li>
</ul>
</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>The Global.position variable will be assigned to the gl_Position glsl built in output at the end of the shader.</p>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p><strong><u>ColorMult Definition</u></strong><br>
ColorMult is a very basic Shader Node that takes two colors as input and multiply them.
Here is the definition content (Common/MatDefs/ShaderNodes/Basic/ColorMult.j3sn) :</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">ShaderNodeDefinitions{
    ShaderNodeDefinition ColorMult {
        Type: Fragment
        Shader GLSL100: Common/MatDefs/ShaderNodes/Basic/colorMult.frag
        Documentation{
            Multiplies two colors
            @input color1 the first color
            @input color2 the second color
            @output outColor the resulting color
        }
        Input {
            vec4 color1
            vec4 color2
        }
        Output {
            vec4 outColor
        }
    }
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>Here is the shader Node code (Common/MatDefs/ShaderNodes/Basic/colorMult.frag).</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">void main(){
    outColor = color1 * color2;
}</code></pre>
</div>
</div>
<div class="paragraph">
<p><strong><u>ColorMult input mapping</u></strong><br>
All inputs are mapped here :</p>
</div>
<div class="ulist">
<ul>
<li>
<p><strong>color1 = MatParam.Color</strong> : The first color is assigned to the Color Material parameter declared in the MaterialParameter block of the material definition.</p>
</li>
<li>
<p><strong>color2 = Global.color</strong> : The second color is assigned with the Global color variable. this is defaulted to vec4(1.0) (opaque white).</p>
</li>
</ul>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
<div class="paragraph">
<p>In a very complex material def this variable could already have been assigned with a previous Shader Node output.</p>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p><strong><u>ColorMult output mapping</u></strong><br></p>
</div>
<div class="ulist">
<ul>
<li>
<p><strong>Global.color = outColor</strong> : the resulting color is assigned to the Global color variable.</p>
</li>
</ul>
</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>Note that the Global.color variable will be assigned to gl_FragColor (glsl &lt; 1.5) or declared as a Global output of the shader (glsl &gt;= 1.5).</p>
</div>
</td>
</tr>
</table>
</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>Also note that in case several Global variables are declared, the generator will assign them gl_FragData[i](glsl &lt; 1.5) i being the order the variable has been found in the material def. For glsl &gt;= 1.5 the variable will just all be declared as shader output in the order they&#8217;ve been found in the declaration.</p>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p><strong><u>Generated shader code</u></strong></p>
</div>
<div class="admonitionblock important">
<table>
<tr>
<td class="icon">
<i class="fa icon-important" title="Important"></i>
</td>
<td class="content">
<div class="paragraph">
<p>Don&#8217;t take this code as carved in stone, the generated code can change as optimization of the shader generator goes on.</p>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>Vertex Shader (glsl 1.0)</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">uniform mat4 g_WorldViewProjectionMatrix;

attribute vec4 inPosition;

void main(){
        vec4 Global_position = inPosition;

        //CommonVert : Begin
        vec3 CommonVert_modelPosition = Global_position.xyz;
        vec4 CommonVert_projPosition;
        vec2 CommonVert_texCoord1;
        vec2 CommonVert_texCoord2;
        vec4 CommonVert_vertColor;

        CommonVert_projPosition = g_WorldViewProjectionMatrix * vec4(CommonVert_modelPosition, 1.0);
        Global_position = CommonVert_projPosition;
        //CommonVert : End

        gl_Position = Global_position;
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>All materials parameter, world parameters, attributes varying are declared first. then for each shader node, the declarative part is appended.<br>
For the main function, for each shader node, the input mappings are declared and assigned, the output are declared.<br>
Then the variable names are replaced in the sahder node code with there complete name (NameSpace_varName), material parameters are replaced in the shader code as is.<br>
Then, the output are mapped.</p>
</div>
<div class="paragraph">
<p>As you can see texCoord1/2 and vertColor are declared but never used. That&#8217;s because the generator is not aware of that. By default it will declare all inputs in case they are used in the shaderNode code.
Note that most glsl compiler will optimize this when compiling the shader on the GPU.</p>
</div>
<div class="paragraph">
<p>Fragment Shader (glsl 1.0)</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">uniform vec4 m_Color;

void main(){
        vec4 Global_color = vec4(1.0);

        //ColorMult : Begin
        vec4 ColorMult_color2 = Global_color;
        vec4 ColorMult_outColor;

        ColorMult_outColor = m_Color * ColorMult_color2;
        Global_color = ColorMult_outColor;
        //ColorMult : End

        gl_FragColor = Global_color;
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>Same as for the Vertex shader. Note that the color1 is not declared, because it&#8217;s directly replaced by the material parameter.</p>
</div>
<div class="admonitionblock important">
<table>
<tr>
<td class="icon">
<i class="fa icon-important" title="Important"></i>
</td>
<td class="content">
<div class="paragraph">
<p>As a rule of thumb you should not assign a value to an input. Inputs are likely to be material parameters or outputs from other shaders and modifying them may cause unexpected behavior, even failure in your resulting shader.</p>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>For more explanations and design decisions please refer to the <abbr title="specification">spec</abbr> here
<a href="https://docs.google.com/document/d/1S6xO3d1TBz0xcKe_MPTqY9V-QI59AKdg1OGy3U-HeVY/edit?usp=sharing">https://docs.google.com/document/d/1S6xO3d1TBz0xcKe_MPTqY9V-QI59AKdg1OGy3U-HeVY/edit?usp=sharing</a>.</p>
</div>
<div class="paragraph">
<p>Thank you for the brave ones that came through all this reading. I&#8217;m not gonna offer you a prize in exchange of a password, because we ran out of JME thongs…</p>
</div>
</div>
</div>
<nav class="pagination">
  <span class="prev"><a href="jme3_shaders.html">Shaders and JME3</a></span>
  <span class="next"><a href="shader_video_tutorials.html">Shader Video Tutorials</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>