Flutter 튜토리얼 24편: Fragment Shader와 커스텀 그래픽

요약#

핵심 요지#

문제 정의: 복잡한 그래픽 효과(그라데이션 노이즈, 물결 효과, 블러 등)를 CPU로 처리하면 성능이 저하된다.
핵심 주장: Fragment Shader¹를 사용하면 GPU에서 픽셀 단위 연산을 병렬로 처리해서 고성능 그래픽 효과를 구현할 수 있다.
주요 근거: FragmentProgram²으로 GLSL 셰이더를 로드하고, setFloat()와 setImageSampler()로 유니폼 값을 전달한다.
실무 기준: 셰이더 컴파일은 비용이 크므로 애니메이션 시작 전에 미리 로드(precache)해야 한다.
한계: UBO, SSBO, 커스텀 varying은 지원하지 않으며, sampler2D만 사용 가능하다.

문서가 설명하는 범위#

GLSL 셰이더 파일 작성과 프로젝트 등록
FragmentProgram과 FragmentShader 사용법
유니폼 변수와 텍스처 전달
CustomPainter와 셰이더 통합

읽는 시간: 15분 | 난이도: 고급

참고 자료#

Fragment shaders - Flutter 공식 셰이더 가이드
The Book of Shaders - 셰이더 학습 리소스
flutter_shaders - 셰이더 유틸리티 패키지

문제 상황#

앱에서 고급 시각 효과를 구현할 때 CPU만으로는 한계가 있습니다.

GPU 가속이 필요한 상황#

1
문제 1: 픽셀 단위 그라데이션, 노이즈 → CPU 처리 시 프레임 드롭
2
문제 2: 실시간 블러, 왜곡 효과 → 매 프레임 이미지 처리 비용이 높음
3
문제 3: 물결, 파동 같은 수학적 효과 → 수백만 픽셀 계산 필요
4
문제 4: 게임이나 인터랙티브 그래픽 → 60fps 유지 어려움

해결 방법#

Flutter는 GLSL Fragment Shader를 지원합니다. GPU에서 픽셀 단위 연산을 병렬로 처리해서 고성능 그래픽 효과를 구현할 수 있습니다.

챕터 1: 셰이더 파일 생성과 등록#

Why#

NOTE
셰이더를 사용하려면 GLSL 파일을 작성하고 Flutter 프로젝트에 등록해야 합니다.
빌드 시 셰이더가 컴파일되어 앱 번들에 포함됩니다.
1
.frag 파일 작성 → pubspec.yaml 등록 → 빌드 시 컴파일 → 런타임 로드

What#

NOTE
Flutter는 GLSL ES 1.0 호환 문법을 사용하며, #version 460 core로 시작합니다.
Skia와 Impeller 백엔드 모두 지원합니다.

How#

TIP

프로젝트 구조

1
my_app/
2
├── shaders/
3
│   ├── gradient.frag
4
│   └── ripple.frag
5
├── lib/
6
│   └── main.dart
7
└── pubspec.yaml

pubspec.yaml 등록

1
flutter:
2
  shaders:
3
    - shaders/gradient.frag
4
    - shaders/ripple.frag

기본 셰이더 구조 (gradient.frag)

1
#version 460 core
2

3
// Flutter 런타임 헬퍼
4
#include <flutter/runtime_effect.glsl>
5

6
// 유니폼 변수 (Dart에서 전달)
7
uniform vec2 uSize;       // 캔버스 크기
8
uniform float uTime;      // 시간 (애니메이션용)
9

10
// 출력 색상
11
out vec4 fragColor;
12

13
void main() {
14
  // 현재 픽셀 위치 (0 ~ uSize)
15
  vec2 pos = FlutterFragCoord().xy;
16

17
  // 정규화된 좌표 (0.0 ~ 1.0)
18
  vec2 uv = pos / uSize;
19

20
  // 그라데이션 색상 출력
21
  fragColor = vec4(uv.x, uv.y, 0.5, 1.0);
22
}

