一、WebGL入门的开始

最新推荐文章于 2024-09-14 09:27:55 发布

a23366192007

最新推荐文章于 2024-09-14 09:27:55 发布

阅读量2.6k

点赞数 3

分类专栏： WebGL 自学

本文链接：https://blog.csdn.net/a23366192007/article/details/50525497

版权

WebGL 同时被 2 个专栏收录

8 篇文章 5 订阅

订阅专栏

自学

8 篇文章 0 订阅

订阅专栏

一直对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，可以帮我们做一些特效，如反射，水，镜面反射，阴影等

本节完

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