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


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Physically Based Rendering – Part Three :: jMonkeyEngine Docs</title>
    <link rel="canonical" href="https://wiki.jmonkeyengine.org/docs/3.8/tutorials/how-to/articles/pbr/pbr_part3.html">
    <link rel="prev" href="pbr_part2.html">
    <link rel="next" href="../../../../core/app/simpleapplication.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="Physically Based Rendering – Part Three">
<meta property="og:title" content="jMonkeyEngine Docs">
<link rel="stylesheet" href="../../../../../../_/css/site-extra.css">
<link rel="stylesheet" href="../../../../../../_/css/vendor/docsearch.min.css">
<!-- fetched from https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css -->
<link rel="icon" href="../../../../../../_/img/favicon.ico" type="image/x-icon">
  </head>
  <body class="article">
<header class="header">
  <nav class="navbar">
    <div class="navbar-brand">
      <a class="navbar-item" href="https://wiki.jmonkeyengine.org">
        <img alt="" src="../../../../../../_/img/jme-logo.png" height="32" type="image/x-icon">
      </a>
      <div class="navbar-item hide-for-print">
        <input id="search-input" type="text" placeholder="Search docs">
      </div>
      <button class="navbar-burger" data-target="topbar-nav">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
    <div id="topbar-nav" class="navbar-menu">
      <div class="navbar-end">
        <div class="navbar-item theme-switch-wrapper">
          <label class="theme-switch" for="checkbox">
            <input type="checkbox" id="checkbox" />
            <div class="slider round"></div>
          </label>
        </div>
        <a class="navbar-item" href="https://github.com/jmonkeyengine/wiki">Github</a>
      </div>
    </div>
  </nav>
</header>
<div class="body">
<div class="nav-container" data-component="docs" data-version="3.4">
  <aside class="nav">
    <div class="panels">
<div class="nav-panel-menu is-active" data-panel="menu">
  <nav class="nav-menu">
    <h3 class="title"><a href="../../../../documentation.html">JME</a></h3>
<ul class="nav-list">
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="../../../../documentation.html">Getting Started</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="https://javadoc.jmonkeyengine.org/v3.4.1-stable">JavaDoc</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="../../../../release.html">Release Guide</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../../beginner/beginner.html">Beginner Tutorials</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../beginner/hello_simpleapplication.html">Hello SimpleApplication</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../beginner/hello_node.html">Hello Node</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../beginner/hello_asset.html">Hello Asset</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../beginner/hello_main_event_loop.html">Hello Update Loop</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../beginner/hello_input_system.html">Hello Input System</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../beginner/hello_material.html">Hello Material</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../beginner/hello_animation.html">Hello Animation</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../beginner/hello_picking.html">Hello Picking</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../beginner/hello_collision.html">Hello Collision</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../beginner/hello_terrain.html">Hello Terrain</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../beginner/hello_audio.html">Hello Audio</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../beginner/hello_effects.html">Hello Effects</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../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="../../../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="../../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="../../modeling/blender/blender.html">Blender</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../modeling/blender/blender_buffer_clearing.html">Buffer Clearing</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../modeling/blender/blender_gltf.html">Export as GlTF</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../modeling/blender/blender_ogre_export.html">Export as Ogre XML</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../modeling/blender/blender_ogre_compatibility.html">Ogre Compatibility</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../modeling/blender/makehuman.html">MakeHuman</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="../../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="../../modeling/blender/mixamo.html">Blender Models</a>
  </li>
  <li class="nav-item" data-depth="4">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Video</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="5">
    <a class="nav-link" href="https://youtu.be/jHgAgTWIers?list=PLv6qR9TGkz8RcUr-fOHI2SksWA4BAU9TS">Part 1- Download Model</a>
  </li>
  <li class="nav-item" data-depth="5">
    <a class="nav-link" href="https://youtu.be/GQJSrOpNQwI?list=PLv6qR9TGkz8RcUr-fOHI2SksWA4BAU9TS">Part 2- Rig and Animate</a>
  </li>
  <li class="nav-item" data-depth="5">
    <a class="nav-link" href="https://youtu.be/JzRe2Dxbcmc?list=PLv6qR9TGkz8RcUr-fOHI2SksWA4BAU9TS">Part 3- Import to JME</a>
  </li>
  <li class="nav-item" data-depth="5">
    <a class="nav-link" href="https://youtu.be/8wwDRDJop7k?list=PLv6qR9TGkz8RcUr-fOHI2SksWA4BAU9TS">Part 4- Play Animation</a>
  </li>
