Search the Community

Showing results for tags 'pbr'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 64 results

  1. MrVR

    PBR Research

    PBR RESEARCH its amazing what you can do to these pbr materials , light settings, cameras, physics ... First PBR materials test Shader samplers of properties BABYLONJS Features Here is a small reminder of the PBR material supported features: Albedo, Reflectivity, Microsurface Reflection / Refraction Normal Map / Parallax Shadows (as the standard material) Energy Conservation Gamma Correction Inversed squared light Falloff and Light Radius HDR Texture and Seamless Cubemap (LOD extension required) Environment Irradiance Camera controls: Contrast and Exposure Camera controls: Color Grading and Color Curves Zero Light Lighting Debug Controls BABYLONJS PARAMS directIntensity: Controls the amount of diffuse and specular the material is reflecting. emissiveIntensity: Controls the level of emissive light the material is emitting. environmentIntensity: Controls the level of the reflected light from the environment. specularIntensity: As the material is still using a blinn phong like higlights computation, this can help dropping the specular level of the material without impacting the reflectivity. MicroSurface (AKA Glossiness or specular power) reflectivityTexture= texture; useMicroSurfaceFromReflectivityMap = true; useMicroSurfaceFromReflectivityMapAlpha = true; reflectionColor = new BABYLON.Color3(1.0, 1.0, 1.0); // White to make the material fully reflective. OverloadedAlbedoIntensity is to overload a texture with the color the values go from 0 to 1 overloadedAlbedo = new BABYLON.Color3(0, 0, 1); overloadedAlbedoIntensity = overloadedIntensity; // Creates a reflection texture. var reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene); // Creates the pbr material to use in the scene var pbr = new BABYLON.PBRMaterial("pbr", scene); pbr.reflectionTexture = reflectionTexture; pbr.reflectivityColor = new BABYLON.Color3(1.0, 1.0, 1.0); // White to make the material fully reflective. The diffuse reflection will be described later in the Environment Irradiance section. Another interesting addition to the reflection is the ability to keep the most luminous part of the reflection over transparent surface... Yeah, it does not make much sense... Actually if you look through a window at night from a lit room, you can see the reflection of lights or TV on the glass. This is the same for reflection in the PBR Material. A special property pbr.useRadianceOverAlpha = true; has been added to allow you to control this effect. Not only reflection (AKA radiance) but specular highlights can be seen on top of transparency. glass.reflectionTexture = hdrTexture; glass.alpha = 0.5; // realism reflection material.emissiveFresnelParameters = new BABYLON.FresnelParameters(); material.emissiveFresnelParameters.bias = 0.4; material.emissiveFresnelParameters.power = 140; material.emissiveFresnelParameters.leftColor = BABYLON.Color3.Red(); material.emissiveFresnelParameters.rightColor = BABYLON.Color3.Blue(); Camera Control Photographic tone mapping and deals with the contrast directly from the material. var pbr = new BABYLON.PBRMaterial("pbr", scene); pbr.cameraExposure = 0.66; pbr.cameraContrast = 1.66; //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Roughness: parameter can “flatten” the color transitions. You can use it to make your material appear dusty and flat Reflections: Black color makes the material non-reflective, white color makes it fully reflective. All the gray scale values between increase or decrease the reflection strength Just like with the Diffuse, you can use Color, Bitmap or Procedural map in the Reflect slot. Glossiness: This is the parameter that controls how sharp/blurred are the reflections. Some real world objects, like polished metal, mirror, chrome, have very sharp reflections, while other materials, such as wood, concrete, plastic, etc., have blurred reflections. BABYLONJS //MicroSurface (AKA Glossiness or specular power) BABYLON The micro-surface of a material defines the way it is reflecting the incoming lights. It is not defining the amount, only how. A glossy material will tend to reflect the light in the same direction it is incoming. On a Matte one the reflected light will vary in contact of the surface. Tips: To achieve the best results, you can store the glossiness in the alpha channel of the reflectivity map (this prevents having a constant gloss on one material): materialSphere.reflectivityTexture = texture; materialSphere.useMicroSurfaceFromReflectivityMap = true; Ligthing Intensity In order to allow finer grain control of the lighting, the following properties have been added in the material. directIntensity: Controls the amount of diffuse and specular the material is reflecting. emissiveIntensity: Controls the level of emissive light the material is emitting. environmentIntensity: Controls the level of the reflected light from the environment. specularIntensity: As the material is still using a blinn phong like higlights computation, this can help dropping the specular level of the material without impacting the reflectivity. Fresnel changes the reflection strength depending on the viewing angle. General rule is that reflections are weaker if the surface is facing you perpendicularly and increase in strength as the surface approaches parallel position relative to your viewing angle. As a general guideline, here are the Reflect IOR values for some common object types: water 1.33 plastic 1.45 glass 1.5-1.8 diamond 2.4 compound materials like wood, stone, concrete etc 3-6 metals 20-100 Reflection Depth: This is the number of times a light ray is reflected before stopping the calculations. When the set number of reflections has been calculated, the rest are simply displayed as the Exit color. You can try setting a bright color as the Exit color to see how much information you lose. BABYLONJS Reflectivity (AKA specular color) The reflectivity of a material defines the amount of light it is reflecting. Basically, a black specular will mean almost no reflection and white will be close from a perfect mirror: Tips: To achieve the best results use a specular map stored in a texture: materialSphere.reflectivityTexture = texture; Reflection The key purpose of a PBR material is to conserve the energy (not emitting more light than it receives). If a lot of light is reflected from the environment the diffuse reflected light will drop. This means that without Reflection Map the material would be black if the specular is close to white (reflecting nothing). This is why we introduce in the material a Reflection Color parameter to ensure the material still works without Reflection texture. var pbr = new BABYLON.PBRMaterial("pbr", scene); pbr.reflectionColor = new BABYLON.Color3(1.0, 0.0, 0.0); Refractions: These settings control if and how the material let’s the light through it. Common materials that have refractive properties are glass, water, gems, transparent plastics, etc. First parameter that controls the refractions is Refract color. As before, it goes from black (no refractions) to white (full refractions) and everything in between is a mix between Diffuse and Refraction. OverloadedAlbedoIntensity is to overload a texture with the color the values go from 0 to 1 materialSphere.overloadedAlbedo = new BABYLON.Color3(0, 0, 1); materialSphere.overloadedAlbedoIntensity = overloadedIntensity; Refraction glossiness: Just like with the reflections, you can change how blurry are the refractions. This effect is great for frosted glass or any other rough surface that lets through the light but distorts it along the way. This one increases render times and noise a lot so be careful with it. No need to go lower than 0.6 for most materials. INDEX of REFRACTION: has been calculated for many materials, so you don’t need to guess. You can find various IOR tables on the internet. Here is one of them: Acetone 1.36 Actinolite 1.618 Agalmatoite 1.550 Agate 1.544 Agate, Moss 1.540 Air 1.0002926 Alcohol 1.329 Amber 1.546 Amethyst 1.544 Crystal 2.00 Diamond 2.417 Emerald 1.576 Ethanol 1.36 Ethyl Alcohol 1.36 Glass 1.51714 Glass, Albite 1.4890 Glass, Crown 1.520 Glass, Crown, Zinc 1.517 Glass, Flint, Dense 1.66 Glass, Flint, Heaviest 1.89 Glass, Flint, Heavy 1.65548 Glass, Flint, Lanthanum 1.80 Glass, Flint, Light 1.58038 Glass, Flint, Medium 1.62725 Gold 0.47 Ice 1.309 Ivory 1.540 Jade, Nephrite 1.610 Jadeite 1.665 Lead 2.01 Malachite 1.655 Methanol 1.329 Moonstone, Albite 1.535 Nylon 1.53 Onyx 1.486 Opal 1.450 Oxygen (gas) 1.000276 Oxygen (liq) 1.221 Pearl 1.530 Plastic 1.460 Plexiglas 1.50 Polystyrene 1.55 Quartz 1.544 Quartz, Fused 1.45843 Rock Salt 1.544 Rubber, Natural 1.5191 Ruby 1.760 Sapphire 1.760 Silicon 4.24 Steel 2.50 Tiger eye 1.544 Topaz 1.620 Tourmaline 1.624 Turpentine 1.472 Turquoise 1.610 Water (gas) 1.000261 Water 35’C (Room temp) 1.33157 Zirconia, Cubic 2.170 Max depth works just like with the reflections. The default value is usually fine, but for scenes with large amount of refractions, you should increase it. Fog Color. It is great if you want to tint the glass in a realistic way. Using the Fog color makes thinner parts lighter and thicker parts darker. You can use the Fog multiplier value to adjust how strong is the tint. I suggest using colors with less than 255 lightness and saturation for realistic results. You can control the relationship between object thickness and Fog intensity by using the Fog value. Look at the examples to see how it works. Negative values make the tinting stronger and color transitions more extreme, while positive values make the fog smoother and weaker. Use it together with fog multiplier to get the effect you need. The biggest drawback of the Fog color is that you can not use a map in this slot, this means you can only use a single color. If you want to create a stained glass material or glass with multiple colors, you will have to do that by using the Refract color and not the Fog. It is, however, great for those single-colored materials and much more realistic than simply changing the Refract color. Anisotropy allows you to create stretched highlights. In real world these are most commonly seen on brushed metal surfaces with long, parallel ‘scratches’. Anisotropy allows you to fake this by stretching and rotating the highlights as you like. Bump and Displace slots first. Both of these slots allow you to assign a bitmap or procedural map to simulate unevenness and deformation of the objects surface. Bump does so without changing the overall geometry of the object, but Displace actually subdivides and deforms the object during rendering. The deformations work like this – middle grey [128;128;128] of the map does not change anything on the object, darker values push the surface inwards while lighter values pull it out. The further this value is from medium gray, the stronger is the effect. Color of the map is not taken into account and only the lightness value is used. Last map we are going to look at is the Opacity map. It works very simple. Pure white value is used for the non-transparent parts of the material and pure black is for completely invisible parts of the material, everything in between is more or less half transparent. It is great if you need to simulate stuff like tree leaves or lace fabric without using a large amount of polygons. BRDF DOCS ~ref: ~ref: ~ref: ~ref:
  2. Sonic_Serpentine

    Proper Lightmap Workflow

    Hey guys, So I'm looking into an ideal way to set up lighting for my levels. I'm going with PBR since that's what I'm familiar with from other engines. Right now I'm just leaving reflection color black until my diffuse + lightmapping are standing on their own. What I'm stumped on right now is how to deal with hot-spots and maybe lightmap contrast in general. There are sconces on walls and I use them as emissive textures to generate the lightmap bakes. In a typical Blender Cycles render, the surface nearest to the emissive sconce will get washed out. I bake the direct+indirect diffuse as a lightmap from this. When I apply this as the ambientTexture it looks close, but as I understand it, ambient is really a shadowmap, so its not making anything brighter than it already is and therefore no hotspots. I tried using lightmapTexture, but I don't think I understand how to format it correctly because setting my lightmap to it as-is effectively blasts on-top of everything rather than mix with it. The only thing that has come close to doing what I intend is applying the lightmap to the emissiveTexture and bumping up emissive color to BABYLON.Color3(5,5,5); It's rough, but it does get me surfaces that are lighter and darker than the albedo at the same time. (see bottom image for that) So that's where I'm at. I'm holding out hope that there's a proper way to mix lightmapTexture and albedoTexture that I'm just missing. Also open to alternative approaches if I happen to be running against the grain in what I'm attempting. Thanks in advance for any pointers. Blender Cycles preview render in Babylon with PBR Material albedoTexture = wrapping basecolor textures emissiveTexture = lightmap emissiveColor (1,1,1) albedoTexture = wrapping basecolor textures lightmapTexture = lightmap albedoTexture = wrapping basecolor textures emissiveTexture = lightmap emissiveColor (5,5,5)
  3. Hello world First of all, BIG THANKS to @Sebavan for its amazing PBR Material ! I'm taking a lot of fun playing with the differents features. On monday, I enjoyed playing with microsurface parameter. It worked really fine until I added a bumpTexture. After diving into the code, I understood that microsurface is handled in two different ways : EXT_shader_texture_lod WebGL extension is supported, LODBASEDMICROSURFACE define is added to the shader, and we can sample reflection texture with the good LOD level. EXT_shader_texture_lod WebGL extension is NOT supported, no define is added to the shader, we don't have access to LOD level and we have to bias mipmap level when sampling to fake LOD level or something like that. Both ways seem to work fine when I don't use bumpTexture. But if I add a bumptexture to the PBR material, then only the first option works. With the second option, we can see some flickering or pixelation, I don't know how to call that (left plane on the picture) : Here is a basic PG showing the PBR material with all these parameters (this one should work !) : And here is the same PG, but I intentionally disabled the extension, to see how it works on devices which do not support the extension : It's less striking on the PG (don't look perpendicular to a face), that's why I posted the picture above. Maybe it's not a bug and it's really impossible to have both microsurface and bumpmap working when the extension isn't available ? What do you think ? Have a good day
  4. when using pbrmaterial with parallax enabled , the albedoTexture gone, and here is a PG showing the problem : according to tutorials said : A diffuse texture is required for using parallax mapping. so how do i use parallax in pbr?
  5. I see something different if I go directly here: to if I, say, go here: then choose PBR from the drop-down box. When I do the latter the four meshes are semi-transparent. I've managed to reproduce this on both Firefox and iPad. I'm guessing that one or the other of the playground entries is setting some global state that it shouldn't? By the way, the "wrong" way is actually quite an interesting effect: the balls look a bit like very delicate glass, or soap bubbles. It might be worth adding a comment, or bool var, to say how the effect can be reproduced.
  6. wongbruno

    3DS MAX matches

    Hi all, I'm new and I already have some questions. First of all I must tell you that I am a 3d graphics operator and usually I always look for matches between 3ds Max and new software or 3D systems. Digita il testo o l'indirizzo di un sito web oppure traduci un documento. Annulla Visualizzazione delle traduzioni per Detto questo, mi sto approcciando a Babylon Js da pochi giorni, quindi cerco di usare 3ds max il più possibile, prima di mettere mano ai codici di programmazione o simili. Ho scaricato e installato l Traduci invece Detto questo, mi sto approcciando a Babylonjs da pochi giorni, quindi cerco di usare 3ds max il più possibile, prima di mettere mano ai codici di programmazione o simili. Ho scaricato e installato l That said, I'm approaching to Babylonjs from a few days, so I try to use 3ds max as possible, before you play around with the programming codes or something like that. I downloaded and installed the exporter for 3ds max 2016 to 2017, then I started working and good renderista'm trying to understand what are: 1 - The materials of 3ds max corresponding to the Babylonjs materials 2 - Where should I put the HDRI images to have the correct illuminzaione 3 - How to fix the position of the Arc Rotate Camera, so as to be able to orbit around the object, without being able to zoom in and out Thanks in advance.
  7. max123

    PBR microsurface

    Hi, I have troubles trying to control microsurface parameter of PBR: whenever it goes below 0.8, you get nasty looking blocks instead of making the material less reflective (from mirror to matte). Here's BP: It's line 22.
  8. Is there a way to transfer (some) properties of a Material imported from .babylon when constructing a pbr material? I looked into ambientColor and diffuseColor and they don't seem to provide an answer. For example, I have an object with greenish surface (ambient = [0.4, 0.8, 0.6], diffuse = [0.2, 0.43, 0.3]). But when I try to use these as a reflectivityColor, I get very unexpected results. By trial and error, I used reflectivityColor = [0.7, 1, 0.5] to get that greenish surface.
  9. Hi, So I have another problem, this time with the PBR textures imported from unity using Babylon2unity. If I am using any light other than Hemilight (pbr material from unity seem to work with it), all the textures show up black. Again it might be solved by some tweaks in the texture objects, so I have been looking for the problem for hours now... I had some successes, failure, a lot of frustration. So I thought i should ask for your help. On the first image this is the results of my tweaking using an omnilight. So I though I had it figured out, by changing the reflectivityColor and reflectionColor from 0,0,0 to 1,1,1 it seems I get back my texture for the little robot in the middle (the infamous roger robot). With some shadow etc. I also changed the "hasAlpha" in the reflectivityTexture (because it does have alpha) and changed useMicroSurfaceFromReflectivityMapAlpha and useAutoMicroSurfaceFromReflectivityMap to "true" (one of them was already to true, can't remember which one) - that did work with matte region becoming matte, at long last. So I said Great ! lets change the reflectivity color and reflexion color for one of the tile type (the little hexagons thingy). By doing that I also get back the texture normal color BUT, light does not seem to interact in the same way, the mesh is lighted both in front and behind similarly... the back face should be black no? (see image 2). The last 2 images is with the hemilight (front and back) , it seems the material is behaving normally... You might be wondering why I am persisting on resolving this issue when I have a perfectly well behaved light source at disposal... and that is a very relevant question. Any idea(s) ? Light source code: var hemiLight = new BABYLON.HemisphericLight('hemiLight', new BABYLON.Vector3(0, 0, -30), scene); hemiLight.intensity = 2; // var sun = new BABYLON.PointLight("sun", new BABYLON.Vector3(0, 50, 0), scene); // sun.intensity = 2;
  10. Сan be assigned to show diffuse texture to the model if it is to apply PBR? I founded in the documentation, only examples of pre-set: metal, plastic, glass and wood. For example: var scene = new BABYLON.Scene(engine); var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 4, Math.PI / 2.5, 200, var hdrTexture = new BABYLON.HDRCubeTexture("textures/room.hdr", scene, 512); var hdrSkybox = BABYLON.Mesh.CreateBox("hdrSkyBox", 1000.0, scene); var hdrSkyboxMaterial = new BABYLON.PBRMaterial("skyBox", scene); hdrSkyboxMaterial.reflectionTexture = hdrTexture.clone(); hdrSkyboxMaterial.disableLighting = true; hdrSkybox.material = hdrSkyboxMaterial; material = glass; glass.refractionTexture = hdrTexture; glass.reflectionTexture = hdrTexture; ???? material.diffuseTexture = new BABYLON.Texture("/path", scene);
  11. So we used reflection using PBR and reflection probe on floor of home interior scene. Here is video : You can see the reflection isn't realistic . The reflection of the TV unit which should be there on the floor isn't there. Instead there's some cubemap (obviously generated by ReflectionProbe) that's reflecting continuously from floor to TV wall. Something that doesn't happen in real world. So question is how to get realistic reflection ? (Note: We aren't updating reflection probe after initialization , since our camera is static at center. Its ArcRotate and it doesn't move. )
  12. Sebavan

    PBR Detailed Documentation

    Hello, Sorry for the delay, but here is finally a complete documentation on how to use the new PBR Material (available in the 2.4 preview of BJS as an extension) with the new seamless HDRTexture: This should help understanding all the features available and how to use them in order to create Metal, Gold, Crystal, Wood and Plastic (tutorial included). Hope you ll enjoy it.
  13. Hi, I'm new to Babylon.js and to this forum, so perhaps I am missing something obvious. The documentation on PBR has an image of beautiful materials with different glossiness and reflectivity values. But when I run the demo Playground Demo Scene - PBR Materials in my browser (Safari or Chrome, on a Macbook Pro), the materials look much less impressive. For low glossiness and reflectivity values, the spheres don't look "rough" with a lot of light scattering. Instead I can clearly see the edges of the skybox. See attached screenshot, the spheres in the top right corner. Why is this happening? Is it my hardware? Did something change in the source code since the picture was taken? Thanks! [Edit] complete specs: Chrome Version 48.0.2564.116 (64-bit) and 49.0.2623.87 (64-bit) Safari Version 9.0.3 (10601.4.4) MacBook Pro (Retina, 13-inch, Early 2015) Intel Iris Graphics 6100 1536 MB 2,7 GHz Intel Core i5 8 GB 1867 MHz DDR3
  14. Big news! Physically Based Rendering (PBR) has landed in the open source PlayCanvas Engine. The graphics capabilities of the engine really have taken a massive leap forwards. Check out the before (Phong shading model) versus the newly deployed version of the engine (PBR shading model): If you want to get a bit more hands on with Star-Lord, leader of the Guardians of the Galaxy, check out our blog post which goes into a bit more detail. Enjoy!