WebGL学习之入门

很长时间想去学习webGL、treejs、计算机图形学这些对我来说陌生的知识，但是一直觉得要打好html,css,js基础，觉得这些高大上的东西，我接触起来比较困难。但是前端技术不断发展，我们需要不断学习，而且要不畏困难。

WebGL的中文网上说到教程适合的读者对象

  学习图形学的大学生；

  游戏开发者；

  Webgl、threejs爱好者；

  已工作的工程师；

  想要更炫效果的前端开发者；

  以批判的眼光来看本教程的童鞋们；

大家觉得自己属于哪一种呢！
转自http://www.hewebgl.com/article/getarticle/26

WebGL

我觉得：

WebGL是一套（JavaScript）API，并且JavaScript是WebGL的唯一入口。WebGL和其他网络内容可以整合在一起，用于搭建动态Web应用的一种跨平台开源语言。

Tree.js

是什么？

Tree.js是WebGL开源框架中非常优秀的一个。官网上说tree.js就是tree(3D)+js(javascript)。众所周知：javaScript是一种脚本语言，它没有C/C++/java那样的处理能力，那它能担当起3D程序的渲染能力。所以我看到webGL中文网上是这样说的：

javascript的计算能力因为google的V8引 擎得到了迅猛的增强，做3D程序，做服务器都没有问题。

WebGL应用结构刨析

从本质上来讲，WebGL只是一个绘制库，一个增强型的绘制库，使用WebGL通过浏览器中的2DCanvas来显示3D图形。使用WebGL把图形渲染到页面中，感觉执行的步骤和绘制canvas差不多。

• 创建一个画布元素
• 获取画布上下文
• 初始化视口
• 创建一个或多个包含渲染数据的数组（通常是顶点数组)
• 创建一个或多个矩阵，将丁点数组变换到屏幕空间中。
• 创建一个或多个着色器来实现绘制算法。
• 使用参数初始化着色器
• 绘制

画布元素与绘制上下文

所有的WebGL渲染都发生在一个上下文中，就是一个JavaScript DOM对象，这个结构类似HTML5中的canvas元素的绘制上下文。所以我们使用WebGL API,只需要创建一个canvas元素，然后获取与它关联的DOM对象，最后为其获得一个WebGL上下文即可。

function initWebGL(canvas){
	var gl;
	try{
		gl = canvas.getContext("experimental-webgl");
	}catch(e)
	{
		var msg = "Error creating WebGL Context!:" + e.toString();
		throw Error(msg)
	}
	return gl;

视口

一旦成功从画布或得到WebGL的绘制上下文，你就可以绘制矩形了。设置视口只需调用上下文的viewport()方法即可

function initViewport(gl, canvas){
	gl.viewport(0, 0, canvas.width, canvas.height)
}