vue-gl-fx

vue-gl-fx is a simple WebGL components for accelerated 2D filter or effects. Can be used with Shadertoys codes

Demo

A partially working playground can be found here

Disclaimer

While being already usable, this library is currently under heavy developpment. API may be changed at anytime until we switch to a beta version. Lock your version if you want to be safe

Screenshots

Install and Usage

# install dependices
 `npm install`

# develop
`npm run dev`

# build component
`npm run build`

# build demo
`npm run build:demo`

Quickstart

First, install vue-gl-fx using either npm or yarn.

Remember we are still working on this so you should lock your version

npm i vue-gl-fx --save

Instanciate and tell Vue about the plugin

import GlFx from 'vue-gl-fx';
Vue.use(GlFx);

Then use the components !

<template>
  <div 
    id="app">
    <gl-fx :code="glslCode" class="app_shader">
      <gl-fx-time name="iTime"/>
      <gl-fx-resolution name="iResolution"/>
    </gl-fx>
    </div>
  </div>
</template>

<script>
  const A_SHADER = `void main() {
    vec2 st = gl_FragCoord.xy / iResolution.xy;
    gl_FragColor = vec4(st.xy, (cos(iTime) + 1.0) * 0.5, 1.0);
  }`;

  export default {
    name: 'App',
    data() {
      return {
        glslCode: A_SHADER,
      };
    },
  };
</script>

API

The <gl-fx> component is the top and only mandatory component. It draws the canvas, manage the vertex shader and upload your fragment shader to your GPU.

props

• glslCode : String (required)

  This should contains your fragment shader without including the uniforms definitions

• isShadertoy: mixed [true, false, "auto"] (default: "auto")

  If true, or if auto and Shadertoy syntax is detected, the main() and texture() function will be injected to your fragment shader

• injectUniforms: mixed [true, false, "auto"] (default: "auto")

  If true or if auto and Shadertoy syntax is detected, the following uniforms will be injected : iTime (float), iTimeDelta (float), iFrame(int), iResolution (vec3), iMouse(vec4). Those uniforms will have the same behavior as in Shadertoys sandboxes. Note that you can inject those uniforms with a non shadertoy code.

The <gl-fx-uniform> component should be use inside a <gl-fx>component slot. For every uniform component you instanciate, the uniform will be declared then allocated and uploaded for you.

props

• name : String (required)

  This is the identifier of your uniform in your shader code

• type: String (required)

  The type represent the GL type of the uniform. The following types are supported : int, float, vec2, vec3, vec4 sampler 2D.

• input: Number | Array | String (required))

  The input props depends on the type you specified. It can be either a float Number, an integer, an Array (mind the length !) or the URL of a texture. Input values are reactives so you can freely update them as you would do with every Vue component props, and they will be updated in your shader.

The special uniforms components should be used just like regular uniforms except for the fact you can't specify their type or input, because they rely on internal mecanism to upload their value directly, such as ellapsed time, or mouse position.

general props

• name : String (required)

  This is the identifier of your uniform in your shader code

props

• isDelta: Boolean (default: false)

  if truethe uniform will report the delta between two frame in seconds. Otherwise, it will return the ellapsed time

props

• mouseDrag: Boolean (default: false)

  if true the mouse position will be reported only when the mouse button is down.

TODO

• Add toggles for shadertoys functions and uniforms injections (true, false, auto)
• Add Video Texture support
• Add resize throttling.
• Add API for play, pause, autoplay like functions
• Allow for external fragmentshader files
• Improve performance
• Handle the garbage collector
• Improve error management
• Develop a good sandbox demo

On the future, this library should also :

• Support multipass effects
• support a second module with extra, out of the box ready effects.

Credits

Thanks for the team at la chose for using the library and giving us feedback, and the occasional helping hand