https://github.com/ayamflow/standalone-shader
A native webgl wrapper for 2D shaders.
https://github.com/ayamflow/standalone-shader
Last synced: 12 months ago
JSON representation
A native webgl wrapper for 2D shaders.
- Host: GitHub
- URL: https://github.com/ayamflow/standalone-shader
- Owner: ayamflow
- License: mit
- Created: 2018-06-21T21:51:38.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-09-06T10:34:19.000Z (almost 5 years ago)
- Last Synced: 2025-04-06T06:35:02.069Z (about 1 year ago)
- Language: JavaScript
- Size: 430 KB
- Stars: 35
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# standalone-shader
A native webgl wrapper for 2D shaders.
Similar to [gl-shader](https://github.com/stackgl/gl-shader) but with a smaller scope and naive approach.
This uses the ["big triangle" approach](https://michaldrobot.com/2014/04/01/gcn-execution-patterns-in-full-screen-passes/) instead of a quad.
This is an ES6 library.
> :warning: experimental package made for learning purposes
### Installation :package:
```bash
npm i ayamflow/standalone-shader -S
```
### Usage :book:
#### createShader(options)
`options {}` can contain the following parameters:
- canvas `CanvasHTMLElement`
- settings `{}` [passed to the context](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getContextAttributes)
- 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:
```js
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'
}
```
#### shader.start
Starts the rendering loop.
#### shader.stop
Stops the rendering loop.
#### shader.resize(width, height)
Resize the canvas and update the `resolution` uniform.
#### shader.onTick(time)
Called at every frame of the loop. Override to define your custom behavior.
#### shader.destroy
Unbinds gl variables and remove the canvas from the DOM.
### Example :floppy_disk:
```js
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)
})
```
[Demo.](https://ayamflow.github.io/standalone-shader/demo)
### TODO
- mipmap filters
- uniform type detection
- better error log
- renderer options (alpha, ...)
- extensions (derivatives, ...)
- context lost/restore
- ...
### License :pencil:
MIT. See [LICENSE](http://github.com/ayamflow/standalone-shader/blob/master/LICENSE) for details.