好書 : WebGL 專業級 3D 引擎降臨

昨天在市圖看到這本 "WebGL 專業級 3D 引擎降臨", 是介紹如何利用 HTML5 的 Canvas 元素以及 WebGL 函式庫在瀏覽器上繪製 3D 圖形的書, 一時好奇借回來看, 覺得還蠻有趣的, 但目前沒時間玩, 僅用我的 INHON 筆電測試一下在沒有獨顯 GPU 加持下跑 WebGL 會有多慢, 因為還在考慮要買有獨顯的 ASUS UX533 還是沒有獨顯的 ACER SF515, 其實也還好, 載入時比較慢而已.

Source : 博客來

此書於 2015 年底出了新版 : "瀏覽器語言專用3D引擎：WebGL完全剖析", 內容大致相同, 只是將各章區分為三篇而已 :

Source : 博客來

書中介紹了兩個 WebGL 應用的網站, 其一是繪製人體解剖圖的 zydotebody, 它可以選擇顯示骨骼, 肌肉, 或血管結構, 還可以旋轉從各個角度來觀察 :

# https://www.zygotebody.com

其次是 chemdoodle, 此網站可線上編輯化學式, 然後用 WebGL 繪製其 3D 化學鍵結構, 非常有趣 :

# https://web.chemdoodle.com/demos/2d-to-3d-coordinates/

可見 3D 繪圖在教學與學習上有很棒的加乘效果, 應該也可以拿來線上即時顯示聲譜圖, 只要對麥克風說話, 就能在網頁上顯示 3D 聲譜, 目前好像還沒看到這種網站出現.

除了原生的 WebGL API 外, 此書第 18 章還介紹了 Three.js 框架, 這是諸多 以 WebGL 為基礎的 3D 繪圖框架中最優秀的, 它封裝了建立 3D 場景的各種要素, 例如場景, 相機, 模型, 光源, 材質等等, 讓使用者只要專心在邏輯上快速建立 3D 場景, 參考 :

# https://threejs.org
# Three.js API 簡介
# https://zh.wikipedia.org/wiki/Three.js

檢測瀏覽器是否支援 WebGL 可拜訪下列網站 :

# http://webglreport.com

書中建議的 http://doesmybrowsersupportwebgl.com 已經不存在了.