WebGL Tutorial 创建WebGL环境

最新推荐文章于 2024-04-13 17:31:08 发布

勇敢的大树

最新推荐文章于 2024-04-13 17:31:08 发布

阅读量1k

点赞数

分类专栏： 3D

本文链接：https://blog.csdn.net/clshan/article/details/8450087

版权

3D 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

创建WebGL环境不难，本篇讲下怎么创建一个 WebGL的环境：

1. 在页面里动态创建一个canvas:

var webglcanvas = null;
function init() {
  container = document.createElement( 'div' );
  document.body.appendChild( container );
  webglcanvas = document.createElement('canvas'),	
  container.appendChild(webglcanvas);
}

2. 从canvas中获取WebGL Context

var gl = null;
function initGL () {
  try {
    gl = webglcanvas.getContext("experimental-webgl");
    if ( null == gl ) {
      throw 'Error creating WebGL context.';
    }
  } 
  catch (error) {
    console.log(error);
  }
}

3. 创建一个用于渲染用的方法

function updateFrame () {			
  // Clear the color buffer
  gl.clearColor(0.4, 0.4, 0.7, 1);
  gl.clear ( gl.COLOR_BUFFER_BIT );

  // 设置一个Timer   
  setTimeout( function(){updateFrame()}, 20);
}

4. 初始化并开始渲染

init();
initGL();
updateFrame();

<!doctype html>
<html lang="en">
	<head>
		<title>webgl - init webgl</title>		
	</head>
	
	<body>						
		<script>

			var width = window.innerWidth;
			var height= window.innerHeight;

			var webglcanvas = null;
			var gl = null;
			
			function initGL () {
			
				try {
				
					gl = webglcanvas.getContext("experimental-webgl");
					if ( null == gl ) {
						throw 'Error creating WebGL context.';
					}
				} 
				catch (error) {
					console.log(error);
				}		
				
			}
			
			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );
	
				webglcanvas = document.createElement('canvas'),		
				
				container.appendChild(webglcanvas);		
				
			}

			function updateFrame () {			

				// Set the viewport
				gl.viewport ( 0, 0, width, height );
				
				// Clear the color buffer
				gl.clearColor(0.4, 0.4, 0.7, 1);
				gl.clear ( gl.COLOR_BUFFER_BIT );
   
				setTimeout( 
					function(){updateFrame()},
					20);
			}

			init();
			initGL();
			updateFrame();	

        </script>

	</body>
</html>