attribute vec4 aPosition;
void main() {
gl_Position = aPosition;
}
precision mediump float;
void main() {
gl_FragColor = vec4(0.7, 0.7, 0.0, 1.0);
}
import WebGLUtils from '/tutorials/webgl/fundamentals/examples/js/esm/WebGLUtils-v2.js';
let glu, gl;
let vertexVBO1, vertexVBO2;
initContext();
initVBOs();
render();
function initContext() {
glu = new WebGLUtils({
vertexAttribs: ['aPosition'],
renderFunc: render
});
gl = glu.gl;
gl.clearColor(0, 0, 0, 1);
}
function initVBOs() {
let vertices = [
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
];
vertexVBO1 = glu.createVBO(vertices, 2);
vertexVBO2 = glu.createVBO([
0.3, 0.3,
0.6, 0.3,
0.6, 0.6
], 2);
}
function render() {
gl.clear(gl.COLOR_BUFFER_BIT);
glu.bindVboToAttribs(vertexVBO1);
gl.drawArrays(gl.TRIANGLES, 0, vertexVBO1.verticesNum);
glu.bindVboToAttribs(vertexVBO2);
gl.drawArrays(gl.TRIANGLES, 0, vertexVBO1.verticesNum);
}
canvas {
display: block;
height: 450px;
}
