我的webgl学习之路（一）

做项目中偶然需要移动端3d展示，所以学习了threejs;但是有着各种限制，还有就是项目要达到好的效果肯定是需要后期处理等等，所以展开了我学习webgl之路，我刚开始毫无目的的看了很多关于webgl的博客，但是我总感觉有种没学懂的感觉，并且观看不同的资料我有着不同的感受与理解；所以我觉得，从头一步一步的来是很有必要的；综合我所有的感受，然后在从新复习一遍，尽量能从我这个新手的角度去学习，分析，讲解；请多多包涵；

学webgl需要的基础知识：HTML，javascript和数学知识；

简单介绍：

Canvas是html中的一个个标签，它表示的是一个画布，它定义了一个api可以绘制图形或者图片，可以通过JavaScript来操作这些api.其中canvas它有2d和3D；3d也就是webgl;

题外话：

我在群里听到有人在问canvas好还是webgl好；当时我就懵逼了；要么就是问canvas2d好还是webgl好，这个问题就好像问c++好还是java好，也许比喻并不恰当；canvas2d它是在cup中执行的，它是单一的线程方式，先进先出，如下图1.1而webgl它渲染是在gup中执行；它是简单的多通道执行方式，并且它们是一起执行，并行处理；如下图1.2；许多个数据排在一起统一执行，想象一下对于gup来说毫无压力；屏幕上的每个像素都代表一个简单的任务，那么处理复杂的效果对CPU来说却难以胜任；

Gpu通道的多少取决于你的硬件gpu,gup是专门做图形渲染，如果用cup做这些工作，那么数据量太大，就成了耗时操作；等它一个一个的去计算执行不知道要等到猴年马月，特别是游戏，所以就有了GPU；而webgl的来源是OpenGL ，OpenGL是pc端的，为了小型设备于是有团队搞了OpenGL ES; 在前端日益强大的情况下又有大神搞了用js调用的webgl 内核；我就简单的介绍一下，具体就上百度查吧，比我介绍的更加详细；至于说canvas2d和webgl那个好那个快，webgl是操作gup,它是很快的，缺点是编写麻烦；那个好是相对的，对项目要求简单快捷，就画一个圆，一条线段，我当然用canvas2d,如果是复杂的3d效果我当然用webgl；而我的项目两种都被用到了；

介绍就到这里了，那么开始我们的学习之路：

我们先创建一个canvas，获取webgl的上下文，它里面封装了所有关于webgl的方法；初始化画板；

代码如下：

<body>
<canvas id="canvas" style="background-color: black"></canvas>

<script>
    onload = function () {

        var canvas = document.getElementById("canvas");
        canvas.width = 500;
        canvas.height = 500;

      vargl =canvas.getContext("webgl");
        //指定清空canvas的颜色,也就背景颜色0
        gl.clearColor(0.0,0.0,0.0,1.0);
        //清空canvas,(清空的是颜色缓冲区)
        gl.clear(gl.COLOR_BUFFER_BIT);
    }
</script>

</body>

gl.clearColor(0.0,0.0,0.0,1.0);它里面的参数是以rgba模式来放的，需要注意的是它们是float类型，范围是0到1；因为这个范围更便于OpenGL的标准化，当然也就成了webgl的标准了