作者：朱金灿

来源：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，它的样子是这样的：

简单使用了一下它，发现它专业的地方在：以工程的形式来展示一个文件夹的代码（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 onload="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); // 设置矩形的左上角坐标和宽高

}

效果图如下：


 

简单解释下上面的代码：

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

WebGL学习笔记（一）的更多相关文章

  1. webgl学习笔记五-纹理

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 术语 : 纹理 :图像 图形装配区域 :顶点着色器顶点坐标 ...

  2. webgl学习笔记四-动画

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放   下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...

  3. webgl学习笔记三-平移旋转缩放

    写在前面 建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 平移 1.关键点说明 顶点着色器需要加上 uniform vec4 u_Translation ...

  4. webgl学习笔记二-绘图多点

    写在前面 建议先看下第一篇webgl学习笔记一-绘图单点 第一篇文章,介绍了如何用webgl绘图一个点.接下来本文介绍的是如何绘制多个点.形成一个面. webgl提供了一种很方便的机制,即缓冲区对象, ...

  5. WebGL学习笔记二——绘制基本图元

    webGL的基本图元点.线.三角形 gl.drawArrays(mode, first,count) first,代表从第几个点开始绘制即顶点的起始位置 count,代表绘制的点的数量. mode,代 ...

  6. WebGL学习笔记（2）

    根据上一篇学习笔记,理解WebGL的工作原理及基本调用代码后,可以开始研究3D顶点对象的缩放.旋转.以及对对象进行可交互(鼠标或键盘控制)的旋转或者缩放. 要理解对象的旋转/缩放需要首先学习矩阵的计算 ...

  7. WEBGL学习笔记（七）：实践练手1-飞行类小游戏之游戏控制

    接上一节,游戏控制首先要解决的就是碰撞检测了 这里用到了学习笔记(三)射线检测的内容了 以鸟为射线原点,向前.上.下分别发射3个射线,射线的长度较短大概为10~30. 根据上一节场景的建设,我把y轴设 ...

  8. WebGL学习笔记（3）

    根据上篇笔记,在对3D对象可进行普通的控制后,以及学习了http://hiwebgl.com的教程第10章内容:世界模型的载入以及控制镜头移动,经过多次调试矩阵代码,已经可以实现在世界中旋转镜头/控制 ...

  9. WebGL学习笔记七点一

    第六章讲的是一些GL的一些语法,前面已经涉及,学习时直接跳过,来看第七章,第七章是真正意义的三维立体的出现,其实图形绘制方法是差不多的,就是Z坐标此时不再为0,所以很容易能构造出一些立体图形,但是立体 ...

  10. WebGL学习笔记一

    学习用来做web3D的,从第一页开始学起先做2D的,接下来的程序是一个入门级的程序,可以通过在画板上的不同位置点击而获取不同颜色的点,以画板中心为坐标原点四个象限有不同的颜色,访问地址  http:/ ...

随机推荐

  1. Flask中的模板语言jinja2

    jinja2介绍 jinja2是Flask作者开发的一个模板系统,起初是仿django模板的一个模板引擎,为Flask提供模板支持,由于其灵活,快速和安全等优点被广泛使用. jinja2的优点 jin ...

  2. TextView展示富文本时emoj或图片和文字不对齐的解决方案

    在项目中,回复框.聊天界面的显示往往会有emoj或者图片,但是一个比较头疼的问题是,会出现emoj表情或者图片和文字的位置不对齐,总是有偏移,这样很影响用户体验的.下面会总结一下如何解决这个问题. 本 ...

  3. 第32节：Java中-构造函数，静态方法，继承，封装，多态，包

    构造函数实例 class Cat{ // 设置私有的属性 name private String name; // 设置name的方法 public void setName(String Name) ...

  4. Linux - 常用网络操作

    001 - Linux CentOS网络配置 CentOS---网络配置详解 002 - Linux查看端口状态 检测本机8080端口状态:netstat –apn | grep 8080 检测192 ...

  5. [Objective-C语言教程]协议（31）

    Objective-C允许定义协议,声明预期用于特定情况的方法. 协议在符合协议的类中实现. 一个简单的例子是网络URL处理类,它将具有一个协议,其中包含processCompleted委托方法等方法 ...

  6. shell编程中的循环语句

    while循环直接从文件中读取 while read line do command done < filename until循环 until 条件 do command done for循环 ...

  7. 服务端如何安全获取客户端请求IP地址

    服务端如何获取客户端请求IP地址,网上代码一搜一大把.其中比较常见有x-forwarded-for.client-ip等请求头,及remote_addr参数,那么为什么会存在这么多获取方式,以及到底怎 ...

  8. Spring Boot + Spring Cloud 实现权限管理系统 后端篇（十二）：解决跨域问题

    什么是跨域? 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 如果一个请求地址里面的协议.域名和端口号都相同,就属于同源. ...

  9. 逆向知识之CS辅助/外挂专题.2.实现CS1.6透视原理

    逆向知识之CS辅助/外挂专题.2.实现CS1.6透视原理 一丶透视简介 我们涉及到FPS游戏.免不了说透视.自瞄什么的. 在CS1.6中. 有OpenGl.也有D3D. 透视的方法很多. gl透视(也 ...

  10. Python 3 进阶 —— print 打印和输出

    在 Python 中,print 可以打印所有变量数据,包括自定义类型. 在 2.x 版本中,print 是个语句,但在 3.x 中却是个内置函数,并且拥有更丰富的功能. 参数选项 可以用 help( ...