Skip to content

Instantly share code, notes, and snippets.

@vlandham

vlandham/README.md

Last active May 27, 2017 22:55
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/a925897220c4b1154b091aba6fcf842c to your computer and use it in GitHub Desktop.
Save vlandham/a925897220c4b1154b091aba6fcf842c to your computer and use it in GitHub Desktop.
Download ZIP
regl triangle moving and using props
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<title>Simple regl Triangle Example using props </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);
}`,
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: function(context, props) {
return props.color;
}
},
count: 3,
})
regl.frame(function(context) {
drawTriangle({
color: [0.208, 0.304, 1.000, 1.000]
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment