Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
const regl = require('regl')({
extensions: 'OES_texture_float'
})
const LAPLACIAN_SHADER = `
vec4 laplacian (sampler2D img, vec2 id, float DX) {
return -texture2D(img, id) + 0.25 * (
texture2D(img, id + DX * vec2(-1, 0))
+ texture2D(img, id + DX * vec2(1, 0))
+ texture2D(img, id + DX * vec2(0, -1))
+ texture2D(img, id + DX * vec2(0, 1)));
}
`
const FIELD_SIZE = 512
const RADIUS = 8
const NUM_STATES = 2
const state = ((new Array(NUM_STATES)).fill().map(() =>
regl.framebuffer({
color: regl.texture({
shape: [FIELD_SIZE, FIELD_SIZE, 4],
type: 'float'
}),
depthStencil: false
})))
const update = regl({
framebuffer: ({tick}) => state[tick % NUM_STATES],
uniforms: {
state: ({tick}) => state[(tick + 1) % NUM_STATES]
},
frag: `
precision highp float;
varying vec2 id;
uniform sampler2D state;
void main () {
vec4 s = texture2D(state, id);
gl_FragColor = vec4(s.rgb + vec3(0.001, 0, 0), 1);
}
`
})
const drawPoints = regl({
vert: `
precision highp float;
attribute vec2 id;
uniform float t;
void main () {
gl_PointSize = 8.;
gl_Position = vec4(id + vec2(cos(t + id.x + 0.2 * id.y)), 0, 1);
// gl_Position = vec4(id, 0, 1);
}`,
frag: `
precision highp float;
void main () {
gl_FragColor = vec4(1);
}`,
attributes: {
id: (() => {
const result = new Float32Array(2 * RADIUS * RADIUS)
var ptr = 0
for (var i = 0; i < RADIUS; ++i) {
for (var j = 0; j < RADIUS; ++j) {
result[ptr++] = i / RADIUS
result[ptr++] = j / RADIUS
}
}
return result
})()
},
uniforms: {
t: ({tick}) => 0.01 * tick
},
count: RADIUS * RADIUS,
primitive: 'points'
})
const drawTexture = regl({
frag: `
precision highp float;
varying vec2 id;
uniform sampler2D img;
void main () {
gl_FragColor = texture2D(img, id);
}`,
uniforms: {
img: regl.prop('img')
}
})
const drawTriangle = regl({
vert: `
precision highp float;
attribute vec2 position;
varying vec2 id;
void main () {
id = 0.5 * (position + 1.0);
gl_Position = vec4(position, 0, 1);
}`,
frag: `
precision highp float;
varying vec2 id;
void main () {
gl_FragColor = vec4(id, 0, 1);
}`,
attributes: {
position: [
[-4, 0],
[4, 4],
[4, -4]
]
},
count: 3
})
regl.frame(({tick}) => {
regl.clear({
color: [0, 0, 0, 1],
depth: 1
})
/*
renderToFBO(() => {
drawTriangle(() => {
drawTexture({
img: texture
})
})
})
*/
/*
renderToFBO(() => {
regl.clear({
color: [0, 1, 0, 1],
depth: 1
})
drawPoints()
})
*/
drawTriangle(() => {
update()
drawTexture({
img: state[tick % NUM_STATES]
})
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment