【WebGL】WebGL入门
来源:互联网 发布:淘宝怎么刷流量安全 编辑:程序博客网 时间:2024/05/21 16:58
在第一次学习中,我知道了WebGL程序要同时使用HTML和将GLSL ES代码放在JavaScript中来创建和显示三维图形。
下面的内容将作为WebGL的基础入门,来了解WebGL的基本知识。
========================================== 分割线 ==========================================
Canvas是什么?
在HTML5中有一个很重要的标签叫做<canvas>
— 它定义了网页上的绘制区域。
如果没有WebGL,JavaScript只能在<canvas>
上绘制二维图形,有了WebGL,就可以在上面绘制三维图形了。添加了WebGL的JavaScript程序又被称为WebGL程序。
在HTML5之前,如果想在网页上显示图像只能够使用<img>
标签,并且只能显示静态图片。自从HTML5引入了<canvas>
标签后,它就允许JavaScript动态的绘制图形。
Canvas到底是什么?
Canvas — 译为画布,即绘画的地方。所以<canvas>
标签定义了网页上的绘图区域。有了<canvas>
,就可以使用JavaScript绘制想要的东西。<canvas>
提供了一些简单的绘画函数,来绘制点、线、矩形、圆等等。
在HTML中,
<canvas>
的坐标系统是横轴为x轴,纵轴为y轴。原点在屏幕的左上方,x轴向右为正方向,y轴向下为正方向。
使用<canvas>
标签
上面说到<canvas>
提供了一些简单的绘图函数,现在通过一个简单的绘制矩形的示例来了解一下<canvas>
提供的核心函数。
第一步,创建一个HTML文件,名为HelloRect.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Draw a blue Rect</title></head><body onload = "main()"> <canvas id = "example" width = "400" height = "400"> Please use a browser that support "canvas" </canvas> <script src="HelloRect.js"></script></body></html>
上面的代码块,第8行<canvas>
标签,可以看到这回一个非常常见的HTML形式。定义了<canvas>
的id、宽和高三个属性。
除此之外,为了让HTML执行JavaScript代码,和其他语言一样需要一个入口函数。所以在第7行<body>
标签中,我们指定onload属性让它执行main()函数。
那么这个main()函数从哪里找呢??有两种方式:可以直接写在HTML文件中,也可以写在JS文件中。
为了代码的易读性并且让HTML与JS文件分离,我选择了第二种方式。所以在第11行中,需要使用<script>
标签并且要为src属性指定对应的JS脚本路径。
第二步,创建JavaScript文件,名为HelloRect.js(尽量让HTML文件和JS文件的文件名保持一致):
//HelloRect.jsfunction main(){ var canvas = document.getElementById("example"); if(!canvas){ console.log("Failed to find <canvas>"); return false; } var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgba(0, 255, 255, 1.0)"; ctx.fillRect(120, 10, 150, 150);}
可以看到,这里就是<body>
标签中加载的main()函数了。
首先,第2行,通过document.getElementById函数来获取<canvas>
元素,这个方法的参数就是<canvas>
中的id属性。并且判断是否获取到了<canvas>
。
然后,第8行,通过<canvas>
元素来获取绘图上下文。
ps:
<canvas>
元素可以灵活地支持二维图形和三维图形,但是它不直接提供绘图方法,而是提供一种叫做上下文(context)的机制来进行绘图。所以在绘图前要先获取上下文。
就是通过上面的getContext()函数来获取上下文。它的参数指定了上下文的类型是二维还是三维。
最后,通过获取到的上下文来绘制二维图形,分别是:第10行的fillStyle属性用来指定填充颜色,第11行的fillRect用来指定颜色填充的矩形区域。
现在双击HTML文件浏览,就可以看到屏幕上400*400的区域内,有一个我们指定的fillRect大小的蓝色填充块。
ps:<canvas>
默认是透明的,所以我们并看不清楚400*400的<canvas>
大小,这个会在后面讲到。
最短的WebGL程序:清空绘制区
在上面,我们知道了如何使用<canvas>
来绘制一个简单的矩形。上面的程序块中其实没有使用到WebGL。
现在就来看一个最简单的WebGL程序:清空绘制区。
首先,创建一个HTML文件叫做:HelloWebGL.html,具体代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Hello WebGL</title></head><body onload = "main()"> <canvas id = "webgl" width = "400" height = "400"> please use the browser supporting "canvas" </canvas> <script src = "../lib/webgl-utils.js"></script> <script src = "../lib/webgl-debug.js"></script> <script src = "../lib/cuon-utils.js"></script> <script src = "HelloWebGL.js"></script></body></html>
在这里,html代码几乎和第一个例子一样,设置了加载函数main()。设置了<canvas>
的id、宽和高。并且在第15行引用了js文件。
与之前不同的是,在第12-14行中分别引入了三个WebGL的库。这三个库具体有什么作用,后面会慢慢讲到。
然后,依然是创建一个文件名相同的js文件:HelloWebGL.js,具体代码如下:
function main(){ var canvas = document.getElementById("webgl"); var gl = getWebGLContext(canvas); if (!gl){ console.log("Failed to get the rendering context for WebGL"); return; } gl.clearColor(0,0,1,1); gl.clear(gl.COLOR_BUFFER_BIT);}
这里的代码也很简单。
第4行,获取到了上下文。
不同的是:这里获取上下文不再使用<canvas>
自己的getContext()函数了,而是使用了在html文件中引入的cuon-utils.js库中的getWebGLContext()函数。这个函数接受的参数是通过id获取到的<canvas>
元素。
使用getWebGLContext的原因是<canvas>
的getContext()在获取上下文的时候它所接收的参数在不同浏览器中会有不同。而getWebGLContext()帮我们隐藏了这些差异。并且,通过getWebGLContext()获取的上下文,让我们能够使用WebGL函数了!!
第11行,设置了<canvas>
的背景色。
这个函数单从名字上看有点奇怪:clearColor(r, g, b, a)。看上去像清空颜色。其实它就是使用我们所指定的rgba值来设置背景色。
注意:这里指定的rgba值范围都是[0, 1]。而之前的fillStyle指定的rgba值,rgb为[0, 255],a为[0, 1]。
第12行,通过clear()函数,用之前指定的背景色来清空绘图区域(用背景色填充绘图区域,擦除原有绘制内容)。
注意:这里的参数是gl.COLOR_BUFFER_BIT。这是因为:clear()方法继承自OpenGL,它是基于多基本缓冲区模型。所以清空绘图区域,实际上是在清空颜色缓存区。所以这个参数也能够接受其他的缓存区作为参数。
参数列表图下图:
对于各个缓冲区也有自己的默认值,默认值如下:
运行html文件,最后在浏览器上会看到<canvas>
绘图区域内是一片蓝色。
- 【WebGL】WebGL入门
- webgl入门
- WebGL
- WebGL
- WebGL
- webGL
- WebGL
- WebGL入门指南
- WebGL 入门-模型导出
- 六、WebGL入门,动画
- webgl入门之一:概述
- WebGl学习入门心得
- WebGL入门基本概念
- WebGL入门系列一
- WebGL入门系列二
- WebGL库Three.js入门
- [WebGL入门]四,渲染准备
- [WebGL入门]十四,绘制多边形
- Mac 清理垃圾工具 Clean My Mac破解版
- HDU 5880 Family View 好容易MLE的AC自动机 *
- IntentService源码分析
- Mybatis多表关联映射
- org.xml.sax.SAXParseException; lineNumber: 71; columnNumber: 54; 元素内容必须由格式正确的字符数据或标记组成。
- 【WebGL】WebGL入门
- 样式,动态加载
- 浅谈Service Manager成为Android进程间通信(IPC)机制Binder守护进程之路
- what's the different between forward proxy and reverse proxy?
- Framework中的AIDL(原)
- lightoj 1018 一个比较重要的状态转移的剪枝技巧....DFS+状压dp
- Mybatis集合映射
- 16进制与byte的转换
- Leetcode 71 Simplify Path