iOSにフィルタを追加してopenGLESを使用して画像をダイナミックにレンダリングする詳細な説明と例

iOSで画像にフィルタを追加し、openGLESを使用して画像を動的にレンダリングする

画像にフィルタを追加する方法にはこれらの2種類があります: CoreImage / openGLES

　以下にCoreImageを使用して画像にフィルタを追加する方法について説明します。主な手順は以下の通りです:

#1.CIImage形式の原始画像をインポートします

#2.CIFilterフィルタを作成します

#3.CIContextを使用してフィルタ内の画像をレンダリングします

#4.出力画像をエクスポートします

参照コード:

//CIImageをインポートします
  CIImage *ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@"hua"]];
  //Filterフィルタを作成します
  CIFilter *filter = [CIFilter filterWithName:@"CIPixellate"];
  [filter setValue:ciImage forKey:kCIInputImageKey];
  [filter setDefaults];
  CIImage *outImage = [filter valueForKey:kCIOutputImageKey];
  //CIContextを使用してフィルタ内の画像をレンダリングします
  CIContext *context = [CIContext contextWithOptions:nil];
  CGImageRef cgImage = [context createCGImage:outImage
                    fromRect:[outImage extent]];
  //画像を出力します
  UIImage *showImage = [UIImage imageWithCGImage:cgImage];
  CGImageRelease(cgImage);
  UIImageView *imageView = [[UIImageView alloc] initWithImage:showImage];
  imageView.center    = self.view.center;
  [self.view addSubview:imageView];

複数のフィルタを設定する場合、新しいCIFilterを作成するだけでなく、kCIInputAngleKeyも追加で設定する必要があります。以下のコード例：

//CIImageをインポートします
  CIImage *ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@"hua.jpeg"]];
  //Filterフィルタを作成します
  CIFilter *filter = [CIFilter filterWithName:@"CIPixellate"];
  [filter setValue:ciImage forKey:kCIInputImageKey];
  [filter setDefaults];
  CIImage *outImage = [filter valueForKey:kCIOutputImageKey];
  CIFilter *filterTwo = [CIFilter filterWithName:@"CIHueAdjust"];
  [filterTwo setValue:outImage forKey:kCIInputImageKey];
  [filterTwo setDefaults];
  [filterTwo setValue:@(1.0f) forKey:kCIInputAngleKey]; //この行を追加しないと新しいフィルタは効果がありません
  CIImage *outputImage = [filterTwo valueForKey:kCIOutputImageKey];
  //CIContextを使用してフィルタ内の画像をレンダリングします
  CIContext *context = [CIContext contextWithOptions:nil]; 
  CGImageRef cgImage = [context createCGImage:outputImage
                    fromRect:[outputImage extent]];
  //画像を出力します
  UIImage *showImage = [UIImage imageWithCGImage:cgImage];
  CGImageRelease(cgImage);
  UIImageView *imageView = [[UIImageView alloc] initWithImage:showImage];
  imageView.center    = self.view.center;
  [self.view addSubview:imageView];

ここでOpenGLESを使用してフィルタを適用して画像をレンダリングする方法について説明します

openGlESを使用する手順は概ね以下の通りです:

#1.レンダリングする画像をインポートします

#2.OpenGLESレンダリングのコンテキストを取得します

#3.レンダリングのGLKViewバッファを作成します

#4.CoreImageのコンテキストを作成します

#5.CoreImageの関連設定を行います

#6.画像のレンダリングと表示を開始します

以下の参考コードで:

//レンダリングする画像をインポートします
  UIImage *showImage = [UIImage imageNamed:@"hua.jpeg"];
  CGRect rect    = CGRectMake(0, 0, showImage.size.width, showImage.size.height);
  //OpenGLESレンダリングのコンテキストを取得します
  EAGLContext *eagContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2
  //レンダリングのバッファを作成します
  GLKView *glkView = [[GLKView alloc] initWithFrame:rect
                       context:eagContext];
  [glkView bindDrawable];
  [self.view addSubview:glkView];
  //CoreImageのコンテキストを作成します
  CIContext *ciContext = [CIContext contextWithEAGLContext:eagContext]}
                           options:@{kCIContextWorkingColorSpace: [NSNull null]}];
  //CoreImage関連設定
  CIImage *ciImage = [[CIImage alloc] initWithImage:showImage];
  CIFilter *filter = [CIFilter filterWithName:@"CISepiaTone"];
  [filter setValue:ciImage forKey:kCIInputImageKey];
  [filter setValue:@(0) forKey:kCIInputIntensityKey];
  //レンダリング開始
  [ciContext drawImage:[filter valueForKey:kCIOutputImageKey]
         inRect:CGRectMake(0, 0, glkView.drawableWidth, glkView.drawableHeight)
        fromRect:[ciImage extent]];
  [glkView display];

動的にレンダリングする場合は、UISilderを通じてコードのvaule値を動的に調整できます

[filter setValue:vaule forKey:kCIInputIntensityKey];

ご覧いただきありがとうございます。皆様のサポートに感謝します！