Search the Community

Hello everyone, I have been trying to create my own hdr environment map and use it in Babylon. A panorama is rendered in 3s Max 2019 using the V-Ray Next (4.02.04) sun system and saved as a .hdr file. The .hdr file is then loaded into Lys and converted to a specular .dds file, following the instructions from https://doc.babylonjs.com/how_to/physically_based_rendering Looks fine in Lys: However, in Babylon some strange things are happening PG: https://playground.babylonjs.com/#FDQ594 Two things to notice: 1. Reflection on the sphere with chrome pbr material. The sun looks funky: 2. Reflection on the ground with a none metallic pbr material. The sun looks funky too: Both materials have very sensitive roughness behaviour. More detail can be found in the PG. The .hdr output from Vray is here: vrayhdrtest.hdr I suspect something has gone wrong during the conversion in Lys, or the original render out of V-Ray has some problem. Hope someone can point me to the right direction. Thanks a lot!

Yo @Sebavan there are a couple of issues with the HDRCubeTexture. First of all the reflections seems a little "Cloudy" compared to the Unity rendering of the same sphere. How do control the BRIGHTNESS and CLARITY of the reflection. I tried messing with environmentIntensity, cameraContrast and cameraExpose but I cant seem to get to look like the Unity Version... And second... I guess MOST important... is the reflection that show up on the sphere are ROTATED 90 degrees... What SHOULD show as directly behind you are ROTATED. Example Unity Shot With Reflection Probe On Sphere... Note the orientation of WHAT is being reflected behind you: And using the HDRCubeTexture to in babylon: Can you please take at look at these issues

Hello BJS community ! I just began to understand HDR textures, gamma correction and so on in order to learn how to do IBL. In this process, I used BABYLON.HDRCubeTexture to convert my equirectangular HDR texture to a usable environment HDR cubemap, as explained here. Then, I need to apply a convolution on this cubemap to obtain my final irradiance cubemap that I will sample during IBL. To compute my irradiance cubemap from the environment cubemap, I use a RenderTargetTexture. Until there, everything works fine ! In the above tutorial link, the guy uses OpenGL and doesn't matter about having output color exceeding [0..1] range. It's useful to keep HDR textures until the last step where he will tone map its result. I learned the hard way that it's not as simple with WebGL. When I store color outside [0..1] range and then sample this result in another shader, result has been clamped between [0..1] range. This stackoverflow question taught me that not only I need to use a floating point texture but also I have to render to a floating point frame buffer. Or something like that, I never dived into pure WebGL code. To render to a floating point frame buffer, I need to enable the EXT_color_buffer_float extension (only available with WebGL 2), but it doesn't seem to be enough. I think I also need to configure the framebuffer with pure WebGL code. So, my question is: Is is yet possible to render color outside [0..1] range using BabylonJS at this time ? How ? If this not ready yet, I'll normalize and denormalize data at each step of course. But I would love to know if doing it in the ideal way is possible. Thank you a lot in advance !

Hi all, I have a 3d room I created that changes once in a while. I would like to create an HDR environment map of the room automatically so that PBR materials reflect the actual room. It doesn't need to be in real time, I can update it every couple minutes for example. Is there any way to do this? Thanks!

Hey guys... When I load a texture using HDRCubeTexture as a reflectionTexture it is flipped the wrong way... Can I control that with some property that is serialized into the scene... Note: the texture is loaded from a serialized scene json file... is there I property I can set to flip the HDRCubeTexture the right way As Always pinging @Deltakosh and @Sebavan

Hi, Got error on android device with hdr material (updated using babylonjs extension, size 128). Device: Galaxy Tab 3 WebGl: renderer:"PowerVR SGX 544MP2", vendor:"Imagination Technologies", version:"WebGL 1.0 (OpenGL ES 2.0 Chromium)" Android: 4.4.2 Error: [.Offscreen-For-WebGL-0x714d4da0]GL ERROR :GL_INVALID_ENUM : GetIntegerv: <- error from previous GL command [.Offscreen-For-WebGL-0x714d4da0]GL ERROR :GL_INVALID_ENUM : glTexImage2D: <- error from previous GL command [.Offscreen-For-WebGL-0x714d4da0]GL ERROR :GL_OUT_OF_MEMORY : GetShaderiv: <- error from previous GL command [.Offscreen-For-WebGL-0x714d4da0]GL ERROR :GL_OUT_OF_MEMORY : glFramebufferTexture2DMultisample: <- error from previous GL command Unable to compile effect: Attributes: position, normal, uv Vertex shader: default Fragment shader: default Trying next fallback. Unable to compile effect: Attributes: position, normal, uv Vertex shader: default Fragment shader: default WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost Unable to compile effect: Attributes: position, normal, uv, uv2 Vertex shader: pbr Fragment shader: pbr Error: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'. Cannot set property 'isCube' of null There are more error logs as all shaders are logged, if more info is needed I can attach something more

Hi, I used EnvironmentMapGenerator to generate hdr texture. I tried to use it from code it works great but I would like to add it inside babylon file. { customType: "BABYLON.HDRCubeTexture", name: "some.babylon.hdr", size: 256 } If I add size I get error Bad HDR Format but without size option I get byte length of Int32Array should be a multiple of 4. (standard hdr works great).

