PBR Materials

    *Note that PBR Materials are currently supported in HashLink and Browsers supporting WebGL 2.0 or later.

    Let’s dive into how to set up PBR Materials in heaps. Before we create our Heaps 3D scene we need to tell the engine that we want to use PBR Materials.

    Now we can start setting up our scene to work with PBR Materials. The first step is to create an environment map. PBR Materials don’t explicitly need an environment map to function but creating one for this example will best showcase the realism of the materials. The Heaps PBR Example has a good environment map to use.

    2. var sp = new h3d.prim.Sphere(1, 128, 128);
    3. //Make sure to add UVs and 
    4. sp.addNormals();
    5. sp.addUVs();
    7. //Create a background mesh 
    8. var bg = new h3d.scene.Mesh(sp, s3d);
    9. bg.scale(10);
    10. //Make sure it is always rendered
    11. bg.material.mainPass.culling = Front;
    12. bg.material.mainPass.setPassName("overlay");
    14. //Create an environment map texture
    16. inline function set(face:Int, res:hxd.res.Image) {
    17.     var pix = res.getPixels();
    18.     envMap.uploadPixels(pix, 0, face);
    19. }
    20. //Set the faces for the environment cube map
    21. set(0, hxd.Res.front);
    22. set(1, hxd.Res.back);
    23. set(2, hxd.Res.right);
    24. set(3, hxd.Res.left);
    25. set(4, hxd.Res.top);
    26. set(5, hxd.Res.bottom);
    28. //Create a new environment that we can use to control some of the material behavior
    29. var env = new h3d.scene.pbr.Environment(envMap);
    31. //Set the environment on the custom PBR renderer
    32. renderer = cast(s3d.renderer, h3d.scene.pbr.Renderer);
    33. renderer.env = env;
    35. //Finally create a shader and apply it to the background mesh so we can actually render our environment on screen.   
    36. var cubeShader = bg.material.mainPass.addShader(new h3d.shader.pbr.CubeLod(env.env));

    Now that is done we are ready to actually render an object in our scene using PBR materials. For this example we will create a sphere and assign it some PBR material values.

    1. //Create a sphere using the same geometry from the Sky Sphere
    2. var sphere = new h3d.scene.Mesh(sp, s3d);
    4. //Create a shader to store our PBR values - note the first 2 parameters are 'metalness' and 'roughness'
    5. var pbrValues = new h3d.shader.pbr.PropsValues(1.0,0.5,0);
    7. //Assign the values to our sphere's materials

    We’ve finally got something rendering with PBR materials! Your scene should look something like this.

    Now you can see that with no roughness the looks like it is made out of chrome. PBR Sphere with no roughness

    Let’s now bring down the metallic to 0 as well

      Now you can see that with no roughness and no metallic the sphere looks like an extremely shiny piece of plastic.

      If you want to change the look of your materials you can also play with the exposure on the renderer. The PBR renderer defaults to an exposure of 0 and reasonable values are between -3 and 3. Note that changing the exposure on your renderer will affect all of the materials in your scene.