【WebGL】hello WebGL

来源：互联网发布：如何成为一名淘宝客编辑：程序博客网时间：2024/06/12 00:25

开始学习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.onkeydown=checkKey;function checkKey(ev){switch(ev.keyCode){case 49:{//ascii code, 49 corresponds to 1gl.clearColor(0.3,0.7,0.2,1.0);//设置清理缓冲区的值clear(gl);break;}case 50:{//2gl.clearColor(0.3,0.2,0.7,1.0);clear(gl);break;}case 51:{//3var 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>

阅读全文

0 0