twgl.js 是一个使 WebGL API 更佳简洁的库。(WebGL 是一种 3D 绘图标准)
示例:
<canvas id="c"></canvas> <script src="../dist/twgl-full.min.js"></script> <script> var gl = twgl.getWebGLContext(document.getElementById("c")); var programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]); var arrays = { position: [-1, -1, 0, 1, -1, 0, -1, 1, 0, -1, 1, 0, 1, -1, 0, 1, 1, 0], }; var bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays); function render(time) { twgl.resizeCanvasToDisplaySize(gl.canvas); gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); var uniforms = { time: time * 0.001, resolution: [gl.canvas.width, gl.canvas.height], }; gl.useProgram(programInfo.program); twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo); twgl.setUniforms(programInfo, uniforms); twgl.drawBufferInfo(gl, gl.TRIANGLES, bufferInfo); requestAnimationFrame(render); } requestAnimationFrame(render); </script>