[iOS] Lookup Table Image (LUT Image)로 필터 적용하기 with CIColorCube, Metal

디자이너와 이미지 필터만드는 방법 에서 이어집니다-!! 

⚠️ 정확히 이해못했는데, 기록용으로 쓰는 것이라서 자세한 설명을 기대하지 마시오 ⚠️

⚠️ Metal로 하는법은 제대로 안나오고 있으니 따라하지 마시오 ⚠️

 

[1] Lut Image 프로젝트에 넣어주기

여기서 35 FREE LUTs를 다운받아주세요-! 

디자이너분이 포토샵 작업 후 35개의 Lut image를 주셨다고 가정합니다.

 

이렇게 넣어주세요

 

그리고 Lookup 이라는 enum을 만들어주세요

enum Lookup: String, CaseIterable {
    case GamingCareers_Acevdeo
    case GamingCareers_Barrera
    case GamingCareers_Brewer
    case GamingCareers_Brooks
    case GamingCareers_Cain
    case GamingCareers_Choi
    case GamingCareers_Clayton
    case GamingCareers_Coleman
    case GamingCareers_Faulkner
    case GamingCareers_Griffith
    case GamingCareers_Harmon
    case GamingCareers_Haynes
    case GamingCareers_Hodges
    case GamingCareers_Horton
    case GamingCareers_Huerta
    case GamingCareers_Hughes
    case GamingCareers_Larson
    case GamingCareers_Lester
    case GamingCareers_Levy
    case GamingCareers_Lynn
    case GamingCareers_Mccall
    case GamingCareers_Montes
    case GamingCareers_Moreno
    case GamingCareers_Palmer
    case GamingCareers_Rasmussen
    case GamingCareers_Rowland
    case GamingCareers_Stone
    case GamingCareers_Swanson
    case GamingCareers_Warren
    case GamingCareers_Willis
}

 

복붙 하나씩 안하고 전체선택해서 가져오면 파일 이름만 쭉- 복붙 되게 하는 방법이 있어요! 

(예전에 했는데, 바로 기록을 안해둬서 어떻게 했는지 까먹었어요ㅠㅠ)

 

 

 

[2.1] CIColorCube로 ImageFilter 만들기

ColorCubeImageFilter를 만들어주세요

 

 

colorcube date 만들고 하는 부분은 잘 이해를 못했어요ㅠㅠㅠ (어떤 것을 찾아봐야 이해할수있을까요,,?)

여기서 코드를 가져왔습니다.

 

그리고 lut image에 따라서 어떻게 필터가 적용되는 가 보고싶어서

이런식으로 viewController 만들어줬습니다. 

 

 

lut image를 누르면 원본이미지에 필터가 입혀지게 해놨습니다. 

 

 

 

 

[2.2] Metal로 ImageFilter 만들기

MetalImageFilter를 만들어주세요

 

 

메탈파일에 shader함수들도 작성해줍니다. 

vertexPassThroughShader를 거친 후에 

fragmentLookupShader를 거치게 됩니다.

 

 

 

 

여기서 가져온 metalColorLookUp이 핵심입니다..!! 

ColorCubeImageFilter의 cube date 만드는 것과 같은 역할을 하는 것 같아요

 

근데 size값에 정확히 어떤 값을 넣어줘하는 지 모르겠어요. @@ 저는 1을 넣어줘보았습니다.

 

(github.com/alexiscn/MetalFilters/blob/master/MetalFilters/Filters/MTCremaFilter.metal <- 이 필터처럼 33을 넣어주면

색깔도 이상하고 해상도도 완전 깨짐. )

 

 

아까 만든 viewController에 colorCubeImageFilter 대신에 metalImageFilter를 사용해줍니다.

 

 

 

 

 

그러면 이렇게 색깔도 이상하고

이미지 사이즈도 안맞음.

 

참고로 더 작은 이미지로 나오는데 아래처럼 가장자리를 늘리는 설정해놔서 저렇게 나온 것임.

descriptor.sAddressMode = .clampToEdge
descriptor.tAddressMode = .clampToEdge