WebGL keep previous object - webgl

Question

I'm learning webgl and trying to drop different objects from top of the canvas. Every time an object reaches the bottom a new object drops from the top.
This is working, but I wanna keep the object on the bottom. Every time a new obect drops from the dop the previous object disappears.
How can I solve this?
function initWebGL() {
canvas = document.getElementById("my-canvas");
gl = WebGLUtils.setupWebGL(canvas);
document.addEventListener("keydown", keyDown, false);
if(gl) {
setupWebGL();
initShaders();
setupBuffers();
getMatrixUniforms();
tick();
}
else{
alert( "Error: Your browser does not appear to support WebGL.");
}
function tick() {
requestAnimFrame(tick);
drawScene();
animate();
}
function setupBuffers() {
l_VerticeBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, l_VerticeBuffer);
var l_Vertices =
[-0.2 ,0.6,0.0,
-0.2,-0.6,0.0,
0.2 ,-0.6,0.0,
0.6 ,-0.6,0.0,
0.6,-0.2,0.0,
0.2,-0.2,0.0,
0.2,0.6,0.0];
l_VerticeBuffer.itemSize = 3;
l_VerticeBuffer.numItems = 7;
gl.bufferData(gl.ARRAY_BUFFER, new float32Array(l_Vertices), gl.DYNAMIC_DRAW);
L_IndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, L_IndexBuffer);
indices = [0,1,2,0,2,6,4,3,2,4,2,5,];
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
}
function drawScene(){
gl.viewport(0, 0, canvas.width, canvas.height); //das sind die dinge die i in setupwebgl hab
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.perspective(45, canvas.width / canvas.height, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
mvPushMatrix();
mat4.translate(mvMatrix, [move, up_down, -7.0]);
mat4.rotateZ(mvMatrix, y_rot* Math.PI /40.0);
gl.bindBuffer(gl.ARRAY_BUFFER, mirrorLVerticeBuffer); //passt
gl.vertexAttribPointer(vertexPositionAttribute, mirrorLVerticeBuffer.itemSize, gl.FLOAT, false, 0, 0);//passt
gl.bindBuffer(gl.ARRAY_BUFFER, lColorBuffer);
gl.vertexAttribPointer(vertexColorAttribute, lColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, mirrorLIndexBuffer);
setMatrixUniforms();
gl.drawElements(gl.TRIANGLES, indicesL.length, gl.UNSIGNED_SHORT,0);
mvPopMatrix();
}
var lastTime = 0;
function animate() {
var timeNow = new Date().getTime();
if (lastTime != 0) {
var elapsed = timeNow - lastTime;
if (up_down > GROUND_Y) {
up_down -= (10 * elapsed) / 1000.0;
}
}
lastTime = timeNow;
}

Answer 1

For every L object you want to draw in the scene you'll need to have a different set of coordinates that says where that specific L object is. In your code you set the x position and y position of the L object with the move and up_down variables.
So create an array of objects where each element represents the coordinates of an L object:
var lObjects = [
{
move: 0,
up_down: 3
}
];
The above array has only one element (so one L shape) to begin with. Also I wasn't sure what your starting values for move and up_down were so I just gave them whatever value I wanted.
Now in your drawScene() loop through the lObjects and draw an L object for every element in lObjects (using the move and up_down values of each element).
function drawScene(){
gl.viewport(0, 0, canvas.width, canvas.height); //das sind die dinge die i in setupwebgl hab
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.perspective(45, canvas.width / canvas.height, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
for(var i = 0; i < lObjects.length; i++) {
mvPushMatrix();
mat4.translate(mvMatrix, [lObjects[i].move, lObjects[i].up_down, -7.0]);
mat4.rotateZ(mvMatrix, y_rot* Math.PI /40.0);
gl.bindBuffer(gl.ARRAY_BUFFER, mirrorLVerticeBuffer); //passt
gl.vertexAttribPointer(vertexPositionAttribute, mirrorLVerticeBuffer.itemSize, gl.FLOAT, false, 0, 0);//passt
gl.bindBuffer(gl.ARRAY_BUFFER, lColorBuffer);
gl.vertexAttribPointer(vertexColorAttribute, lColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, mirrorLIndexBuffer);
setMatrixUniforms();
gl.drawElements(gl.TRIANGLES, indicesL.length, gl.UNSIGNED_SHORT,0);
mvPopMatrix();
}
}
Finally update your animate() to use the new lObjects array. Here is a modified version of your animate() that will only update the up_down of the newest L and whenever the newest L reaches the bottom it will add a new L to lObjects (so it will make an infinite amount of Ls).
function animate() {
var timeNow = new Date().getTime();
if (lastTime != 0) {
var newestL = lObjects[lObjects.length - 1];
var elapsed = timeNow - lastTime;
if (newestL.up_down > GROUND_Y) {
newestL.up_down -= (10 * elapsed) / 10000.0;
} else {
lObjects.push( { move: 0, up_down: 3 } );
}
}
lastTime = timeNow;
}
Again watch out for the constants I used, you probably don't want to use them, but I wasn't sure what values you were using. I also slowed down the speed at which the Ls fell because it worked better with my constants.