无法使用webgl设置点的随机顺序动画，窗口仅在动画结束时更新

Question

// vertex shader source
var VSHADER_SRC =   'attribute vec4 a_Position;'+'\n'+
                    'attribute vec4 a_Color;'+'\n'+
                    'varying vec4 v_Color;'+'\n'+
                    'attribute float a_PointSize;'+'\n'+
                    'void main(){'+'\n'+
                    '   gl_Position = a_Position;'+'\n'+
                    '   gl_PointSize = a_PointSize;'+'\n'+
                    '   v_Color = a_Color;'+'\n'+
                    '}'+'\n';         

// fragment shader source
var FSHADER_SRC =   'precision mediump float;'+'\n'+
                    'varying vec4 v_Color;'+'\n'+
                    'void main(){'+'\n'+
                    '   gl_FragColor = v_Color;'+'\n'+
                    '}'+'\n';

var a_Position;
var a_PointSize;
var a_Color;

var vertexBuffer;

var FSIZE;

// webgl context
var gl;

var canvas;

// id of requestAnimationFrame
var animationID;

function main(){
    // retriving canvas element
    canvas = document.getElementById('drawing_canvas');
    if(!canvas){
        console.log('unable to retrive canvas element');
    }

    // setting width and height
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // getting webgl context from canvas
    gl = getWebGLContext(canvas);
    if(!gl){
        console.log('unable to retrive webgl context');
    }

    // initializing shaders
    if(!initShaders(gl,VSHADER_SRC,FSHADER_SRC)){
        console.log('unable to initialize shaders');
    }

    // getting locations of attributes and uniform variables
    a_Position = gl.getAttribLocation(gl.program,'a_Position');
    a_PointSize = gl.getAttribLocation(gl.program,'a_PointSize');
    a_Color = gl.getAttribLocation(gl.program,'a_Color');


    if(a_Position<0){
        console.log('unable to retrive location of a_Position from shader programs');
    }
    if(a_PointSize<0){
        console.log('unable to retrive location of a_PointSize from shader programs');
    }
    if(a_Color<0){
        console.log('unable to retrive location of a_Color from shader programs');
    }

    // initializing buffers
    vertexBuffer = gl.createBuffer();
    if(!vertexBuffer){
        console.log('unable to create vertex buffer');
    }

    // binding buffer object to ARRAY_BUFFER
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

    // starting animation
    animate = function(){
        animationID = requestAnimationFrame(animate,canvas);
        draw();
    };
    animationID = requestAnimationFrame(animate);

    for(var i=0;i<1000;i++){
        points.push(-1+Math.random()*2,1-Math.random()*2,5.0,1.0,1.0,1.0);
        n+=1;
        sleep(10);
    }

}

// to stop execution for a few miliseconds
function sleep(miliseconds) {
   var currentTime = new Date().getTime();

   while (currentTime + miliseconds >= new Date().getTime()) {
   }
}

/**
 *Data about all the shapes stored in this variable
 *form of the data will be
 *x coordinate,y coordinate,pointsize,color(RGB)
 */
var points = [];
// number of shapes
var n=0;

var check = false;


function draw(){
    // clearing the canvas for drawing
    gl.clearColor(0.0,0.0,0.0,1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    // getting data in webgl supported format
    vertices = new Float32Array(points);
    FSIZE = vertices.BYTES_PER_ELEMENT;

    // passing data to buffers
    gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);

    // passing data to a_Position attribute
    if(!check){
        gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,FSIZE*6,0);
        gl.enableVertexAttribArray(a_Position);

        // passing data to a_PointSize attribute
        gl.vertexAttribPointer(a_PointSize,1,gl.FLOAT,false,FSIZE*6,FSIZE*2);
        gl.enableVertexAttribArray(a_PointSize);

        // passing data to a_Color attribute
        gl.vertexAttribPointer(a_Color,3,gl.FLOAT,false,FSIZE*6,FSIZE*3);
        gl.enableVertexAttribArray(a_Color);
        check = true;
    }
    // drawing command to webgl graphics
    gl.drawArrays(gl.POINTS,0,n);
}

我是WebGL编程的新手，上面的代码我想在每10毫秒的间隔后在画布内的随机位置显示一个点，但是该程序仅在for循环的末尾显示输出。它不会为这些点设置动画，而是在动画结束时显示所有点。请帮助我。

Answer 1

[Javascript是single threaded and event based。一次只能运行一段代码。