SwiftUI Metal Shaders: GPU ile Gorsel Efektler

1import SwiftUI
2 
3// Temel kullanim - ShaderLibrary otomatik .metal dosyalarini bulur
4struct ShaderDemoView: View {
5    @State private var startDate = Date()
6 
7    var body: some View {
8        TimelineView(.animation) { timeline in
9            let elapsedTime = timeline.date.timeIntervalSince(startDate)
10 
11            Image("landscape")
12                .resizable()
13                .aspectRatio(contentMode: .fit)
14                // Color effect shader uygula
15                .colorEffect(
16                    ShaderLibrary.hueRotation(
17                        .float(elapsedTime)
18                    )
19                )
20        }
21    }
22}

1// Color Effect icin:
2[[ stitchable ]] half4 colorShader(float2 position, half4 color, ...args)
3 
4// Distortion Effect icin:
5[[ stitchable ]] float2 distortionShader(float2 position, ...args)
6 
7// Layer Effect icin:
8[[ stitchable ]] half4 layerShader(float2 position, SwiftUI::Layer layer, ...args)

1// Shaders.metal dosyasi
2#include <metal_stdlib>
3#include <SwiftUI/SwiftUI_Metal.h>
4using namespace metal;
5 
6// Hue rotation - renk tekeri donusumu
7[[ stitchable ]] half4 hueRotation(
8    float2 position,
9    half4 color,
10    float angle
11) {
12    float cosA = cos(angle);
13    float sinA = sin(angle);
14 
15    float3x3 hueMatrix = float3x3(
16        float3(0.213 + cosA * 0.787 - sinA * 0.213,
17               0.213 - cosA * 0.213 + sinA * 0.143,
18               0.213 - cosA * 0.213 - sinA * 0.787),
19        float3(0.715 - cosA * 0.715 - sinA * 0.715,
20               0.715 + cosA * 0.285 + sinA * 0.140,
21               0.715 - cosA * 0.715 + sinA * 0.715),
22        float3(0.072 - cosA * 0.072 + sinA * 0.928,
23               0.072 - cosA * 0.072 - sinA * 0.283,
24               0.072 + cosA * 0.928 + sinA * 0.072)
25    );
26 
27    half3 rotated = half3(hueMatrix * float3(color.rgb));
28    return half4(rotated, color.a);
29}
30 
31// Pixelation efekti
32[[ stitchable ]] half4 pixelate(
33    float2 position,
34    half4 color,
35    float size
36) {
37    float2 pixelated = floor(position / size) * size;
38    // Piksel merkezini hesapla
39    float2 center = pixelated + size * 0.5;
40    // Mesafe bazli yumusatma
41    float dist = distance(position, center) / size;
42    return color * (1.0 - dist * 0.3);
43}
44 
45// Grayscale donusumu
46[[ stitchable ]] half4 grayscale(
47    float2 position,
48    half4 color,
49    float intensity
50) {
51    half gray = dot(color.rgb, half3(0.299, 0.587, 0.114));
52    half3 result = mix(color.rgb, half3(gray), half(intensity));
53    return half4(result, color.a);
54}

1struct ColorEffectsGallery: View {
2    @State private var pixelSize: Float = 1.0
3    @State private var grayIntensity: Float = 0.0
4 
5    var body: some View {
6        VStack(spacing: 20) {
7            // Pixelation
8            Image("photo")
9                .resizable()
10                .aspectRatio(contentMode: .fit)
11                .colorEffect(
12                    ShaderLibrary.pixelate(.float(pixelSize))
13                )
14 
15            Slider(value: Binding(
16                get: { Double(pixelSize) },
17                set: { pixelSize = Float($0) }
18            ), in: 1...20)
19 
20            // Grayscale
21            Image("photo")
22                .resizable()
23                .aspectRatio(contentMode: .fit)
24                .colorEffect(
25                    ShaderLibrary.grayscale(.float(grayIntensity))
26                )
27 
28            Slider(value: Binding(
29                get: { Double(grayIntensity) },
30                set: { grayIntensity = Float($0) }
31            ), in: 0...1)
32        }
33        .padding()
34    }
35}

1// Wave distortion - dalga efekti
2[[ stitchable ]] float2 wave(
3    float2 position,
4    float time,
5    float amplitude,
6    float frequency
7) {
8    float2 result = position;
9    result.y += sin(position.x * frequency + time) * amplitude;
10    result.x += cos(position.y * frequency + time) * amplitude * 0.5;
11    return result;
12}
13 
14// Ripple efekti - su damlasi
15[[ stitchable ]] float2 ripple(
16    float2 position,
17    float2 center,
18    float time,
19    float amplitude
20) {
21    float dist = distance(position, center);
22    float wave = sin(dist * 0.1 - time * 5.0) * amplitude;
23    float decay = max(0.0, 1.0 - dist * 0.005);
24 
25    float2 direction = normalize(position - center);
26    return position + direction * wave * decay;
27}

1struct WaveEffectView: View {
2    @State private var startDate = Date()
3 
4    var body: some View {
5        TimelineView(.animation) { timeline in
6            let time = Float(timeline.date.timeIntervalSince(startDate))
7 
8            Text("Dalga Efekti")
9                .font(.system(size: 60, weight: .bold))
10                .foregroundStyle(.blue.gradient)
11                .distortionEffect(
12                    ShaderLibrary.wave(
13                        .float(time),
14                        .float(5),    // amplitude
15                        .float(0.05)  // frequency
16                    ),
17                    maxSampleOffset: CGSize(width: 10, height: 10)
18                )
19        }
20    }
21}

1// Gaussian blur
2[[ stitchable ]] half4 gaussianBlur(
3    float2 position,
4    SwiftUI::Layer layer,
5    float radius
6) {
7    half4 color = half4(0);
8    float total = 0;
9 
10    for (float x = -radius; x <= radius; x += 1.0) {
11        for (float y = -radius; y <= radius; y += 1.0) {
12            float weight = exp(-(x*x + y*y) / (2.0 * radius * radius));
13            color += layer.sample(position + float2(x, y)) * half(weight);
14            total += weight;
15        }
16    }
17 
18    return color / half(total);
19}

1struct AnimatedShaderView: View {
2    @State private var startDate = Date()
3    @State private var touchPoint: CGPoint = .zero
4 
5    var body: some View {
6        TimelineView(.animation) { timeline in
7            let time = Float(timeline.date.timeIntervalSince(startDate))
8 
9            RoundedRectangle(cornerRadius: 20)
10                .fill(.blue.gradient)
11                .frame(height: 200)
12                .distortionEffect(
13                    ShaderLibrary.ripple(
14                        .float2(Float(touchPoint.x), Float(touchPoint.y)),
15                        .float(time),
16                        .float(10)
17                    ),
18                    maxSampleOffset: CGSize(width: 20, height: 20)
19                )
20                .gesture(
21                    DragGesture(minimumDistance: 0)
22                        .onChanged { value in
23                            touchPoint = value.location
24                        }
25                )
26        }
27    }
28}