分享一個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場景和模型的一個典型例子。

網站地址：https://www.robscanlon.com/en...

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

您能夠手動在控制檯裏輸入shell命令，好比：

cd wikipedia

ls

以此來瀏覽wikipedia文件夾下的全部內容。或者直接用鼠標左鍵點擊wikipedia這個文件夾：

而後就能進入wikipedia這個文件夾，看到幾個酷炫的3D模型，一個是正在旋轉的地球的3D模型，另外一個是不一樣維度展現的長方體模型。

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

這個網站的源碼在github：http://github.com/arscan/enco...

若是你們對WebGL技術感興趣的，不妨去細讀下源代碼：

要獲取更多Jerry的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: