WebGL入门---编写第一个 WebGL 程序

WebGL 应用包含两个要素：JavaScript程序和着色器程序。本节我们通过绘制一个点来演示这个过程，麻雀虽小，但五脏俱全。使用 WebGL 绘制一个点虽然简单，但是它仍需要 JavaScript 程序和着色器程序共同完成。
我们的目标是绘制一个在屏幕中心，大小为 10，颜色是红色的点。

1、准备着色器源码

我们从着色器程序开始入手，先用GLSL编写顶点着色器和片元着色器。

• 顶点着色器

顶点着色器的主要任务是告诉 GPU 在裁剪坐标系的原点（也就是屏幕中心）画一个大小为 10 的点。

void main(){
    //声明顶点位置
    gl_Position = vec4(0.0, 0.0, 0.0, 1.0); // 分号不能少，要不然编译有问题
    //声明待绘制的点的大小。
    gl_PointSize = 10.0; // 分号不能少，要不然编译有问题
}

• 片元着色器

顶点着色器中的数据经过图元装配和光栅化之后，来到了片元着色器，在本例中，片元着色器的任务是通知 GPU 将光栅化后的像素渲染成红色，所以片元着色器要对内置变量 gl_FragColor （代表像素要填充的颜色）进行赋值。

void main(){
    //设置像素的填充颜色为红色。
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);  // 分号不能少，要不然编译有问题
}

2、准备 HTML 文件

目前的html页面代码如下

3、JavaScript 程序

获取canvas对象下的WEBGL环境

var canvas = document.querySelector('#canvas');
//在某些浏览器中，我们还需要做下兼容处理，加上实验前缀。
var gl = canvas.getContext('webgl') || canvas.getContext("experimental-webgl");

创建顶点着色器对象：

// 获取顶点着色器源码
var vertexShaderSource = document.querySelector('#vertexShader').innerHTML;
// 创建顶点着色器对象
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
// 将源码分配给顶点着色器对象
gl.shaderSource(vertexShader, vertexShaderSource);
// 编译顶点着色器程序
gl.compileShader(vertexShader);

接下来，创建片元着色器，该过程和顶点着色器的创建过程类似，区别在于着色器源码和着色器类型。

// 获取片元着色器源码
var fragmentShaderSource = document.querySelector('#fragmentShader').innerHTML;
// 创建片元着色器程序
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
// 将源码分配给片元着色器对象
gl.shaderSource(fragmentShader, fragmentShaderSource);
// 编译片元着色器
gl.compileShader(fragmentShader);

着色器对象创建完毕，接下来我们开始创建着色器程序

//创建着色器程序
var program = gl.createProgram();
//将顶点着色器挂载在着色器程序上。
gl.attachShader(program, vertexShader); 
//将片元着色器挂载在着色器程序上。
gl.attachShader(program, fragmentShader);
//链接着色器程序
gl.linkProgram(program);
// 使用刚创建好的着色器程序。
gl.useProgram(program);

准备工作做好了，接下来开始绘制：

//设置清空画布颜色为黑色。
gl.clearColor(0.0, 0.0, 0.0, 1.0);

//用上一步设置的清空画布颜色清空画布。
gl.clear(gl.COLOR_BUFFER_BIT);

//绘制点。
gl.drawArrays(gl.POINTS, 0, 1);

完整的html代码如下

重复代码的封装