java
/
jMonkeyEngine-wiki
镜像自地址 https://github.com/jMonkeyEngine/wiki.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>jMonkeyEngine 3 Tutorial (12) - Hello Effects :: jMonkeyEngine Docs</title>
    <link rel="canonical" href="https://wiki.jmonkeyengine.org/docs/3.8/tutorials/beginner/hello_effects.html">
    <link rel="prev" href="hello_audio.html">
    <link rel="next" href="hello_physics.html">
    <meta name="keywords" content="beginner, documentation, intro, transparency, effect">
    <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="jMonkeyEngine 3 Tutorial (12) - Hello Effects">
<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="beginner.html">Beginner Tutorials</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="hello_simpleapplication.html">Hello SimpleApplication</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="hello_node.html">Hello Node</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="hello_asset.html">Hello Asset</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="hello_main_event_loop.html">Hello Update Loop</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="hello_input_system.html">Hello Input System</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="hello_material.html">Hello Material</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="hello_animation.html">Hello Animation</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="hello_picking.html">Hello Picking</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="hello_collision.html">Hello Collision</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="hello_terrain.html">Hello Terrain</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="hello_audio.html">Hello Audio</a>
  </li>
  <li class="nav-item is-current-page" data-depth="2">
    <a class="nav-link" href="hello_effects.html">Hello Effects</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="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="../concepts/best_practices.html">Best Practices</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/optimization.html">Optimization</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/faq.html">Frequently Asked Questions</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/math_for_dummies.html">Math for Dummies</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/math.html">Math overview</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/math_cheet_sheet.html">3D math "cheat sheet"</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/rotate.html">3-D Rotation</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/math_video_tutorials.html">Math video tutorial series</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/multi-media_asset_pipeline.html">Multi-Media Asset Pipeline</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/the_scene_graph.html">The Scene Graph</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/scenegraph_for_dummies.html">Scene Graph for Dummies</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../concepts/terminology.html">3D Graphics Terminology</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../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="../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="../how-to/modeling/blender/blender.html">Blender</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../how-to/modeling/blender/blender_buffer_clearing.html">Buffer Clearing</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../how-to/modeling/blender/blender_gltf.html">Export as GlTF</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../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="../how-to/modeling/blender/blender_ogre_compatibility.html">Ogre Compatibility</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../how-to/modeling/blender/makehuman.html">MakeHuman</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../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="../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="../how-to/debugging.html">Debugging with Wireframes</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../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="../how-to/java/localization.html">Localization</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../how-to/java/swing_canvas.html">Swing Canvas</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../how-to/java/logging.html">Logging</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../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="../how-to/articles/pbr/pbr_part1.html">PBR – Part one</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../how-to/articles/pbr/pbr_part2.html">PBR – Part two</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../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_new.html">Animation with AnimComposer</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/animation/animation.html">Animation-Old (AnimControl)</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>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/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="../../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">Rendering</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/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="../../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/legacyOpenVr.html">Virtual Reality Legacy Support</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../core/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="../../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>
  <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><a href="beginner.html">Beginner Tutorials</a></li>
    <li><a href="hello_effects.html">Hello Effects</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="hello_effects.html">3.8</a>
    <a class="version" href="../../../3.4/tutorials/beginner/hello_effects.html">3.4</a>
    <a class="version" href="../../../3.3/tutorials/beginner/hello_effects.html">3.3</a>
    <a class="version" href="../../../3.2/tutorials/beginner/hello_effects.html">3.2</a>
  </div>
</div>
  <div class="edit-this-page"><a href="https://github.com/jMonkeyEngine/wiki/edit/master/docs/modules/tutorials/pages/beginner/hello_effects.adoc">Edit this Page</a></div>
  </div>
  <div class="content">
