Add LUTImageLoader.

[NikLever]

Related issue: #XXXX

Description

I was surprised to find that I couldn't load a LUT directly from an image in png or jpg format. So I added LUTImageLoader and an example with 3 LUT image files. The LUT files can have blocks placed horizontally or vertically. It is assumed that the block size defines the number of blocks. By default the image is flipped in the y, but this can be passed to the constructor.

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

Filesize dev	Filesize PR	Diff
649.1 kB (160.9 kB)	649.1 kB (160.9 kB)	+0 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

Filesize dev	Filesize PR	Diff
442.4 kB (107 kB)	442.4 kB (107 kB)	+0 B

[Mugen87]

For testing: https://rawcdn.githack.com/NikLever/three.js/NiksFeatures/examples/webgl_postprocessing_imglut.html

[Mugen87]

Instead of having a new example, could you integrate LUTImageLoader into webgl_postprocessing_3dlut (next to LUTCubeLoader)?

[NikLever]

Added to the existing example

[gkjohnson]

I added some comments - but a couple other questions first:

• Are these kinds of png LUT files easily found in the wild? How can a user generate them?
• Where did the example PNG LUTs in the PR come from?

Thanks!

[NikLever]

Are these kinds of png LUT files easily found in the wild?

They regularly appear in the Unity pipeline https://www.youtube.com/watch?v=TQkI5XZ7pfE

How can a user generate them?

Using Photoshop

Where did the example PNG LUTs in the PR come from?

I created them based on this tutorial https://www.patreon.com/posts/lut-in-unity-urp-44252330

[NikLever]

Here's another link from a Unity perspective https://youtu.be/JWufZtMPSPI?si=-GylurIPDsH4yUea&t=152

[gkjohnson]

How can a user generate them?

Using Photoshop
...
I created them based on this tutorial https://www.patreon.com/posts/lut-in-unity-urp-44252330

I'm unable see the post. Can you roughly explain the process? Is it different than the Unreal LUT generation referenced below?

They regularly appear in the Unity pipeline https://www.youtube.com/watch?v=TQkI5XZ7pfE

For Unity it looks like this is only supported via "Amplify Color" for handling LUTs and not baked into the engine, right? The fact that green is swapped vertically also strikes me as odd. Though it looks like Unreal also supports using lut strips. The Unreal LUT documentation and available neutral LUT strip is here.

Here's another link from a Unity perspective https://youtu.be/JWufZtMPSPI?si=-GylurIPDsH4yUea&t=152

Sorry to keep digging, I don't have Amplify LUT so I'm trying to understand this - but in the video linked the green channel is not flipped. At what point does it get flipped? I guess I'm partially feeling like flipY should not default to true.

[gkjohnson]

Also I just recalled that we have a page on LUTs which includes a neutral LUT generator here (which has green increasing from top down like Unreals strips):

https://threejs.org/manual/?q=lut#en/post-processing-3dlut

[NikLever]

How can a user generate them?

Using Photoshop
...
I created them based on this tutorial https://www.patreon.com/posts/lut-in-unity-urp-44252330

I'm unable see the post. Can you roughly explain the process? Is it different than the Unreal LUT generation referenced below?

He applies Photoshop color grading to the NeutralLUT.png

They regularly appear in the Unity pipeline https://www.youtube.com/watch?v=TQkI5XZ7pfE

For Unity it looks like this is only supported via "Amplify Color" for handling LUTs and not baked into the engine, right? The fact that green is swapped vertically also strikes me as odd. Though it looks like Unreal also supports using lut strips. The Unreal LUT documentation and available neutral LUT strip is here.

Here's another link from a Unity perspective https://youtu.be/JWufZtMPSPI?si=-GylurIPDsH4yUea&t=152

Sorry to keep digging, I don't have Amplify LUT so I'm trying to understand this - but in the video linked the green channel is not flipped. At what point does it get flipped? I guess I'm partially feeling like flipY should not default to true.

I just double checked and a neutral affect is created with the NeutralLUT having green at the top

[NikLever]

Also I just recalled that we have a page on LUTs which includes a neutral LUT generator here (which has green increasing from top down like Unreals strips):

https://threejs.org/manual/?q=lut#en/post-processing-3dlut

Looks like Unity uses them green at the top and Unreal green at the bottom. I'm neutral on the default. But do feel we should include the option. If you want the Unreal as the default then should I flip the png images and take the default as flipY = false. Or should I change the application to use the second parameter and not the default? Maybe add a comment about unreal and unity.

This is my first contribution to the library and I'm very impressed with how rigorous the approval process is :-)

[NikLever]

For Unity it looks like this is only supported via "Amplify Color" for handling LUTs and not baked into the engine, right? The fact that green is swapped vertically also strikes me as odd. Though it looks like Unreal also supports using lut strips. The Unreal LUT documentation and available neutral LUT strip is here.

Unity URP has a post-processing filter that you can add to a Volume, Color Look-up. It is described in the e-book I wrote for Unity. https://resources.unity.com/ebooks/the-universal-render-pipeline-cookbook-unity-2022-lts-edition?ungated=true
https://blog.unity.com/engine-platform/12-recipes-for-popular-visual-effects-using-universal-render-pipeline

Green bottom

[gkjohnson]

I just double checked and a neutral affect is created with the NeutralLUT having green at the top

I believe that Unity expects green increasing bottom to top - I was just trying to reconcile it with the video linked. But I see now that that video is about writing a custom shaders.

should I change the application to use the second parameter and not the default? Maybe add a comment about unreal and unity.

I think given that unreal and the three.js manual uses increasing green from top to bottom and an unofficial Unity uses the reverse means that we should default to non flipped and we can flip the images.

This is my first contribution to the library and I'm very impressed with how rigorous the approval process is :-)

Heh file formats formats and standards like this tend to be a sticking point for me. Thanks for bearing with me. I've been bit by having to support weird non-standard features or ill-defined specifications in the past so I like to try to understand and get it right up front where possible. I think a big project has a responsibility to not contribute to the proliferation of new or non standard formats that users may have the expectation of other engines supporting in the future. To be honest I'm a bit annoyed that both Unity and Unreal use this image format instead of the CUBE or 3DL formats that the rest of the color grading tools seem to use and support... And even worse that they're not consistent.

Further changes requried.

[NikLever]

Changed default flipY to false, inverted the lut image strips.