</ul>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../debugging.html">Debugging with Wireframes</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../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="../../java/localization.html">Localization</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../java/swing_canvas.html">Swing Canvas</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../java/logging.html">Logging</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../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="pbr_part1.html">PBR – Part one</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="pbr_part2.html">PBR – Part two</a>
  </li>
  <li class="nav-item is-current-page" data-depth="4">
    <a class="nav-link" href="pbr_part3.html">PBR – Part three</a>
  </li>
</ul>
  </li>
</ul>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Core Engine</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/app/simpleapplication.html">SimpleApplication</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/system/appsettings.html">AppSettings</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Controlling Game Logic</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/app/update_loop.html">Update Loop</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/app/state/application_states.html">Application States</a>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../../../core/scene/control/custom_controls.html">Custom Controls</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Video</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="https://www.youtube.com/watch?v=MNDiZ9YHIpM">Control any scene node</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="https://www.youtube.com/watch?v=-OzRZscLlHY">Control a character</a>
  </li>
  <li class="nav-item" data-depth="4">
    <a class="nav-link" href="https://wiki.jmonkeyengine.org/Scenes/SDK-UsecaseDemo_1.zip">Video Source Code</a>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/app/multithreading.html">Multithreading</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Scene Graph</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/scene/traverse_scenegraph.html">Traverse SceneGraph</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/scene/spatial.html">Spatial: Node vs Geometry</a>
  </li>
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../../../core/scene/mesh.html">Mesh</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../../../core/scene/custom_meshes.html">Custom Meshes</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../../../core/scene/shape/shape.html">Shape</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../../../core/scene/3d_models.html">3D Models</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/asset/asset_manager.html">Asset Manager</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/export/save_and_load.html">Saving and Loading Nodes</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/collision/collision_and_intersection.html">Collision and Intersection</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/scene/control/level_of_detail.html">Level of Detail</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Animation, Scene</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/animation/animation.html">Animation-Old</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/cinematic/cinematics.html">Cinematics (cutscenes, fake destruction physics)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/cinematic/motionpath.html">MotionPaths and Waypoints</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Material, Light, Shadow</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/material/how_to_use_materials.html">How to use Materials</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/material/j3m_material_files.html">.j3m Material Files</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/material/material_definitions.html">.j3md Material Definitions</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/material/materials_overview.html">.j3md Properties</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/shader/jme3_shaders.html">Shaders and JME3</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/shader/jme3_shadernodes.html">Shader Node System</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/shader/shader_video_tutorials.html">Shader Video Tutorials</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/light/light_and_shadow.html">Light and Shadow</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/texture/anisotropic_filtering.html">Anisotropic Filtering</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/system/jme3_srgbpipeline.html">Gamma Correction</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Audio, Video</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/audio/audio.html">Playing Sounds</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/audio/audio_environment_presets.html">Audio Environment Presets</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/app/state/screenshots.html">Capture Screenshots</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/app/state/capture_audio_video_to_a_file.html">Capture Audio/Video</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Filter, Effect</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/effect/effects_overview.html">Overview</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/effect/bloom_and_glow.html">Bloom and Glow</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/effect/particle_emitters.html">Particle Emitters</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Landscapes</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/util/sky.html">Sky</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/terrain/terrain.html">Terrain (TerraMonkey)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/collision/terrain_collision.html">Terrain Collision</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/effect/water.html">Simple Water</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/effect/post-processor_water.html">Post-Processor Water</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Camera</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/renderer/camera.html">Camera</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/renderer/making_the_camera_follow_a_character.html">Follow a Character</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/renderer/remote-controlling_the_camera.html">Remote-Controlling</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/renderer/multiple_camera_views.html">Multiple Camera Views</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/renderer/jme3_renderbuckets.html">Render Buckets</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">User Interaction</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/input/input_handling.html">Input Handling</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/input/combo_moves.html">Combo Moves</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/input/mouse_picking.html">Mouse Picking</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../../../core/gui/topic_gui.html">Graphical User Interface</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Nifty GUI</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../../../core/gui/nifty_gui.html">Integration Tutorial</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../../../core/gui/nifty_gui_best_practices.html">Best Practices</a>
  </li>
  <li class="nav-item" data-depth="3">
    <a class="nav-link" href="../../../../core/gui/nifty_gui_scenarios.html">Scenarios</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/ui/hud.html">Head-Up Display (HUD)</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Virtual Reality</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/vr/virtualreality.html">Virtual Reality</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../core/vr/virtualrealitycontrollers.html">Virtual Reality Controllers</a>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../../../../physics/physics.html">Physics</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../physics/bullet_multithreading.html">Multi-Threaded Physics</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../physics/collision/physics_listeners.html">Collision Detection</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../physics/joint/hinges_and_joints.html">Hinges and Joints</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../physics/control/walking_character.html">Walking Character</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../physics/control/ragdoll.html">Ragdoll</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../physics/control/vehicles.html">Vehicles</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../physics/control/softbody.html">Softbody</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../physics/bullet_pitfalls.html">Bullet Physics Pitfalls</a>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">Networking</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../networking/networking.html">Networking (SpiderMonkey)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../networking/headless_server.html">Headless Server</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../networking/monkey_zone.html">Multi-Player Demo Code</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../networking/networking_video_tutorials.html">Networking Video Tutorials</a>
  </li>
