很長時間想去學習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)
}