forked from mattdesl/canvas-sketch
-
Notifications
You must be signed in to change notification settings - Fork 0
/
animated-regl-fullscreen-shader.js
78 lines (70 loc) · 2.03 KB
/
animated-regl-fullscreen-shader.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
/**
* A WebGL example of a full-screen shader effect, using Regl.
* @author Matt DesLauriers (@mattdesl)
*/
const canvasSketch = require('canvas-sketch');
const createRegl = require('regl');
const createQuad = require('primitive-quad');
const glslify = require('glslify');
const path = require('path');
const tween = require('./util/tween');
// Setup our sketch
const settings = {
pixelsPerInch: 300,
animate: true,
scaleToView: true,
context: 'webgl',
canvas: document.querySelector('.background-canvas')
};
const sketch = ({ gl, update, render, pause }) => {
// Create regl for handling GL stuff
const regl = createRegl({ gl, extensions: [ 'OES_standard_derivatives' ] });
// A mesh for a flat plane
const quad = createQuad();
// Draw command
const drawQuad = regl({
// Fragment & Vertex shaders
frag: glslify(path.resolve(__dirname, 'assets/shaders/topomap.frag')),
vert: glslify(path.resolve(__dirname, 'assets/shaders/topomap.vert')),
// Pass down props from javascript
uniforms: {
fade: regl.prop('fade'),
aspect: regl.prop('aspect'),
time: regl.prop('time')
},
// Setup transparency blending
blend: {
enable: true,
func: {
srcRGB: 'src alpha',
srcAlpha: 1,
dstRGB: 'one minus src alpha',
dstAlpha: 1
}
},
// Send mesh vertex attributes to shader
attributes: {
position: quad.positions
},
// The indices for the quad mesh
elements: regl.elements(quad.cells)
});
return {
render ({ context, time, width, height }) {
// On each tick, update regl timers and sizes
regl.poll();
// Clear backbuffer with pure white
regl.clear({
color: [ 0, 0, 0, 0 ],
depth: 1,
stencil: 0
});
// Draw generative / shader art
const fade = tween({ time, duration: 2, delay: 0, ease: 'sineOut' });
drawQuad({ time, fade, aspect: width / height });
// Flush pending GL calls for this frame
gl.flush();
}
};
};
canvasSketch(sketch, settings);