Watch out#

WARNING
gl_FragCoord 대신 FlutterFragCoord()를 사용해야 합니다.
Flutter 헬퍼 함수는 백엔드 간 일관성을 보장합니다.
1
// 잘못된 방법 - 백엔드마다 결과가 다를 수 있음
2
vec2 pos = gl_FragCoord.xy;
3

4
// 올바른 방법
5
#include <flutter/runtime_effect.glsl>
6
vec2 pos = FlutterFragCoord().xy;

결론: GLSL 셰이더 파일을 작성하고 pubspec.yaml에 등록하면 Flutter에서 사용할 수 있습니다.

챕터 2: FragmentProgram으로 셰이더 로드#

Why#

NOTE
셰이더를 사용하려면 먼저 FragmentProgram으로 컴파일된 셰이더를 로드해야 합니다.
로드는 비동기 작업이며, 완료 후 FragmentShader 인스턴스를 생성할 수 있습니다.
graph LR A[FragmentProgram.fromAsset] --> B[셰이더 로드] B --> C[fragmentShader 생성] C --> D[유니폼 설정] D --> E[Paint에 적용]

What#

NOTE
FragmentProgram은 컴파일된 셰이더 프로그램을 나타냅니다.
fragmentShader() 메서드로 실제 렌더링에 사용할 FragmentShader 인스턴스를 생성합니다.

How#

TIP

셰이더 로드

1
import 'dart:ui' as ui;
2

3
class ShaderManager {
4
  static ui.FragmentProgram? _gradientProgram;
5

6
  static Future<void> loadShaders() async {
7
    _gradientProgram = await ui.FragmentProgram.fromAsset(
8
      'shaders/gradient.frag',
9
    );
10
  }
11

12
  static ui.FragmentShader get gradientShader {
13
    return _gradientProgram!.fragmentShader();
14
  }
15
}

앱 시작 시 미리 로드

1
void main() async {
2
  WidgetsFlutterBinding.ensureInitialized();
3

4
  // 셰이더 미리 로드
5
  await ShaderManager.loadShaders();
6

7
  runApp(const MyApp());
8
}

FutureBuilder로 로드 대기

1
class ShaderDemo extends StatelessWidget {
2
  const ShaderDemo({super.key});
3

4
  @override
5
  Widget build(BuildContext context) {
6
    return FutureBuilder(
7
      future: ui.FragmentProgram.fromAsset('shaders/gradient.frag'),
8
      builder: (context, snapshot) {
9
        if (snapshot.hasError) {
10
          return Center(child: Text('셰이더 로드 실패: ${snapshot.error}'));
11
        }
12
        if (!snapshot.hasData) {
13
          return const Center(child: CircularProgressIndicator());
14
        }
15

16
        return CustomPaint(
17
          painter: GradientPainter(snapshot.data!),
18
          size: Size.infinite,
19
        );
20
      },
21
    );
22
  }
23
}

Watch out#

WARNING

셰이더 컴파일은 Skia 백엔드에서 비용이 큽니다.
애니메이션 중에 처음 로드하면 프레임 드롭이 발생합니다.

1
// 잘못된 방법 - 애니메이션 중 로드
2
@override
3
void paint(Canvas canvas, Size size) async {
4
  // 매 프레임 로드 시도 → 성능 저하
5
  final program = await FragmentProgram.fromAsset('shaders/effect.frag');
6
}
7

8
// 올바른 방법 - 미리 로드
9
class MyPainter extends CustomPainter {
10
  final FragmentShader shader;  // 미리 로드된 셰이더
11

12
  MyPainter(this.shader);
13

14
  @override
15
  void paint(Canvas canvas, Size size) {
16
    canvas.drawRect(
17
      Rect.fromLTWH(0, 0, size.width, size.height),
18
      Paint()..shader = shader,
19
    );
20
  }
21
}

