WebGL学习笔记（一）

梦里梦外; 2022-07-11 13:04 218阅读 0赞

作者：朱金灿

来源：[http://blog.csdn.net/clever101][http_blog.csdn.net_clever101]

（一）WebGL是什么？

WebGL是一门在网页上显示三维图形的技术，你可以把它理解为把OpenGL从C/S端搬到了B/S端。因此它也就继承了OpenGL的跨平台的优势，同时它是以js程序的形式表现出来的，因此比起OpenGL程序多了一个优势：一次编写的代码满足目前所有的设备，包括PC、平板和手机。同时WebGL的底层渲染引擎其实是OpenGL，因此其程序逻辑和相关数据结构和OpenGL程序也高度类似。

WebGL程序的结构由两部分组成：html代码和js程序。html代码实际上只是充当一个容器的作用，在html容器里包裹js程序。WebGL程序实现三维图形绘制代码以及相关交互的代码实际上是放在js程序里。因此js程序才是WebGL程序的精髓所在。

（二）一个简单的WebGL程序

下面以一个简单的WebGL程序来具体说明WebGL程序的具体结构是怎么样的。首先介绍WebGL程序的开发工具。WebGL程序的开发工具可以很简单，简单到可以只是一个文本编辑工具，比如记事本或NotePad++。不过我建议你使用专业的js程序开发工具，比如Sublime Text，它的样子是这样的：

![Center][]

简单使用了一下它，发现它专业的地方在：以工程的形式来展示一个文件夹的代码（js程序一般没有工程文件，而是全部放在一个文件夹中，我曾尝试把一个文件夹作为一个工程导入到Eclipse中，半天没有成功）；有文档缩略图；可以调用浏览器打开html文件。

现在我们用Sublime Text新建一个html文件，代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>Draw a blue rectangle (canvas version)</title>
    </head>
    <body οnlοad="main()"> 
    <canvas id="example" width="400" height="400">
    Please use a browser that support "canvas"
    </canvas>
    <script type="text/javascript" src="DrawRectangle.js"></script>
    </body>
    </html>
    
    // DrawRectangle.js的代码如下：
    function main()
    { 
       // 获取vancas
       var canvas = document.getElementById("example"); 
       if(!canvas)
      {
         console.log('Failed to retrive the <canvas> element');
         return;	
      }
      var ctx = canvas.getContext('2d'); // 获取二维设备上下文
      ctx.fillStyle = 'rgba(0,0,255,1.0)'; // 设置图形颜色
      ctx.fillRect(120,10,150,150); // 设置矩形的左上角坐标和宽高
    }

效果图如下：

![Center 1][]

简单解释下上面的代码：

html页面中需要嵌入一个canvas，这个canvas实现WebGL的绘图区域，html页面还得指定加载页面后的js响应函数和对应的js源码文件。在js文件需要实现响应函数。绘图步骤是这样：首先获取html页面中的canvas，然后获取设备上下文，然后使用设备上下文进行绘制。

[http_blog.csdn.net_clever101]: http://blog.csdn.net/clever101
[Center]: /images/20220711/02f042227d794799b868e06ceb739640.png
[Center 1]: /images/20220711/f1ccd30b021b4ad4ba96213ad3229ff9.png