</ul>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">User Contributions</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../../../../contributions/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>
    <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>
</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.4</span>
  </div>
  <ul class="components">
    <li class="component is-current">
      <span class="title">JME</span>
      <ul class="versions">
        <li class="version">
          <a href="../../../../../3.8/documentation.html">3.8</a>
        </li>
        <li class="version is-current">
          <a href="../../../../documentation.html">3.4</a>
        </li>
        <li class="version">
          <a href="../../../../../3.3/documentation.html">3.3</a>
        </li>
        <li class="version">
          <a href="../../../../../3.2/documentation.html">3.2</a>
        </li>
      </ul>
    </li>
    <li class="component">
      <span class="title">Wiki Contribution</span>
      <ul class="versions">
        <li class="version">
          <a href="../../../../../../docs-wiki/3.8/wiki_contributor.html">3.8</a>
        </li>
      </ul>
    </li>
    <li class="component">
      <span class="title">Wiki UI</span>
      <ul class="versions">
        <li class="version">
          <a href="../../../../../../wiki-ui/index.html">master</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
    </div>
  </aside>
</div>
<main class="article">
<div class="toolbar" role="navigation">
<button class="nav-toggle"></button>
<nav class="breadcrumbs" aria-label="breadcrumbs">
  <ul>
    <li><a href="../../../../documentation.html">JME</a></li>
    <li>Articles and How-to&#8217;s</li>
    <li>Articles</li>
    <li>Physically Based Rendering</li>
    <li><a href="pbr_part3.html">PBR – Part three</a></li>
  </ul>
</nav>
<div class="page-versions">
  <button class="version-menu-toggle" title="Show other versions of page">3.4</button>
  <div class="version-menu">
    <a class="version" href="../../../../../3.8/tutorials/how-to/articles/pbr/pbr_part3.html">3.8</a>
    <a class="version is-current" href="pbr_part3.html">3.4</a>
    <a class="version" href="../../../../../3.3/tutorials/how-to/articles/pbr/pbr_part3.html">3.3</a>
    <a class="version" href="../../../../../3.2/tutorials/how-to/articles/pbr/pbr_part3.html">3.2</a>
  </div>
</div>
  <div class="edit-this-page"><a href="https://github.com/jMonkeyEngine/wiki/edit/v3.4/docs/modules/tutorials/pages/how-to/articles/pbr/pbr_part3.adoc">Edit this Page</a></div>
  </div>
  <div class="content">
