TWGLWebGL 助手库

联合创作 · 2023-09-22 08:06

TWGL.js 是一个微型的 WebGL 助手库,实现对 WebGL API 的简单封装,使用起来更方便。

示例代码:

<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);
    var start = Date.now() * 0.001;
     
    function render() {
        twgl.resizeCanvasToDisplaySize(gl.canvas);
        gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
         
        var uniforms = {
            time: Date.now() * 0.001 - start,
            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);
    }
    render();
</script>
浏览 4
点赞
评论
收藏
分享

手机扫一扫分享

编辑
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑
举报