Part of a tutorial by Jim Vallandingham introducing regl for data visualization.
Read it Here: Intro to regl
Blocks associated with this tutorial:
Part of a tutorial by Jim Vallandingham introducing regl for data visualization.
Read it Here: Intro to regl
Blocks associated with this tutorial:
| <!DOCTYPE html> | |
| <title>Simple regl Triangle Example in a loop </title> | |
| <body> | |
| <script src="https://npmcdn.com/[email protected]/dist/regl.js"></script> | |
| <script src="index.js"></script> | |
| </body> |
| // In development, you would probably import/require regl | |
| // const regl = require('regl')(); | |
| // In this block, it is already loaded, so we just | |
| // initialize it. For more info, see: | |
| // https://github.com/regl-project/regl#standalone-script-tag | |
| var regl = createREGL(); | |
| var drawTriangle = regl({ | |
| frag: ` | |
| precision mediump float; | |
| uniform vec4 color; | |
| void main () { | |
| gl_FragColor = color; | |
| }`, | |
| vert: ` | |
| precision mediump float; | |
| attribute vec2 position; | |
| void main () { | |
| gl_Position = vec4(position, 0, 1); | |
| }`, | |
| attributes: { | |
| position: [ | |
| [-1, 0], | |
| [0, -1], | |
| [1, 1] | |
| ] | |
| }, | |
| uniforms: { | |
| color: [1, 0, 0, 1] | |
| }, | |
| count: 3, | |
| }) | |
| // Here we put our draw command in a loop! | |
| regl.frame(function(context) { | |
| drawTriangle(); | |
| }); |