webgl (原生)基礎入門指南 二

2021-09-16 23:46:01 字數 1782 閱讀 7699

本章介紹一些三維圖形學中的基本概念為後文的繪圖做個科普在我們現實世界中,每個東西都有它的長、寬、高等度量分量,那麼我們對它進行建模的時候會使用到乙個物件座標系。將這個物件放入現實世界,那麼它就存在於現實世界中的世界座標系。我們將它顯示在我們的系統裝置上,則它存在於應用程式座標系

我們把應用程式中度量頂點位置的數值稱為頂點座標

用顯示器上單位度量出的數值起初叫做物理裝置座標或者叫裝置座標。對於光柵裝置,我們使用的術語是視窗座標或者螢幕座標。螢幕座標總是用某種整數型別來表示,因為幀快取中任何畫素中心都必須位於固定的網格點上。

看了這麼多的座標是不是有點懵逼了 !哈哈哈=。= 沒有懵逼嗎?很聰明,那我們繼續~

在webgl中,所有的幾何圖元都是由線段三角形這樣的基本圖元組成。

webgl 提供了多種點和線段圖元,相應的type引數如下

gl.points):每個頂點被顯示的大小至少是乙個畫素。

線段gl.lines):這種圖元把相繼的頂點配對後解釋為線段的兩個端點(兩兩配對)。

折線gl.line_strip,gl.line_loop)想要讓相繼的頂點相連,可以使用折線圖元。曲線可以通過合適的折線來近似。如果希望折線閉合,可以吧最後乙個頂點設定與第乙個頂點重合,也可以使用gl.line_loop型別,它會在最後乙個頂點和第乙個頂點之間畫一條線,得到乙個環路。

三角形gl.********):相繼的三個頂點組合在一起,

三角形條帶和三角形扇gl.********_strip,gl.triangel_fan

著色器使用一種類似c語言的opengl es 著色語音(glsl)編寫。在js中,我們可以寫成字串交由底層處理。同樣使用script標籤儲存這些**字元也是可行的。

頂點緩衝區物件中儲存的唯一資訊就是每個點的位置。當執行gl.drawarrays()函式的時候頂點就會經過我們編寫的著色器處理。它必須完成的最低限度的任務是把頂點的位置傳送到光柵化的模組中去。初學者為了不饒進這些理論去,可以先理解為決定點的位置。我們看一下簡單的案例:

這裡我們定義了乙個變數vposition,頂點位置即變數位置。 下篇我們會詳細介紹這個變數的使用。

上文講述了頂點,由頂點構成了圖元。那麼處理圖元中的每個片元都需要我們片元著色器的處理。作為菜鳥的我們可以理解為每個畫素點。

片元著色器通過webgl的內建變數gl_fragcolor為每個片元指定乙個思維的rgba顏色。注意:這裡的rgba值為[0.0,1.0]而不是我們網頁所使用的[0,255]。

著色器示例:

webgl (原生)基礎入門指南 一

來看這篇文章的同學一定是被近來的3d場景效果所震撼,抱著 這tm怎麼做的!的來心態來學習webgl的吧。也行你已經有threejs或其他3d場景開發框架的使用經驗,卻不知道webgl原生到底怎麼寫。本系列將從最簡單最基礎的原生api入手,手把手教你寫webgl 同二維場景一樣,我們需要乙個畫布來繪製...

Redis入門指南(二)

使用sort命令,操作集合類,和列表和有序集合類 sort key alpha 按照字典順序排列非數字。sort key desc by 引數,可以排序雜湊型別,甚至是字串型別 根據名稱 萬用字元 get 排序之後 獲取值 store 儲存 優化 sort是redis最強大最複雜的命令之一。使用不好...

Docker零基礎入門指南 二 Docker安裝

docker企業版包含了一些收費服務,個人開發者一般用不到。下面的介紹都針對社群版。docker ce 的安裝請參考官方文件。macubuntu centos windows debian fedora 其他linux發行版 安裝完成後,在terminal中就有了docker的命令了,這個命令就是d...