<article class="doc">
<h1 class="page">Physically Based Rendering – Part Three</h1>
<div id="preamble">
<div class="sectionbody">
<div class="imageblock text-center">
<div class="content">
<img src="../../../_images/how-to/articles/pbr/irradianceMap.png" alt="irradianceMap" width="320" height="250">
</div>
</div>
<div class="paragraph">
<p><strong>Note</strong> : after several discussions in the team, I realized that some points were not clear in the  &#8220;PBR for artists&#8221; post. I’ve made an update with additional information on how to handle metalness and specular. I invite you to read it.</p>
</div>
<div class="paragraph">
<p><a href="pbr_part1.html" class="xref page">Physically Based Rendering – Part one</a></p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="image-based-lighting-in-pbr"><a class="anchor" href="#image-based-lighting-in-pbr"></a>Image Based Lighting in PBR</h2>
<div class="sectionbody">
<div class="paragraph">
<p>In <a href="pbr_part2.html" class="xref page">Physically Based Rendering – Part Two</a>, I talked about the basics of PBR for developers, and explained the different steps of the lighting process with PBR.</p>
</div>
<div class="paragraph">
<p>As said before, PBR does not necessarily imply to have indirect lighting, But that’s what makes it look so good.</p>
</div>
<div class="paragraph">
<p>Today I’m gonna focus on a technique called Image Based Lighting (IBL), that will allow us to cheaply compute this indirect lighting.</p>
</div>
<div class="paragraph">
<p>As before you can find at the end of the article a lexical with definitions of various unusual terms you’ll come across.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="indirect-lighting-for-pbr-with-image-based-lighting"><a class="anchor" href="#indirect-lighting-for-pbr-with-image-based-lighting"></a>Indirect Lighting for PBR with Image Based Lighting.</h2>
<div class="sectionbody">
<div class="paragraph">
<p>Direct lighting is usually pretty clear for everyone as it uses common light sources (point light, directional light,…).</p>
</div>
<div class="paragraph">
<p>However indirect lighting is not that obvious. First you need to understand what we want to simulate with indirect light.</p>
</div>
<div class="paragraph">
<p>It is often referred as <strong>Global Illumination (or GI)</strong>. This represents the light bouncing on surrounding objects that is lighting the shaded surface. There are several techniques to implement global illumination, but the most common is <strong>Image Based Lighting (IBL)</strong>. It is very often associated with PBR pipelines.</p>
</div>
<div class="paragraph">
<p>So basically, a light source in game is a color, and optionally other parameters like direction, position, radius, etc… An image has color information, and this color can be considered as a light source.</p>
</div>
<div class="paragraph">
<p>For global Illumination light is coming from everywhere. So a good way to simulate GI with IBL is to consider an environment map as a light source.</p>
</div>
<div class="sect2">
<h3 id="reminder-on-environment-maps"><a class="anchor" href="#reminder-on-environment-maps"></a>Reminder on environment maps :</h3>
<div class="paragraph">
<p>Most often, in-game environment maps are cube maps.</p>
</div>
<div class="paragraph">
<p>How do we fetch a pixel from an environment map? We need a vector. Often called the reflect vector (refVec), because that&#8217;s the reflection vector of the view direction on the shaded surface.</p>
</div>
<div class="paragraph">
<p>A picture worth thousand words</p>
</div>
<div class="imageblock text-center">
<div class="content">
<img src="../../../_images/how-to/articles/pbr/Cube_mapped_reflection_example.jpg" alt="Cube_mapped_reflection_example" width="320" height="250">
</div>
</div>
<div class="paragraph">
<p>from wikipedia : TopherTH at the English language Wikipedia [GFDL (<a href="http://www.gnu.org/copyleft/fdl.html" class="bare">http://www.gnu.org/copyleft/fdl.html</a>), GFDL (<a href="http://www.gnu.org/copyleft/fdl.html" class="bare">http://www.gnu.org/copyleft/fdl.html</a>) or CC-BY-SA-3.0 (<a href="http://creativecommons.org/licenses/by-sa/3.0/" class="bare">http://creativecommons.org/licenses/by-sa/3.0/</a>)], via Wikimedia Commons Here the reflected Ray is our reflection vector.</p>
</div>
<div class="paragraph">
<p>Here the reflected Ray is our reflection vector.</p>
</div>
<div class="paragraph">
<p>Unfortunately we can’t take each pixel of the env map and compute light as if it was a direct light source and hope for the best.</p>
</div>
<div class="paragraph">
<p>There’s crazy math around that topic, and to be honest I didn’t get all of it myself. So instead of explaining difficult math equations that may be confusing, I’m gonna go straight to the point : How are we going to compute lighting from the environment map?</p>
</div>
</div>
<div class="sect2">
<h3 id="ibl-diffuse"><a class="anchor" href="#ibl-diffuse"></a>IBL Diffuse</h3>
<div class="paragraph">
<p>First we need to compute Diffuse factor from the environment map. Remember our diffuse BRDF from last post? <strong>Lambert</strong>.</p>
</div>
<div class="paragraph">
<p>To simplify, Lambert diffuse BRDF, as it’s used in game, is the light color multiplied by a visibility factor.</p>
</div>
<div class="paragraph">
<p>This visibility factor is a function of the normal of the shaded geometry and the light direction.</p>
</div>
<div class="paragraph">
<p>Let’s say you have a direct light source lighting the front side of a geometry. The back side of this geometry is in the dark. Meaning the front side visibility factor is 1 and the back side visibility factor is 0.</p>
</div>
<div class="paragraph">
<p>For indirect lighting, we can ditch out this visibility factor because the light is coming from everywhere. So all of this simplifies in Diffuse factor = light color.</p>
</div>
<div class="paragraph">
<p>But what’s the light color for a given point?</p>
</div>
<div class="paragraph">
<p>Technically, every pixel in the environment map is a light source, so a shaded point is lighten by a vast amount of pixels.</p>
</div>
<div class="imageblock text-center">
<div class="content">
<img src="../../../_images/how-to/articles/pbr/irradiance.png" alt="irradiance" width="320" height="250">
</div>
</div>
<div class="paragraph">
<p>In this picture the orange area represent the light rays coming from the cube map to the shaded pixel, that we have to consider to properly compute the light color. So the idea would be, for each shaded pixel, to fetch all that texels and combine the colors.</p>
</div>
<div class="paragraph">
<p>As you can image that’s not practical for a real time rendering pipeline. Even with a 128×128 env map that’s around 50k texture fetches per pixel.</p>
</div>
<div class="paragraph">
<p>Fortunately, We can use something called an <strong>Irradiance map</strong>. An irradiance map is basically the afford mentioned computation…except that it’s precomputed and baked into a texture. In practice here is what it looks like.</p>
</div>
<div class="imageblock text-center">
<div class="content">
<img src="../../../_images/how-to/articles/pbr/irradianceMap.png" alt="irradianceMap" width="320" height="250">
</div>
</div>
<div class="paragraph">
<p>On the left the original cube map, on the right, the pre computed irradiance map.</p>
</div>
<div class="paragraph">
<p>So at run time you just have to do one texture fetch in that map with the reflection vector. Pretty cool heh?</p>
</div>
<div class="paragraph">
<p>Except that to pre-compute that map we still have to sample the cube map literally billions of times, and even if it’s at design time…it’s painfully long.</p>
</div>
<div class="paragraph">
<p><strong>Spherical Harmonics (SH) to the rescue</strong></p>
</div>
<div class="paragraph">
<p>What’s that again? I won’t go into explaining them in details (because I can’t actually ;-P ), but just know that it’s once again some math magic with a big name on it. Here is a post where it’s explained with simple words, in terms of what you can use them for.</p>
</div>
<div class="paragraph">
<p>To put it simple, SH can help us to compute the irradiance map way faster. This article explains that it all boils down to compute only 9 spherical harmonics coefficients to efficiently approximate an irradiance factor.</p>
</div>
<div class="paragraph">
<p>At this point you can even skip the pre computation of the irradiance map, and use those coefficients directly in your shader for each shaded pixels. That’s fast enough to be real time, and use less memory than a cube map.</p>
</div>
<div class="paragraph">
<p>But still…it’s slower than one texture fetch, so I chose to compute the Irradiance map and use it in the shader.</p>
</div>
<div class="paragraph">
<p>With this technique I can compute a 128X128 irradiance cube map on the CPU in Java in about 200ms. Too slow to be done on each frame, but at design time that’s the blink of an eye.</p>
</div>
<div class="imageblock text-center">
<div class="content">
<img src="../../../_images/how-to/articles/pbr/DiffuseIBL.png" alt="DiffuseIBL" width="320" height="250">
</div>
</div>
<div class="paragraph">
<p>Here is the diffuse effect of indirect lighting using an irradiance cube map</p>
</div>
</div>
<div class="sect2">
<h3 id="ibl-specular"><a class="anchor" href="#ibl-specular"></a>IBL Specular</h3>
<div class="paragraph">
<p>Indirect diffuse is cool, but we want &#8220;shiny&#8221;!! Shiny implies specular lighting.</p>
</div>
<div class="paragraph">
<p>It’s important to understand what we want as a specular reflection. We want it to be very neat when the roughness is low and very blurry when it’s high.</p>
</div>
<div class="imageblock text-center">
<div class="content">
<img src="../../../_images/how-to/articles/pbr/Roughness.png" alt="Roughness" width="320" height="250">
</div>
</div>
<div class="paragraph">
<p>As roughness increase the reflection gets more blurry.</p>
</div>
<div class="paragraph">
<p>To do this, we have to resolve an integral called the <strong>radiance integral.</strong></p>
</div>
<div class="paragraph">
<p>There is a method to do it quite fast that is called <strong>importance sampling</strong>. However it requires a lot of samples to get correct results, and therefore it’s pretty slow.</p>
</div>
<div class="paragraph">
<p>As an example, for the previous shot, I was using this method, with 1024 samples. It was barely interactive, because it ran at 16 fps on a GTX 670.</p>
</div>
</div>
<div class="sect2">
<h3 id="thanks-epic-games"><a class="anchor" href="#thanks-epic-games"></a>Thanks Epic games!</h3>
<div class="paragraph">
<p>Epic games came with a solution to this issue for Unreal Engine 4. Others did too, actually, but Epic games made it public in this paper, from Brian Karis. I can’t thank them enough for this.</p>
</div>
<div class="paragraph">
<p>In this <a href="http://blog.selfshadow.com/publications/s2013-shading-course/karis/s2013_pbs_epic_notes_v2.pdf">paper</a>, they explain how they do it in UE4. They use a method they called the <strong>Split Sum Approximation</strong>. It doesn’t make the computation faster, but it transforms it so that it can be baked in two prefiltered textures.</p>
</div>
<div class="ulist">
<ul>
<li>
<p>The prefiltered environment map</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>We are going to pre process an env map on the CPU.</p>
</div>
<div class="paragraph">
<p>As explained before, we need the reflection to be more blurry as the roughness increase. The main idea here is to store different levels of roughness in the env map mip maps. The first mip map level will match roughness = 0 and the last will match roughness = 1.</p>
</div>
<div class="paragraph">
<p>From mip levels to mip levels we’re going to convolve (blur) the images depending on the roughness. The more the roughness increase the more samples we’re going to use, and the more spread out they will be.</p>
</div>
<div class="paragraph">
<p>But that’s not all, we also want to &#8220;bake&#8221; the specular BRDF in the map, so for each pixel we are going to compute the Cook-Torrentz microfacet BRDF (remember last post).</p>
</div>
<div class="paragraph">
<p>But, as we are preprocessing the map, we don’t have any information about the shaded surface normal and view direction. So we are going to assume they are all the same, and equal to the envVector we’ll use to fetch pixels from the map. Also we assume that the shading point is exactly at the center of the cube map.</p>
</div>
<div class="imageblock text-center">
<div class="content">
<img src="../../../_images/how-to/articles/pbr/prefilteredEnvMapSampling.png" alt="prefilteredEnvMapSampling" width="320" height="250">
</div>
</div>
<div class="paragraph">
<p>This is an approximation again, and it has a cost in quality, but we’re all for approximation as long as it’s perform faster while still looking good, right?</p>
</div>
<div class="paragraph">
<p>Here is what the result looks like</p>
</div>
<div class="imageblock text-center">
<div class="content">
<img src="../../../_images/how-to/articles/pbr/PrefilteredEnvMap.png" alt="PrefilteredEnvMap" width="320" height="250">
</div>
</div>
<div class="paragraph">
<p>The prefiltered environment map, with the different mip levels. notice how the blur increases through them.</p>
</div>
<div class="paragraph">
<p>So now we can evaluate the first sum of the split sum approximation with a single texture fetch. We are going to compute the Lod level (the mip level where to fetch the texel) according to the roughness.</p>
</div>
<div class="paragraph">
<p>Note that the image needs to be set up so that textureCube interpolates linearly between mip maps so that if the roughness value is not right on the mip level, it will interpolate between the two closest mip levels.</p>
</div>
<div class="ulist">
<ul>
<li>
<p>The BRDF integration Map</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>Now we need the second sum of the split sum approximation.</p>
</div>
<div class="paragraph">
<p>It’s an integration that has two inputs, the <strong>roughness</strong> that varies from 0 to 1, and the dot product between the normal and the light direction (<strong>N.L</strong>, read N dot L) that also varies from 0 to 1.</p>
</div>
<div class="paragraph">
<p>The outputs are a <strong>scale</strong>, and a <strong>bias</strong>, also varying from 0 to 1.</p>
</div>
<div class="paragraph">
<p>So basically we can bake all combinations into a 2D map. roughness and N.L will be the texture coordinate. the red channel of the map will be the scale, and the green channel will be the bias. (the blue channel is not used)</p>
</div>
<div class="paragraph">
<p>Here is what it looks like :</p>
</div>
<div class="imageblock text-center">
<div class="content">
<img src="../../../_images/how-to/articles/pbr/integrateBrdf.png" alt="integrateBrdf" width="320" height="250">
</div>
</div>
<div class="paragraph">
<p>The nice part is that this map is constant for white light. It does not depends on the environment. So you can bake it once and for all then use it as an asset in your shaders.</p>
</div>
<div class="paragraph">
<p>Now we have to combine values fetched from these maps to get the specular lighting.</p>
</div>
<div class="paragraph">
<p>Here is what indirect specular alone, looks like, with a roughness of 0.1.</p>
</div>
<div class="imageblock text-center">
<div class="content">
<img src="../../../_images/how-to/articles/pbr/IndirectSpeculra.png" alt="IndirectSpeculra" width="320" height="250">
</div>
</div>
<div class="paragraph">
<p><strong>So in the end :</strong></p>
</div>
<div class="paragraph">
<p>Our indirect lighting pseudo code looks like this :</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-none hljs">//diffuse
indirectDiffuse = textureCube(IrradianceMap, refVec)  * diffuseColor

//specular
lod = getMipLevelFromRoughness(roughness)
prefilteredColor =  textureCube(PrefilteredEnvMap, refVec, lod)
envBRDF = texture2D(BRDFIntegrationMap,vec2(roughness, ndotv)).xy
indirectSpecular = prefilteredColor * (specularColor * envBRDF.x + envBRDF.y)

indirectLighting = indirectDiffuse + indirectSpecular</code></pre>
</div>
</div>
<div class="paragraph">
<p>That concludes the post. Quite a lot of information to process. Now you should have an idea of the whole thing. Next time, we are going to go under the hood, and YOU GONNA HAZ CODE!!</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="lexical"><a class="anchor" href="#lexical"></a>Lexical :</h2>
<div class="sectionbody">
<div class="paragraph">
<p><strong>Global Illumination (GI):</strong> A concept that represent all the lighting of a scene that is not coming from a direct light source.</p>
</div>
<div class="paragraph">
<p><strong>Image Based Lighting (IBL):</strong> A technique that uses an image as a light source</p>
</div>
<div class="paragraph">
<p><strong>Irradiance map :</strong> Precomputed environment map that contains diffuse lighting data of the environment.</p>
</div>
<div class="paragraph">
<p><strong>Spherical Harmonics (SH):</strong> <a href="https://dickyjim.wordpress.com/2013/09/04/spherical-harmonics-for-beginners/">Read this</a></p>
</div>
<div class="paragraph">
<p><strong>Importance Sampling :</strong> A math technique to approximate the result of an integral.</p>
</div>
<div class="paragraph">
<p><strong>Split Sum Approximation :</strong> A way,used in Unreal Engine 4, to transform the specular radiance integral into 2 sums that can be easily baked into prefiltered textures.</p>
</div>
</div>
</div>
<nav class="pagination">
  <span class="prev"><a href="pbr_part2.html">PBR – Part two</a></span>
  <span class="next"><a href="../../../../core/app/simpleapplication.html">SimpleApplication</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>