初识webGL(致敬年轻的岁月，奋斗的自己)

　　　　　　webgl 网页3D

WebGL,在网页上绘制和渲染复杂的3D图形，并且允许用户可以与之进行交互的技术。

一、开始编写WebGL，需要准备的东东

1.需要的基础知是： HTML5 + JavaScript。

2.前景一片光明，你想啊，人们对图片的印象比文字深刻，对视频又比图片敏感，所以以后的发展潮流绝对朝向3D，上次看的5D电影，真的好好，谢谢你！

3.编辑器，前端的所有编辑器，比如：sublime，webstorm, HBuilder ......

4.支持的浏览器，火狐， Google， IE11是不支持的哦。

5.注意的问题，代码需要通过服务器加载，本地容易出现问题。

二、代码的编写部分

编写webGL需要用到canvas,目前我的了就是用到了canvas。其他都是JS代码。WebGL的第一个程序。

我用的是webstorm这个编辑器，超级好用奥，会让你爱不释手de。

效果图：

不说了，上代码了：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var webgl = null;
        function Init(){
            var canvas = document.getElementById("myCanvas");
            webgl = canvas.getContext("webgl"); //就是webgl绘图
            webgl.viewport(0,0, canvas.clientWidth, canvas.clientHeight); //0,0， 两个参数是原点的位置， 设置的宽和高，就定义了webgl的缓存区，叫做帧缓冲区，画的图形就在这里吧。
            
            webgl.clearColor(106/255.0, 121.0/255, 162.0/255, 1.0);//指定 清空canvas区域的背景色， 以分数表示颜色，就可以显示各种各样的颜色了。
            webgl.clear(webgl.COLOR_BUFFER_BIT); //就是这一步让颜色，显示出来de，清空canvas区域的颜色为上面指定的颜色。

        }
    </script>
</head>
<body onload = "Init()">
    <canvas id = "myCanvas" style = "border: 1px solid red;" width = "600" height=" 450"></canvas>
</body>
</html>

 
参数解释
1.定义webGL，赋值为nuLL，因为不知道什么类型。
2.canvas.getContext的类型为 webgl， 也有2D，3D的参数值。
3.webgl.viewport，设置的是webgl区域的大小，此时跟webgl的区跟canvas的一样大。
4.webgl.clearColor(R, G, B, A);(0~1的数，上面就是O)；
5.webgl.clear(缓冲区)，这里的webgl.COLOR_BUFFER_BIT 指定的颜色缓冲区，将背景色清空为缓冲区里的颜色值。