如何用紋理繪制背景webgl

Question

我是webgl的新手，但我一直困擾於這個奇怪的問題。

我嘗試加載紋理並將其繪制為畫布的背景。 我只需要畫一次背景。 因此，從邏輯上講，只要這是完整代碼問題的摘要，我就只需調用函數drawBackground（），即可在此處查看源代碼http://www.csupomona.edu/~lannguyen/WebGl%20Project/bg.html

function webGLStart() {
            var canvas = document.getElementById("lesson05-canvas");
            initGL(canvas);
            initShaders();
            initBuffers();
            initTexture();

            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            gl.enable(gl.DEPTH_TEST);
            drawBackground();
        } 

當我執行上面的代碼時，它不起作用。 我的畫布剛剛變黑。 假設我的drawBackground函數工作正常。

function tick() {
        requestAnimFrame(tick);
        drawBackground();
    }


    function webGLStart() {
        var canvas = document.getElementById("lesson05-canvas");
        initGL(canvas);
        initShaders();
        initBuffers();
        initTexture();

        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.enable(gl.DEPTH_TEST);
        tick();
    }

當我這樣做時，它起作用了，而且我不知道為什么必須調用tick和requestAnimateFrame（tick），這對我來說似乎是遞歸。 但是，如果我只想繪制一次，就看不到為什么需要不斷繪制它了。

任何幫助或解釋都很好。

謝謝

Answer 1

我懷疑您對其中一些資源進行了異步調用：

initShaders();
initBuffers();
initTexture();

然后，當您僅調用一次drawBackground（）時，某些資源的加載仍在進行中。