glsl-vue-loader

GLSL vue loader

In generally, this is a webpack loader. This loader allows you to import a fragment shader source code into a vue component.

like the following code:

import draw from "./draw.frag";

var app = new Vue({
    template:'<div><draw width=600 height=500></draw></div>',
    el: '#app',
    data: {
      x: 1.0
    },
    components: {
      draw
    }
});

If there is

How to use

GLSL vue loader is a webpack loader so you can use it like any other webpack loader.

You can follow the steps below:

1. Add rule to your webpack.config.js, for example test .frag extension (see ./samples/webpack.config.js)
2. Create a fragment shader with ".frag" extension.(see ./samples/draw.frag)
3. require/import this .frag file in your .js file(see ./main.js) as its a vue component.
4. (optional) Create a vertex shader with the same name as .frag file with extension ".vert", it will be automitically loaded into the vue component.(see ./samples/draw.vert) The default vertext shader will draw in the full canvas.

Properties

The created vue component will hold the flowing properties:

• width: the width of the canvas.
• height: the height of the canvas.
• indicesCount: default 5, indicesCount needed by webglcontext.drawArrays, dont modify if you are using default vertext shader.
• indicesStart: default 0, indicesStart needed by webglcontext.drawArrays.

Besides, if you declared uniforms in shader code, a property with same name will be added to this vue component. For example:

uniform float iTime;
//other shader code ......

The generated vue component will hold a property "iTime". You can use it like:

<myComponent v-bind:iTime={3.5}></myComponent>