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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630
							<!DOCTYPE html>
<html lang="en-us">

<head>

  <title>jMonkeyEngine  | Grizeldi&#39;s PBR Tutorial #1 - The Basics</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <meta name="description"
    content="jMonkeyEngine is a modern developer friendly game engine written primarily in Java.  ">
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

  <link rel="stylesheet" href="/css/style.css">

  
  <meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Grizeldi&#39;s PBR Tutorial #1 - The Basics"/>
<meta name="twitter:description" content="A continuing YouTube series helping users take leap from using the regular Lighting.j3md material to PbrLighting.j3md.
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 property="og:title" content="Grizeldi&#39;s PBR Tutorial #1 - The Basics" />
<meta property="og:description" content="A continuing YouTube series helping users take leap from using the regular Lighting.j3md material to PbrLighting.j3md.
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 property="og:type" content="article" />
<meta property="og:url" content="https://jmonkeyengine.org/tutorials/grizeldi-pbr-tutorials/pbr_tutorial/" /><meta property="article:section" content="tutorials" />
<meta property="article:published_time" content="2019-01-18T08:00:00+00:00" />
<meta property="article:modified_time" content="2019-01-18T08:00:00+00:00" />


  <meta itemprop="name" content="Grizeldi&#39;s PBR Tutorial #1 - The Basics">
<meta itemprop="description" content="A continuing YouTube series helping users take leap from using the regular Lighting.j3md material to PbrLighting.j3md.
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" />
<meta itemprop="dateModified" content="2019-01-18T08:00:00+00:00" />
<meta itemprop="wordCount" content="54">
<meta itemprop="keywords" content="pbr,graphics,tutorials,blog," />
  

  <script src="/js/old-browser.js"></script>
  <link rel="stylesheet" href="/css/old-browser.css">
  

  <script src="/highlight/highlight.pack.js"></script>
  <script
    src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
  <link rel="stylesheet" href="/highlight/styles/railscasts.css">
  <script type="text/javascript">
    hljs.initHighlightingOnLoad();
    hljs.initLineNumbersOnLoad();
  </script>
  

  <script src="/js/utils.js"></script>
  <script src="/js/showcase.js"></script>
  <script type="module" src="/js/Main.js"></script>
  

  <script src="https://cdnjs.cloudflare.com/ajax/libs/later/1.2.0/later.min.js" integrity="sha512-4OyNDMl5KLKjS8F1ImVwUvmthM8HkXbR6vMafCmT5zBTd9I/sA3z3zM0JLBosHW6/3K2jq2RoBo/eTUNS2hOGA==" crossorigin="anonymous"></script>
  <script src="/js/maintenance/maintenance.js"></script>
  <link rel="stylesheet" href="/js/maintenance/maintenance.css">
  

  <script src="/js/christmas/Christmas.js"></script>
  <script>
      Christmas.init(
        "https://jmonkeyengine.org/js/christmas/",
        ["figure.githubUser img", 'img.avatar', "#showcase button"],
        [
          {
            type: "attribute",
            value: "src",
            transform:function(src){
              if(src.startsWith("/user_avatar/hub.jmonkeyengine.org/"))  {
                return src.substring("/user_avatar/hub.jmonkeyengine.org/".length).split("/")[0];
              }          
              return src;
            }
          },
          {
            type: "attribute",
            value: "title"
          },
          {
            type: "text"
          }
        ],
        ["header img.avatar"]
      );
  </script>
  

</head>

