一、WebGL入门的开始

一直对WebGL很感兴趣,但一直没时间学习,现在总算有了点时间。这也是鄙人第一次写博客,写的得不好望指正。


我比较喜欢先看效果,再分析代码。

代码如下:

<html>
<head>
	<title>webgl-lesson1</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<script type="text/javascript">
		var webgl = null;
		function Init()
		{
			var canvas = document.getElementById("myCanvas"); //获取canvas对象
			webgl = canvas.getContext("webgl");//通过canvas创建webgl对象
			webgl.viewport(0,0,canvas.clientWidth,canvas.clientHeight);//webgl对象在canvas上创建一个视口
			webgl.clearColor(0.0,0.0,0.0,1.0);//将缓冲区清空为黑色
			webgl.clear(webgl.COLOR_BUFFER_BIT);//执行清空操作
		} 

	</script>
</head>
<body οnlοad="Init()">
	<canvas id="myCanvas" style="border:1px solid red;" width="600" height="450"></canvas>
</body>
</html>
执行结果如下:


代码分析:

 
webgl = canvas.getContext("webgl");

通过canvas创建webgl对象,同时默认创建了一个canvas大小的后台帧缓存区FBO(Frame Buffer Object),(相当于一张图片)如下图的红色框框的区域

webgl.viewport(0,0,canvas.clientWidth,canvas.clientHeight);
在canvas上创建一个视口,相当于下图蓝色框框区域,可以与canvas重合

 
 
 
 
 
 


webgl.clearColor(0.0,0.0,0.0,1.0);
将缓冲区清空为黑色
webgl.clear(webgl.COLOR_BUFFER_BIT);
执行清空操作,记住,clearColor操作只是相当于指定了一个黑色的画刷,clear操作才真正执行清空操作


clear函数的参数只有如下三个:


const GLenum DEPTH_BUFFER_BIT = 0x00000100

const GLenum STENCIL_BUFFER_BIT = 0x00000400

const GLenum COLOR_BUFFER_BIT = 0x00004000


当创建了一个webgl的对象时候,在后台会创建帧缓存区,相当于一张二维图片,但是这张图片不是只有一张,有颜色缓冲区COLOR_BUFFER_BIT,控制颜色的,表现出来的是我们看到的结果;深度缓存区DEPTH_BUFFER_BIT,三维物体的先后,有遮挡效果;模板缓冲区STENCIL_BUFFER_BIT,可以帮我们做一些特效,如反射,水,镜面反射,阴影等



本节完


注:官方文档:点击打开链接


                
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值