Skip to content

Instantly share code, notes, and snippets.

@vlandham

vlandham/README.md

Last active May 27, 2017 22:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vlandham/48f3abf115332ac4e67f0f86ee9fe61d to your computer and use it in GitHub Desktop.
Save vlandham/48f3abf115332ac4e67f0f86ee9fe61d to your computer and use it in GitHub Desktop.
Download ZIP
regl triangle moving in a loop
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<title>Simple regl Triangle Example using context </title>
<body>
<script src="https://npmcdn.com/regl@1.3.0/dist/regl.js"></script>
<script src="index.js"></script>
</body>
Raw
index.js
// In practice, 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);
}`,
// Here we use context.tick to make the
// triangle move!
attributes: {
position: function(context, props) {
return [
[-1 * Math.cos(context.tick / 100), 0],
[Math.sin(context.tick / 100), -1],
[Math.sin(context.tick / 100), 1]
];
}
},
uniforms: {
color: [1, 0, 0, 1]
},
count: 3,
})
regl.frame(function(context) {
drawTriangle();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment