A native webgl wrapper for 2D shaders.
Similar to gl-shader but with a smaller scope and naive approach. This uses the "big triangle" approach instead of a quad. This is an ES6 library.
⚠️ experimental package made for learning purposes
npm i ayamflow/standalone-shader -S
options {}
can contain the following parameters:
- canvas
CanvasHTMLElement
- settings
{}
passed to the context - uniforms
{}
- vertexShader
(string)
- fragmentShader
(string)
- clearColor
([r, g, b, a] array)
All parameters are optional.
time
and resolution
uniforms are automatically passed to the shader.
Uniform examples:
time: {
type: 'float',
value: 0
},
resolution: {
type: 'vec2',
value: [480, 320]
},
map: {
type: 'sampler2D',
value: new Image(),
wrapS: 'mirror', // defaults to 'clamp'
wrapT: 'repeat', // defaults to 'clamp'
filter: 'nearest' // defaults to 'linear'
}
Starts the rendering loop.
Stops the rendering loop.
Resize the canvas and update the resolution
uniform.
Called at every frame of the loop. Override to define your custom behavior.
Unbinds gl variables and remove the canvas from the DOM.
import createShader from 'standalone-shader'
let img = new Image()
img.src = './texture.jpg'
let shader = createShader({
dpr: window.devicePixelRatio || 1,
canvas: document.querySelector('canvas'),
uniforms: {
map: {
type: 'sampler2D',
value: img,
wrapS: 'clamp',
filter: 'nearest'
}
},
fragmentShader: `
precision highp float;
uniform vec2 resolution;
uniform float time;
uniform sampler2D map;
varying vec2 vUv;
void main() {
vec2 st = gl_FragCoord.xy / resolution.xy;
st.x *= resolution.x / resolution.y;
gl_FragColor = texture2D(map, st);
}
`
})
shader.resize(600, 400)
shader.start()
shader.onTick = function(time) {
// change some uniform value
}
// or you could resize following browser events
window.addEventListener('resize', function() {
shader.resize(innerWidth, innerHeight)
})
- mipmap filters
- uniform type detection
- better error log
- renderer options (alpha, ...)
- extensions (derivatives, ...)
- context lost/restore
- ...
MIT. See LICENSE for details.