綺麗に撮れすぎるスマホカメラからブレを取り戻す

iOSDC Japan 2026 (https://fortee.jp/iosdc-japan-2026/proposal/32fb9648-3596-4302-a1bd-c00627701b4c)
ルーキーズLT(5分) 発表資料

Transcript

1. 綺麗に撮れすぎるスマホカメラからブレを取り戻す｜genshi 綺麗に撮れすぎる スマホカメラからブレを取り戻す genshi
2. 綺麗に撮れすぎるスマホカメラからブレを取り戻す｜genshi product｜pixiv genshi • ピクシブ株式会社 26卒 iOSアプリエンジニア • pixivの iOSアプリの開発を担当 • アイマス, 麻雀, ノベルゲーム 2 2
3. 綺麗に撮れすぎるスマホカメラからブレを取り戻す｜genshi はじめに
4. 「写真」撮ってる？ 4
5. 僕は撮ってます 5
6. ブレブレの写真を 6
10. ブレブレの写真を どう撮るか 10
11. カメラを高速で近づけたり遠ざけたりする 11
12. 像全体が拡大・縮小 12
13. 各点が中心から外側に移動し広がる 13
14. シャッターに各点の移動が軌跡として映る 14
15. ごはんとエンカウント 15
16. ブレブレの写真を 撮るのって難しい 16
17. いくつか問題が 17
18. 問題1 18
19. 最近のiPhoneの 性能が良すぎる 19
20. 20 https://www.apple.com/jp/iphone-17-pro/
21. 21 https://www.apple.com/jp/iphone-18-pro/
22. 性能が上がると困ること • シャッターが速い 22
23. 性能が上がると困ること • シャッターが速い • 軌跡が写るには露光中に像が動く必要がある 23
24. 性能が上がると困ること • シャッターが速い • 軌跡が写るには露光中に像が動く必要がある • シャッターが速くなると像の移動量も減る 24
25. 性能が上がると困ること • シャッターが速い • 軌跡が写るには露光中に像が動く必要がある • シャッターが速くなると像の移動量も減る • 手ブレ補正 25
26. 性能が上がると困ること • シャッターが速い • 軌跡が写るには露光中に像が動く必要がある • シャッターが速くなると像の移動量も減る • 手ブレ補正 • 揺れがレンズやセンサー側の逆方向の動きで相殺される 26
27. 性能が上がると困ること • シャッターが速い • 軌跡が写るには露光中に像が動く必要がある • シャッターが速くなると像の移動量も減る • 手ブレ補正 • 揺れがレンズやセンサー側の逆方向の動きで相殺される • Computational Photography (Smart HDR, Deep Fusionなど) 27
28. 趣味でブレた写真 撮ってる人が困る😭 28
29. 問題2 29
30. カメラを高速で近づけたり遠ざけたりするのが恥ずかしい 30
31. カメラを高速で近づけたり遠ざけたりするのが恥ずかしい 31
32. 同期からの声 32
33. コイツとご飯行く とスマホ振り回して て恥ずかしいな… 33
34. iOSエンジニアなら 技術で解決 💪 34
35. 綺麗に撮れすぎるスマホカメラからブレを取り戻す｜genshi 本題
36. アプローチ1 36
37. 高速でレンズを 動かす 37
38. setFocusModeLoc ked(lensPosition:) 38 https://developer.apple.com/documentation/avfoundation/avcapturedevice/ setfocusmodelocked(lensposition:completionhandler:)
39. レンズの位置を制御 39
40. カメラデバイスの存在チェック nonisolated func stepHardwareSweep() { guard let captureDevice else { return } sweepPhase += Self.sweepUpdateInterval / Self.sweepPeriod if sweepPhase >= 1 { sweepPhase -= 1 } // Smooth sine wave 0 -> 1 -> 0 shared by both drives. let wave = 0.5 - 0.5 * cos(2 * Double.pi * sweepPhase) do { try captureDevice.lockForConfiguration() if captureDevice.isLockingFocusWithCustomLensPositionSupported { captureDevice.setFocusModeLocked(lensPosition: Float(wave)) } let maxZoom = min(Self.sweepMaxZoomFactor, captureDevice.activeFormat.videoMaxZoomFactor) captureDevice.videoZoomFactor = 1 + (maxZoom - 1) * CGFloat(wave) } captureDevice.unlockForConfiguration() } catch { return } 40
41. レンズ位置とズーム倍率の目標値を作成 nonisolated func stepHardwareSweep() { guard let captureDevice else { return } sweepPhase += Self.sweepUpdateInterval / Self.sweepPeriod if sweepPhase >= 1 { sweepPhase -= 1 } // Smooth sine wave 0 -> 1 -> 0 shared by both drives. let wave = 0.5 - 0.5 * cos(2 * Double.pi * sweepPhase) do { try captureDevice.lockForConfiguration() if captureDevice.isLockingFocusWithCustomLensPositionSupported { captureDevice.setFocusModeLocked(lensPosition: Float(wave)) } let maxZoom = min(Self.sweepMaxZoomFactor, captureDevice.activeFormat.videoMaxZoomFactor) captureDevice.videoZoomFactor = 1 + (maxZoom - 1) * CGFloat(wave) } captureDevice.unlockForConfiguration() } catch { return } 41
42. カメラに反映 nonisolated func stepHardwareSweep() { guard let captureDevice else { return } sweepPhase += Self.sweepUpdateInterval / Self.sweepPeriod if sweepPhase >= 1 { sweepPhase -= 1 } // Smooth sine wave 0 -> 1 -> 0 shared by both drives. let wave = 0.5 - 0.5 * cos(2 * Double.pi * sweepPhase) do { try captureDevice.lockForConfiguration() if captureDevice.isLockingFocusWithCustomLensPositionSupported { captureDevice.setFocusModeLocked(lensPosition: Float(wave)) } let maxZoom = min(Self.sweepMaxZoomFactor, captureDevice.activeFormat.videoMaxZoomFactor) captureDevice.videoZoomFactor = 1 + (maxZoom - 1) * CGFloat(wave) } captureDevice.unlockForConfiguration() } catch { return } 42
44. なんか違う… 44
45. ぼやけて滲んでいるだけで軌跡が無い 45
46. もっと集中線や ブラーが欲しい！ 46
47. アプローチ2 47
48. 画像処理 48
49. 📱→ 49
50. 📱→ 画像処理😭 50
51. 📱→ 画像処理😭 逆にブレ → 51
52. 📱→ 画像処理😭 逆にブレ → 👍 52
53. フレームを20枚くらい撮ります guard var burst = activeBurst else { return } let now = CACurrentMediaTime() guard now >= burst.startTime else { return } if now >= burst.nextFrameTime, let frame = makeFrame(from: sampleBuffer) { burst.frames.append(CapturedFrame(image: frame, timestamp: now, motion: latestMotion)) burst.nextFrameTime = now + burst.frameInterval activeBurst = burst } 53
54. 少しづつ拡大&透明にして重ねます for layer in 1...layerCount { let progress = CGFloat(layer) / CGFloat(layerCount) let scale = config.minScale + (config.maxScale - config.minScale) * progress let direction: CGFloat = layer.isMultiple(of: 2) ? 1 : -1 let rotation = config.rotationJitter * direction * progress let transform = CGAffineTransform(translationX: center.x, y: center.y) .rotated(by: rotation) .scaledBy(x: scale, y: scale) .translatedBy(x: -center.x, y: -center.y) let scaled = source.transformed(by: transform).cropped(to: extent) let alphaShaped: CIImage if let mask = maskImage { alphaShaped = scaled.applyingFilter( "CIBlendWithMask", parameters: [ "inputBackgroundImage": transparent, "inputMaskImage": mask ] ) } else { alphaShaped = scaled } } let weighted = alphaShaped.applyingFilter( "CIColorMatrix", parameters: [ "inputAVector": CIVector(x: 0, y: 0, z: 0, w: config.layerAlpha) ] ) output = weighted.composited(over: output).cropped(to: extent)
55. センサの値を使って 移動量を決める 55
57. いい感じに ブレた気がする 57
58. ズームブラーで盛る 58
59. CIFilter 59 https://developer.apple.com/documentation/coreimage/cifilter-swift.class
60. 中心は透明・外周は不透明のようなマスクを作る let maskImage = CIFilter( name: "CIRadialGradient", parameters: [ "inputCenter": CIVector(x: center.x, y: center.y), "inputRadius0": innerRadius, "inputRadius1": outerRadius, "inputColor0": CIColor(red: 0, green: 0, blue: 0, alpha: 0), "inputColor1": CIColor(red: 1, green: 1, blue: 1, alpha: 1) ] )?.outputImage?.cropped(to: extent) 60
61. 中心は透明・外周は不透明のようなマスクを作る let maskImage = CIFilter( name: "CIRadialGradient", parameters: [ "inputCenter": CIVector(x: center.x, y: center.y), "inputRadius0": innerRadius, "inputRadius1": outerRadius, "inputColor0": CIColor(red: 0, green: 0, blue: 0, alpha: 0), "inputColor1": CIColor(red: 1, green: 1, blue: 1, alpha: 1) ] )?.outputImage?.cropped(to: extent) 61
62. 中心は透明・外周は不透明のようなマスクを作る let maskImage = CIFilter( name: "CIRadialGradient", parameters: [ "inputCenter": CIVector(x: center.x, y: center.y), "inputRadius0": innerRadius, "inputRadius1": outerRadius, "inputColor0": CIColor(red: 0, green: 0, blue: 0, alpha: 0), "inputColor1": CIColor(red: 1, green: 1, blue: 1, alpha: 1) ] )?.outputImage?.cropped(to: extent) 62
63. 中心は透明・外周は不透明のようなマスクを作る let maskImage = CIFilter( name: "CIRadialGradient", parameters: [ "inputCenter": CIVector(x: center.x, y: center.y), "inputRadius0": innerRadius, "inputRadius1": outerRadius, "inputColor0": CIColor(red: 0, green: 0, blue: 0, alpha: 0), "inputColor1": CIColor(red: 1, green: 1, blue: 1, alpha: 1) ] )?.outputImage?.cropped(to: extent) 63
65. 綺麗に撮れすぎるスマホカメラからブレを取り戻す｜genshi DEMO
67. 綺麗に撮れすぎるスマホカメラからブレを取り戻す｜genshi おわりに
68. みなさんも 躍動感ある写真 撮ってみませんか？ 68
69. みなさんも 躍動感ある写真 撮ってみませんか？ 69
70. 綺麗に撮れすぎるスマホカメラからブレを取り戻す｜genshi 綺麗に撮れすぎる スマホカメラからブレを取り戻す genshi