WebGL Learning （二）繪製一個點

原創

2020-02-21 14:24

DrawPoint.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Draw a point</title>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
    Please use a browser that supports "canvas"
</canvas>

<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="DrawPoint.js"></script>
</body>
</html>

同樣用main函數作爲入口，引用了WebGL編程指南作者專門寫得工具類。
這裏使用的lib，下載地址爲(http://download.csdn.net/detail/iamlegendary/9736834)

DrawPoint.js

//頂點着色器
var VSHADER_SOURCE =
    'void main() { \n' +
    'gl_Position = vec4(0.0,0.0,0.0,1.0);\n'+
    'gl_PointSize = 10.0;\n'+
    '}\n';

//片元着色器
var FSHADER_SOURCE =
    'void main() {\n'+
    'gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n'+
    '}\n';

function main(){
    var canvas = document.getElementById('webgl');

    var gl = getWebGLContext(canvas);
    if(!gl){
        console.log("Failed to get the rendering context for WebGL");
        return;
    }

    if(! initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)){
        console.log("Failed to initalize shaders.");
        return;
    }

    //設置<canvas>背景色
    gl.clearColor(0.0,0.0,0.0,1.0);

    //清空<canvas>
    gl.clear(gl.COLOR_BUFFER_BIT);

    //繪製一個點
    gl.drawArrays(gl.POINTS,0,1);
}

上面的VSHADER_SOURCE 與FSHADER_SOURCE 是 source shader program (string)，也就是字符串類型的着色器程序（C語言）。
頂點着色器：用來描述頂點特性（如位置、顏色）的程序。上面的gl_Position 和 gl_PointSize 可以看出是位置和大小。
片元着色器：進行逐片元處理過程如光照的程序。“片元”是WEBGL術語，可以理解爲像素。