<article class="doc">
<h1 class="page">jMonkeyEngine 3 Tutorial (12) - Hello Effects</h1>
<div id="preamble">
<div class="sectionbody">
<div class="imageblock right">
<div class="content">
<img src="../_images/beginner/beginner-effect-fire.png" alt="beginner-effect-fire.png" width="150" height="165">
</div>
</div>
<div class="paragraph">
<p>When you see one of the following in a game, then a particle system is likely behind it:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>Fire, flames, sparks;</p>
</li>
<li>
<p>Rain, snow, waterfalls, leaves;</p>
</li>
<li>
<p>Explosions, debris, shockwaves;</p>
</li>
<li>
<p>Dust, fog, clouds, smoke;</p>
</li>
<li>
<p>Insects swarms, meteor showers;</p>
</li>
<li>
<p>Magic spells.</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>These scene elements cannot be modeled by meshes. In very simple terms:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>The difference between an explosion and a dust cloud is the speed of the particle effect.</p>
</li>
<li>
<p>The difference between flames and a waterfall is the direction and the color of the particle effect.</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>Particle effects can be animated (e.g. sparks, drops) and static (strands of grass, hair). Non-particle effects include bloom/glow, and motion blur/afterimage. In this tutorial you learn how to make animated particles (com.jme3.effect).</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 use the example assets in a new jMonkeyEngine SDK project, right-click your project, select <span class="menuseq"><b class="menu">Properties</b>&#160;<i class="fa fa-angle-right caret"></i> <b class="submenu">Libraries</b>&#160;<i class="fa fa-angle-right caret"></i> <b class="menuitem">Add Library</b></span>, and add the &#8220;jme3-test-data&#8221; library.</p>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="sect1">
<h2 id="sample-code"><a class="anchor" href="#sample-code"></a>Sample Code</h2>
<div class="sectionbody">
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">package jme3test.helloworld;

import com.jme3.app.SimpleApplication;
import com.jme3.effect.ParticleEmitter;
import com.jme3.effect.ParticleMesh;
import com.jme3.material.Material;
import com.jme3.math.ColorRGBA;
import com.jme3.math.Vector3f;

/** Sample 11 - how to create fire, water, and explosion effects. */
public class HelloEffects extends SimpleApplication {

  public static void main(String[] args) {
    HelloEffects app = new HelloEffects();
    app.start();
  }

