Reflection with png or jpg

@PichouPichou, forgive me if I am going over things that you already know, but I find it’s helpful to explain everything that is going on for others that may see this thread. There is no way for us to calculate the contribution of the IBL based on the roughness of an individual pixel which changes the amount of the environment we sample to derive the final light contribution in real time on a phone. While I would love for real time ray tracing to be a thing we can get on all devices, we don’t have that kind of power right now so we are using a trick to simulate a ray-traced IBL solution.

What we do is precompute the environment texture in to 8 mip levels which reduce the number of pixels with each mip, effectively averaging tones across the texture. So if we start with a 512 px x 512 px image from one of the faces of the cube map, you will get resolutions of 512 x 512, 256 x 256, 128 x 128, 64 x 64, 32 x 32, 16 x 16, 8 x 8, and 4 x 4 pixels per face for the mip levels. See the image below which illustrates the averaging of colors on a face which saves us the calculations of the specular lobe based on the roughness of the pixel.

Then we will use those images to determine the environment lighting contribution for each pixel based on roughness which will smooth out the detail of the reflection on rough surfaces.

You can certainly start with a PNG or JPG for your environment as a panorama, or equirectangular, image like this one which is from a render out of Maya:

I would suggest using at least 16-bit png or jpg files so that you can get HDR pixels into the image so that you can simulate real light in an environment, but I tend to use 32-bit exr files to make sure I have a great source of data to export our environments with.

Then it’s a simple process of using Lys or IBLBaker at the link that @sebavan posted above. The reason you want to use this tool is twofold. The first is that it will take your panorama shot and create a cube map for you without visible seams. The second is that it does all of the mip calculations for you and will save them into the DDS format we are looking for.

If you are creating a custom environment by hand and don’t have the ability to render an equirectangular image, here is a method that you can use to do it:

  • First create whatever texture you want at a 2 x 1 ratio, the larger the better because we will be distorting the image. for this demonstration I am using a UV map so that you can see what is going on with the distortion.

  • You want to flatten the image and then use the Polar Coordinates filter on the image.

  • When the dialog window opens, choose Rectangular to Polar and hit OK.
    polarSettings

  • You will then want to use the clone stamp or heal brush to repair any seams you find at the center of the image where the conversion of the top edge pixels can be seen. This is only necessary if you see any pixels that don’t match up.

  • Then you will run the Polar Coordinates again and choose Polar to Rectangular to unwrap the image, but build in the polar distortion you will need for your environment.

  • You will note that the bottom edge is not distorted. To accomplish this, you need to rotate the image 180 degrees and go through the previous steps again… Rectangular to Polar, clone seams, Polar to rectangular and then rotate the image to the correct orientation.

Then you are ready to bring the image into one of the tools, my favorite is Lys but IBLBaker is free. You will see that your image now wraps correctly in a spherical projection.

And the most important thing is that the software will take care of creating your cube map for you.

I can understand your hesitation to move to DDS files as they aren’t easy to open or edit, Visual Studio is one package that can but there aren’t many and fewer with the legacy DDS headers enabled like Babylon requires. However, I typically don’t open DDS files once they are created as I keep the source files in PSD or PNG format for edits. It’s very quick to run a file through Lys so that is not a major concern in our pipeline. I can convert a file in less than a minute because I’ve done them so many times.

I hope this helps answer some questions or gives you some methods to try out. Unfortunately, without the mip chain in the file we aren’t able to effectively calculate roughness for reflections and have tried to support free tools to get you there. However, even buying a full license of Lys is not too expensive and will pay for itself even just for the quick conversion to cube maps for IBL or Skyboxes.

Let me know if you have more questions or concerns.

8 Likes