<body>
  <header> <nav class="responsiveWidth  " id="topmenu">
    <div class="expandable">
        <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">
            <button class="genericCl responsiveIcon expandable ">
                <i class="fas fa-home"></i> <span>Home</span>
            </button>
        </a>
        <a href="https://jmonkeyengine.org/tags/showcase" alt-href="https://jmonkeyengine.org/showcase">
            <button class="genericCl responsiveIcon  expandable ">
                <i class="fas fa-images"></i> <span>Showcase</span>
            </button>
        </a>

        <a href="https://hub.jmonkeyengine.org">
            <button class="genericCl responsiveIcon  expandable ">
                <i class="fab fa-discourse"></i> <span>Discussions</span>
            </button>
        </a>

        <a href="https://library.jmonkeyengine.org" >
            <button class="genericCl responsiveIcon  expandable ">
                <i class="fas fa-puzzle-piece"></i> <span>Library</span>
            </button>
        </a>

        <a href="https://jmonkeyengine.org/docs">
            <button class="genericCl responsiveIcon  expandable ">
                <i class="fas fa-book"></i> <span>Docs</span>
            </button>
        </a>

        <a href="https://jmonkeyengine.org/license">
            <button class="genericCl responsiveIcon  expandable toggleable toggledOffPortrait">
                <i class="fas fa-balance-scale-right"></i> <span>License</span>
            </button>
        </a>
    </div>

    <div class="toggleable toggledOffPortrait expandable">
            <a  href="https://github.com/jMonkeyEngine/jmonkeyengine" rel='noopener noreferrer' target="_blank">
                <button class="icon toggleable toggledOffPortrait codeCl  expandable " title="Github">
                    <i class="fab fa-github-square"></i> <span>Github</span>
                </button>
            </a>
            <a href="https://twitter.com/jmonkeyengine" rel='noopener noreferrer' target="_blank">
                <button class="icon twitterCl toggleable toggledOffPortrait  expandable " title="Follow on Twitter">
                    <i class="fab fa-twitter"></i> <span>Twitter</span>
                </button>
            </a>

            <a href="https://www.youtube.com/channel/UC-Fs3R5Q6wW_XYspOXGZgPw" rel='noopener noreferrer'
                target="_blank">
                <button class="icon youtubeCl toggleable toggledOffPortrait  expandable " title="Follow on Youtube">
                    <i class="fab fa-youtube"></i> <span>Youtube</span>
                </button>
            </a>
       

            <a href="https://discord.gg/Rv8sfVu" rel='noopener noreferrer' target="_blank">
                <button class="icon discordCl toggleable toggledOffPortrait  expandable " title="Discord">
                    <i class="fab fa-discord"></i> <span>Discord</span>
                </button>
            </a>
            <a href="https://jmonkeyengine.org/donate" >
                <button class="icon donateCl toggleable toggledOffPortrait  expandable " title="Donate">
                    <i class="fas fa-donate"></i> <span>Donate!</span>
                </button>
            </a>

        </div>
</nav>

<script>
    
    !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}));
    

    window.initJmeMenu=function () {
        const selectionClass= window.selectedTopMenuClass || "highlightedCl";

        const topmenu = document.querySelector('#topmenu');
        if (window.location.href.startsWith("http://localhost:1313")) {
            for (const a of topmenu.querySelectorAll("a")) {
                a.href = a.href.replace("https://jmonkeyengine.org", "http://localhost:1313");
            }
        }

        const likelyScore=[];
        for (const a of topmenu.querySelectorAll("a")) {
            const pageUrl=window.location.href.endsWith("/")?window.location.href.substring(0,window.location.href.length-1):window.location.href;
         
            const process = (linkUrls) => {
                if(!linkUrls)return;
                for(let linkUrl of linkUrls){
                    if (linkUrl != null) {
                        if (window.location.href.startsWith("http://localhost:1313")) {
                            linkUrl = linkUrl.replace("https://jmonkeyengine.org", "http://localhost:1313");
                        }

                        if (linkUrl.endsWith("/")) {
                            linkUrl = linkUrl.substring(0, linkUrl.length - 1);
                        }
                        const score = stringSimilarity.compareTwoStrings(linkUrl, pageUrl);
                        likelyScore.push(
                            {
                                score: score,
                                el: a.querySelector("button")
                            }
                        );
                    }
                }
            }

            process([a.href]);
            process(a.getAttribute("alt-href")?a.getAttribute("alt-href").split(","):undefined);           

        }
        likelyScore.sort((a, b) => b.score - a.score);   
        likelyScore.forEach(el=>el.el.classList.remove(selectionClass));
        likelyScore[0].el.classList.add(selectionClass);

    };
    
    document.addEventListener('DOMContentLoaded', function(){
       window.initJmeMenu(); 
    });
