WebGL着色器繪製正方形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="lib/webgl-debug.js"></script>
    <script type="text/javascript" src="lib/webgl-utils.js"></script>
    <script type="text/javascript" src="lib/cuon-utils.js"></script>
    <script type="text/javascript" src="lib/cuon-matrix.js"></script>
</head>

<body>
<canvas style="border: red solid 3px;" id='webgl' width='500' height='500'>不支持</canvas>
<script>
    //頂點着色器程序
    var VSH =
        'void main(){\n' +
        'gl_Position = vec4(0.0,0.0,0.0,1.0);\n' + //座標
        'gl_PointSize = 100.0;\n' + //尺寸
        '}\n'; //片元着色器程序
    var FSH =
        'void main(){\n' +
        'gl_FragColor = vec4(1.0,0.5,0.9,1.0);\n' + //顏色
        '}\n'; var canvas = document.getElementById('webgl'); var gl = getWebGLContext(canvas); initShaders(gl,VSH,FSH); //初始化着色器
 gl.clearColor(0.0,0.0,0.0,1.0); //指定背景色
 gl.clear(gl.COLOR_BUFFER_BIT); //填充
 gl.drawArrays(gl.POINTS,0,1); //繪製一個點
    /* 由於繪製的是單獨的點,因此是gl.POINTS 第二個參數爲0,表示從第一個頂點畫起 第三個參數爲1,表示在程序中只繪製了一個點 */
</script>
</body>
</html>
相關文章
相關標籤/搜索