WebGL学习笔记(一)

作者:朱金灿

来源:http://blog.csdn.net/clever101 

 

(一)WebGL是什么?

    

         WebGL是一门在网页上显示三维图形的技术,你可以把它理解为把OpenGLC/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,它的样子是这样的:

WebGL学习笔记(一)_第1张图片

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

 

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





Draw a blue rectangle (canvas version)

 

Please use a browser that support "canvas"





// DrawRectangle.js的代码如下:
function main()
{ 
   // 获取vancas
   var canvas = document.getElementById("example"); 
   if(!canvas)
  {
     console.log('Failed to retrive the  element');
     return;	
  }
  var ctx = canvas.getContext('2d'); // 获取二维设备上下文
  ctx.fillStyle = 'rgba(0,0,255,1.0)'; // 设置图形颜色
  ctx.fillRect(120,10,150,150); // 设置矩形的左上角坐标和宽高
}

效果图如下:

WebGL学习笔记(一)_第2张图片
 

简单解释下上面的代码:

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

你可能感兴趣的:(WebGL)