</script>

<div id="siteTitle" class="list hlist  responsiveWidth">
    <div id="logo">
        <a href="/">
            <img src="/images/jme-logo.png" />
        </a>
        <i class="toggleNavOnPortraitButton fas fa-bars" toggle="topmenu"></i>
    </div>

    <div id="contributionsBanner">
        <div> <i class="fas fa-donate"></i>
            Backed by:
            <a rel='noopener nofollow noreferrer' target="_blank" id="backerName">The Community</a>
            <a rel='noopener nofollow noreferrer' target="_blank"
                href="https://opencollective.com/jmonkeyengine#section-contributors"> and more...</a>
        </div>
        <div>
            <i class="fab fa-github-alt"></i>
            Contributed by:
            <a rel='noopener nofollow noreferrer' target="_blank" id="contributorName">The Community</a>
            <a rel='noopener nofollow noreferrer' target="_blank"
                href="https://github.com/jMonkeyEngine/jmonkeyengine/graphs/contributors">and more...</a>
        </div>
    </div>
</div>

    </header>

  <main>
    

    <section id="showcase" mode="banner">

  
<i id="playButton" class=" fas fa-play"></i>


<div class="showcaseElement" style='display: block   '>
  <div class="cover blur"   style  ="background-image: url('/images/showcase/ls_frontier/7.jpg'); " ></div>
  <div class="cover"    style  ="background-image: url('/images/showcase/ls_frontier/7.jpg'); " ></div>
</div>


<div class="showcaseElement" style='display: none  '>
  <div class="cover blur"   lazy="true" lazy-style  ="background-image: url('/images/showcase/ls_frontier/4.jpg'); " ></div>
  <div class="cover"    lazy="true" lazy-style   ="background-image: url('/images/showcase/ls_frontier/4.jpg'); " ></div>
</div>


<div class="showcaseElement" style='display: none  '>
  <div class="cover blur"   lazy="true" lazy-style  ="background-image: url('/images/showcase/ls_frontier/9.jpg'); " ></div>
  <div class="cover"    lazy="true" lazy-style   ="background-image: url('/images/showcase/ls_frontier/9.jpg'); " ></div>
</div>


<div class="showcaseElement" style='display: none  '>
  <div class="cover blur"   lazy="true" lazy-style  ="background-image: url('/images/showcase/ls_frontier/6.jpg'); " ></div>
  <div class="cover"    lazy="true" lazy-style   ="background-image: url('/images/showcase/ls_frontier/6.jpg'); " ></div>
</div>


<div class="showcaseElement" style='display: none  '>
  <div class="cover blur"   lazy="true" lazy-style  ="background-image: url('/images/showcase/ls_frontier/11.jpg'); " ></div>
  <div class="cover"    lazy="true" lazy-style   ="background-image: url('/images/showcase/ls_frontier/11.jpg'); " ></div>
</div>


<div class="showcaseElement" style='display: none  '>
  <div class="cover blur"   lazy="true" lazy-style  ="background-image: url('/images/showcase/ls_frontier/1.jpg'); " ></div>
  <div class="cover"    lazy="true" lazy-style   ="background-image: url('/images/showcase/ls_frontier/1.jpg'); " ></div>
</div>


<div class="showcaseElement" style='display: none  '>
  <div class="cover blur"   lazy="true" lazy-style  ="background-image: url('/images/showcase/ls_frontier/8.jpg'); " ></div>
  <div class="cover"    lazy="true" lazy-style   ="background-image: url('/images/showcase/ls_frontier/8.jpg'); " ></div>
