作者:朱金灿

来源: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. 机器学习技法笔记:01 Linear Support Vector Machine

    Roadmap Course Introduction Large-Margin Separating Hyperplane Standard Large-Margin Problem Support ...

  2. 重磅:Spring Boot 2.0 正式发布!

    Spring Boot 2.0 正式发布! 2018/03/01最新消息,传得沸沸扬扬的Spring Boot 2.0 正式发布了. 小编去看了下Spring Boot的官网,正式版本已经释放出来了! ...

  3. Alienware 15 R3 装Ubuntu 和 win10 双系统

    一.安装环境 Alienware 15 R3 win10 专业版64位 ubuntu16.04 二.软件下载 1.Ubuntu16.04 下载地址:https://www.ubuntu.com/dow ...

  4. 安装CDH5 hadoop2.3.0 NodeManager 没有启动

    今天在安装hadoop后,启动start-yarn.sh后,nodemanager起不起来,后来查看DN节点的日志,报了以下一个错误: FATAL org.apache.hadoop.yarn.ser ...

  5. 005. Asp.Net Routing与MVC 之三: 路由在MVC的使用

    上次讲到请求如何激活Controller和Action,这次讲下MVC中路由的使用.本次两个关注点: 遗留:ModelBinder.BindModel的过程 MVC中路由的使用 MVC 5中的Acti ...

  6. 一款jq的计时器

    举例子: http://files.cnblogs.com/Alandre/201201031633347950.rar

  7. 高可用Hadoop平台-Hue In Hadoop

    1.概述 前面一篇博客<高可用Hadoop平台-Ganglia安装部署>,为大家介绍了Ganglia在Hadoop中的集成,今天为大家介绍另一款工具——Hue,该工具功能比较丰富,下面是今 ...

  8. Ubuntu14.04 编译 Android 5.1.1源码(采用国内镜像)

    欢迎转载,转载请注明出处: http://www.cnblogs.com/lanrenxinxin/p/5424554.html 之前就有编译android源码的想法,但是由于有GFW的存在,又没有梯 ...

  9. Linux下rsync daemon模式下的错误汇总

    一.前言:最近学习服务环境搭建,遇到了许多大大小小的问题,不过还好,经过我的一通努力终于都解决了,所以分享出来给自己留个纪念,同时也希望能帮助学习中的朋友. 二.环境:两台服务器环境相同 1 [roo ...

  10. Kafka的Log存储解析

    引言 Kafka中的Message是以topic为基本单位组织的,不同的topic之间是相互独立的.每个topic又可以分成几个不同的partition(每个topic有几个partition是在创建 ...