pbr_part1.html 55 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1">
  6. <title>Physically Based Rendering – Part one :: jMonkeyEngine Docs</title>
  7. <link rel="canonical" href="https://wiki.jmonkeyengine.org/docs/3.8/tutorials/how-to/articles/pbr/pbr_part1.html">
  8. <link rel="prev" href="../../java/read_graphic_card_capabilites.html">
  9. <link rel="next" href="pbr_part2.html">
  10. <meta name="generator" content="Antora 3.0.1">
  11. <link rel="stylesheet" href="../../../../../../_/css/site.css">
  12. <meta property="og:image" content="https://wiki.jmonkeyengine.org/_/img/iconx128.png">
  13. <meta property="og:description" content="Physically Based Rendering – Part one">
  14. <meta property="og:title" content="jMonkeyEngine Docs">
  15. <link rel="stylesheet" href="../../../../../../_/css/site-extra.css">
  16. <link rel="stylesheet" href="../../../../../../_/css/vendor/docsearch.min.css">
  17. <!-- fetched from https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css -->
  18. <link rel="icon" href="../../../../../../_/img/favicon.ico" type="image/x-icon">
  19. </head>
  20. <body class="article">
  21. <header class="header">
  22. <nav class="navbar">
  23. <div class="navbar-brand">
  24. <a class="navbar-item" href="https://wiki.jmonkeyengine.org">
  25. <img alt="" src="../../../../../../_/img/jme-logo.png" height="32" type="image/x-icon">
  26. </a>
  27. <div class="navbar-item hide-for-print">
  28. <input id="search-input" type="text" placeholder="Search docs">
  29. </div>
  30. <button class="navbar-burger" data-target="topbar-nav">
  31. <span></span>
  32. <span></span>
  33. <span></span>
  34. </button>
  35. </div>
  36. <div id="topbar-nav" class="navbar-menu">
  37. <div class="navbar-end">
  38. <div class="navbar-item theme-switch-wrapper">
  39. <label class="theme-switch" for="checkbox">
  40. <input type="checkbox" id="checkbox" />
  41. <div class="slider round"></div>
  42. </label>
  43. </div>
  44. <a class="navbar-item" href="https://github.com/jmonkeyengine/wiki">Github</a>
  45. </div>
  46. </div>
  47. </nav>
  48. </header>
  49. <div class="body">
  50. <div class="nav-container" data-component="docs" data-version="3.8">
  51. <aside class="nav">
  52. <div class="panels">
  53. <div class="nav-panel-menu is-active" data-panel="menu">
  54. <nav class="nav-menu">
  55. <h3 class="title"><a href="../../../../documentation.html">JME</a></h3>
  56. <ul class="nav-list">
  57. <li class="nav-item" data-depth="0">
  58. <ul class="nav-list">
  59. <li class="nav-item" data-depth="1">
  60. <a class="nav-link" href="../../../../documentation.html">Getting Started</a>
  61. </li>
  62. <li class="nav-item" data-depth="1">
  63. <a class="nav-link" href="https://javadoc.jmonkeyengine.org/v3.4.1-stable">JavaDoc</a>
  64. </li>
  65. <li class="nav-item" data-depth="1">
  66. <a class="nav-link" href="../../../../release.html">Release Guide</a>
  67. </li>
  68. </ul>
  69. </li>
  70. <li class="nav-item" data-depth="0">
  71. <ul class="nav-list">
  72. <li class="nav-item" data-depth="1">
  73. <button class="nav-item-toggle"></button>
  74. <a class="nav-link" href="../../../beginner/beginner.html">Beginner Tutorials</a>
  75. <ul class="nav-list">
  76. <li class="nav-item" data-depth="2">
  77. <a class="nav-link" href="../../../beginner/hello_simpleapplication.html">Hello SimpleApplication</a>
  78. </li>
  79. <li class="nav-item" data-depth="2">
  80. <a class="nav-link" href="../../../beginner/hello_node.html">Hello Node</a>
  81. </li>
  82. <li class="nav-item" data-depth="2">
  83. <a class="nav-link" href="../../../beginner/hello_asset.html">Hello Asset</a>
  84. </li>
  85. <li class="nav-item" data-depth="2">
  86. <a class="nav-link" href="../../../beginner/hello_main_event_loop.html">Hello Update Loop</a>
  87. </li>
  88. <li class="nav-item" data-depth="2">
  89. <a class="nav-link" href="../../../beginner/hello_input_system.html">Hello Input System</a>
  90. </li>
  91. <li class="nav-item" data-depth="2">
  92. <a class="nav-link" href="../../../beginner/hello_material.html">Hello Material</a>
  93. </li>
  94. <li class="nav-item" data-depth="2">
  95. <a class="nav-link" href="../../../beginner/hello_animation.html">Hello Animation</a>
  96. </li>
  97. <li class="nav-item" data-depth="2">
  98. <a class="nav-link" href="../../../beginner/hello_picking.html">Hello Picking</a>
  99. </li>
  100. <li class="nav-item" data-depth="2">
  101. <a class="nav-link" href="../../../beginner/hello_collision.html">Hello Collision</a>
  102. </li>
  103. <li class="nav-item" data-depth="2">
  104. <a class="nav-link" href="../../../beginner/hello_terrain.html">Hello Terrain</a>
  105. </li>
  106. <li class="nav-item" data-depth="2">
  107. <a class="nav-link" href="../../../beginner/hello_audio.html">Hello Audio</a>
  108. </li>
  109. <li class="nav-item" data-depth="2">
  110. <a class="nav-link" href="../../../beginner/hello_effects.html">Hello Effects</a>
  111. </li>
  112. <li class="nav-item" data-depth="2">
  113. <a class="nav-link" href="../../../beginner/hello_physics.html">Hello Physics</a>
  114. </li>
  115. </ul>
  116. </li>
  117. <li class="nav-item" data-depth="1">
  118. <button class="nav-item-toggle"></button>
  119. <span class="nav-text">Key Concepts</span>
  120. <ul class="nav-list">
  121. <li class="nav-item" data-depth="2">
  122. <a class="nav-link" href="../../../concepts/best_practices.html">Best Practices</a>
  123. </li>
  124. <li class="nav-item" data-depth="2">
  125. <a class="nav-link" href="../../../concepts/optimization.html">Optimization</a>
  126. </li>
  127. <li class="nav-item" data-depth="2">
  128. <a class="nav-link" href="../../../concepts/faq.html">Frequently Asked Questions</a>
  129. </li>
  130. <li class="nav-item" data-depth="2">
  131. <a class="nav-link" href="../../../concepts/math_for_dummies.html">Math for Dummies</a>
  132. </li>
  133. <li class="nav-item" data-depth="2">
  134. <a class="nav-link" href="../../../concepts/math.html">Math overview</a>
  135. </li>
  136. <li class="nav-item" data-depth="2">
  137. <a class="nav-link" href="../../../concepts/math_cheet_sheet.html">3D math "cheat sheet"</a>
  138. </li>
  139. <li class="nav-item" data-depth="2">
  140. <a class="nav-link" href="../../../concepts/rotate.html">3-D Rotation</a>
  141. </li>
  142. <li class="nav-item" data-depth="2">
  143. <a class="nav-link" href="../../../concepts/math_video_tutorials.html">Math video tutorial series</a>
  144. </li>
  145. <li class="nav-item" data-depth="2">
  146. <a class="nav-link" href="../../../concepts/multi-media_asset_pipeline.html">Multi-Media Asset Pipeline</a>
  147. </li>
  148. <li class="nav-item" data-depth="2">
  149. <a class="nav-link" href="../../../concepts/the_scene_graph.html">The Scene Graph</a>
  150. </li>
  151. <li class="nav-item" data-depth="2">
  152. <a class="nav-link" href="../../../concepts/scenegraph_for_dummies.html">Scene Graph for Dummies</a>
  153. </li>
  154. <li class="nav-item" data-depth="2">
  155. <a class="nav-link" href="../../../concepts/terminology.html">3D Graphics Terminology</a>
  156. </li>
  157. <li class="nav-item" data-depth="2">
  158. <a class="nav-link" href="../../../concepts/transparency_sorting.html">Transparency Sorting</a>
  159. </li>
  160. </ul>
  161. </li>
  162. <li class="nav-item" data-depth="1">
  163. <button class="nav-item-toggle"></button>
  164. <span class="nav-text">Articles and How-to&#8217;s</span>
  165. <ul class="nav-list">
  166. <li class="nav-item" data-depth="2">
  167. <button class="nav-item-toggle"></button>
  168. <span class="nav-text">How to Model</span>
  169. <ul class="nav-list">
  170. <li class="nav-item" data-depth="3">
  171. <a class="nav-link" href="../../modeling/3dsmax/3dsmax.html">3dsmax</a>
  172. </li>
  173. <li class="nav-item" data-depth="3">
  174. <button class="nav-item-toggle"></button>
  175. <a class="nav-link" href="../../modeling/blender/blender.html">Blender</a>
  176. <ul class="nav-list">
  177. <li class="nav-item" data-depth="4">
  178. <a class="nav-link" href="../../modeling/blender/blender_buffer_clearing.html">Buffer Clearing</a>
  179. </li>
  180. <li class="nav-item" data-depth="4">
  181. <a class="nav-link" href="../../modeling/blender/blender_gltf.html">Export as GlTF</a>
  182. </li>
  183. <li class="nav-item" data-depth="4">
  184. <a class="nav-link" href="../../modeling/blender/blender_ogre_export.html">Export as Ogre XML</a>
  185. </li>
  186. <li class="nav-item" data-depth="4">
  187. <a class="nav-link" href="../../modeling/blender/blender_ogre_compatibility.html">Ogre Compatibility</a>
  188. </li>
  189. <li class="nav-item" data-depth="4">
  190. <a class="nav-link" href="../../modeling/blender/makehuman.html">MakeHuman</a>
  191. </li>
  192. <li class="nav-item" data-depth="4">
  193. <a class="nav-link" href="../../modeling/blender/makehuman_blender_ogrexml_toolchain.html">MakeHuman toolchain</a>
  194. </li>
  195. </ul>
  196. </li>
  197. </ul>
  198. </li>
  199. <li class="nav-item" data-depth="2">
  200. <button class="nav-item-toggle"></button>
  201. <span class="nav-text">How to Animate</span>
  202. <ul class="nav-list">
  203. <li class="nav-item" data-depth="3">
  204. <button class="nav-item-toggle"></button>
  205. <span class="nav-text">Mixamo</span>
  206. <ul class="nav-list">
  207. <li class="nav-item" data-depth="4">
  208. <a class="nav-link" href="../../modeling/blender/mixamo.html">Blender Models</a>
  209. </li>
  210. </ul>
  211. </li>
  212. </ul>
  213. </li>
  214. <li class="nav-item" data-depth="2">
  215. <a class="nav-link" href="../../debugging.html">Debugging with Wireframes</a>
  216. </li>
  217. <li class="nav-item" data-depth="2">
  218. <a class="nav-link" href="../../util/free_skymaps.html">How to create free skymaps</a>
  219. </li>
  220. <li class="nav-item" data-depth="2">
  221. <button class="nav-item-toggle"></button>
  222. <span class="nav-text">Java Tips</span>
  223. <ul class="nav-list">
  224. <li class="nav-item" data-depth="3">
  225. <a class="nav-link" href="../../java/localization.html">Localization</a>
  226. </li>
  227. <li class="nav-item" data-depth="3">
  228. <a class="nav-link" href="../../java/swing_canvas.html">Swing Canvas</a>
  229. </li>
  230. <li class="nav-item" data-depth="3">
  231. <a class="nav-link" href="../../java/logging.html">Logging</a>
  232. </li>
  233. <li class="nav-item" data-depth="3">
  234. <a class="nav-link" href="../../java/read_graphic_card_capabilites.html">Read Graphics Capabilities</a>
  235. </li>
  236. </ul>
  237. </li>
  238. <li class="nav-item" data-depth="2">
  239. <button class="nav-item-toggle"></button>
  240. <span class="nav-text">Articles</span>
  241. <ul class="nav-list">
  242. <li class="nav-item" data-depth="3">
  243. <button class="nav-item-toggle"></button>
  244. <span class="nav-text">Physically Based Rendering</span>
  245. <ul class="nav-list">
  246. <li class="nav-item is-current-page" data-depth="4">
  247. <a class="nav-link" href="pbr_part1.html">PBR – Part one</a>
  248. </li>
  249. <li class="nav-item" data-depth="4">
  250. <a class="nav-link" href="pbr_part2.html">PBR – Part two</a>
  251. </li>
  252. <li class="nav-item" data-depth="4">
  253. <a class="nav-link" href="pbr_part3.html">PBR – Part three</a>
  254. </li>
  255. </ul>
  256. </li>
  257. </ul>
  258. </li>
  259. </ul>
  260. </li>
  261. </ul>
  262. </li>
  263. <li class="nav-item" data-depth="0">
  264. <ul class="nav-list">
  265. <li class="nav-item" data-depth="1">
  266. <button class="nav-item-toggle"></button>
  267. <span class="nav-text">Core Engine</span>
  268. <ul class="nav-list">
  269. <li class="nav-item" data-depth="2">
  270. <a class="nav-link" href="../../../../core/app/simpleapplication.html">SimpleApplication</a>
  271. </li>
  272. <li class="nav-item" data-depth="2">
  273. <a class="nav-link" href="../../../../core/system/appsettings.html">AppSettings</a>
  274. </li>
  275. </ul>
  276. </li>
  277. <li class="nav-item" data-depth="1">
  278. <button class="nav-item-toggle"></button>
  279. <span class="nav-text">Controlling Game Logic</span>
  280. <ul class="nav-list">
  281. <li class="nav-item" data-depth="2">
  282. <a class="nav-link" href="../../../../core/app/update_loop.html">Update Loop</a>
  283. </li>
  284. <li class="nav-item" data-depth="2">
  285. <a class="nav-link" href="../../../../core/app/state/application_states.html">Application States</a>
  286. </li>
  287. <li class="nav-item" data-depth="2">
  288. <button class="nav-item-toggle"></button>
  289. <a class="nav-link" href="../../../../core/scene/control/custom_controls.html">Custom Controls</a>
  290. <ul class="nav-list">
  291. <li class="nav-item" data-depth="3">
  292. <button class="nav-item-toggle"></button>
  293. <span class="nav-text">Video</span>
  294. <ul class="nav-list">
  295. <li class="nav-item" data-depth="4">
  296. <a class="nav-link" href="https://www.youtube.com/watch?v=MNDiZ9YHIpM">Control any scene node</a>
  297. </li>
  298. <li class="nav-item" data-depth="4">
  299. <a class="nav-link" href="https://www.youtube.com/watch?v=-OzRZscLlHY">Control a character</a>
  300. </li>
  301. <li class="nav-item" data-depth="4">
  302. <a class="nav-link" href="https://wiki.jmonkeyengine.org/Scenes/SDK-UsecaseDemo_1.zip">Video Source Code</a>
  303. </li>
  304. </ul>
  305. </li>
  306. </ul>
  307. </li>
  308. <li class="nav-item" data-depth="2">
  309. <a class="nav-link" href="../../../../core/app/multithreading.html">Multithreading</a>
  310. </li>
  311. </ul>
  312. </li>
  313. <li class="nav-item" data-depth="1">
  314. <button class="nav-item-toggle"></button>
  315. <span class="nav-text">Scene Graph</span>
  316. <ul class="nav-list">
  317. <li class="nav-item" data-depth="2">
  318. <a class="nav-link" href="../../../../core/scene/traverse_scenegraph.html">Traverse SceneGraph</a>
  319. </li>
  320. <li class="nav-item" data-depth="2">
  321. <a class="nav-link" href="../../../../core/scene/spatial.html">Spatial: Node vs Geometry</a>
  322. </li>
  323. <li class="nav-item" data-depth="2">
  324. <button class="nav-item-toggle"></button>
  325. <a class="nav-link" href="../../../../core/scene/mesh.html">Mesh</a>
  326. <ul class="nav-list">
  327. <li class="nav-item" data-depth="3">
  328. <a class="nav-link" href="../../../../core/scene/custom_meshes.html">Custom Meshes</a>
  329. </li>
  330. <li class="nav-item" data-depth="3">
  331. <a class="nav-link" href="../../../../core/scene/shape/shape.html">Shape</a>
  332. </li>
  333. <li class="nav-item" data-depth="3">
  334. <a class="nav-link" href="../../../../core/scene/3d_models.html">3D Models</a>
  335. </li>
  336. </ul>
  337. </li>
  338. <li class="nav-item" data-depth="2">
  339. <a class="nav-link" href="../../../../core/asset/asset_manager.html">Asset Manager</a>
  340. </li>
  341. <li class="nav-item" data-depth="2">
  342. <a class="nav-link" href="../../../../core/export/save_and_load.html">Saving and Loading Nodes</a>
  343. </li>
  344. <li class="nav-item" data-depth="2">
  345. <a class="nav-link" href="../../../../core/collision/collision_and_intersection.html">Collision and Intersection</a>
  346. </li>
  347. <li class="nav-item" data-depth="2">
  348. <a class="nav-link" href="../../../../core/scene/control/level_of_detail.html">Level of Detail</a>
  349. </li>
  350. </ul>
  351. </li>
  352. <li class="nav-item" data-depth="1">
  353. <button class="nav-item-toggle"></button>
  354. <span class="nav-text">Animation, Scene</span>
  355. <ul class="nav-list">
  356. <li class="nav-item" data-depth="2">
  357. <a class="nav-link" href="../../../../core/animation/animation_new.html">Animation with AnimComposer</a>
  358. </li>
  359. <li class="nav-item" data-depth="2">
  360. <a class="nav-link" href="../../../../core/animation/animation.html">Animation-Old (AnimControl)</a>
  361. </li>
  362. <li class="nav-item" data-depth="2">
  363. <a class="nav-link" href="../../../../core/cinematic/cinematics.html">Cinematics (cutscenes, fake destruction physics)</a>
  364. </li>
  365. <li class="nav-item" data-depth="2">
  366. <a class="nav-link" href="../../../../core/cinematic/motionpath.html">MotionPaths and Waypoints</a>
  367. </li>
  368. </ul>
  369. </li>
  370. <li class="nav-item" data-depth="1">
  371. <button class="nav-item-toggle"></button>
  372. <span class="nav-text">Material, Light, Shadow</span>
  373. <ul class="nav-list">
  374. <li class="nav-item" data-depth="2">
  375. <a class="nav-link" href="../../../../core/material/how_to_use_materials.html">How to use Materials</a>
  376. </li>
  377. <li class="nav-item" data-depth="2">
  378. <a class="nav-link" href="../../../../core/material/j3m_material_files.html">.j3m Material Files</a>
  379. </li>
  380. <li class="nav-item" data-depth="2">
  381. <a class="nav-link" href="../../../../core/material/material_definitions.html">.j3md Material Definitions</a>
  382. </li>
  383. <li class="nav-item" data-depth="2">
  384. <a class="nav-link" href="../../../../core/material/materials_overview.html">.j3md Properties</a>
  385. </li>
  386. <li class="nav-item" data-depth="2">
  387. <a class="nav-link" href="../../../../core/shader/jme3_shaders.html">Shaders and JME3</a>
  388. </li>
  389. <li class="nav-item" data-depth="2">
  390. <a class="nav-link" href="../../../../core/shader/jme3_shadernodes.html">Shader Node System</a>
  391. </li>
  392. <li class="nav-item" data-depth="2">
  393. <a class="nav-link" href="../../../../core/shader/shader_video_tutorials.html">Shader Video Tutorials</a>
  394. </li>
  395. <li class="nav-item" data-depth="2">
  396. <a class="nav-link" href="../../../../core/light/light_and_shadow.html">Light and Shadow</a>
  397. </li>
  398. <li class="nav-item" data-depth="2">
  399. <a class="nav-link" href="../../../../core/texture/anisotropic_filtering.html">Anisotropic Filtering</a>
  400. </li>
  401. <li class="nav-item" data-depth="2">
  402. <a class="nav-link" href="../../../../core/system/jme3_srgbpipeline.html">Gamma Correction</a>
  403. </li>
  404. <li class="nav-item" data-depth="2">
  405. <a class="nav-link" href="../../../../core/material/normal_types.html">Normal Map Conventions</a>
  406. </li>
  407. </ul>
  408. </li>
  409. <li class="nav-item" data-depth="1">
  410. <button class="nav-item-toggle"></button>
  411. <span class="nav-text">Audio, Video</span>
  412. <ul class="nav-list">
  413. <li class="nav-item" data-depth="2">
  414. <a class="nav-link" href="../../../../core/audio/audio.html">Playing Sounds</a>
  415. </li>
  416. <li class="nav-item" data-depth="2">
  417. <a class="nav-link" href="../../../../core/audio/audio_environment_presets.html">Audio Environment Presets</a>
  418. </li>
  419. <li class="nav-item" data-depth="2">
  420. <a class="nav-link" href="../../../../core/app/state/screenshots.html">Capture Screenshots</a>
  421. </li>
  422. <li class="nav-item" data-depth="2">
  423. <a class="nav-link" href="../../../../core/app/state/capture_audio_video_to_a_file.html">Capture Audio/Video</a>
  424. </li>
  425. </ul>
  426. </li>
  427. <li class="nav-item" data-depth="1">
  428. <button class="nav-item-toggle"></button>
  429. <span class="nav-text">Filter, Effect</span>
  430. <ul class="nav-list">
  431. <li class="nav-item" data-depth="2">
  432. <a class="nav-link" href="../../../../core/effect/effects_overview.html">Overview</a>
  433. </li>
  434. <li class="nav-item" data-depth="2">
  435. <a class="nav-link" href="../../../../core/effect/bloom_and_glow.html">Bloom and Glow</a>
  436. </li>
  437. <li class="nav-item" data-depth="2">
  438. <a class="nav-link" href="../../../../core/effect/particle_emitters.html">Particle Emitters</a>
  439. </li>
  440. </ul>
  441. </li>
  442. <li class="nav-item" data-depth="1">
  443. <button class="nav-item-toggle"></button>
  444. <span class="nav-text">Landscapes</span>
  445. <ul class="nav-list">
  446. <li class="nav-item" data-depth="2">
  447. <a class="nav-link" href="../../../../core/util/sky.html">Sky</a>
  448. </li>
  449. <li class="nav-item" data-depth="2">
  450. <a class="nav-link" href="../../../../core/terrain/terrain.html">Terrain (TerraMonkey)</a>
  451. </li>
  452. <li class="nav-item" data-depth="2">
  453. <a class="nav-link" href="../../../../core/collision/terrain_collision.html">Terrain Collision</a>
  454. </li>
  455. <li class="nav-item" data-depth="2">
  456. <a class="nav-link" href="../../../../core/effect/water.html">Simple Water</a>
  457. </li>
  458. <li class="nav-item" data-depth="2">
  459. <a class="nav-link" href="../../../../core/effect/post-processor_water.html">Post-Processor Water</a>
  460. </li>
  461. </ul>
  462. </li>
  463. <li class="nav-item" data-depth="1">
  464. <button class="nav-item-toggle"></button>
  465. <span class="nav-text">Camera</span>
  466. <ul class="nav-list">
  467. <li class="nav-item" data-depth="2">
  468. <a class="nav-link" href="../../../../core/renderer/camera.html">Camera</a>
  469. </li>
  470. <li class="nav-item" data-depth="2">
  471. <a class="nav-link" href="../../../../core/renderer/making_the_camera_follow_a_character.html">Follow a Character</a>
  472. </li>
  473. <li class="nav-item" data-depth="2">
  474. <a class="nav-link" href="../../../../core/renderer/remote-controlling_the_camera.html">Remote-Controlling</a>
  475. </li>
  476. <li class="nav-item" data-depth="2">
  477. <a class="nav-link" href="../../../../core/renderer/multiple_camera_views.html">Multiple Camera Views</a>
  478. </li>
  479. <li class="nav-item" data-depth="2">
  480. <a class="nav-link" href="../../../../core/renderer/jme3_renderbuckets.html">Render Buckets</a>
  481. </li>
  482. </ul>
  483. </li>
  484. <li class="nav-item" data-depth="1">
  485. <button class="nav-item-toggle"></button>
  486. <span class="nav-text">Rendering</span>
  487. <ul class="nav-list">
  488. <li class="nav-item" data-depth="2">
  489. <a class="nav-link" href="../../../../core/renderer/render_pipeline.html">Render Pipelines</a>
  490. </li>
  491. </ul>
  492. </li>
  493. <li class="nav-item" data-depth="1">
  494. <button class="nav-item-toggle"></button>
  495. <span class="nav-text">User Interaction</span>
  496. <ul class="nav-list">
  497. <li class="nav-item" data-depth="2">
  498. <a class="nav-link" href="../../../../core/input/input_handling.html">Input Handling</a>
  499. </li>
  500. <li class="nav-item" data-depth="2">
  501. <a class="nav-link" href="../../../../core/input/combo_moves.html">Combo Moves</a>
  502. </li>
  503. <li class="nav-item" data-depth="2">
  504. <a class="nav-link" href="../../../../core/input/mouse_picking.html">Mouse Picking</a>
  505. </li>
  506. </ul>
  507. </li>
  508. <li class="nav-item" data-depth="1">
  509. <button class="nav-item-toggle"></button>
  510. <a class="nav-link" href="../../../../core/gui/topic_gui.html">Graphical User Interface</a>
  511. <ul class="nav-list">
  512. <li class="nav-item" data-depth="2">
  513. <button class="nav-item-toggle"></button>
  514. <span class="nav-text">Nifty GUI</span>
  515. <ul class="nav-list">
  516. <li class="nav-item" data-depth="3">
  517. <a class="nav-link" href="../../../../core/gui/nifty_gui.html">Integration Tutorial</a>
  518. </li>
  519. <li class="nav-item" data-depth="3">
  520. <a class="nav-link" href="../../../../core/gui/nifty_gui_best_practices.html">Best Practices</a>
  521. </li>
  522. <li class="nav-item" data-depth="3">
  523. <a class="nav-link" href="../../../../core/gui/nifty_gui_scenarios.html">Scenarios</a>
  524. </li>
  525. </ul>
  526. </li>
  527. <li class="nav-item" data-depth="2">
  528. <a class="nav-link" href="../../../../core/ui/hud.html">Head-Up Display (HUD)</a>
  529. </li>
  530. </ul>
  531. </li>
  532. <li class="nav-item" data-depth="1">
  533. <button class="nav-item-toggle"></button>
  534. <span class="nav-text">Virtual Reality</span>
  535. <ul class="nav-list">
  536. <li class="nav-item" data-depth="2">
  537. <a class="nav-link" href="../../../../core/vr/virtualreality.html">Virtual Reality</a>
  538. </li>
  539. <li class="nav-item" data-depth="2">
  540. <a class="nav-link" href="../../../../core/vr/legacyOpenVr.html">Virtual Reality Legacy Support</a>
  541. </li>
  542. <li class="nav-item" data-depth="2">
  543. <a class="nav-link" href="../../../../core/vr/virtualrealitycontrollers.html">Virtual Reality Legacy Controller Support</a>
  544. </li>
  545. </ul>
  546. </li>
  547. </ul>
  548. </li>
  549. <li class="nav-item" data-depth="0">
  550. <ul class="nav-list">
  551. <li class="nav-item" data-depth="1">
  552. <button class="nav-item-toggle"></button>
  553. <a class="nav-link" href="../../../../physics/physics.html">Physics</a>
  554. <ul class="nav-list">
  555. <li class="nav-item" data-depth="2">
  556. <a class="nav-link" href="../../../../physics/bullet_multithreading.html">Multi-Threaded Physics</a>
  557. </li>
  558. <li class="nav-item" data-depth="2">
  559. <a class="nav-link" href="../../../../physics/collision/physics_listeners.html">Collision Detection</a>
  560. </li>
  561. <li class="nav-item" data-depth="2">
  562. <a class="nav-link" href="../../../../physics/joint/hinges_and_joints.html">Hinges and Joints</a>
  563. </li>
  564. <li class="nav-item" data-depth="2">
  565. <a class="nav-link" href="../../../../physics/control/walking_character.html">Walking Character</a>
  566. </li>
  567. <li class="nav-item" data-depth="2">
  568. <a class="nav-link" href="../../../../physics/control/ragdoll.html">Ragdoll</a>
  569. </li>
  570. <li class="nav-item" data-depth="2">
  571. <a class="nav-link" href="../../../../physics/control/vehicles.html">Vehicles</a>
  572. </li>
  573. <li class="nav-item" data-depth="2">
  574. <a class="nav-link" href="../../../../physics/control/softbody.html">Softbody</a>
  575. </li>
  576. <li class="nav-item" data-depth="2">
  577. <a class="nav-link" href="../../../../physics/bullet_pitfalls.html">Bullet Physics Pitfalls</a>
  578. </li>
  579. </ul>
  580. </li>
  581. </ul>
  582. </li>
  583. <li class="nav-item" data-depth="0">
  584. <ul class="nav-list">
  585. <li class="nav-item" data-depth="1">
  586. <button class="nav-item-toggle"></button>
  587. <span class="nav-text">Networking</span>
  588. <ul class="nav-list">
  589. <li class="nav-item" data-depth="2">
  590. <a class="nav-link" href="../../../../networking/networking.html">Networking (SpiderMonkey)</a>
  591. </li>
  592. <li class="nav-item" data-depth="2">
  593. <a class="nav-link" href="../../../../networking/headless_server.html">Headless Server</a>
  594. </li>
  595. <li class="nav-item" data-depth="2">
  596. <a class="nav-link" href="../../../../networking/monkey_zone.html">Multi-Player Demo Code</a>
  597. </li>
  598. <li class="nav-item" data-depth="2">
  599. <a class="nav-link" href="../../../../networking/networking_video_tutorials.html">Networking Video Tutorials</a>
  600. </li>
  601. </ul>
  602. </li>
  603. </ul>
  604. </li>
  605. <li class="nav-item" data-depth="0">
  606. <ul class="nav-list">
  607. <li class="nav-item" data-depth="1">
  608. <button class="nav-item-toggle"></button>
  609. <span class="nav-text">User Contributions</span>
  610. <ul class="nav-list">
  611. <li class="nav-item" data-depth="2">
  612. <a class="nav-link" href="../../../../contributions/contributions.html">User Made Utilities</a>
  613. </li>
  614. <li class="nav-item" data-depth="2">
  615. <button class="nav-item-toggle"></button>
  616. <span class="nav-text">Shader</span>
  617. <ul class="nav-list">
  618. <li class="nav-item" data-depth="3">
  619. <a class="nav-link" href="../../../../contributions/shader/shaderblow_project.html">ShaderBlow Project</a>
  620. </li>
  621. </ul>
  622. </li>
  623. <li class="nav-item" data-depth="2">
  624. <button class="nav-item-toggle"></button>
  625. <span class="nav-text">Landscapes</span>
  626. <ul class="nav-list">
  627. <li class="nav-item" data-depth="3">
  628. <a class="nav-link" href="../../../../contributions/lanscapes/vegetationsystem/vegetationsystem.html">Vegetation System</a>
  629. </li>
  630. </ul>
  631. </li>
  632. <li class="nav-item" data-depth="2">
  633. <button class="nav-item-toggle"></button>
  634. <span class="nav-text">Networking</span>
  635. <ul class="nav-list">
  636. <li class="nav-item" data-depth="3">
  637. <a class="nav-link" href="../../../../contributions/networking/open_game_finder.html">Open Game Finder</a>
  638. </li>
  639. </ul>
  640. </li>
  641. <li class="nav-item" data-depth="2">
  642. <button class="nav-item-toggle"></button>
  643. <span class="nav-text">Entity System</span>
  644. <ul class="nav-list">
  645. <li class="nav-item" data-depth="3">
  646. <a class="nav-link" href="#es/entitysystem.adoc">The Zay-ES Entity System</a>
  647. </li>
  648. </ul>
  649. </li>
  650. <li class="nav-item" data-depth="2">
  651. <button class="nav-item-toggle"></button>
  652. <span class="nav-text">Artificial Intelligence</span>
  653. <ul class="nav-list">
  654. <li class="nav-item" data-depth="3">
  655. <a class="nav-link" href="../../../../contributions/ai/recast.html">Recast Navigation</a>
  656. </li>
  657. <li class="nav-item" data-depth="3">
  658. <a class="nav-link" href="../../../../contributions/ai/building_recast.html">Updating and building Recast Native Bindings</a>
  659. </li>
  660. <li class="nav-item" data-depth="3">
  661. <a class="nav-link" href="../../../../contributions/ai/monkey_brains.html">Monkey Brains</a>
  662. </li>
  663. <li class="nav-item" data-depth="3">
  664. <a class="nav-link" href="../../../../contributions/ai/steer_behaviours.html">Steer Behaviours</a>
  665. </li>
  666. <li class="nav-item" data-depth="3">
  667. <a class="nav-link" href="../../../../contributions/ai/jme3_ai.html">jME3 Artificial Intelligence</a>
  668. </li>
  669. </ul>
  670. </li>
  671. <li class="nav-item" data-depth="2">
  672. <button class="nav-item-toggle"></button>
  673. <a class="nav-link" href="../../../../contributions/gui/topic_contributions_gui.html">GUI</a>
  674. <ul class="nav-list">
  675. <li class="nav-item" data-depth="3">
  676. <a class="nav-link" href="../../../../contributions/contributions.html#lemur-gui-library">Lemur - a native jME3 GUI library with scene graph tools</a>
  677. </li>
  678. <li class="nav-item" data-depth="3">
  679. <a class="nav-link" href="../../../../contributions/contributions.html#tonegodgui">tonegodGUI - a native jME3 GUI library</a>
  680. </li>
  681. <li class="nav-item" data-depth="3">
  682. <a class="nav-link" href="../../../../contributions/contributions.html#immediate-graphical-user-interface">Immediate graphical user interface</a>
  683. </li>
  684. </ul>
  685. </li>
  686. <li class="nav-item" data-depth="2">
  687. <button class="nav-item-toggle"></button>
  688. <span class="nav-text">Tools</span>
  689. <ul class="nav-list">
  690. <li class="nav-item" data-depth="3">
  691. <a class="nav-link" href="../../../../contributions/tools/navigation.html">Mercator Projection Tool (Marine Navigation)</a>
  692. </li>
  693. <li class="nav-item" data-depth="3">
  694. <a class="nav-link" href="../../../../contributions/tools/charts.html">Visualizing Maps in JME3 (Marine Charts)</a>
  695. </li>
  696. </ul>
  697. </li>
  698. <li class="nav-item" data-depth="2">
  699. <button class="nav-item-toggle"></button>
  700. <a class="nav-link" href="../../../../contributions/vr/topic_contributions_vr.html">Virtual Reality (And augmented reality)</a>
  701. <ul class="nav-list">
  702. <li class="nav-item" data-depth="3">
  703. <a class="nav-link" href="../../../../contributions/contributions.html#tamarin-openxr">Tamarin OpenXR</a>
  704. </li>
  705. </ul>
  706. </li>
  707. <li class="nav-item" data-depth="2">
  708. <button class="nav-item-toggle"></button>
  709. <span class="nav-text">Projects</span>
  710. <ul class="nav-list">
  711. <li class="nav-item" data-depth="3">
  712. <a class="nav-link" href="../../../../contributions/projects/rise_of_mutants_project.html">Rise of Mutants Project</a>
  713. </li>
  714. </ul>
  715. </li>
  716. </ul>
  717. </li>
  718. </ul>
  719. </li>
  720. <li class="nav-item" data-depth="0">
  721. <ul class="nav-list">
  722. <li class="nav-item" data-depth="1">
  723. <button class="nav-item-toggle"></button>
  724. <a class="nav-link" href="../../../../sdk/sdk.html">SDK</a>
  725. <ul class="nav-list">
  726. <li class="nav-item" data-depth="2">
  727. <button class="nav-item-toggle"></button>
  728. <span class="nav-text">Video Tutorials</span>
  729. <ul class="nav-list">
  730. <li class="nav-item" data-depth="3">
  731. <button class="nav-item-toggle"></button>
  732. <span class="nav-text">SDK Use Case Tutorials</span>
  733. <ul class="nav-list">
  734. <li class="nav-item" data-depth="4">
  735. <a class="nav-link" href="http://www.youtube.com/watch?v=-OzRZscLlHY">Demo 1 (Quixote demo)</a>
  736. </li>
  737. <li class="nav-item" data-depth="4">
  738. <a class="nav-link" href="http://www.youtube.com/watch?v=6-YWxD3JByE">Demo 2 (Models and Materials)</a>
  739. </li>
  740. </ul>
  741. </li>
  742. <li class="nav-item" data-depth="3">
  743. <button class="nav-item-toggle"></button>
  744. <span class="nav-text">SDK Tutorials</span>
  745. <ul class="nav-list">
  746. <li class="nav-item" data-depth="4">
  747. <a class="nav-link" href="http://www.youtube.com/watch?v=M1_0pbeyJzI">Basics</a>
  748. </li>
  749. <li class="nav-item" data-depth="4">
  750. <a class="nav-link" href="http://www.youtube.com/watch?v=nL7woH40i5c">Importing Models</a>
  751. </li>
  752. <li class="nav-item" data-depth="4">
  753. <a class="nav-link" href="http://www.youtube.com/watch?v=DUmgAjiNzhY">Dragging&amp;Dropping Nodes</a>
  754. </li>
  755. <li class="nav-item" data-depth="4">
  756. <a class="nav-link" href="http://www.youtube.com/watch?v=ntPAmtsQ6eM">Scene Composing</a>
  757. </li>
  758. <li class="nav-item" data-depth="4">
  759. <a class="nav-link" href="http://www.youtube.com/watch?v=zgPV3W6dD4s">Terrain with Collision Shape</a>
  760. </li>
  761. <li class="nav-item" data-depth="4">
  762. <a class="nav-link" href="http://www.youtube.com/watch?v=Feu3-mrpolc">Working with Materials</a>
  763. </li>
  764. <li class="nav-item" data-depth="4">
  765. <a class="nav-link" href="http://www.youtube.com/watch?v=MNDiZ9YHIpM">Custom Controls</a>
  766. </li>
  767. <li class="nav-item" data-depth="4">
  768. <a class="nav-link" href="http://www.youtube.com/watch?v=oZnssg8TBWQ">WebStart Deployment</a>
  769. </li>
  770. <li class="nav-item" data-depth="4">
  771. <a class="nav-link" href="http://www.youtube.com/watch?v=D7JM4VMKqPc">Animation and Effect TrackEditing</a>
  772. </li>
  773. </ul>
  774. </li>
  775. </ul>
  776. </li>
  777. <li class="nav-item" data-depth="2">
  778. <button class="nav-item-toggle"></button>
  779. <span class="nav-text">Getting Started</span>
  780. <ul class="nav-list">
  781. <li class="nav-item" data-depth="3">
  782. <a class="nav-link" href="../../../../sdk/update_center.html">Updating jMonkeyEngine SDK</a>
  783. </li>
  784. <li class="nav-item" data-depth="3">
  785. <a class="nav-link" href="../../../../sdk/troubleshooting.html">Troubleshooting</a>
  786. </li>
  787. </ul>
  788. </li>
  789. <li class="nav-item" data-depth="2">
  790. <button class="nav-item-toggle"></button>
  791. <span class="nav-text">Java Development Features</span>
  792. <ul class="nav-list">
  793. <li class="nav-item" data-depth="3">
  794. <a class="nav-link" href="../../../../sdk/project_creation.html">Project Creation</a>
  795. </li>
  796. <li class="nav-item" data-depth="3">
  797. <a class="nav-link" href="../../../../sdk/code_editor.html">Code Editor and Palette</a>
  798. </li>
  799. <li class="nav-item" data-depth="3">
  800. <a class="nav-link" href="../../../../sdk/version_control.html">File Version Control</a>
  801. </li>
  802. <li class="nav-item" data-depth="3">
  803. <a class="nav-link" href="../../../../sdk/debugging_profiling_testing.html">Debug, Profile, Test</a>
  804. </li>
  805. <li class="nav-item" data-depth="3">
  806. <button class="nav-item-toggle"></button>
  807. <a class="nav-link" href="../../../../sdk/application_deployment.html">Application Deployment</a>
  808. <ul class="nav-list">
  809. <li class="nav-item" data-depth="4">
  810. <a class="nav-link" href="../../../../sdk/default_build_script.html">Default Build Script</a>
  811. </li>
  812. <li class="nav-item" data-depth="4">
  813. <a class="nav-link" href="../../../../sdk/android.html">Android</a>
  814. </li>
  815. <li class="nav-item" data-depth="4">
  816. <a class="nav-link" href="../../../../sdk/android_cheat_sheet.html">Android Cheat Sheet</a>
  817. </li>
  818. <li class="nav-item" data-depth="4">
  819. <a class="nav-link" href="../../../../sdk/ios.html">iOS</a>
  820. </li>
  821. </ul>
  822. </li>
  823. </ul>
  824. </li>
  825. <li class="nav-item" data-depth="2">
  826. <button class="nav-item-toggle"></button>
  827. <span class="nav-text">Unique Features</span>
  828. <ul class="nav-list">
  829. <li class="nav-item" data-depth="3">
  830. <button class="nav-item-toggle"></button>
  831. <a class="nav-link" href="../../../../sdk/model_loader_and_viewer.html">Import, View, Convert Models</a>
  832. <ul class="nav-list">
  833. <li class="nav-item" data-depth="4">
  834. <a class="nav-link" href="../../../../sdk/asset_packs.html">Asset Packs</a>
  835. </li>
  836. </ul>
  837. </li>
  838. <li class="nav-item" data-depth="3">
  839. <a class="nav-link" href="../../../../sdk/scene_explorer.html">The SceneExplorer</a>
  840. </li>
  841. <li class="nav-item" data-depth="3">
  842. <a class="nav-link" href="../../../../sdk/scene_composer.html">Composing a Scene</a>
  843. </li>
  844. <li class="nav-item" data-depth="3">
  845. <a class="nav-link" href="../../../../sdk/terrain_editor.html">Terrain Editor</a>
  846. </li>
  847. <li class="nav-item" data-depth="3">
  848. <a class="nav-link" href="../../../../sdk/sample_code.html">Sample Code</a>
  849. </li>
  850. <li class="nav-item" data-depth="3">
  851. <a class="nav-link" href="../../../../sdk/material_editing.html">Material Editing</a>
  852. </li>
  853. <li class="nav-item" data-depth="3">
  854. <a class="nav-link" href="../../../../sdk/font_creation.html">Creating Bitmap Fonts</a>
  855. </li>
  856. <li class="nav-item" data-depth="3">
  857. <button class="nav-item-toggle"></button>
  858. <a class="nav-link" href="https://hub.jmonkeyengine.org/t/effecttrack-and-audiotrack-editing-in-the-sdk/23378">Audio and Effect Track Editing</a>
  859. <ul class="nav-list">
  860. <li class="nav-item" data-depth="4">
  861. <a class="nav-link" href="https://www.youtube.com/watch?v=D7JM4VMKqPc">Video: Effect and AudioTrack editing in jMonkeyEngine 3 sdk</a>
  862. </li>
  863. </ul>
  864. </li>
  865. <li class="nav-item" data-depth="3">
  866. <a class="nav-link" href="../../../../sdk/filters.html">Post-Processor Filter Editor and Viewer</a>
  867. </li>
  868. <li class="nav-item" data-depth="3">
  869. <a class="nav-link" href="../../../../core/app/state/application_states.html">Application States</a>
  870. </li>
  871. <li class="nav-item" data-depth="3">
  872. <a class="nav-link" href="../../../../core/scene/control/custom_controls.html">Custom Controls</a>
  873. </li>
  874. <li class="nav-item" data-depth="3">
  875. <a class="nav-link" href="../../../../sdk/vehicle_creator.html">Vehicle Creator</a>
  876. </li>
  877. <li class="nav-item" data-depth="3">
  878. <a class="nav-link" href="../../../../sdk/assetbrowser.html">Asset Browser</a>
  879. </li>
  880. <li class="nav-item" data-depth="3">
  881. <a class="nav-link" href="../../../../sdk/animations.html">Animations</a>
  882. </li>
  883. </ul>
  884. </li>
  885. <li class="nav-item" data-depth="2">
  886. <button class="nav-item-toggle"></button>
  887. <span class="nav-text">Advanced Usage</span>
  888. <ul class="nav-list">
  889. <li class="nav-item" data-depth="3">
  890. <a class="nav-link" href="../../../../sdk/build_platform.html">Building jMonkeyEngine SDK</a>
  891. </li>
  892. <li class="nav-item" data-depth="3">
  893. <a class="nav-link" href="../../../../sdk/use_own_jme.html#.adoc">Using your own (modified) version of jME3 in jMonkeyEngine SDK</a>
  894. </li>
  895. <li class="nav-item" data-depth="3">
  896. <a class="nav-link" href="../../../../sdk/increasing_heap_memory.html">Increasing Heap Memory</a>
  897. </li>
  898. <li class="nav-item" data-depth="3">
  899. <a class="nav-link" href="../../../../sdk/log_files.html">Log Files</a>
  900. </li>
  901. </ul>
  902. </li>
  903. <li class="nav-item" data-depth="2">
  904. <button class="nav-item-toggle"></button>
  905. <span class="nav-text">Available external plugins</span>
  906. <ul class="nav-list">
  907. <li class="nav-item" data-depth="3">
  908. <a class="nav-link" href="../../../../contributions/contributions.html">Contributions</a>
  909. </li>
  910. <li class="nav-item" data-depth="3">
  911. <a class="nav-link" href="../../../../sdk/neotexture.html">Neo Texture Editor for procedural textures</a>
  912. </li>
  913. <li class="nav-item" data-depth="3">
  914. <a class="nav-link" href="http://www.youtube.com/watch?v=yS9a9o4WzL8">Video: Mesh Tool &amp; Physics Editor</a>
  915. </li>
  916. </ul>
  917. </li>
  918. <li class="nav-item" data-depth="2">
  919. <button class="nav-item-toggle"></button>
  920. <a class="nav-link" href="../../../../sdk/development.html">Developing plugins for jMonkeyEngine SDK</a>
  921. <ul class="nav-list">
  922. <li class="nav-item" data-depth="3">
  923. <a class="nav-link" href="../../../../sdk/development/setup.html">Creating a plugin</a>
  924. </li>
  925. <li class="nav-item" data-depth="3">
  926. <a class="nav-link" href="../../../../sdk/development/general.html">Creating components</a>
  927. </li>
  928. <li class="nav-item" data-depth="3">
  929. <a class="nav-link" href="../../../../sdk/development/scene.html">The Main Scene</a>
  930. </li>
  931. <li class="nav-item" data-depth="3">
  932. <a class="nav-link" href="../../../../sdk/development/sceneexplorer.html">The Scene Explorer</a>
  933. </li>
  934. <li class="nav-item" data-depth="3">
  935. <a class="nav-link" href="../../../../sdk/development/projects_assets.html">Projects and Assets</a>
  936. </li>
  937. <li class="nav-item" data-depth="3">
  938. <a class="nav-link" href="../../../../sdk/development/extension_library.html">Create a library plugin from a jar file</a>
  939. </li>
  940. <li class="nav-item" data-depth="3">
  941. <a class="nav-link" href="../../../../sdk/development/model_loader.html">Create a new or custom model filetype and loader</a>
  942. </li>
  943. </ul>
  944. </li>
  945. </ul>
  946. </li>
  947. </ul>
  948. </li>
  949. </ul>
  950. </nav>
  951. </div>
  952. <div class="nav-panel-explore" data-panel="explore">
  953. <div class="context">
  954. <span class="title">JME</span>
  955. <span class="version">3.8</span>
  956. </div>
  957. <ul class="components">
  958. <li class="component is-current">
  959. <span class="title">JME</span>
  960. <ul class="versions">
  961. <li class="version is-current">
  962. <a href="../../../../documentation.html">3.8</a>
  963. </li>
  964. <li class="version">
  965. <a href="../../../../../3.4/documentation.html">3.4</a>
  966. </li>
  967. <li class="version">
  968. <a href="../../../../../3.3/documentation.html">3.3</a>
  969. </li>
  970. <li class="version">
  971. <a href="../../../../../3.2/documentation.html">3.2</a>
  972. </li>
  973. </ul>
  974. </li>
  975. <li class="component">
  976. <span class="title">Wiki Contribution</span>
  977. <ul class="versions">
  978. <li class="version">
  979. <a href="../../../../../../docs-wiki/3.8/wiki_contributor.html">3.8</a>
  980. </li>
  981. </ul>
  982. </li>
  983. <li class="component">
  984. <span class="title">Wiki UI</span>
  985. <ul class="versions">
  986. <li class="version">
  987. <a href="../../../../../../wiki-ui/index.html">master</a>
  988. </li>
  989. </ul>
  990. </li>
  991. </ul>
  992. </div>
  993. </div>
  994. </aside>
  995. </div>
  996. <main class="article">
  997. <div class="toolbar" role="navigation">
  998. <button class="nav-toggle"></button>
  999. <nav class="breadcrumbs" aria-label="breadcrumbs">
  1000. <ul>
  1001. <li><a href="../../../../documentation.html">JME</a></li>
  1002. <li>Articles and How-to&#8217;s</li>
  1003. <li>Articles</li>
  1004. <li>Physically Based Rendering</li>
  1005. <li><a href="pbr_part1.html">PBR – Part one</a></li>
  1006. </ul>
  1007. </nav>
  1008. <div class="page-versions">
  1009. <button class="version-menu-toggle" title="Show other versions of page">3.8</button>
  1010. <div class="version-menu">
  1011. <a class="version is-current" href="pbr_part1.html">3.8</a>
  1012. <a class="version" href="../../../../../3.4/tutorials/how-to/articles/pbr/pbr_part1.html">3.4</a>
  1013. <a class="version" href="../../../../../3.3/tutorials/how-to/articles/pbr/pbr_part1.html">3.3</a>
  1014. <a class="version" href="../../../../../3.2/tutorials/how-to/articles/pbr/pbr_part1.html">3.2</a>
  1015. </div>
  1016. </div>
  1017. <div class="edit-this-page"><a href="https://github.com/jMonkeyEngine/wiki/edit/master/docs/modules/tutorials/pages/how-to/articles/pbr/pbr_part1.adoc">Edit this Page</a></div>
  1018. </div>
  1019. <div class="content">
  1020. <article class="doc">
  1021. <h1 class="page">Physically Based Rendering – Part one</h1>
  1022. <div id="preamble">
  1023. <div class="sectionbody">
  1024. <div class="paragraph">
  1025. <p>I’ve been looking at Physically Based Rendering (PBR from now on) since a few weeks, because that’s what all the cool kids are talking about these days. I read almost all the interweb about it and finally somehow wrapped my head around the mechanics behind the concept.</p>
  1026. </div>
  1027. <div class="paragraph">
  1028. <p>None of the papers I read gave me the epiphany though, the understanding came little by little, literally reading some of the papers 10 times.</p>
  1029. </div>
  1030. <div class="paragraph">
  1031. <p>The intent of this series of posts is first to brush up the concept of PBR from the artist point of view (the easy part :D), and then to explain the physical concepts behind it and what you have to understand as a developer.</p>
  1032. </div>
  1033. <div class="paragraph">
  1034. <p>This paper aims to present PBR as I would explain it to my mother. You shouldn’t need a degree in image rendering theories, neither should you need to be a genius to understand what’s coming.</p>
  1035. </div>
  1036. <div class="paragraph">
  1037. <p>There are a lot of papers out there, with a lot of complicated words and equations, that assume a solid background knowledge of image rendering, lighting, shading etc…</p>
  1038. </div>
  1039. <div class="paragraph">
  1040. <p>I won’t assume this here.</p>
  1041. </div>
  1042. <div class="paragraph">
  1043. <p>Of course, I’d like this to be as accurate as possible, so if you have more information, or if explanations are not clear, feel free to chime in.</p>
  1044. </div>
  1045. <div class="paragraph">
  1046. <p><strong>I’m an artist, I want to know what PBR is :</strong></p>
  1047. </div>
  1048. <div class="paragraph">
  1049. <p>So you’re an artist, and have some experience in making assets for games. The most commonly used model for describing a material is the Phong reflection model (from <a href="https://en.wikipedia.org/wiki/Bui_Tuong_Phong">Bui Tuong Phong</a>, a clever guy that died very young).</p>
  1050. </div>
  1051. <div class="paragraph">
  1052. <p>This model describes how light reflects on a material by splitting it in 3 factors: Ambient color, Diffuse color, Specular color. This should sound familiar to 3D game artists.</p>
  1053. </div>
  1054. <div class="paragraph">
  1055. <p>This model is a very rough approximation of what’s really going on when light hit a surface of a real life material, but until then it was pretty much enough for a video game. Of course there are dozens of other models and even modification of Phong model, but this one is the most used, and that’s the one we use in jMonkeyEngine.</p>
  1056. </div>
  1057. <div class="paragraph">
  1058. <p>The issue with this model is that it’s complicated to have a material that looks consistent under different lighting environment.</p>
  1059. </div>
  1060. <div class="ulist">
  1061. <ul>
  1062. <li>
  1063. <p>Ambient is supposed to represent Ambient lighting, being some sort of omnipresent dim light, that tries to fake indirect lighting coming from reflection of light on the surrounding objects.</p>
  1064. </li>
  1065. <li>
  1066. <p>Diffuse is more straightforward: it’s the actual color of the object when it’s under a white light.</p>
  1067. </li>
  1068. <li>
  1069. <p>Specular represent the color of the reflected highlights, and the intensity is driven by a &#8220;shininess&#8221; parameter (at least in jME but that’s pretty common). The issue is that the specular color also drives the intensity because the brighter the color the more intense the specular will be.</p>
  1070. </li>
  1071. </ul>
  1072. </div>
  1073. <div class="paragraph">
  1074. <p>All of this leads to a lot of tweaking to look correct, and may not look as good as it should under a different lighting environment. It also relies heavily on an artist’s best guesses about the material.</p>
  1075. </div>
  1076. <div class="paragraph">
  1077. <p>So here comes Physically Based Rendering. Not that the previous one was not physically based…but whatever, that sounds pretty cool.</p>
  1078. </div>
  1079. <div class="paragraph">
  1080. <p>Everybody has their own way to implement PBR, but every implementation share common goals and concepts.</p>
  1081. </div>
  1082. <div class="paragraph">
  1083. <p><strong>Goals :</strong></p>
  1084. </div>
  1085. <div class="ulist">
  1086. <ul>
  1087. <li>
  1088. <p>Ease the artist’s material workflow.</p>
  1089. </li>
  1090. <li>
  1091. <p>More &#8220;photo realistic&#8221; rendering.</p>
  1092. </li>
  1093. </ul>
  1094. </div>
  1095. <div class="paragraph">
  1096. <p><strong>Concepts :</strong></p>
  1097. </div>
  1098. <div class="ulist">
  1099. <ul>
  1100. <li>
  1101. <p>Every surface has a reflection (specular); even the rougher ones at grazing angles.</p>
  1102. </li>
  1103. <li>
  1104. <p>Energy conservation: a surface cannot reflect more light that it has received.</p>
  1105. </li>
  1106. </ul>
  1107. </div>
  1108. <div class="paragraph">
  1109. <p>This wraps up the entire concept but how does it translate in practice?</p>
  1110. </div>
  1111. <div class="paragraph">
  1112. <p>A material can now be described with 3 parameters :</p>
  1113. </div>
  1114. <div class="paragraph">
  1115. <p><strong>Base color :</strong> Base color is the raw color of the material, it’s also often referred as the Albedo. It’s similar to the Diffuse color you know from Phong model, but with some crucial differences :</p>
  1116. </div>
  1117. <div class="ulist">
  1118. <ul>
  1119. <li>
  1120. <p>It should not contain any shading information. Very often with phong model, Ambient Occlusion (AO) is baked into the diffuse map. Here Base color must be the raw color of the material</p>
  1121. </li>
  1122. <li>
  1123. <p>It does not only influence the diffuse color, but also the specular color of the material.</p>
  1124. </li>
  1125. </ul>
  1126. </div>
  1127. <div class="paragraph">
  1128. <p><strong>Metalness :</strong> The degree of metallicity of the material. What does that mean? is your material rather metallic or rather not (non metallic materials are called dielectric materials in the literature). Some implementation calls that parameter &#8220;specular&#8221;, but I found it pretty misleading as it’s completely different as the specular we know today. In practice, just start out with extreme values to get the feel for it: 1 for metallic, 0 for dielectric.</p>
  1129. </div>
  1130. <div class="imageblock text-center">
  1131. <div class="content">
  1132. <img src="../../../_images/how-to/articles/pbr/metalness.png" alt="metalness" width="320" height="250">
  1133. </div>
  1134. </div>
  1135. <div class="paragraph">
  1136. <p>Here is the same material with metalness of 0 (dielectric) on the left and 1 (metallic) on the right.</p>
  1137. </div>
  1138. <div class="paragraph">
  1139. <p>Of course there are intermediary values, but from my reading, most dielectric material should vary from 0.04 and 0.1, and metallic are usually 1. Those values are based on real life measures and you can find some references about them <a href="https://seblagarde.wordpress.com/2012/04/30/dontnod-specular-and-glossiness-chart/">here</a> and <a href="https://seblagarde.wordpress.com/2014/04/14/dontnod-physically-based-rendering-chart-for-unreal-engine-4/">here</a>. Note that those values are not subject to interpretation, and are &#8220;known&#8221; factors and artist may follow them if they want to keep realistic look.</p>
  1140. </div>
  1141. <div class="paragraph">
  1142. <p><strong>Roughness :</strong> The degree of roughness of the material : Is your material smooth or rough. 0 means smooth, 1 means rough. Some implementations refer to this as Smoothness or Glossiness. That’s essentially the same except it’s the other way around. 1 is smooth and 0 is rough. I find the term &#8220;Roughness&#8221; pretty much self explanatory and doesn’t leave room for misinterpretation.</p>
  1143. </div>
  1144. <div class="imageblock text-center">
  1145. <div class="content">
  1146. <img src="../../../_images/how-to/articles/pbr/Roughness.png" alt="Roughness" width="320" height="250">
  1147. </div>
  1148. </div>
  1149. <div class="paragraph">
  1150. <p>Here is the same material with different level of roughness from 0 (left) to 1 (right). As opposed to metalness, this parameter is very artist driven. The roughness of a material does not really depend on physics, it’s more related to micro scratches, wearing, etc… So that’s where artists should be creative!</p>
  1151. </div>
  1152. <div class="paragraph">
  1153. <p>These parameters are the basics of PBR. Of course, each of them can be stored in a texture, and more common additional parameters can be used.</p>
  1154. </div>
  1155. <div class="paragraph">
  1156. <p><strong>For example :</strong></p>
  1157. </div>
  1158. <div class="ulist">
  1159. <ul>
  1160. <li>
  1161. <p>Normal map : the same as with phong model.</p>
  1162. </li>
  1163. <li>
  1164. <p>AO map : since we can’t bake AO in diffuse anymore, it’s now an extra channel.</p>
  1165. </li>
  1166. </ul>
  1167. </div>
  1168. <div class="paragraph">
  1169. <p>The nice thing is that Metalness, Roughness and AO are grey scaled textures, so basically they only use one channel of a texture. So you can pack those 3 maps in one texture.</p>
  1170. </div>
  1171. <div class="paragraph">
  1172. <p>You can find an example asset that should work in a typical PBR implementation <a href="http://artisaverb.info/PBT.html">here</a>. This page showcases pretty well what the textures should look like.</p>
  1173. </div>
  1174. <div class="paragraph">
  1175. <p>That’s it for PBR from the artist&#8217;s point of view. Next week I’ll explain what’s under the hood for you fellow developers 😉</p>
  1176. </div>
  1177. <div class="paragraph">
  1178. <p><strong>Updates (01/01/2015)</strong></p>
  1179. </div>
  1180. <div class="paragraph">
  1181. <p>Since this post I had some discussions about it and it appears, it lacks some information about the different art pipelines you may come across, the differences and what to expect from them.</p>
  1182. </div>
  1183. <div class="paragraph">
  1184. <p>The post above is about the <strong>Metalness Workflow</strong>.</p>
  1185. </div>
  1186. <div class="paragraph">
  1187. <p>The question I had frequently about it is &#8220;how one specify the specular color if you just have a black and white metalness texture?&#8221;.</p>
  1188. </div>
  1189. <div class="paragraph">
  1190. <p>The answer is you do in the albedo map.</p>
  1191. </div>
  1192. <div class="paragraph">
  1193. <p>In the metalness workflow the albedo map is used for both diffuse color and specular color. When the metalness is zero (dielectric material) the base color is the diffuse color of the material. When the metalness is one (metallic material), the base color is the specular color.</p>
  1194. </div>
  1195. <div class="paragraph">
  1196. <p>So if you wonder what this base color should be, just look at it in the most naive way. &#8220;What color is that thing?&#8221; and don’t care if that’s diffuse or specular.</p>
  1197. </div>
  1198. <div class="paragraph">
  1199. <p>The other common workflow is called the <strong>Specular workflow</strong> as it uses a specular color map instead of the metalness map. In this workflow, the albedo map is the diffuse color, the specular map is the specular color, and you have a gray scale gloss map that is the same as the roughness map but inverted (1 is smooth and 0 is rough).</p>
  1200. </div>
  1201. <div class="paragraph">
  1202. <p>Now there are pro and cons on using one or the other. Here are the main points :</p>
  1203. </div>
  1204. </div>
  1205. </div>
  1206. <div class="sect1">
  1207. <h2 id="metalness-workflow"><a class="anchor" href="#metalness-workflow"></a>Metalness workflow :</h2>
  1208. <div class="sectionbody">
  1209. <div class="paragraph">
  1210. <p><strong>Pros</strong></p>
  1211. </div>
  1212. <div class="ulist">
  1213. <ul>
  1214. <li>
  1215. <p>Use less texture space. Albedo map is an rgba map, metal and roughness can be packed in another rgba map and you have 2 additional channels for whatever you want (AO, cavity, …w/e)</p>
  1216. </li>
  1217. <li>
  1218. <p>Harder to make implausible materials (some may see this as a con thought). it’s not more physically accurate, but you’re sure to follow the energy conservation paradigm.</p>
  1219. </li>
  1220. <li>
  1221. <p>Easier color concept : base color is the color of the material.</p>
  1222. </li>
  1223. </ul>
  1224. </div>
  1225. <div class="paragraph">
  1226. <p><strong>Cons</strong></p>
  1227. </div>
  1228. <div class="ulist">
  1229. <ul>
  1230. <li>
  1231. <p>May produce some white artifacts at the junction between metal and non metal</p>
  1232. </li>
  1233. <li>
  1234. <p>Harder to make implausible materials, not impossible though.</p>
  1235. </li>
  1236. </ul>
  1237. </div>
  1238. </div>
  1239. </div>
  1240. <div class="sect1">
  1241. <h2 id="specular-workflow"><a class="anchor" href="#specular-workflow"></a>Specular workflow</h2>
  1242. <div class="sectionbody">
  1243. <div class="paragraph">
  1244. <p><strong>Pros</strong></p>
  1245. </div>
  1246. <div class="ulist">
  1247. <ul>
  1248. <li>
  1249. <p>Closer to the current phong workflow : diffuse map, specular map. Must be easier for seasoned artists to transition to PBR.</p>
  1250. </li>
  1251. </ul>
  1252. </div>
  1253. <div class="paragraph">
  1254. <p><strong>Cons</strong></p>
  1255. </div>
  1256. <div class="ulist">
  1257. <ul>
  1258. <li>
  1259. <p>You’re in charge of the energy conservation paradigm (may be seen as a + for some).</p>
  1260. </li>
  1261. <li>
  1262. <p>More memory used : 2 rgba textures for diffuse and specular, you may be able to pack glossiness in the alpha channel of specular map, but you have no room left for anything and you may have to use a third texture.</p>
  1263. </li>
  1264. </ul>
  1265. </div>
  1266. <div class="paragraph">
  1267. <p>IMO, the metalness workflow is more suited to real time 3D engine. And as an artist I find it more intuitive.</p>
  1268. </div>
  1269. <div class="paragraph">
  1270. <p>That said, as a developer making his PBR pipeline; especially for an engine mainly used by Indie devs; whatever pipeline you choose, you can’t ignore the other. Free or charged PBR ready model you can find are done with whatever workflow suited the artist. Some conversion are possible, but that’s easier for user to be able to use the model as is. That’s why I decided to support both in my implementation.</p>
  1271. </div>
  1272. </div>
  1273. </div>
  1274. <nav class="pagination">
  1275. <span class="prev"><a href="../../java/read_graphic_card_capabilites.html">Read Graphics Capabilities</a></span>
  1276. <span class="next"><a href="pbr_part2.html">PBR – Part two</a></span>
  1277. </nav>
  1278. </article>
  1279. <aside class="toc sidebar" data-title="Contents" data-levels="2">
  1280. <div class="toc-menu"></div>
  1281. </aside>
  1282. </div>
  1283. </main>
  1284. </div>
  1285. <footer class="footer">
  1286. <p>Copyright 2020 jMonkeyEngine Wiki Contributors. Licensed BSD-3.</p>
  1287. </footer>
  1288. <script src="../../../../../../_/js/vendor/docsearch.min.js"></script>
  1289. <!-- fetched from https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js -->
  1290. <script>
  1291. var search = docsearch({
  1292. apiKey: 'a736b6d93de805e26ec2f49b55013fbd',
  1293. indexName: 'jmonkeyengine',
  1294. inputSelector: '#search-input',
  1295. autocompleteOptions: { hint: false, keyboardShortcuts: ['s'] },
  1296. algoliaOptions: { hitsPerPage: 10 }
  1297. }).autocomplete
  1298. search.on('autocomplete:closed', function () { search.autocomplete.setVal() })
  1299. function focusSearchInput () { document.querySelector('#search-input').focus() }
  1300. if (document.querySelector('.home-link.is-current')) window.addEventListener('load', focusSearchInput)
  1301. </script>
  1302. <script src="../../../../../../_/js/site.js"></script>
  1303. <script async src="../../../../../../_/js/vendor/highlight.js"></script>
  1304. </body>
  1305. </html>