Question

我正在学习webgl并尝试从画布顶部删除不同的对象。每当一个物体到达底部时，一个新物体从顶部掉落。这是有效的，但我想将对象保持在底部。每当一个新的对象从多维数据集中掉落时，前一个对象就会消失。我该如何解决这个问题？

    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

对于要在场景中绘制的每个L对象，您需要使用一组不同的坐标来说明特定L对象的位置。在代码中，使用move和up_down变量设置L对象的x位置和y位置。

因此，创建一个对象数组，其中每个元素表示L对象的坐标：

var lObjects = [
    {
        move: 0,
        up_down: 3
    }
];

上面的数组只有一个元素（所以一个L形）开头。另外，我不确定move和up_down的起始值是什么，所以我只是给了他们我想要的任何价值。

现在在drawScene()的{{1}}循环中为lObjects中的每个元素绘制一个L对象（使用每个lObjects和move值元素）。

up_down

最后更新您的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(); } }以使用新的animate()数组。以下是lObjects的修改版本，只会更新最新L的animate()，每当最新的L到达底部时，它会向up_down添加新的L（因此它会赚取无限量的Ls）。

lObjects

再次注意我使用的常量，你可能不想使用它们，但我不确定你使用的是什么值。我也放慢了Ls下降的速度，因为它对我的常数效果更好。

WebGL保留以前的对象

1 个答案: