摘要：
原理创建函数调用和渲染调用---->；setTimeout----->；渲染---->；requestAnimationFrame---->；调用实现webgl渲染点，并每秒重新渲染一次效果源代码<；！DOCTYPEhtml>；&书信电报；htmllang=“en”>；&书信电报；头部>；&书信电报；元字符集=“UTF-8”>
原理
- 创建函数call和render
- call----->setTimeout----->render----->requestAnimationFrame----->call
实施
webgl渲染点，每秒重新渲染一次
效果
源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #canvas{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; } </style> </head> <body> <canvas id="canvas"></canvas> <script src="../resources/webgl-utils.js"></script> <script id="2d-vertex-shader" type="x-shader/x-vertex"> attribute vec2 a_position; uniform vec2 u_wh; void main() { gl_PointSize = 4.0; vec2 t1 = a_position * 2.0 / u_wh ; vec2 t4 = vec2(t1.x - 1.0,(t1.y - 1.0) * -1.0); gl_Position = vec4(t4, 0, 1); } </script> <!-- fragment shader --> <script id="2d-fragment-shader" type="x-shader/x-fragment"> precision mediump float; void main() { float d = distance(gl_PointCoord , vec2(0.5,0.5)); if (d <= 0.5){ gl_FragColor = vec4(0.0,1.0,0.0,1.0); }else{ discard; } } </script> <script> var canvas = document.getElementById('canvas') canvas.width = screen.width; canvas.height = screen.height; var gl = canvas.getContext('webgl') if (gl){ var program = createProgramFromScripts(gl, ["2d-vertex-shader", "2d-fragment-shader"]); gl.useProgram(program); var uwh = gl.getUniformLocation(program,"u_wh"); //gl.uniform2f(uwh,screen.width,screen.height) gl.uniform2fv(uwh,new Float32Array([screen.width,screen.height])) var buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); call() function call(){ console.log(new Date()) window.setTimeout(render,1000) } function render() { gl.clearColor(0,0,0,1) gl.clear(gl.COLOR_BUFFER_BIT) var data = [] for(var i=0;i<1000;i++){ data.push(Math.random() * screen.width) data.push(Math.random() * screen.height) } gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW); var positionLocation = gl.getAttribLocation(program, "a_position"); gl.enableVertexAttribArray(positionLocation); gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0); gl.drawArrays(gl.POINTS, 0, data.length / 2); window.requestAnimationFrame(call) } }else{ alert('go fuck') } </script> </body> </html>