</div>


<div class="showcaseElement" style='display: none  '>
  <div class="cover blur"   lazy="true" lazy-style  ="background-image: url('/images/showcase/ls_frontier/3.jpg'); " ></div>
  <div class="cover"    lazy="true" lazy-style   ="background-image: url('/images/showcase/ls_frontier/3.jpg'); " ></div>
</div>


<div class="showcaseElement" style='display: none  '>
  <div class="cover blur"   lazy="true" lazy-style  ="background-image: url('/images/showcase/ls_frontier/10.jpg'); " ></div>
  <div class="cover"    lazy="true" lazy-style   ="background-image: url('/images/showcase/ls_frontier/10.jpg'); " ></div>
</div>


<div class="showcaseElement" style='display: none  '>
  <div class="cover blur"   lazy="true" lazy-style  ="background-image: url('/images/showcase/ls_frontier/2.jpg'); " ></div>
  <div class="cover"    lazy="true" lazy-style   ="background-image: url('/images/showcase/ls_frontier/2.jpg'); " ></div>
</div>


<div class="showcaseElement" style='display: none  '>
  <div class="cover blur"   lazy="true" lazy-style  ="background-image: url('/images/showcase/ls_frontier/5.jpg'); " ></div>
  <div class="cover"    lazy="true" lazy-style   ="background-image: url('/images/showcase/ls_frontier/5.jpg'); " ></div>
</div>


  <video class="showcaseElement cover" style='display: none  ' preload="none"
    class="cover">
    <source src="https://steamcdn-a.akamaihd.net/steam/apps/256676876/movie_max.webm" type="video/webm">
  </video>
</div>


    <div  class="responsiveWidth" id="engineDescription">
      jMonkeyEngine is a modern developer friendly game engine written primarily in Java. 
      <br />
      Its minimalistic and code first approach makes it perfect for developers who want the support of a game engine
      while retaining full control over their code with the ability to extend and adapt the engine to their workflow.
      
      <br />
      <br />
      <br />

      <a href="/start/"><button  id="startbtn" class="highlightedCl" ><i class="fas fa-rocket"></i> Get Started </button></a>

      <a href="/#features" title="overview"><button id="startbtn"   class="highlightedCl"><i class="fas fa-question-circle" style="padding:0"></i></button></a>
      

        <br />
        <br />
    </div>

    <div class="responsiveWidth" >
    <div id="gameDescription" >
      <h2><i class="far fa-images" ></i> Lightspeed Frontier powered by jMonkeyEngine</h2>
      
      Leave everything behind and try your hand at captaining a ship on the frontier of the galaxy. Customize it piece by piece to tackle whatever adventures await you. Take on crime lords and space pirates … 
      
      <br />
      <a class="readMore" href="/showcase/ls_frontier/#showcase">See game page </a> 
    </div>
  </div>

</section>


<br/>


<section class="message list vlist">
  <div>
    <blockquote class="list vlist responsive">


      <span id="backerMessage">-</span>
      <i><a rel='noopener nofollow noreferrer' target="_blank" id="backerMessageName">-</a> </i>
    </blockquote>
    <a href="https://opencollective.com/jmonkeyengine">Become a
      backer and leave a message...</a>


  </div>
</section>

<br/>


<a id="content"></a>

<section class="full responsiveWidth">

<article>
        <h1 >
            
<i class="fas fa-paragraph useless"></i>

           
            <a href="/tutorials/grizeldi-pbr-tutorials/pbr_tutorial/">Grizeldi&#39;s PBR Tutorial #1 - The Basics</a></h1>
            <div class="content">
                <span>
                <p>A continuing YouTube series helping users take leap from using the regular <code>Lighting.j3md</code> material to <code>PbrLighting.j3md</code>.</p>
