[CoreImage] 기본 필터 & 커스텀 필터 (OpenGL, Metal) 적용하기

[1] 기본 필터 

Core Image 는 이미지 프로세싱을 위한 기술입니다.

내장된(built-in) 이미지 필터를 사용해서 이미지를 프로세싱할 수 있고

여러가지 이미지 필터를 체이닝해서 복잡한 효과를 낼 수 도 있다고 합니다.

 

Core Image Filter Reference 에서 빌트인 이미지 필터들이 어떤 것이 있는 지 볼 수 있습니다.

 

 

필터를 적용하기 위해, Core Image에서 이렇게 세개가 핵심 개념입니다

 

 

 

앱에 milk라는 이미지를 넣어줬구요

 

 

 

CISepiaTone이라는 필터를 사용해보겠습니다.

 

 

 

 

 

 

이런 결과가 나오게 됩니다

 

위의 코드는 총 3단계를 진행했습니다.

 

1. input으로 들어갈 이미지를 CIImage로 변환하여 준비

2. 쓰고 싶은 빌트인 필터 고르고 아래의 key,value 값 설정해주기

 

"kCIInputImageKey" : 1번에서 준비한 CIImage,

"kCIInputIntensityKey" : 0~1 사이의 값

 

 

3. 필터가 준 output 이미지를 (필터 적용 결과를 CIImage로 줌)

context를 이용해서 ciimage로 한번 더 만든 후, 그것으로 UIImage로 변환한다. 

 

 

 

UIImage(CIImage:) 를 써서 필터 output이미지를 바로 UIImage로 변경하지 않는 이유는

raywenderlich - Core Image Tutorial: Getting Started 에 나와있는데요...!! 

(번역: atelier-chez-moi.tistory.com/52?category=1004941) 

 

UIImage(cgImage: filter.outputImage)

 

이렇게 하면 새로운 CIContext를 만든다고 합니다.

하지만 필터를 계속 업데이트 할때마다 위의 코드로 인해 새로운 CIContext를 매번 생성하면 느려진다고 하네요.

 

그래서 성능을 위해 하나의 CIContext를 만들고 이것을 계속 재사용합니다. 

 

 

 

필터 체이닝 또는 필터 합치기

 

필터가 적용된 CIImage를 리턴해주는 applyingFilter 함수를 이용하여 체이닝 합니다. 

func applyingFilter(_ filterName: String, parameters params: [String : Any]) -> CIImage

 

이런식으로 해주면 됩니다.

 

 

 

 

두가지 필터가 적용된 결과가 나오는 것을 볼 수 있습니다.

 

[2] 커스텀 필터

 

커스텀 CIFilter를 만들고 싶다면 

커스텀 CIKernel를 작성해야합니다.

 

kernel은 필터에게 input image의 각 픽셀을 어떻게 transform할 것인지 말해주는 역할을 한다고 합니다.

세가지 서브 타입의 kernel이 있습니다.

 

1. CIColorKernel
- CIKernel의 서브클래스
- color processing 할때 쓰면 됨

 

2. CIWarpKernel

- CIKernel의 서브클래스

-  geometry processing 할때 쓰면 됨

2. CIBlendKernel 

- CIColorKernel의 서브클래스

 

==> 아래에서 CIColorKernel을 사용해보겠습니다..!

 

 

 

이니셜라이저를 보면 string으로 만드는 것은 deprecated 되었고

메탈 데이터 관련 이니셜라이저로 커널을 만들어야되네요

 

 

 

예전에는(iOS 8.0 - 12.0) 이렇게 생긴 GLSL (OpenGL shading language)  로 

 

https://spin.atomicobject.com/2016/10/20/ios-image-filters-in-swift/

 

 

 

아래와 같이 kernel을 만들 수 있었는데,

 

 

 

 

 

 

iOS 13부터는 다른 이니셜라이저를 써야한다는 것입니다...! 

이제 OpenGL shading language (GLSL) 이 아니라 Metal Shading Language (MSL) 를 써야하는 것 같아요..!

(애플 가이드: Metal Shading Language for Core Image Kernels )

 

 

 

그럼 메탈관련 이니셜라이저로도 해보겠습니다-! 

 

우선 myColor라는 메탈 파일을 하나 만듭니다.

 

https://medium.com/@shu223/core-image-filters-with-metal-71afd6377f4

 

그리고 메탈관련 이니셜라이저로 커널을 만들어주세요

 

 

 

(Xcode는 모든 metal 파일들을 빌드해서 a default Metal library를 만들고 그것을 앱에 embed시킵니다. 그래서 default 메탈 라이브러리 불러 온 것입니다.)

 

 

 

 

이렇게만 하면 크래쉬가 나는데, 아래와 같이 빌드세팅도 해줘야한다네요!

 

https://developer.apple.com/documentation/coreimage/cikernel/2880194-kernelwithfunctionname

 

   

 

1) other metal compiler flags에 -fcikernel 넣어주기

 

 

 

2) user-define setting 추가한 후,

 

 

key는 MTLLINKER_FLAGS    

value는 -cikernel

넣어주기

 

 

 

 

이렇게 해주려고 설정한 것 같아요

 

https://developer.apple.com/videos/play/wwdc2017/510/

 

 

 

그리고 돌려보면...!! 

필터가 잘먹습니다.

 

 

 

 

 

 

 

 

 

[참고하기]

moltengl.com  이 아래 사진처럼 glsl을 msl로 자동으로 바꿔주는 것 같은데,
어떻게 써야하는지 잘모르겠다..ㅠㅠ

 

 

 

github.com/truemetal/cikernel-metal-vs-glsl

truemetal/cikernel-metal-vs-glsl

github.com/alexiscn/MetalFilters

alexiscn/MetalFilters

 

 

 

www.raywenderlich.com/7475-metal-tutorial-getting-started

Metal Tutorial: Getting Started

 

developer.apple.com/documentation/metal/migrating_opengl_code_to_metal

Migrating OpenGL Code to Metal | Apple Developer Documentation