0.6.0 • Published 3 years ago
glsl-vue-loader v0.6.0
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:
- Add rule to your webpack.config.js, for example test .frag extension (see
./samples/webpack.config.js
) - Create a fragment shader with ".frag" extension.(see
./samples/draw.frag
) - require/import this .frag file in your .js file(see
./main.js
) as its a vue component. - (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>