【WebGL】hello WebGL

最新推荐文章于 2023-09-20 11:05:17 发布

lishichengyan

最新推荐文章于 2023-09-20 11:05:17 发布

阅读量316

点赞数

分类专栏：图形学

本文链接：https://blog.csdn.net/lishichengyan/article/details/78776348

版权

图形学专栏收录该内容

15 篇文章 1 订阅

订阅专栏

开始学习WebGL了。

1、怎么创建一个canvas？

canvas的含义是画布，是一个装载图形的容器，WebGL绘制的场景都装在这个容器里。

它的创建很简单，我们可以先在style标签内定义它的边框属性：

	<!--设置canvas边框属性-->
	<style type="text/css">
		canvas{border:2px dotted blue;}
	</style>

然后在body标签内加上：

<canvas id="canvas-element-id" width="800" height="600">
	your browser does not support HTML5
</canvas>

来建立一张画布。

2、WebGL中的“上下文”（context）

WebGL的上下文可以理解成一个JS对象，通过这个对象我们可以访问到WebGL函数及属性。

canvas可能呈现的上下文有两种，第一种叫做CanvasRedering2DContext，第二种叫WebGLRederingContext，通过getContext(...)里的参数来确定到底返回什么上下文。

3、一个综合示例（摘自WebGL Beginner's Guide）：

<!DOCTYPE html>
<html>
<head>
	<title>WebGL Learning</title>
	<!--创建canvas-->
	<style type="text/css">
		canvas{border:2px dotted blue;}
	</style>
	<script>
	var gl=null;
	var c_width=0;
	var c_height=0;
	
	window.οnkeydοwn=checkKey;
	function checkKey(ev){
		switch(ev.keyCode){
			case 49:{//ascii code, 49 corresponds to 1
				gl.clearColor(0.3,0.7,0.2,1.0);//设置清理缓冲区的值
				clear(gl);
				break;
			}
			case 50:{//2
				gl.clearColor(0.3,0.2,0.7,1.0);
				clear(gl);
				break;
			}
			case 51:{//3
				var color=gl.getParameter(gl.COLOR_CLEAR_VALUE);
				alert('clearColor=('+Math.round(color[0]*10)/10+
					  ','+Math.round(color[1]*10)/10+
					  ','+Math.round(color[2]*10)/10+')');
				window.focus();
				break;
			}
		}
	}
	
	function getGLContext(){
		var canvas=document.getElementById("canvas-element-id");
		if(canvas==null){
			alert("no canvas on this page");
			return;
		}
		var names=["webgl","experimental-webgl","webkit-3d","moz-webgl"];
		var ctx=null;
		for(var i=0;i<names.length;i++){
			try{
				ctx=canvas.getContext(names[i]);
			}
			catch(e){}
			if(ctx) break;
		}
		if(ctx==null){
			alert("webgl is not available");
		}else{
			//alert("Hooray! You got a webgl context");
			return ctx;
		}
	}
	function clear(ctx){
		ctx.clear(ctx.COLOR_BUFFER_BIT);//清除绘图区
		ctx.viewport(0,0,c_width,c_height);
	}
	function initWebGL(){
		gl=getGLContext();//执行后得到WebGLRederingContext对象
	}
	</script>
</head>
<body onLoad="initWebGL()">
<canvas id="canvas-element-id" width="800" height="600">
	your browser does not support HTML5
</canvas>
</body>
</html>