Giter Club home page Giter Club logo

flutter_shader_demo's Introduction

Flutter Fragment Shaders Demo

This repository contains a demo application showcasing the integration of fragment shaders in Flutter.

Flutter.Fragment.Shaders.Demo.mov

Like this project? Consider supporting its upkeep with a coffee. Your generosity is appreciated! ☕

Buy Me A Coffee

Introduction

Fragment shaders are a type of shader used in 3D graphics for shading pixels. They can be used to create stunning visual effects and manipulate pixels in real-time applications.

Setup

To use custom shaders in your Flutter project, you need to add them to your pubspec.yaml file. Here’s how you can do it:

  • Create the Shader File: Write your shader program in a file with a .frag extension. This file contains the GLSL code for your custom shader.

  • Add the Shader to pubspec.yaml: In your pubspec.yaml file, you need to add a shaders section under the flutter section. Here, you list all the shader files (with their paths) that you want to include in your project. For example:

flutter:
  shaders:
    - shaders/myshader.frag

In this example, myshader.frag is the shader file located in the /shaders directory of your project

  • Create a Custom Painter: In your Dart code, create a custom painter that extends CustomPainter. This custom painter will use the shader when painting.

Usage

Here are some examples of how to use fragment shaders in your Flutter project:

  • Loading the Shader: To load a shader into a FragmentProgram object at runtime, use the FragmentProgram.fromAsset constructor. The asset’s name is the same as the path to the shader given in the pubspec.yaml file. The FragmentProgram object can then be used to create one or more FragmentShader instances.
  • Using the FragmentShader: A FragmentShader object represents a fragment program along with a particular set of uniforms (configuration parameters). The available uniforms depend on how the shader was defined. In this example, I'm using the setFloat method on my FragmentShader instance to set these uniforms.

Resources

For more information on writing and using fragment shaders in Flutter, check out the Flutter documentation on fragment shaders.

Acknowledgements

The shaders used in this demo were not written by me. They were authored by the following individuals:

All credit for the shader code goes to them.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.