  @Override
  public void simpleInitApp() {

    ParticleEmitter fire =
            new ParticleEmitter("Emitter", ParticleMesh.Type.Triangle, 30);
    Material mat_red = new Material(assetManager,
            "Common/MatDefs/Misc/Particle.j3md");
    mat_red.setTexture("Texture", assetManager.loadTexture(
            "Effects/Explosion/flame.png"));
    fire.setMaterial(mat_red);
    fire.setImagesX(2);
    fire.setImagesY(2); // 2x2 texture animation
    fire.setEndColor(  new ColorRGBA(1f, 0f, 0f, 1f));   // red
    fire.setStartColor(new ColorRGBA(1f, 1f, 0f, 0.5f)); // yellow
    fire.getParticleInfluencer().setInitialVelocity(new Vector3f(0, 2, 0));
    fire.setStartSize(1.5f);
    fire.setEndSize(0.1f);
    fire.setGravity(0, 0, 0);
    fire.setLowLife(1f);
    fire.setHighLife(3f);
    fire.getParticleInfluencer().setVelocityVariation(0.3f);
    rootNode.attachChild(fire);

    ParticleEmitter debris =
            new ParticleEmitter("Debris", ParticleMesh.Type.Triangle, 10);
    Material debris_mat = new Material(assetManager,
            "Common/MatDefs/Misc/Particle.j3md");
    debris_mat.setTexture("Texture", assetManager.loadTexture(
            "Effects/Explosion/Debris.png"));
    debris.setMaterial(debris_mat);
    debris.setImagesX(3);
    debris.setImagesY(3); // 3x3 texture animation
    debris.setRotateSpeed(4);
    debris.setSelectRandomImage(true);
    debris.getParticleInfluencer().setInitialVelocity(new Vector3f(0, 4, 0));
    debris.setStartColor(ColorRGBA.White);
    debris.setGravity(0, 6, 0);
    debris.getParticleInfluencer().setVelocityVariation(.60f);
    rootNode.attachChild(debris);
    debris.emitAllParticles();

//    ParticleEmitter water =
//            new ParticleEmitter("Emitter", ParticleMesh.Type.Triangle, 20);
//    Material mat_blue = new Material(assetManager,
//            "Common/MatDefs/Misc/Particle.j3md");
//    mat_blue.setTexture("Texture", assetManager.loadTexture(
//            "Effects/Explosion/flame.png"));
//    water.setMaterial(mat_blue);
//    water.setImagesX(2);
//    water.setImagesY(2); // 2x2 texture animation
//    water.setStartColor( ColorRGBA.Blue);
//    water.setEndColor( ColorRGBA.Cyan);
//    water.getParticleInfluencer().setInitialVelocity(new Vector3f(0, -4, 0));
//    water.setStartSize(1f);
//    water.setEndSize(1.5f);
//    water.setGravity(0,1,0);
//    water.setLowLife(1f);
//    water.setHighLife(1f);
//    water.getParticleInfluencer().setVelocityVariation(0.1f);
//    water.setLocalTranslation(0, 6, 0);
//    rootNode.attachChild(water);

  }
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>You should see an explosion that sends debris flying, and a fire.
<a href="https://github.com/jMonkeyEngine/jmonkeyengine/tree/master/jme3-examples/src/main/java/jme3test/effect">More example code is here.</a></p>
</div>
<div class="sect2">
<h3 id="texture-animation-and-variation"><a class="anchor" href="#texture-animation-and-variation"></a>Texture Animation and Variation</h3>
<div class="imageblock right">
<div class="content">
<img src="../_images/beginner/Debris.png" alt="Debris.png" width="96" height="96">
</div>
</div>
<div class="paragraph">
<p>Start by choosing a material texture for your effect. If you provide the emitter with a set of textures (see image), it can use them either for variation (random order), or as animation steps (fixed order).</p>
</div>
<div class="paragraph">
<p>Setting emitter textures works just as you have already learned in previous chapters. This time you base the material on the <code>Particle.j3md</code> material definition. Let&#8217;s have a closer look at the material for the Debris effect.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">    ParticleEmitter debris =
            new ParticleEmitter("Debris", ParticleMesh.Type.Triangle, 10);
    Material debris_mat = new Material(assetManager,
            "Common/MatDefs/Misc/Particle.j3md");
    debris_mat.setTexture("Texture", assetManager.loadTexture(
            "Effects/Explosion/Debris.png"));
    debris.setMaterial(debris_mat);
    debris.setImagesX(3);
    debris.setImagesY(3); // 3x3 texture animation
    debris.setSelectRandomImage(true);
        ...</code></pre>
</div>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Create a material and load the texture.</p>
</li>
<li>
<p>Tell the Emitter into how many animation steps (x*y) the texture is divided.<br>
The debris texture has 3x3 frames.</p>
</li>
<li>
<p>Optionally, tell the Emitter whether the animation steps are to be at random, or in order.<br>
For the debris, the frames play at random.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>As you see in the debris example, texture animations improve effects because each &#8220;flame&#8221; or &#8220;piece&#8221; of debris now looks different. Also think of electric or magic effects, where you can create very interesting animations by using an ordered morphing series of lightning bolts; or flying leaves or snow flakes, for instance.</p>
</div>
<div class="paragraph">
<p>The fire material is created the same way, just using &#8220;Effects/Explosion/flame.png&#8221; texture, which has with 2x2 ordered animation steps.</p>
</div>
</div>
<div class="sect2">
<h3 id="default-particle-textures"><a class="anchor" href="#default-particle-textures"></a>Default Particle Textures</h3>
<div class="paragraph">
<p>The following particle textures are included in <code>test-data.jar</code>. You can copy and use them in your own effects.</p>
</div>
<table class="tableblock frame-all grid-all stretch">
<colgroup>
<col style="width: 33.3333%;">
<col style="width: 33.3333%;">
<col style="width: 33.3334%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">Texture Path</th>
<th class="tableblock halign-left valign-top">Dimension</th>
<th class="tableblock halign-left valign-top">Preview</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>Effects/Explosion/Debris.png</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>3*3</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p><span class="image"><img src="../_images/beginner/Debris.png" alt="Debris.png" width="32" height="32"></span></p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>Effects/Explosion/flame.png</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>2*2</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p><span class="image"><img src="../_images/beginner/flame.png" alt="flame.png" width="32" height="32"></span></p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>Effects/Explosion/flash.png</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>2*2</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p><span class="image"><img src="../_images/beginner/flash.png" alt="flash.png" width="32" height="32"></span></p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>Effects/Explosion/roundspark.png</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>1*1</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p><span class="image"><img src="../_images/beginner/roundspark.png" alt="roundspark.png" width="32" height="32"></span></p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>Effects/Explosion/shockwave.png</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>1*1</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p><span class="image"><img src="../_images/beginner/shockwave.png" alt="shockwave.png" width="32" height="32"></span></p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>Effects/Explosion/smoketrail.png</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>1*3</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p><span class="image"><img src="../_images/beginner/smoketrail.png" alt="smoketrail.png" width="32" height="32"></span></p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>Effects/Explosion/spark.png</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>1*1</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p><span class="image"><img src="../_images/beginner/spark.png" alt="spark.png" width="32" height="32"></span></p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>Effects/Smoke/Smoke.png</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>1*15</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p><span class="image"><img src="../_images/beginner/Smoke.png" alt="Smoke.png" width="96" height="32"></span></p>
</div></div></td>
</tr>
</tbody>
</table>
<div class="paragraph">
<p>Copy them into your <code>assets/Effects</code> directory to use them.</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="creating-custom-textures"><a class="anchor" href="#creating-custom-textures"></a>Creating Custom Textures</h2>
<div class="sectionbody">
<div class="paragraph">
<p>For your game, you will likely create custom particle textures. Look at the fire example again.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">    ParticleEmitter fire =
            new ParticleEmitter("Emitter", ParticleMesh.Type.Triangle, 30);
    Material mat_red = new Material(assetManager,
            "Common/MatDefs/Misc/Particle.j3md");
    mat_red.setTexture("Texture", assetManager.loadTexture(
            "Effects/Explosion/flame.png"));
    fire.setMaterial(mat_red);
    fire.setImagesX(2);
    fire.setImagesY(2); // 2x2 texture animation
    fire.setEndColor(  new ColorRGBA(1f, 0f, 0f, 1f));   // red
    fire.setStartColor(new ColorRGBA(1f, 1f, 0f, 0.5f)); // yellow</code></pre>
</div>
</div>
<div class="imageblock right">
<div class="content">
<img src="../_images/beginner/flame.png" alt="flame.png" width="96" height="96">
</div>
</div>
<div class="paragraph">
<p>Compare the texture with the resulting effect.</p>
</div>
<div class="ulist">
<ul>
<li>
<p>Black parts of the image become fully transparent.</p>
</li>
<li>
<p>White/gray parts of the image are translucent and get colorized.</p>
</li>
<li>
<p>You set the color using <code>setStartColor()</code> and <code>setEndColor()</code>.<br>
For fire, it&#8217;s a gradient from yellow to red.</p>
</li>
<li>
<p>By default, the animation is played in order and loops.</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>Create a grayscale texture in a graphic editor, and save it to your <code>assets/Effects</code> directory. If you split up one image file into x*y animation steps, make sure each square is of equal size–just as you see in the examples here.</p>
</div>
<div class="sect2">
<h3 id="emitter-parameters"><a class="anchor" href="#emitter-parameters"></a>Emitter Parameters</h3>
<div class="paragraph">
<p>A particle system is always centered around an emitter.</p>
</div>
<div class="paragraph">
<p>Use the <code>setShape()</code> method to change the EmitterShape:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>EmitterPointShape(Vector3f.ZERO) –  particles emit from a point (default)</p>
</li>
<li>
<p>EmitterSphereShape(Vector3f.ZERO,2f) – particles emit from a sphere-sized area</p>
</li>
<li>
<p>EmitterBoxShape(new Vector3f(-1f,-1f,-1f),new Vector3f(1f,1f,1f)) – particles emit from a box-sized area</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>Example:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">emitter.setShape(new EmitterPointShape(Vector3f.ZERO));</code></pre>
</div>
</div>
<div class="paragraph">
<p>You create different effects by changing the emitter parameters:</p>
</div>
<table class="tableblock frame-all grid-all stretch">
<colgroup>
<col style="width: 10%;">
<col style="width: 50%;">
<col style="width: 15%;">
<col style="width: 25%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">Parameter</th>
<th class="tableblock halign-left valign-top">Method</th>
<th class="tableblock halign-left valign-top">Default</th>
<th class="tableblock halign-left valign-top">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>number</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p><code>setNumParticles()</code></p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>N/A</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>The maximum number of particles visible at the same time. Value is specified by user in constructor. This influences the density and length of the &#8220;trail&#8221;.</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>velocity</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p><code>getParticleInfluencer().setInitialVelocity()</code></p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>Vector3f.ZERO</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>Specify a vector how fast particles move and in which start direction.</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>direction</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p><code>getParticleInfluencer().setVelocityVariation()</code><br>
<code>setFacingVelocity()</code><br>
<code>setRandomAngle()</code><br>
<code>setFaceNormal()</code><br>
<code>setRotateSpeed()</code></p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>0.2f<br>
false<br>
false<br>
Vector3f.NAN<br>
0.0f</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>Optional accessors that control in which direction particles face while flying.</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>lifetime</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p><code>setLowLife()</code><br>
<code>setHighLife()</code></p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>3f<br>
7f</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>Minimum and maximum time period before particles fade.</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>emission rate</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p><code>setParticlesPerSec()</code></p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>20</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>How many new particles are emitted per second.</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>color</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p><code>setStartColor()</code><br>
<code>setEndColor()</code></p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>gray</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>Set to the same colors, or to two different colors for a gradient effect.</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>size</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p><code>setStartSize()</code><br>
<code>setEndSize()</code></p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>0.2f<br>
2f</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>Set to two different values for shrink/grow effect, or to same size for constant effect.</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>gravity</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p><code>setGravity()</code></p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>0,1,0</p>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph">
<p>Whether particles fall down (positive) or fly up (negative). Set to 0f for a zero-g effect where particles keep flying.</p>
</div></div></td>
</tr>
</tbody>
</table>
<div class="paragraph">
<p>You can find details about <a href="../../core/effect/particle_emitters.html#configure_parameters" class="xref page">effect parameters</a> here.
Add and modify one parameter at a time, and try different values until you get the effect you want.</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>Use the SceneComposer in the jMonkeyEngine SDK to create effects more easily. Create an empty scene and add an emitter object to it. Change the emitter properties and watch the outcome live. You can save created effects as .j3o file and load them like scenes or models.</p>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="exercise"><a class="anchor" href="#exercise"></a>Exercise</h2>
<div class="sectionbody">
<div class="paragraph">
<p>Can you &#8220;invert&#8221; the fire effect into a small waterfall? Here some tips:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>Change the Red and Yellow color to Cyan and Blue</p>
</li>
<li>
<p>Invert the velocity vector (direction) by using a negative number</p>
</li>
<li>
<p>Swap start and end size</p>
</li>
<li>
<p>Activate gravity by setting it to 0,1,0</p>
</li>
</ul>
</div>
</div>
</div>
<div class="sect1">
<h2 id="conclusion"><a class="anchor" href="#conclusion"></a>Conclusion</h2>
<div class="sectionbody">
<div class="paragraph">
<p>You have learned that many different effects can be created by changing the parameters and textures of one general emitter object.</p>
</div>
</div>
</div>
<nav class="pagination">
  <span class="prev"><a href="hello_audio.html">Hello Audio</a></span>
  <span class="next"><a href="hello_physics.html">Hello Physics</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>