https://github.com/blendthink/custom_fragment_shader

https://github.com/blendthink/custom_fragment_shader

Last synced: 20 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/blendthink/custom_fragment_shader
• Owner: blendthink
• Created: 2023-10-07T12:17:29.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-23T10:56:47.000Z (about 1 year ago)
• Last Synced: 2024-05-01T16:18:31.442Z (8 months ago)
• Language: Dart
• Homepage: https://blendthink.github.io/custom_fragment_shader/
• Size: 4.4 MB
• Stars: 4
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Custom Fragment Shader

![screenshot](docs/screenshot.png)

## 概要

Flutter で高度なグラフィックスを実現するために、これまでは RenderObject や CustomPainter を利用していました。

しかし、これらは CPU 上で多くの処理を実行することになってしまうため、柔軟性や表現力にどうしても限界がありました。

Flutter 2.8 で Fragment Shader を利用可能になり、GPU 上で処理を実行できるようになったため、より柔軟で高度なグラフィックスを実現できるようになりました。

このプロジェクトでは、Fragment Shader の基礎から Flutter での具体的な実装例についてご紹介します。

## トピック

- Fragment Shader とは

- Flutter における Fragment Shader の実装方法

- Flutter で Fragment Shader が実行されるまでの仕組み

- Fragment Shader の実装例と解説

    - Pixelation

    - Hologram Effect

    - Ink Sparkle

    - Transition Animation

## 参考資料

- https://docs.flutter.dev/ui/design/graphics/fragment-shaders

- https://www.youtube.com/watch?v=OpcPZdfJbq8

- https://github.com/flutter/flutter

- https://github.com/flutter/engine

- https://github.com/google/skia

- https://github.com/jonahwilliams/flutter_shaders

- https://www.khronos.org/opengl/wiki/Rendering_Pipeline_Overview

- https://www.khronos.org/opengl/wiki/Fragment_Shader

- https://thebookofshaders.com

- https://glumpy.github.io/modern-gl.html