Skip to content

Instantly share code, notes, and snippets.

@tomduncalf
Last active October 25, 2017 10:54
Show Gist options
  • Save tomduncalf/97452b440b8be33f48bbaffe9199d051 to your computer and use it in GitHub Desktop.
Save tomduncalf/97452b440b8be33f48bbaffe9199d051 to your computer and use it in GitHub Desktop.
Drawing a straight line using a shader with regl
const drawLine = regl({
frag: `
precision mediump float;
uniform vec4 color;
void main() {
gl_FragColor = color;
}`,
vert: `
precision mediump float;
attribute vec2 position;
uniform vec2 size;
void main() {
// This constrains it to a square rather than the whole screen, remove if not desired
vec2 aspect = vec2(1, size.x / size.y);
gl_Position = vec4(position * aspect, 0, 1);
}`,
attributes: {
position: regl.prop('line'),
},
uniforms: {
color: regl.prop('color'),
size: function (context: any) {
return [context.viewportWidth, context.viewportHeight]
},
},
elements: [
[0, 1],
],
lineWidth: 5
});
drawLine({
// line is a 2D array: [[startX, startY], [endX, endY]]
line: [[0, 0], [0.5, 0.5]],
// color is an array: [r, g, b, a]
color: [1, 1, 1, 1],
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment