0

我正在学习 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();

} 变量最后时间 = 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;
}
4

1 回答 1

0

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

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

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

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

现在在drawScene()循环中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数组。这是您的修改版本，animate()它只会更新up_down最新的 L 并且每当最新的 L 到达底部时，它都会添加一个新的 L lObjects（因此它将产生无限量的 L）。

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;
}

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

于 2013-11-04T21:34:01.287 回答