결론: FragmentProgram.fromAsset()으로 셰이더를 로드하고, 애니메이션 전에 미리 로드합니다.

챕터 3: 유니폼 변수 전달하기#

Why#

NOTE
셰이더에 동적 데이터(시간, 크기, 색상 등)를 전달하려면 유니폼 변수를 사용합니다.
Dart에서 setFloat()로 값을 설정하면 셰이더에서 해당 값을 읽을 수 있습니다.
1
Dart: shader.setFloat(0, value) → GLSL: uniform float uValue;

What#

NOTE
유니폼 변수는 선언 순서대로 인덱스가 할당됩니다.
float, vec2, vec3, vec4는 모두 setFloat()로 설정하며, 벡터는 각 컴포넌트를 개별 인덱스로 설정합니다.

How#

TIP

셰이더 유니폼 선언 (effect.frag)

1
#version 460 core
2
#include <flutter/runtime_effect.glsl>
3

4
uniform vec2 uSize;       // 인덱스 0, 1
5
uniform float uTime;      // 인덱스 2
6
uniform vec4 uColor;      // 인덱스 3, 4, 5, 6
7

8
out vec4 fragColor;
9

10
void main() {
11
  vec2 uv = FlutterFragCoord().xy / uSize;
12

13
  // 시간에 따른 애니메이션
14
  float wave = sin(uv.x * 10.0 + uTime) * 0.5 + 0.5;
15

16
  fragColor = vec4(uColor.rgb * wave, uColor.a);
17
}

Dart에서 유니폼 설정

1
void setUniforms(
2
  ui.FragmentShader shader,
3
  Size size,
4
  double time,
5
  Color color,
6
) {
7
  // vec2 uSize (인덱스 0, 1)
8
  shader.setFloat(0, size.width);
9
  shader.setFloat(1, size.height);
10

11
  // float uTime (인덱스 2)
12
  shader.setFloat(2, time);
13

14
  // vec4 uColor (인덱스 3, 4, 5, 6)
15
  // Flutter 색상은 premultiplied alpha로 변환
16
  shader.setFloat(3, color.red / 255 * color.opacity);
17
  shader.setFloat(4, color.green / 255 * color.opacity);
18
  shader.setFloat(5, color.blue / 255 * color.opacity);
19
  shader.setFloat(6, color.opacity);
20
}

유니폼 인덱스 계산 규칙

GLSL 타입	인덱스 수	예시
`float`	1	`uniform float a;` → 인덱스 0
`vec2`	2	`uniform vec2 b;` → 인덱스 1, 2
`vec3`	3	`uniform vec3 c;` → 인덱스 3, 4, 5
`vec4`	4	`uniform vec4 d;` → 인덱스 6, 7, 8, 9

Watch out#

WARNING

색상은 premultiplied alpha 형식으로 전달해야 합니다.
Flutter의 Color는 straight alpha를 사용하므로 변환이 필요합니다.

1
// 잘못된 방법 - straight alpha
2
shader.setFloat(0, color.red / 255);    // R
3
shader.setFloat(1, color.green / 255);  // G
4
shader.setFloat(2, color.blue / 255);   // B
5
shader.setFloat(3, color.opacity);      // A
6

7
// 올바른 방법 - premultiplied alpha
8
shader.setFloat(0, color.red / 255 * color.opacity);
9
shader.setFloat(1, color.green / 255 * color.opacity);
10
shader.setFloat(2, color.blue / 255 * color.opacity);
11
shader.setFloat(3, color.opacity);

결론: 유니폼 변수는 선언 순서대로 인덱스를 할당하고, setFloat()로 값을 전달합니다.

챕터 4: CustomPainter와 셰이더 통합#

Why#

NOTE
셰이더를 화면에 그리려면 CustomPainter와 결합합니다.
Paint.shader 속성에 셰이더를 설정하고 Canvas.drawRect()로 영역을 채웁니다.
1
CustomPainter.paint() → Paint..shader = fragmentShader → canvas.drawRect()

What#

NOTE
CustomPainter의 paint() 메서드에서 셰이더를 적용한 Paint로 도형을 그립니다.
애니메이션을 위해 repaint 리스너를 사용합니다.

How#

TIP

기본 셰이더 페인터

1
import 'dart:ui' as ui;
2
import 'package:flutter/material.dart';
3

4
class ShaderPainter extends CustomPainter {
5
  final ui.FragmentShader shader;
6
  final double time;
7

8
  ShaderPainter(this.shader, this.time);
9

10
  @override
11
  void paint(Canvas canvas, Size size) {
12
    // 유니폼 설정
13
    shader.setFloat(0, size.width);
14
    shader.setFloat(1, size.height);
15
    shader.setFloat(2, time);
16

17
    // 셰이더로 사각형 채우기
18
    canvas.drawRect(
19
      Rect.fromLTWH(0, 0, size.width, size.height),
20
      Paint()..shader = shader,
21
    );
22
  }
23

24
  @override
25
  bool shouldRepaint(ShaderPainter oldDelegate) {
26
    return time != oldDelegate.time;
27
  }
28
}

애니메이션과 결합

1
class AnimatedShaderWidget extends StatefulWidget {
2
  final ui.FragmentProgram program;
3

4
  const AnimatedShaderWidget({super.key, required this.program});
5

6
  @override
7
  State<AnimatedShaderWidget> createState() => _AnimatedShaderWidgetState();
8
}
9

10
class _AnimatedShaderWidgetState extends State<AnimatedShaderWidget>
11
    with SingleTickerProviderStateMixin {
12
  late AnimationController _controller;
13
  late ui.FragmentShader _shader;
14

15
  @override
16
  void initState() {
17
    super.initState();
18
    _shader = widget.program.fragmentShader();
19
    _controller = AnimationController(
20
      vsync: this,
21
      duration: const Duration(seconds: 10),
22
    )..repeat();
23
  }
24

25
  @override
26
  void dispose() {
27
    _controller.dispose();
28
    super.dispose();
29
  }
30

31
  @override
32
  Widget build(BuildContext context) {
33
    return AnimatedBuilder(
34
      animation: _controller,
35
      builder: (context, child) {
36
        return CustomPaint(
37
          painter: ShaderPainter(
38
            _shader,
39
            _controller.value * 10,  // 0 ~ 10 시간값
40
          ),
41
          size: Size.infinite,
42
        );
43
      },
44
    );
45
  }
46
}

flutter_shaders 패키지 사용

1
import 'package:flutter_shaders/flutter_shaders.dart';
2

3
class SimpleShaderWidget extends StatelessWidget {
4
  const SimpleShaderWidget({super.key});
5

6
  @override
7
  Widget build(BuildContext context) {
8
    return ShaderBuilder(
9
      assetKey: 'shaders/gradient.frag',
10
      (context, shader, child) {
11
        return AnimatedSampler(
12
          (image, size, canvas) {
13
            shader.setFloat(0, size.width);
14
            shader.setFloat(1, size.height);
15

16
            canvas.drawRect(
17
              Offset.zero & size,
18
              Paint()..shader = shader,
19
            );
20
          },
21
          child: child!,
22
        );
23
      },
24
      child: const SizedBox.expand(),
25
    );
26
  }
27
}

Watch out#

WARNING

FragmentShader 인스턴스를 매 프레임 새로 생성하면 성능이 저하됩니다.
인스턴스를 재사용하고 유니폼만 업데이트하세요.

1
// 잘못된 방법 - 매 프레임 새 인스턴스
2
@override
3
void paint(Canvas canvas, Size size) {
4
  final shader = _program.fragmentShader();  // 매번 생성
5
  shader.setFloat(0, time);
6
  canvas.drawRect(...);
7
}
8

