[iOS] Steps to create image filters with designers (디자이너와 이미지 필터 만드는 법)

평소 카메라 앱들을 보고

디자이너나 여행작가가 필터 디자인을 하면 개발자가 개발하는 프로세스?!? 는 어떻게 될까 너무 궁금했는데요.

 

 

 

 

 

상용 카메라 앱 개발 경험이 있으신 개발자분이 알려주셨습니다...!! (감사합니당..>__<)

프로세스는 이렇게 됩니다. (2년 전에 개발하셨던 한 분의 이야기를 들은 것이라서 다른 곳에서는 다른 방식 일 수 있다는 것 유의해주세요...!!!!)

------- 디자이너 ---------

1) 포토샵으로 원하는 필터를 만든다. 

2) 포토샵의 "Color lookup tables로 export하기" 기능을 이용하여 LUP Cube파일을 만든다.

3)  LUP Cube파일에서 LUP 이미지 파일을 만든다. 이미지 파일을 개발자에서 넘겨준다. 

 

 

-------- 개발자 ----------

4) 개발자는 받은 필터 파일을 이미지에 입히는 프로세싱을 한다. (CIColorCube 또는 Metal을 통해..!)

 

 

[배경지식]

Look-Up Table  이란..?!? 

 

우선 Color Space는 모든 컬러를 담고 있는 3-dimensional shapes로 표현될 수 있다고 합니다.

RGB는 각 면이 0에서 1 사이의 값을 갖는 큐브로 표현될 수 있습니다.

 

 

The RGB color space. Image via  https://en.wikipedia.org/wiki/RGB_color_space

 

 

 

Look-Up Table은 RGB 큐브를 얇은 slices로 슬라이스 합니다. 그리고 slices들을 평평한 이미지(flat image)로 배열(arrange)합니다. 

flat image는 이미지에서 해당 위치에 따른 컬러를 "Look up(찾아보기)"하는 테이블입니다. 

 

 

 

An unedited 3-D LUT. Image via  https://github.com/BradLarson/GPUImage/blob/master/framework/Resources/lookup.png

 

 

 

컬러가 이미지의 위치와 어떻게 관련되는지 여부는 큐브를 어떻게 잘라냈는지와 슬라이스를 어떻게 배열했는지에 따라 달라진다고 합니다.

 

 

 

 

 

[1] Color loopkup 설정해서 원하는 필터 만들기

 

m.blog.naver.com/PostView.nhn?blogId=phominator&logNo=220060038396&proxyReferer=https:%2F%2Fwww.google.com%2F

포토샵 기초[Photoshop CC] - 컬러 룩업 (Color Lookup)

 

[2] Color lookup tables로 export해서 LUT 파일 (.cube) 만들기

 

digital-photography-school.com/easily-make-lut-photoshop/

How to Easily Make a LUT in Photoshop

 

참고로 LUT는 Lookup Table의 약자입니다.

 

 

 

 

export 하면 이런 LUT파일을 만들어주는 것 같아요 (CUBE..?)

 

 

 

 

XCODE에서 열어보면..

이렇게 구성되어있더라구요

 

 

 

 

 

참고로 LUT파일은 영상편집할때도 쓰입니다. 

 

www.youtube.com/watch?v=dLXH4d_TYNo

 

 

 

==>  여기서 35 FREE LUTs를 다운 받을 수도 있습니다.

 

 

[3] LUT cube파일을 png파일로 변환하기 

 

포토샵에서 쉽게 할 수 있다고 합니다.

 

2번에서 만든 CUBE LUT 파일을 로드해줍니다.

 

 

 

 

png로 저장해줍니다.

 

 

 

출처: streamshark.io/obs-guide/converting-cube-3dl-lut-to-image

Convert a CUBE or 3DL LUT to a PNG Image

 

저는 무료 LUT Image 여기서 다운받았어요 
이메일쓰면 보내주는 여기서도 받을 수 있어요

 

 

[4.1] CIColorCube로 LUT based filter 만들기

 

three-dimensional color table을 사용하여 image pixels를 transform해주는 CIColorCube를 사용합니다.

파라미터들은 아래와 같습니다.

 

 

https://developer.apple.com/library/archive/documentation/GraphicsImaging/Reference/CoreImageFilterReference/index.html#//apple_ref/doc/filter/ci/CIColorCube

 

 

 

github.com/muukii/ColorCube

muukii/ColorCube

 

stackoverflow.com/questions/49973474/how-to-apply-lut-from-png-to-an-image-swift-xcode

How to apply LUT (from .png) to an image? (Swift + Xcode)

 

[4.2] Metal로 LUT based filter 만들기

 

programmer.ink/think/metal-series-of-tutorials-2-metal-implementation-of-lut-filters.html

Metal series of tutorials (2) - Metal implementation of LUT filters

 

 

======= 

자세한 코드 작업은

다음 글을 참고해주세요

 

 

[Reference]

medium.com/the-bergen-company/recreating-vsco-filters-in-darkroom-291114051a0e

Recreating VSCO Filters in Darkroom