Shader sanity check

Also there’s another thread where it looks like adjusting camera.minZ helped. :slightly_smiling_face:

1 Like

Would be great to see an actual repro in the playground ?

1 Like

If I could repro it then I’d know what was wrong and could fix it. This is specifically not happening in the playground.

Oh my gosh. Setting it to 1 just fixed it. Go figure. Thank you! :slight_smile:

1 Like

Time for another sanity check I guess.

I’m working with colour grading. It’s not a very good source image, but I’m happy with the preview results:

(ignore the middle point I accidentally dragged it right out before taking the editor screenshot)

However it comes out like this in babylon when saved and loaded as a .3dl:

I’ve tried toggling green depth etc, but this seems to be way more out of whack than that would cause. Has anyone made a .3dl file before? The 3dl file I’ve made is here: https://cdn.jsdelivr.net/gh/antidamage/Filestore/mars2.3dl

And here’s a PG with it looking wild: https://www.babylonjs-playground.com/#17VHYI#9

Is the format just wrong?

3dl files should work just fine, adding @PatrickRyan who helped created some from photoshop

@Antidamage, it looks like you are using 3D LUT Creator Pro (from the header of the 3dl file). I did a little digging and extrapolation from the data in the file and I think your LUT is just too high fidelity. From what I remember, and @sebavan can correct me on this, we are limited to 32 grid points in our LUTs from a performance standpoint.

Your LUT is using a 64 point grid from the header and from the number of values in the first line of data:

In a 2D app like photoshop, this high-resolution grid will render fine like this:

But when applied in scene, we are just holding too much data in the grid, so what I think is happening is that we are truncating the overflow 32 grid points:

Here is the LUT loaded into one of our sample PGs: Broken LUT | Babylon.js Playground (babylonjs.com). This is what the sample PG looks like with a 32-point grid LUT generated from Photoshop: LUT demo | Babylon.js Playground (babylonjs.com)

I don’t have a copy of 3D LUT Creator Pro, so I can’t help you with the process for reducing the resolution of the grid in that package, but I think a smaller grid will correct the problem.

1 Like

That’s a really great explanation, thank you. Do you have any links on how to export a 3d LUT from photoshop? I haven’t been able to find anything like that in there.

Edit: scratch that, I finally figured it out. Thanks so much for all the help :slight_smile:

2 Likes

For anyone else seeing this thread, here are the simplified steps for creating a LUT in Photoshop:

  1. Open a screen shot of your scene for adjustment. Make sure this is a flattened background layer as the export to 3DL needs to have a background.
  2. Add adjustment layers to create the look and feel you want. It is important that all adjustments (curves, levels, color balance, posterization, etc.) are added as adjustment layers and not baked into the background as this is how the LUT adjustments are saved.
  3. Navigate to File > Export > Color Lookup Tables… and when the pop-up opens, choose the .3dl file type. You can export the others if you wish, but Babylon.js only uses the .3dl format
    image
  4. Most importantly, you need to choose a Medium (32 points) Grid Quality. In our testing, more than this creates an unnecessarily large file with diminishing returns in quality. The medium quality LUT will range in size in the neighborhood 300-600k where the high resolution LUT will be much heavier, reaching 4-5mb which is a huge difference in download requirements just for a post process asset. This is the reason we did not support higher quality LUTs in the first place. They are a powerful tool but definitely come with a cost.
3 Likes