无法使用webgl设置点的随机顺序动画,窗口仅在动画结束时更新
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了无法使用webgl设置点的随机顺序动画,窗口仅在动画结束时更新相关的知识,希望对你有一定的参考价值。
// 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循环的末尾显示输出。它不会为这些点设置动画,而是在动画结束时显示所有点。请帮助我。
答案
[javascript是single threaded and event based。一次只能运行一段代码。
以上是关于无法使用webgl设置点的随机顺序动画,窗口仅在动画结束时更新的主要内容,如果未能解决你的问题,请参考以下文章
JQuery - 动态 CSS 动画更改仅在我离开浏览器窗口并返回时发生
使用属性键路径为 SCNCamera.fStop 设置动画不起作用,仅在隐式 SCNTransaction 内
零基础Unity做一个中秋诗词鉴赏网页,提前祝您中秋快乐!(DoTween动画 | WebGL视频 | 大文件上传GitHub)