WebGL入门教程

使用WebGL绘制一个点

为了让大家快速认识WebGL，先不讲解具体的知识点，我相信很多程序员希望通过一个麻雀虽小，但是五脏俱全的demo来认识一个新的技术领域。所以这里通过一个简单的案例来给大家展示WebGL技术，下面的代码完成的效果就是在canvas画布上绘制一个点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用WebGL绘制一个点</title>
</head>
<body>
<!--canvas标签创建一个宽高均为500像素，背景为蓝色的矩形画布-->
<canvas id="webgl" width="500" height="500" style="background-color: blue"></canvas>

</body>
<!-- 顶点着色器源码 -->
<script id="vertexShader" type="x-shader/x-vertex">

  void main() {
    //给内置变量gl_PointSize赋值像素大小
    gl_PointSize=20.0;
    //顶点位置，位于坐标原点
    gl_Position =vec4(0.0,0.0,0.0,1.0);
  }

</script>
<!-- 片元着色器源码 -->
<script id="fragmentShader" type="x-shader/x-fragment">

  void main() {
    gl_FragColor = vec4(1.0,0.0,0.0,1.0);
  }

</script>

<script>
    //通过getElementById()方法获取canvas画布
    var canvas=document.getElementById('webgl');
    //通过方法getContext()获取WebGL上下文
    var gl=canvas.getContext('webgl');

    //顶点着色器源码
    var vertexShaderSource = document.getElementById( 'vertexShader' ).innerText;

    //片元着色器源码
    var fragShaderSource = document.getElementById( 'fragmentShader' ).innerText;

    //初始化着色器
    var program = initShader(gl,vertexShaderSource,fragShaderSource);
    //开始绘制，显示器显示结果
    gl.drawArrays(gl.POINTS,0,1);

    //声明初始化着色器函数
    function initShader(gl,vertexShaderSource,fragmentShaderSource){
        //创建顶点着色器对象
        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
        //创建片元着色器对象
        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        //引入顶点、片元着色器源代码
        gl.shaderSource(vertexShader,vertexShaderSource);
        gl.shaderSource(fragmentShader,fragmentShaderSource);
        //编译顶点、片元着色器
        gl.compileShader(vertexShader);
        gl.compileShader(fragmentShader);

        //创建程序对象program
        var program = gl.createProgram();
        //附着顶点着色器和片元着色器到program
        gl.attachShader(program,vertexShader);
        gl.attachShader(program,fragmentShader);
        //链接program
        gl.linkProgram(program);
        //使用program
        gl.useProgram(program);
        //返回程序program对象
        return program;
    }
</script>
</html>

代码结构

整个代码是一个.html文件，里面包含JavaScript代码和着色器语言代码，通过JavaScript调用WebGL API来完成绘制操作。

HMTL和JavaScript

如果原来接触的是OpenGL，不了解WebGL，对浏览器的生态环境不了解，不了解前端知识，那么在学习WebGL之前，你应该先了解一下什么是HTML，什么是JavaScript语言。

canvas

canvas和div一样也是HTML的一个元素，只不过通过这个元素可实现三维场景的回执和渲染。通过canvas对象的getContext方法可以返回一个2D或3D环境

canvas元素

<!--canvas标签创建一个宽高均为500像素，背景为蓝色的矩形画布-->
<canvas id="webgl" width="500" height="500" style="background-color: blue"></canvas>

返回3D绘图环境

通过返回的gl对象可以调用WebGL API，所有的WebGL API就是gl对象的方法。比如
gl.linkProgram()

    //通过getElementById()方法获取canvas画布
    var canvas=document.getElementById('webgl');
    //通过方法getContext()获取WebGL上下文
    var gl=canvas.getContext('webgl');

返回2D环境

返回2D环境，就是大家平常说的canvas，通过canvas对象可以返回webgl绘图环境，也可以返回2D绘环境，不过大家在表达的时候，2D绘图环境通常表达为canvas，而canvas返回的3D环境，使用WebGL去表述。

    var c=canvas.getContext('2d');

着色器语言 GLSL

顶点、片元着色器代码要通过着色器语言来编写，着色器语言在GPU中执行，而平时大家说的JavaScript、Python等语言都是在CPU中执行。在GPU中执行的着色器代码，需要先通过WebGL进行一定的处理然后传递到GPU才能执行，所以编写的着色器语言就是一段符合一定的规则的字符串。
如果你现在还不能理解着色器语言的语法规则，也没有关系，作为初学者你现在只需要有一个印象，然后慢慢去学习。

顶点着色器

内置变量gl_PointSize设置了顶点渲染后的显示大小，内置变量gl_Position决定了渲染的位置，你可以去修改位置变量的值，比如vec4(0.0,0.0,0.0,1.0)变成vec4(0.5,0.0,0.0,1.0)，你会发现渲染的点位置发生了变化。

    <!-- 顶点着色器源码 -->
<script id="vertexShader" type="x-shader/x-vertex">

  void main() {
    //给内置变量gl_PointSize赋值像素大小
    gl_PointSize=20.0;
    //顶点位置，位于坐标原点
    gl_Position =vec4(0.0,0.0,0.0,1.0);
  }

</script>

片元着色器

内置变量gl_FragColor设置渲染结果的颜色值，vec4(1.0,0.0,0.0,1.0)表示红色，如果改成vec4(0.0,1.0,0.0,1.0)，你会发现渲染结果是绿色，vec4的四个分量分别表示RGBA。

<!-- 片元着色器源码 -->
<script id="fragmentShader" type="x-shader/x-fragment">

  void main() {
    gl_FragColor = vec4(1.0,0.0,0.0,1.0);
  }
  </script>

更多WebGL教程关注郭隆邦技术博客