Hi, I`am building my first setup in BabylonJS with PBR Materials and HDR maps. Everything worked fine for me until I hit the "Environment Irradiance": So the HDR Map is used for irradiance and reflection. Ok, in most cases thats what you want, but I want to illuminate my model with scene lights and use the HDR only for reflections (or maybe have the option to toggle between) - for me, it gives me more control. With the HDR map and scene lights, my scene will be to bright. I found some options like: var pbr = new BABYLON.PBRMaterial("pbr", scene); pbr.directIntensity = 1.0; pbr.environmentIntensity = 1.0; But this only controls either the light intensity in the scene or the hdr intensity (both reflection and irradiance). So I dont see an option here to turn down the irradiance of the HDR. In the doc i read about this topic: "The fact that we extract the Harmonics from the texture is the reason why we were entitled to use an High Dynamic Range format. The generation could skip the harmonics generation step if you instantiate an HDRTexture with its parameter generateHarmonics set to false." I tried this but it doesn`t work for me. I used the playground demo in the doc ( http://www.babylonjs-playground.com/#1P98HI#2 ) and updated the HDRCubeTexture line like this: var hdrTexture = new BABYLON.HDRCubeTexture("textures/country.hdr", scene, 512, true, false); //first boolean: noMipMap // 2nd boolean: generateHarmonics? The first boolean works, I can turn off / on MipMaps. But the 2nd boolean has no effect. Can someone push into the right direction? regards, Mario

Hey guys... I really need the community help on creating a class for babylon for skyboxes using a LDR (Tone mapped HDR) Cube Texture just as you would a HDRCubeTexture ... Except with ALREADY tone mapped RGB or RGBA pixels in the form of a png or jpeg. This will allow us to take HDR images from places like hdrlib.com and actually use them as a skybox. You can with a native HDR but it is a RESOURCE KILLER... you will NEVER get a good full resolution HDR skybox in your babylon game... the native HDR format works BEST in babylon when used real small like 256K and should be used for things like reflection and refraction textures... NOT the whole scene skybox because too much resources and takes for ever to generate ... Both at runtime and the pre-propocessor. But if we tone map that HDR to LDR WebGL can handle that pixel data just fine (plus the actual .png or .jpeg will be smaller 8-Bit per channel images). Here is an example HDR Tone Mapped Imaged i created with the BabylonJS Toolkit: http://mackey.cloud/files/bridge.png It is a very nice tone mapped version of an HDR file... Please download that file and take a look... I would like to use this file in place for a .hdr and use a new BABYLON.LDRCubeTexture class to display as skybox (Just like you would a regular HDRCubeTexture) I stated to "COPY" and cleanup HDRCubeTexture class as LDRCubeTexture... babylon.ldrCubeTexture.ts Basically i need SOMEONE to PLEASE modify the loadLDRTexture() function to use regular RGB pixels stored at 8-bits per channel (instead of 16-bit). I was able to figure out SOOOOO much on my own to create all the kool features i have in the new 1.1 toolkit... But i am LOST in that PIXEL code that is supposed to basically "split" cube faces pixel in an Array of Arrays... the result should be and array of pixels for each face...i THINK This is the very last piece i need to prepare the BabylonJS Toolkit Version 1.1 Beta for release... Any help would be freaking awesome Yo @Deltakosh I really need ya bro

Hey @Deltakosh The latest 2.6 alpha now gives a BUNCH of error when using HDRCubeTexture: [.Offscreen-For-WebGL-0x7fc2bf02b800]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering. Sorry... Correct it crashes when being deserialized (also with 2.5) You can download the whole build folder (with the scene file, index page and all textures) at Samples Build Folder

What size should we be using to generate babylon HDR using BABYLON.Tools.generateBabylonHDR ??? The cabman actual image resolution is 3200 x 1600 ... the cube face size is 2048... But if i try to pre-process a cabman at 2048 full resolution IT NEVER FINISHES ... over 12 hours still never finishes... Everywhere i see HDRCubeTexture is always using SOME MUCH LOWER (like 256 or 512) cube map size then the actual cabman face size. Is there some SCALE or RATIO we should using OR are we supposed to trying to run HDR at whatever the actual cabemap face size ???

The latest webgl 20 and vertex array object might need a bit of tweaking or the generateBabylonHDR functions do. the update cause more webgl error when using a pre processed HDR file produced using the generateBabylonHDROnDisk: [.Offscreen-For-WebGL-0x7f9edb812e00]GL ERROR :GL_INVALID_OPERATION : glTexImage2D: invalid internalformat/format/type combination 0x8814/0x1907/0x1406 196/#UTEVJ#0:1 [.Offscreen-For-WebGL-0x7f9edb812e00]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering. I made a Test Pre Process HDR Skybox playground to show the problem... @Sebavan and or @Deltakosh ... I am pinging you guys here also a A Regular HDR working sample is here

There seems to be some way of loading PRE PROCESSED HDR images using HDRCubeTexture... What is this and HOW DO I PREPROCESS a HDR ??? Anyone

If you specify texture customType = "BABYLON.HDRCubeTexture" and the other HDRCubeTexture properties... With .hdr as the name... It will still try to use as regular CubeTexure and look for _px and _nx cube texture files: I think babylon.texture.ts Parse function: now is : if (parsedTexture.isCube) { return CubeTexture.Parse(parsedTexture, scene, rootUrl); } and should be something like: if (parsedTexture.isCube) { if (parsedTexture.customType === "BABYLON.HDRCubeTexture") return HDRCubeTexture.Parse(parsedTexture, scene, rootUrl); else return CubeTexture.Parse(parsedTexture, scene, rootUrl); } OR IS THERE MORE to make HDRCubeTextures load from serialized .babylon file instead of only hand coding?

Hi all, I just found a big pack of free studio setup cube maps, unfortunately they are all in HDR format, is there any support for HDR files in BABYLON or could we add it? Or does anybody happen to know a tool or software to convert a hdr to the six images needed to create a BABYLON cubemap texture?