分享一個WebGL開發的網站-用JavaScript + WebGL開發3D模型

這張圖每位程式設計師應該都深有感觸。

人民心目中的程式設計師是這樣的：坐在電腦面前噼裡啪啦敲著鍵盤，運鍵如飛。

現實中程式設計師是這樣的：編碼5分鐘，除錯兩小時。

今天我要給大家分享一個用WebGL開發的網站，感興趣的朋友可以在Chrome開發者工具裡除錯它的原始碼來學習WebGL。

WebGL(Web Graphics Library)是3D繪圖協議的一種，該技術的特色是將萬能的JavaScript和OpenGL ES 2.0結合在一起，為HTML5的 Canvas提供硬體3D加速渲染。藉助WebGL，前端開發人員可以開發出非常專業的3D場景和模型。

今天我要介紹的網站：Legacy Encom Boardroom Visualization就是一個採取JavaScript 加上WebGL開發3D場景和模型的一個典型例子。

網站地址：

進入之後，會看到一個炫目的控制檯。左下角的動畫效果很像電影《生化危機》裡的DNA雙螺旋模型。螢幕右邊是一個控制檯，你在鍵盤上輸入的字元會有個酷炫的動畫效果：

您可以手動在控制檯裡輸入shell命令，比如：

cd wikipedia

ls

以此來瀏覽wikipedia資料夾下的所有內容。或者直接用滑鼠左鍵點選wikipedia這個資料夾：

然後就能進入wikipedia這個資料夾，看到幾個酷炫的3D模型，一個是正在旋轉的地球的3D模型，另一個是不同維度展示的長方體模型。

在Chrome開發者工具的console頁面能看到WebGL相關的輸出。

這個網站的原始碼在github：

如果大家對WebGL技術感興趣的，不妨去細讀下原始碼：