<hr>
<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>

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <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>
</div>


                </span>
                

                    <nav>

    
    <ul class="tags smaller">

        <h3  class="tags">Tags</h3>
        
        <li><a class="pbr" href="/tags/pbr"><i class="fas fa-hashtag"></i>pbr</a></li>
        
        <li><a class="graphics" href="/tags/graphics"><i class="fas fa-hashtag"></i>graphics</a></li>
        
        <li><a class="tutorials" href="/tags/tutorials"><i class="fas fa-hashtag"></i>tutorials</a></li>
        
        <li><a class="blog" href="/tags/blog"><i class="fas fa-hashtag"></i>blog</a></li>
        
    </ul>


    <ul class="authors smaller">
        <h3  class="authors">Authors</h3>
        
        <li><a class="grizeldi" href="/authors/grizeldi"><i class="fas fa-at"></i>grizeldi</a></li>
        
    </ul>
    
    <ul class="postedDate smaller">
        <h3 class="postedDate">Date</h3>
        <li><time datetime="2019-01-18 08:00:00 &#43;0000 UTC"><i class="fas fa-calendar"></i>18 January 2019</time>      </li>
    </ul>

    
    <ul class="share">
        <h3 class="share">Share</h3>
        <li>
            <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  "  >
                <i class="fab fa-twitter-square"></i> Share on Twitter</a></button></li>
    </ul>


</nav>
                
            </div>


    </article>
</section>


<section class="full responsiveWidth">

  <article>
    <h1 id="comments"><i class="useless fas fa-comments"></i> Comments</h1>
      <div class="content" id='discourse-comments'></div>

      <script type="text/javascript">
        var eurl=window.location.href ;
        eurl=eurl.split("#")[0]; 
        eurl=eurl.split("?")[0]; 
        eurl=eurl.trim();
        if(eurl.endsWith("/index.html"))eurl=eurl.substring(0,eurl.length-"/index.html".length).trim(); 
        if(eurl.charAt(eurl.length-1)=="/") eurl=eurl.substring(0,eurl.length-1); 
        if(eurl.startsWith("http://")) eurl="https://"+eurl.substring("http://".length);        
        
        
        if(eurl.endsWith("/communitylog/new-website")){
          eurl+="/#content"; 
        }
        

        DiscourseEmbed = { 
          discourseUrl: 'https://hub.jmonkeyengine.org/',
          discourseEmbedUrl: eurl
        };
      
        (function() {
          var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
          d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
          (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
        })();
      </script>

</article>
</section>


  </main>
  <footer>
    © 2020 jMonkeyEngine.
    All other trademarks, logos and featured content are property of their respective owners.
    <br />
    <a title="Github repo" rel='noopener nofollow noreferrer' target="_blank"
      href="https://github.com/jMonkeyEngine/jmonkeyengine-website">
      <i class="fab fa-github"></i> Source on Github
    </a> 
    |
    <a title="Report issue" rel='noopener nofollow noreferrer' target="_blank"
      href="https://github.com/jMonkeyEngine/jmonkeyengine-website/issues">
      <i class="fas fa-bug"></i> Report an issue
    </a> 
    <br />
    <br />
    Website designed and developed by 
    <a href="https://github.com/riccardobl">Riccardo Balbo</a>
    for the jMonkeyEngine's Community.

   
  </footer>
  <div id="poweredBy" >
  
    <a  rel='noopener nofollow noreferrer' target="_blank" href="https://www.macstadium.com/">
      
      <img   src="/images/macstadium-logo.png" />
    </a>
    <a  rel='noopener nofollow noreferrer' target="_blank" href="https://www.java.com/">
      
      <img   src="/images/java-logo.png" />
    </a>
    <a  rel='noopener nofollow noreferrer' target="_blank" href="https://opengl.org/">
      
      <img   src="/images/opengl-logo.png" />
    </a>
  </div>

</body>

</html>