Giter VIP home page Giter VIP logo

flutter_opengl's Introduction

flutter_opengl

A Flutter OpenGL ES plugin using a Texture() widget. Supports Android, Linux and Windows. Many shaders from ShaderToy.com can be copy/pasted

Getting Started

Android Windows Linux iOS MacOS Web
x x x

gif

The main workflow of the plugin is:

  • ask to native code with a MethodChannel for a texture ID
  • use the texture ID in a Texture() widget
  • set a vertex and a fragment sources
  • start the renderer
  • change shader sources on the fly

All functionalities, but the first call to the first method channel, use FFI calls.

The starting idea developing this plugin, was not just to use GLSL, but also take advantage of the wonderful ShaderToy web site.

For now it's possible to copy/paste shaders from ShaderToy, but only those which have only one layer (ie no iChannelN, iSound etc).

Be aware that on a real device, many shaders could be very slow because they are hungry of power and some others needs ES 3 and for now is not supported on Android (ie shaders 13, 14 and 15 in the example).

iResolution, iTime and iMouse are supported, other uniforms can be added at run-time.

  • iResolution is a vec3 uniform which represents the texture size
  • iTime is a float which represents the time since the shader was created
  • iMouse is a vec4 which the x and y values represent the coordinates where the mouse or the touch is grabbed hover the Texture() widget

Setup

Linux

Be sure you have installed glew and glm packages.

Windows

Go into the windows folder from the project root.

  • clone Native_SDK:

git clone https://github.com/powervr-graphics/Native_SDK.git

you can safely delete all but the lib and include directories from the cloned repo

  • clone glm

git clone https://github.com/g-truc/glm.git

  • download glew Binaries for Windows 32-bit and 64-bit from here:

https://glew.sourceforge.net (sources at https://github.com/nigels-com/glew)

extract the zip and rename its main directory to "glew"

Android

Should be ok.

TODO

  • the c/c++ code is not "state of the art" written! PRs are welcomed 😄
  • iOS, Mac and Web support
  • add textures (ie iChannel0 used on ShaderToy). A texture of 2^N x 2 could be used for example for FFT audio samples on iSound ShaderToy uniform.
  • more then one parallel shaders
  • ES 3 on Android (now supports 2)
  • displayed FPS seems not to be correct
  • use of this plugin not just for shader but also for 3D models

flutter_opengl's People

Contributors

alnitak avatar

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.