9
// 올바른 방법 - 인스턴스 재사용
10
final _shader = _program.fragmentShader();  // 한 번만 생성
11

12
@override
13
void paint(Canvas canvas, Size size) {
14
  _shader.setFloat(0, time);  // 유니폼만 업데이트
15
  canvas.drawRect(...);
16
}

결론: CustomPainter에서 셰이더를 Paint에 적용하고, 인스턴스를 재사용해서 성능을 최적화합니다.

챕터 5: 이미지 텍스처 사용하기#

Why#

NOTE
셰이더에서 이미지를 샘플링하면 왜곡, 블러, 색상 보정 등의 효과를 적용할 수 있습니다.
sampler2D 유니폼으로 이미지를 전달합니다.
1
Dart: shader.setImageSampler(0, image) → GLSL: uniform sampler2D uTexture;

What#

NOTE
setImageSampler()로 dart:ui.Image를 셰이더에 전달합니다.
셰이더에서 texture() 함수로 픽셀 색상을 샘플링합니다.

How#

TIP

텍스처 샘플링 셰이더 (distort.frag)

1
#version 460 core
2
#include <flutter/runtime_effect.glsl>
3

4
uniform vec2 uSize;
5
uniform float uTime;
6
uniform sampler2D uTexture;
7

8
out vec4 fragColor;
9

10
void main() {
11
  vec2 uv = FlutterFragCoord().xy / uSize;
12

13
  // OpenGLES에서 Y 좌표 뒤집기
14
  #ifdef IMPELLER_TARGET_OPENGLES
15
    uv.y = 1.0 - uv.y;
16
  #endif
17

18
  // 물결 왜곡 효과
19
  float distortion = sin(uv.y * 20.0 + uTime * 3.0) * 0.02;
20
  uv.x += distortion;
21

22
  // 텍스처 샘플링
23
  fragColor = texture(uTexture, uv);
24
}

Dart에서 이미지 전달

1
import 'dart:ui' as ui;
2

3
class TextureShaderPainter extends CustomPainter {
4
  final ui.FragmentShader shader;
5
  final ui.Image image;
6
  final double time;
7

8
  TextureShaderPainter(this.shader, this.image, this.time);
9

10
  @override
11
  void paint(Canvas canvas, Size size) {
12
    shader.setFloat(0, size.width);
13
    shader.setFloat(1, size.height);
14
    shader.setFloat(2, time);
15
    shader.setImageSampler(0, image);  // 텍스처 전달
16

17
    canvas.drawRect(
18
      Rect.fromLTWH(0, 0, size.width, size.height),
19
      Paint()..shader = shader,
20
    );
21
  }
22

23
  @override
24
  bool shouldRepaint(TextureShaderPainter oldDelegate) => true;
25
}

이미지 로드

1
Future<ui.Image> loadImage(String assetPath) async {
2
  final data = await rootBundle.load(assetPath);
3
  final codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
4
  final frame = await codec.getNextFrame();
5
  return frame.image;
6
}

위젯에서 통합

1
class TextureShaderWidget extends StatefulWidget {
2
  const TextureShaderWidget({super.key});
3

4
  @override
5
  State<TextureShaderWidget> createState() => _TextureShaderWidgetState();
6
}
7

