snowFlakeRenderable = ({
frag: `
precision mediump float;
uniform float alpha;
void main () {
gl_FragColor = vec4(0.5,0.1,0.9,alpha);
}`,
vert: `
attribute vec2 position;
uniform mat4 projection, view;
void main () {
gl_Position = projection * view * vec4(position, 0, 1);
}`,
attributes: {
position: snowFlake2D.positions
},
uniforms: {
view: snowFlakeViewMatrix,
projection: snowFlakeProjectionMatrix,
alpha: +srcAlpha
},
count : snowFlake2D.positions.length
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
snowFlakeViewMatrix = mat4.lookAt([],[ 0, 0, 1000],[0, 0, 0], [0, 1, 0])
snowFlakeProjectionMatrix = mat4.perspective([], Math.PI / 4, canvasWidth / canvasHeight, 500, 5000)
disableBlend = regl({
blend: {
enable: false
}
})
enableBlend = regl({
blend: {
enable: true,
func: {
src:blendOptions.srcFactor,dst:blendOptions.dstFactor //default: src:'src alpha',dst:'one minus src alpha'
},
equation: 'add', // Default. Yoy may or may not add this line.
},
depth: { enable: false }
})
blendOptions
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
