index.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564
  1. <!DOCTYPE html>
  2. <html lang="en-us">
  3. <head>
  4. <title>jMonkeyEngine | Grizeldi&#39;s PBR Tutorial #1 - The Basics</title>
  5. <meta name="viewport" content="width=device-width,minimum-scale=1">
  6. <meta name="description"
  7. content="jMonkeyEngine is a modern developer friendly game engine written primarily in Java. ">
  8. <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  9. <link rel="stylesheet" href="/css/style.css">
  10. <meta name="twitter:card" content="summary"/>
  11. <meta name="twitter:title" content="Grizeldi&#39;s PBR Tutorial #1 - The Basics"/>
  12. <meta name="twitter:description" content="A continuing YouTube series helping users take leap from using the regular Lighting.j3md material to PbrLighting.j3md.
  13. First part of my tutorial series in which I explain how to use jmonkeyengine&rsquo;s Physically Based Rendering pipeline. Intended for people who already understand how to use the regular Lighting.j3md shader, but have no idea how PBR works. "/>
  14. <meta property="og:title" content="Grizeldi&#39;s PBR Tutorial #1 - The Basics" />
  15. <meta property="og:description" content="A continuing YouTube series helping users take leap from using the regular Lighting.j3md material to PbrLighting.j3md.
  16. First part of my tutorial series in which I explain how to use jmonkeyengine&rsquo;s Physically Based Rendering pipeline. Intended for people who already understand how to use the regular Lighting.j3md shader, but have no idea how PBR works. " />
  17. <meta property="og:type" content="article" />
  18. <meta property="og:url" content="https://jmonkeyengine.org/tutorials/grizeldi-pbr-tutorials/pbr_tutorial/" /><meta property="article:section" content="tutorials" />
  19. <meta property="article:published_time" content="2019-01-18T08:00:00+00:00" />
  20. <meta property="article:modified_time" content="2019-01-18T08:00:00+00:00" />
  21. <meta itemprop="name" content="Grizeldi&#39;s PBR Tutorial #1 - The Basics">
  22. <meta itemprop="description" content="A continuing YouTube series helping users take leap from using the regular Lighting.j3md material to PbrLighting.j3md.
  23. First part of my tutorial series in which I explain how to use jmonkeyengine&rsquo;s Physically Based Rendering pipeline. Intended for people who already understand how to use the regular Lighting.j3md shader, but have no idea how PBR works. "><meta itemprop="datePublished" content="2019-01-18T08:00:00+00:00" />
  24. <meta itemprop="dateModified" content="2019-01-18T08:00:00+00:00" />
  25. <meta itemprop="wordCount" content="54">
  26. <meta itemprop="keywords" content="pbr,graphics,tutorials,blog," />
  27. <script src="/js/old-browser.js"></script>
  28. <link rel="stylesheet" href="/css/old-browser.css">
  29. <script src="/highlight/highlight.pack.js"></script>
  30. <script
  31. src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
  32. <link rel="stylesheet" href="/highlight/styles/railscasts.css">
  33. <script type="text/javascript">
  34. hljs.initHighlightingOnLoad();
  35. hljs.initLineNumbersOnLoad();
  36. </script>
  37. <script src="/js/utils.js"></script>
  38. <script src="/js/showcase.js"></script>
  39. <script type="module" src="/js/Main.js"></script>
  40. <script src="https://cdnjs.cloudflare.com/ajax/libs/later/1.2.0/later.min.js" integrity="sha512-4OyNDMl5KLKjS8F1ImVwUvmthM8HkXbR6vMafCmT5zBTd9I/sA3z3zM0JLBosHW6/3K2jq2RoBo/eTUNS2hOGA==" crossorigin="anonymous"></script>
  41. <script src="/js/maintenance/maintenance.js"></script>
  42. <link rel="stylesheet" href="/js/maintenance/maintenance.css">
  43. <script src="/js/christmas/Christmas.js"></script>
  44. <script>
  45. Christmas.init(
  46. "https://jmonkeyengine.org/js/christmas/",
  47. ["figure.githubUser img", 'img.avatar', "#showcase button"],
  48. [
  49. {
  50. type: "attribute",
  51. value: "src",
  52. transform:function(src){
  53. if(src.startsWith("/user_avatar/hub.jmonkeyengine.org/")) {
  54. return src.substring("/user_avatar/hub.jmonkeyengine.org/".length).split("/")[0];
  55. }
  56. return src;
  57. }
  58. },
  59. {
  60. type: "attribute",
  61. value: "title"
  62. },
  63. {
  64. type: "text"
  65. }
  66. ],
  67. ["header img.avatar"]
  68. );
  69. </script>
  70. </head>
  71. <body>
  72. <header> <nav class="responsiveWidth " id="topmenu">
  73. <div class="expandable">
  74. <a href="https://jmonkeyengine.org/" alt-href="https://jmonkeyengine.org/tags,https://jmonkeyengine.org/authors,https://jmonkeyengine.org/devlog,https://jmonkeyengine.org/blog,,https://jmonkeyengine.org/communitylog">
  75. <button class="genericCl responsiveIcon expandable ">
  76. <i class="fas fa-home"></i> <span>Home</span>
  77. </button>
  78. </a>
  79. <a href="https://jmonkeyengine.org/tags/showcase" alt-href="https://jmonkeyengine.org/showcase">
  80. <button class="genericCl responsiveIcon expandable ">
  81. <i class="fas fa-images"></i> <span>Showcase</span>
  82. </button>
  83. </a>
  84. <a href="https://hub.jmonkeyengine.org">
  85. <button class="genericCl responsiveIcon expandable ">
  86. <i class="fab fa-discourse"></i> <span>Discussions</span>
  87. </button>
  88. </a>
  89. <a href="https://library.jmonkeyengine.org" >
  90. <button class="genericCl responsiveIcon expandable ">
  91. <i class="fas fa-puzzle-piece"></i> <span>Library</span>
  92. </button>
  93. </a>
  94. <a href="https://jmonkeyengine.org/docs">
  95. <button class="genericCl responsiveIcon expandable ">
  96. <i class="fas fa-book"></i> <span>Docs</span>
  97. </button>
  98. </a>
  99. <a href="https://jmonkeyengine.org/license">
  100. <button class="genericCl responsiveIcon expandable toggleable toggledOffPortrait">
  101. <i class="fas fa-balance-scale-right"></i> <span>License</span>
  102. </button>
  103. </a>
  104. </div>
  105. <div class="toggleable toggledOffPortrait expandable">
  106. <a href="https://github.com/jMonkeyEngine/jmonkeyengine" rel='noopener noreferrer' target="_blank">
  107. <button class="icon toggleable toggledOffPortrait codeCl expandable " title="Github">
  108. <i class="fab fa-github-square"></i> <span>Github</span>
  109. </button>
  110. </a>
  111. <a href="https://twitter.com/jmonkeyengine" rel='noopener noreferrer' target="_blank">
  112. <button class="icon twitterCl toggleable toggledOffPortrait expandable " title="Follow on Twitter">
  113. <i class="fab fa-twitter"></i> <span>Twitter</span>
  114. </button>
  115. </a>
  116. <a href="https://www.youtube.com/channel/UC-Fs3R5Q6wW_XYspOXGZgPw" rel='noopener noreferrer'
  117. target="_blank">
  118. <button class="icon youtubeCl toggleable toggledOffPortrait expandable " title="Follow on Youtube">
  119. <i class="fab fa-youtube"></i> <span>Youtube</span>
  120. </button>
  121. </a>
  122. <a href="https://discord.gg/Rv8sfVu" rel='noopener noreferrer' target="_blank">
  123. <button class="icon discordCl toggleable toggledOffPortrait expandable " title="Discord">
  124. <i class="fab fa-discord"></i> <span>Discord</span>
  125. </button>
  126. </a>
  127. <a href="https://jmonkeyengine.org/donate" >
  128. <button class="icon donateCl toggleable toggledOffPortrait expandable " title="Donate">
  129. <i class="fas fa-donate"></i> <span>Donate!</span>
  130. </button>
  131. </a>
  132. </div>
  133. </nav>
  134. <script>
  135. !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.stringSimilarity=e():t.stringSimilarity=e()}(self,(function(){return t={138:t=>{function e(t,e){if((t=t.replace(/\s+/g,""))===(e=e.replace(/\s+/g,"")))return 1;if(t.length<2||e.length<2)return 0;let r=new Map;for(let e=0;e<t.length-1;e++){const n=t.substring(e,e+2),o=r.has(n)?r.get(n)+1:1;r.set(n,o)}let n=0;for(let t=0;t<e.length-1;t++){const o=e.substring(t,t+2),s=r.has(o)?r.get(o):0;s>0&&(r.set(o,s-1),n++)}return 2*n/(t.length+e.length-2)}t.exports={compareTwoStrings:e,findBestMatch:function(t,r){if(!function(t,e){return"string"==typeof t&&!!Array.isArray(e)&&!!e.length&&!e.find((function(t){return"string"!=typeof t}))}(t,r))throw new Error("Bad arguments: First argument should be a string, second should be an array of strings");const n=[];let o=0;for(let s=0;s<r.length;s++){const i=r[s],f=e(t,i);n.push({target:i,rating:f}),f>n[o].rating&&(o=s)}return{ratings:n,bestMatch:n[o],bestMatchIndex:o}}}}},e={},function r(n){if(e[n])return e[n].exports;var o=e[n]={exports:{}};return t[n](o,o.exports,r),o.exports}(138);var t,e}));
  136. window.initJmeMenu=function () {
  137. const selectionClass= window.selectedTopMenuClass || "highlightedCl";
  138. const topmenu = document.querySelector('#topmenu');
  139. if (window.location.href.startsWith("http://localhost:1313")) {
  140. for (const a of topmenu.querySelectorAll("a")) {
  141. a.href = a.href.replace("https://jmonkeyengine.org", "http://localhost:1313");
  142. }
  143. }
  144. const likelyScore=[];
  145. for (const a of topmenu.querySelectorAll("a")) {
  146. const pageUrl=window.location.href.endsWith("/")?window.location.href.substring(0,window.location.href.length-1):window.location.href;
  147. const process = (linkUrls) => {
  148. if(!linkUrls)return;
  149. for(let linkUrl of linkUrls){
  150. if (linkUrl != null) {
  151. if (window.location.href.startsWith("http://localhost:1313")) {
  152. linkUrl = linkUrl.replace("https://jmonkeyengine.org", "http://localhost:1313");
  153. }
  154. if (linkUrl.endsWith("/")) {
  155. linkUrl = linkUrl.substring(0, linkUrl.length - 1);
  156. }
  157. const score = stringSimilarity.compareTwoStrings(linkUrl, pageUrl);
  158. likelyScore.push(
  159. {
  160. score: score,
  161. el: a.querySelector("button")
  162. }
  163. );
  164. }
  165. }
  166. }
  167. process([a.href]);
  168. process(a.getAttribute("alt-href")?a.getAttribute("alt-href").split(","):undefined);
  169. }
  170. likelyScore.sort((a, b) => b.score - a.score);
  171. likelyScore.forEach(el=>el.el.classList.remove(selectionClass));
  172. likelyScore[0].el.classList.add(selectionClass);
  173. };
  174. document.addEventListener('DOMContentLoaded', function(){
  175. window.initJmeMenu();
  176. });
  177. </script>
  178. <div id="siteTitle" class="list hlist responsiveWidth">
  179. <div id="logo">
  180. <a href="/">
  181. <img src="/images/jme-logo.png" />
  182. </a>
  183. <i class="toggleNavOnPortraitButton fas fa-bars" toggle="topmenu"></i>
  184. </div>
  185. <div id="contributionsBanner">
  186. <div> <i class="fas fa-donate"></i>
  187. Backed by:
  188. <a rel='noopener nofollow noreferrer' target="_blank" id="backerName">The Community</a>
  189. <a rel='noopener nofollow noreferrer' target="_blank"
  190. href="https://opencollective.com/jmonkeyengine#section-contributors"> and more...</a>
  191. </div>
  192. <div>
  193. <i class="fab fa-github-alt"></i>
  194. Contributed by:
  195. <a rel='noopener nofollow noreferrer' target="_blank" id="contributorName">The Community</a>
  196. <a rel='noopener nofollow noreferrer' target="_blank"
  197. href="https://github.com/jMonkeyEngine/jmonkeyengine/graphs/contributors">and more...</a>
  198. </div>
  199. </div>
  200. </div>
  201. </header>
  202. <main>
  203. <section id="showcase" mode="banner">
  204. <i id="playButton" class=" fas fa-play"></i>
  205. <div class="showcaseElement" style='display: block '>
  206. <div class="cover blur" style ="background-image: url('/images/showcase/depthris/6.webp'); " ></div>
  207. <div class="cover" style ="background-image: url('/images/showcase/depthris/6.webp'); " ></div>
  208. </div>
  209. <div class="showcaseElement" style='display: none '>
  210. <div class="cover blur" lazy="true" lazy-style ="background-image: url('/images/showcase/depthris/4.webp'); " ></div>
  211. <div class="cover" lazy="true" lazy-style ="background-image: url('/images/showcase/depthris/4.webp'); " ></div>
  212. </div>
  213. <div class="showcaseElement" style='display: none '>
  214. <div class="cover blur" lazy="true" lazy-style ="background-image: url('/images/showcase/depthris/3.webp'); " ></div>
  215. <div class="cover" lazy="true" lazy-style ="background-image: url('/images/showcase/depthris/3.webp'); " ></div>
  216. </div>
  217. <div class="showcaseElement" style='display: none '>
  218. <div class="cover blur" lazy="true" lazy-style ="background-image: url('/images/showcase/depthris/5.webp'); " ></div>
  219. <div class="cover" lazy="true" lazy-style ="background-image: url('/images/showcase/depthris/5.webp'); " ></div>
  220. </div>
  221. <div class="showcaseElement" style='display: none '>
  222. <div class="cover blur" lazy="true" lazy-style ="background-image: url('/images/showcase/depthris/2.webp'); " ></div>
  223. <div class="cover" lazy="true" lazy-style ="background-image: url('/images/showcase/depthris/2.webp'); " ></div>
  224. </div>
  225. <div class="showcaseElement" style='display: none '>
  226. <div class="cover blur" lazy="true" lazy-style ="background-image: url('/images/showcase/depthris/1.webp'); " ></div>
  227. <div class="cover" lazy="true" lazy-style ="background-image: url('/images/showcase/depthris/1.webp'); " ></div>
  228. </div>
  229. <div class="responsiveWidth" id="engineDescription">
  230. jMonkeyEngine is a modern developer friendly game engine written primarily in Java.
  231. <br />
  232. Its minimalistic and code first approach makes it perfect for developers who want the support of a game engine
  233. while retaining full control over their code with the ability to extend and adapt the engine to their workflow.
  234. <br />
  235. <br />
  236. <br />
  237. <a href="/start/"><button id="startbtn" class="highlightedCl" ><i class="fas fa-rocket"></i> Get Started </button></a>
  238. <a href="/#features" title="overview"><button id="startbtn" class="highlightedCl"><i class="fas fa-question-circle" style="padding:0"></i></button></a>
  239. <br />
  240. <br />
  241. </div>
  242. <div class="responsiveWidth" >
  243. <div id="gameDescription" >
  244. <h2><i class="far fa-images" ></i> DEPTHRIS powered by jMonkeyEngine</h2>
  245. 3D puzzle game inspired by the classic title for DOS.
  246. Move and rotate the pieces so they fit in the spaces and fill as much floors as possibles.
  247. But on each level, the pieces will start falling …
  248. <br />
  249. <a class="readMore" href="/showcase/depthris/#showcase">See game page </a>
  250. </div>
  251. </div>
  252. </section>
  253. <br/>
  254. <section class="message list vlist">
  255. <div>
  256. <blockquote class="list vlist responsive">
  257. <span id="backerMessage">-</span>
  258. <i><a rel='noopener nofollow noreferrer' target="_blank" id="backerMessageName">-</a> </i>
  259. </blockquote>
  260. <a href="https://opencollective.com/jmonkeyengine">Become a
  261. backer and leave a message...</a>
  262. </div>
  263. </section>
  264. <br/>
  265. <a id="content"></a>
  266. <section class="full responsiveWidth">
  267. <article>
  268. <h1 >
  269. <i class="fas fa-paragraph useless"></i>
  270. <a href="/tutorials/grizeldi-pbr-tutorials/pbr_tutorial/">Grizeldi&#39;s PBR Tutorial #1 - The Basics</a></h1>
  271. <div class="content">
  272. <span>
  273. <p>A continuing YouTube series helping users take leap from using the regular <code>Lighting.j3md</code> material to <code>PbrLighting.j3md</code>.</p>
  274. <hr>
  275. <h3 id="first-part-of-my-tutorial-series-in-which-i-explain-how-to-use-jmonkeyengines-physically-based-rendering-pipeline-intended-for-people-who-already-understand-how-to-use-the-regular-lightingj3md-shader-but-have-no-idea-how-pbr-works">First part of my tutorial series in which I explain how to use jmonkeyengine&rsquo;s Physically Based Rendering pipeline. Intended for people who already understand how to use the regular Lighting.j3md shader, but have no idea how PBR works.</h3>
  276. <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  277. <iframe src="https://www.youtube.com/embed/miXbF6cBsSw" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"></iframe>
  278. </div>
  279. </span>
  280. <nav>
  281. <ul class="tags smaller">
  282. <h3 class="tags">Tags</h3>
  283. <li><a class="pbr" href="/tags/pbr"><i class="fas fa-hashtag"></i>pbr</a></li>
  284. <li><a class="graphics" href="/tags/graphics"><i class="fas fa-hashtag"></i>graphics</a></li>
  285. <li><a class="tutorials" href="/tags/tutorials"><i class="fas fa-hashtag"></i>tutorials</a></li>
  286. <li><a class="blog" href="/tags/blog"><i class="fas fa-hashtag"></i>blog</a></li>
  287. </ul>
  288. <ul class="authors smaller">
  289. <h3 class="authors">Authors</h3>
  290. <li><a class="grizeldi" href="/authors/grizeldi"><i class="fas fa-at"></i>grizeldi</a></li>
  291. </ul>
  292. <ul class="postedDate smaller">
  293. <h3 class="postedDate">Date</h3>
  294. <li><time datetime="2019-01-18 08:00:00 &#43;0000 UTC"><i class="fas fa-calendar"></i>18 January 2019</time> </li>
  295. </ul>
  296. <ul class="share">
  297. <h3 class="share">Share</h3>
  298. <li>
  299. <button><a href="https://twitter.com/share?ref_src=twsrc%5Etfw&text=A%20continuing%20YouTube%20series%20helping%20users%20take%20leap%20from%20using%20the%20regular%20Lighting.j3md%20material%20to%20PbrLighting.j3md.%0aFirst%20part%20of%20my%20tutorial%20%e2%80%a6 " >
  300. <i class="fab fa-twitter-square"></i> Share on Twitter</a></button></li>
  301. </ul>
  302. </nav>
  303. </div>
  304. </article>
  305. </section>
  306. <section class="full responsiveWidth">
  307. <article>
  308. <h1 id="comments"><i class="useless fas fa-comments"></i> Comments</h1>
  309. <div class="content" id='discourse-comments'></div>
  310. <script type="text/javascript">
  311. var eurl=window.location.href ;
  312. eurl=eurl.split("#")[0];
  313. eurl=eurl.split("?")[0];
  314. eurl=eurl.trim();
  315. if(eurl.endsWith("/index.html"))eurl=eurl.substring(0,eurl.length-"/index.html".length).trim();
  316. if(eurl.charAt(eurl.length-1)=="/") eurl=eurl.substring(0,eurl.length-1);
  317. if(eurl.startsWith("http://")) eurl="https://"+eurl.substring("http://".length);
  318. if(eurl.endsWith("/communitylog/new-website")){
  319. eurl+="/#content";
  320. }
  321. DiscourseEmbed = {
  322. discourseUrl: 'https://hub.jmonkeyengine.org/',
  323. discourseEmbedUrl: eurl
  324. };
  325. (function() {
  326. var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
  327. d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
  328. (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
  329. })();
  330. </script>
  331. </article>
  332. </section>
  333. </main>
  334. <footer>
  335. © 2020 jMonkeyEngine.
  336. All other trademarks, logos and featured content are property of their respective owners.
  337. <br />
  338. <a title="Github repo" rel='noopener nofollow noreferrer' target="_blank"
  339. href="https://github.com/jMonkeyEngine/jmonkeyengine-website">
  340. <i class="fab fa-github"></i> Source on Github
  341. </a>
  342. |
  343. <a title="Report issue" rel='noopener nofollow noreferrer' target="_blank"
  344. href="https://github.com/jMonkeyEngine/jmonkeyengine-website/issues">
  345. <i class="fas fa-bug"></i> Report an issue
  346. </a>
  347. <br />
  348. <br />
  349. Website designed and developed by
  350. <a href="https://github.com/riccardobl">Riccardo Balbo</a>
  351. for the jMonkeyEngine's Community.
  352. </footer>
  353. <div id="poweredBy" >
  354. <a rel='noopener nofollow noreferrer' target="_blank" href="https://www.macstadium.com/">
  355. <img src="/images/macstadium-logo.png" />
  356. </a>
  357. <a rel='noopener nofollow noreferrer' target="_blank" href="https://www.java.com/">
  358. <img src="/images/java-logo.png" />
  359. </a>
  360. <a rel='noopener nofollow noreferrer' target="_blank" href="https://opengl.org/">
  361. <img src="/images/opengl-logo.png" />
  362. </a>
  363. </div>
  364. </body>
  365. </html>