8
class _TextureShaderWidgetState extends State<TextureShaderWidget>
9
    with SingleTickerProviderStateMixin {
10
  ui.FragmentProgram? _program;
11
  ui.Image? _image;
12
  late AnimationController _controller;
13

14
  @override
15
  void initState() {
16
    super.initState();
17
    _controller = AnimationController(
18
      vsync: this,
19
      duration: const Duration(seconds: 5),
20
    )..repeat();
21
    _loadResources();
22
  }
23

24
  Future<void> _loadResources() async {
25
    final program = await ui.FragmentProgram.fromAsset('shaders/distort.frag');
26
    final image = await loadImage('assets/images/photo.jpg');
27

28
    setState(() {
29
      _program = program;
30
      _image = image;
31
    });
32
  }
33

34
  @override
35
  Widget build(BuildContext context) {
36
    if (_program == null || _image == null) {
37
      return const Center(child: CircularProgressIndicator());
38
    }
39

40
    return AnimatedBuilder(
41
      animation: _controller,
42
      builder: (context, child) {
43
        return CustomPaint(
44
          painter: TextureShaderPainter(
45
            _program!.fragmentShader(),
46
            _image!,
47
            _controller.value * 10,
48
          ),
49
          size: Size.infinite,
50
        );
51
      },
52
    );
53
  }
54
}

Watch out#

WARNING

sampler2D 인덱스는 float 인덱스와 별도로 관리됩니다.
첫 번째 텍스처는 항상 setImageSampler(0, image)입니다.

1
// 셰이더
2
uniform vec2 uSize;        // float 인덱스 0, 1
3
uniform float uTime;       // float 인덱스 2
4
uniform sampler2D uTex1;   // sampler 인덱스 0
5
uniform sampler2D uTex2;   // sampler 인덱스 1

1
// Dart
2
shader.setFloat(0, size.width);
3
shader.setFloat(1, size.height);
4
shader.setFloat(2, time);
5
shader.setImageSampler(0, texture1);  // 첫 번째 텍스처
6
shader.setImageSampler(1, texture2);  // 두 번째 텍스처

결론: setImageSampler()로 이미지를 셰이더에 전달하고, texture() 함수로 샘플링합니다.

챕터 6: 실용적인 셰이더 예제#

Why#

NOTE
셰이더의 가능성을 이해하려면 실제 예제를 통해 학습하는 것이 효과적입니다.
그라데이션, 노이즈, 원형 효과 등 자주 사용되는 패턴을 살펴봅니다.
1
기본 패턴 → 조합 → 복잡한 효과

What#

NOTE
수학 함수(sin, cos, fract)와 거리 계산을 조합해서 다양한 시각 효과를 만들 수 있습니다.
The Book of Shaders와 Shadertoy가 좋은 학습 리소스입니다.

How#

TIP

방사형 그라데이션

1
#version 460 core
2
#include <flutter/runtime_effect.glsl>
3

4
uniform vec2 uSize;
5
uniform vec2 uCenter;
6
uniform vec4 uInnerColor;
7
uniform vec4 uOuterColor;
8

9
out vec4 fragColor;
10

11
void main() {
12
  vec2 uv = FlutterFragCoord().xy / uSize;
13
  vec2 center = uCenter / uSize;
14

15
  float dist = distance(uv, center);
16
  float gradient = smoothstep(0.0, 0.5, dist);
17

18
  fragColor = mix(uInnerColor, uOuterColor, gradient);
19
}

물결 효과

1
#version 460 core
2
#include <flutter/runtime_effect.glsl>
3

4
uniform vec2 uSize;
5
uniform float uTime;
6
uniform vec2 uCenter;
7

8
out vec4 fragColor;
9

10
void main() {
11
  vec2 uv = FlutterFragCoord().xy / uSize;
12
  vec2 center = uCenter / uSize;
13

14
  float dist = distance(uv, center);
15
  float ripple = sin(dist * 30.0 - uTime * 5.0);
16
  ripple = ripple * 0.5 + 0.5;  // 0 ~ 1로 정규화
17

18
  // 거리에 따라 감쇠
19
  ripple *= 1.0 - smoothstep(0.0, 0.5, dist);
20

21
  fragColor = vec4(ripple, ripple, ripple, 1.0);
22
}

노이즈 패턴

1
#version 460 core
2
#include <flutter/runtime_effect.glsl>
3

4
uniform vec2 uSize;
5
uniform float uTime;
6

7
out vec4 fragColor;
8

