Skip to content

Instantly share code, notes, and snippets.

@mikolalysenko
Created May 12, 2017 17:57
Show Gist options
  • Save mikolalysenko/6b01f56fceb7385065ad6a9d2a87e9e7 to your computer and use it in GitHub Desktop.
Save mikolalysenko/6b01f56fceb7385065ad6a9d2a87e9e7 to your computer and use it in GitHub Desktop.
const regl = require('regl')()
const drawCircle = regl({
attributes: {
p: [0] // dummy attribute
},
frag: `
precision highp float;
uniform vec3 color;
void main () {
if (length(gl_PointCoord.xy - 0.5) > 0.5) {
discard;
}
gl_FragColor = vec4(color, 1);
}`,
vert: `
precision highp float;
attribute float p;
uniform vec2 position;
uniform float radius;
void main () {
gl_PointSize = radius;
gl_Position = vec4(position, 0, 1);
}`,
uniforms: {
position: regl.prop('position'),
color: regl.prop('color'),
radius: regl.prop('radius')
},
depth: {
enable: false,
mask: false
},
// set up the blending such that the color is:
// src * dst + dst * 0 = src * dst
blend: {
enable: true,
func: {
src: 'dst color',
dst: 0
},
equation: 'add'
},
count: 1,
primitive: 'points'
})
regl.frame(({tick, viewportHeight}) => {
regl.clear({
// need to clear color buffer to all 1 for multiply blending
color: [1, 1, 1, 1]
})
const radius = 0.25 * viewportHeight
const d = 0.5 * (1.0 + Math.cos(0.01 * tick))
const ANGLE = 2.0 * Math.PI / 3
drawCircle([{
radius,
color: [1, 0, 1],
position: [0, d]
}, {
radius,
color: [1, 1, 0],
position: [d * Math.sin(ANGLE), d * Math.cos(ANGLE)]
},
{
radius,
color: [0, 1, 1],
position: [d * Math.sin(2 * ANGLE), d * Math.cos(2 * ANGLE)]
}])
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment