《webgl lesson 10 – loading a world, and the most basic kind of camera》:這個demo載入了乙個場景,並且能處理鍵盤事件。
載入場景:xmlhttprequest->http get request->a callback function當載入場景資料完成時呼叫並載入場景資料。場景資料預設用的格式很簡單,只能反映點座標和對應面的貼圖資訊,其他光源等都不能反映,所以這個格式不好。一組資料報括xyzst五個值,前三個是點座標,後兩個是貼圖紋理。紋理值一般在0-1之間,表示縮放比例,但是這裡出現6.5等,表示同時貼6張圖,每張圖比例是0.5,這適用於牆面紋理。
攝像頭移動:繞y軸左右看稱為yaw,繞x軸上下看成為pitch。webgl本身沒提供攝像頭,需要自己實現,我們實現時是預設將攝像頭置於原點並看向x軸。攝像頭移動,其實是場景移動。在複雜處理中,可以維護乙個「camera matrix」來維護場景座標的移動旋轉量值。
鍵盤輸入處理:jog(漫步)。原則:配置更好的機器,按鍵盤,獲得的只能是更高的幀數,而不是更快的移動速度。這裡通過設定固定的移動速率,並在drawscene中繪製實現。因為drawscene本身只於使用者幀數相關,所以可以實現上述功能。文中**是在drawscene中,先根據各種偏轉引數使用drawarrays繪製影象後,再處理當前的鍵盤操作,更新偏轉引數,即本次處理的鍵盤輸入只能在下次drawscene執行時得以顯示結果。
webGL學習筆記一
一直對webgl感興趣,終於提起精神學習了,前路漫漫啊 在three.js中,要渲染物體到網頁中,我們需要3個組建 場景 scene 相機 camera 和渲染器 renderer 有了這三樣東西,才能將物體渲染到網頁中去。記住關建語句 有了這三樣東西,我們才能夠使用相機將場景渲染到網頁上去。另乙個...
學習筆記 WebGL教程 MDN
本學習筆記存在意義 閱讀學習mdn教程中自己的想法。step.1 起點 getting started with webgl act.1 切換語言 中文 act.2 已瀏覽一遍,腦袋記憶不住的地方是webgl 語言中的關鍵變數 mdn教程的開始,是準備html結構和js腳手架。這個部分對於js單刀手...
WEBGL學習筆記(二) 矩陣變換
遊戲已經做好,但是不能支援哈,我在我的獨立部落格裡面加入了這個遊戲。載入時候會黑屏,等待數秒即可,點選這裡體驗試玩 three.js 使用矩陣matrices進行3d變換 位置 position 平移,旋轉rotations,和縮放scaling.每乙個object3d例項都儲存乙個矩陣儲存位置,旋...