9
// 랜덤 함수
10
float random(vec2 st) {
11
  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453);
12
}
13

14
void main() {
15
  vec2 uv = FlutterFragCoord().xy / uSize;
16

17
  // 그리드 기반 노이즈
18
  vec2 grid = floor(uv * 20.0 + uTime);
19
  float noise = random(grid);
20

21
  fragColor = vec4(vec3(noise), 1.0);
22
}

색상 보정 필터

1
#version 460 core
2
#include <flutter/runtime_effect.glsl>
3

4
uniform vec2 uSize;
5
uniform sampler2D uTexture;
6
uniform float uBrightness;  // -1 ~ 1
7
uniform float uContrast;    // 0 ~ 2
8
uniform float uSaturation;  // 0 ~ 2
9

10
out vec4 fragColor;
11

12
void main() {
13
  vec2 uv = FlutterFragCoord().xy / uSize;
14

15
  #ifdef IMPELLER_TARGET_OPENGLES
16
    uv.y = 1.0 - uv.y;
17
  #endif
18

19
  vec4 color = texture(uTexture, uv);
20

21
  // 밝기
22
  color.rgb += uBrightness;
23

24
  // 대비
25
  color.rgb = (color.rgb - 0.5) * uContrast + 0.5;
26

27
  // 채도
28
  float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));
29
  color.rgb = mix(vec3(gray), color.rgb, uSaturation);
30

31
  fragColor = color;
32
}

Watch out#

WARNING
복잡한 셰이더는 저사양 기기에서 성능 문제가 발생할 수 있습니다.
반복문과 조건문을 최소화하고, 계산을 단순화하세요.
1
// 비효율적 - 반복문 사용
2
float sum = 0.0;
3
for (int i = 0; i < 100; i++) {
4
  sum += someCalculation(i);
5
}
6

7
// 효율적 - 수학적 단순화
8
float sum = (n * (n + 1)) / 2.0;  // 공식 사용
항상 실제 기기에서 성능을 테스트하세요.

결론: 수학 함수와 거리 계산을 조합해서 다양한 GPU 가속 시각 효과를 만들 수 있습니다.

한계#

Flutter의 Fragment Shader는 강력하지만 몇 가지 제약이 있습니다.

UBO/SSBO 미지원: Uniform Buffer Object와 Shader Storage Buffer Object를 사용할 수 없습니다.
sampler2D만 지원: 다른 샘플러 타입(sampler3D, samplerCube 등)은 지원하지 않습니다.
varying 미지원: 커스텀 varying 입력을 사용할 수 없습니다.
정밀도 힌트 무시: Skia 백엔드는 precision 힌트를 무시합니다.
컴파일 비용: 첫 사용 시 컴파일 시간이 필요합니다.

Fragment Shader: GPU에서 실행되는 프로그램으로, 각 픽셀의 색상을 계산한다. GLSL 언어로 작성한다. ↩
FragmentProgram: Flutter에서 컴파일된 셰이더 프로그램을 나타내는 클래스다. fromAsset()으로 로드한다. ↩

Flutter 튜토리얼 24편: Fragment Shader와 커스텀 그래픽

요약#

핵심 요지#

문서가 설명하는 범위#

참고 자료#

문제 상황#

GPU 가속이 필요한 상황#

해결 방법#

챕터 1: 셰이더 파일 생성과 등록#

Why#

What#

How#

Watch out#

챕터 2: FragmentProgram으로 셰이더 로드#

Why#

What#

How#

Watch out#

챕터 3: 유니폼 변수 전달하기#

Why#

What#

How#

Watch out#

챕터 4: CustomPainter와 셰이더 통합#

Why#

What#

How#

Watch out#

챕터 5: 이미지 텍스처 사용하기#

Why#

What#

How#

Watch out#

챕터 6: 실용적인 셰이더 예제#

Why#

What#

How#

Watch out#

한계#

Footnotes#

공유

목차