webGL: vertexAttribPointer 函式理解 - IT人

MDN官方定義告訴顯示卡從當前繫結的緩衝區（bindBuffer()指定的緩衝區）中讀取頂點資料。

語法void gl.vertexAttribPointer(index, size, type, ... Togglenavigation IT人 IT人 webGL:vertexAttribPointer函式理解 undefined發表於 2022-03-07 WebGL MDN官方定義告訴顯示卡從當前繫結的緩衝區（bindBuffer()指定的緩衝區）中讀取頂點資料。

語法voidgl.vertexAttribPointer(index,size,type,normalized,stride,offset);引數index指定要修改的頂點屬性的索引size指定每個頂點屬性的組成數量，必須是1，2，3或4。

type指定陣列中每個元素的資料型別normalized當轉換為浮點數時是否應該將整數數值歸一化到特定的範圍stride一個GLsizei，以位元組為單位指定連續頂點屬性開始之間的偏移量(即陣列中一行長度)。

不能大於255。

如果stride為0，則假定該屬性是緊密打包的，即不交錯屬性，每個屬性在一個單獨的塊中，下一個頂點的屬性緊跟當前頂點之後。

offsetGLintptr(en-US)指定頂點屬性陣列中第一部分的位元組偏移量。

必須是型別的位元組長度的倍數理解為什麼使用vertexAttribPointer如果需要修改頂點位置和顏色，那麼需要建立兩個緩衝區。

而使用vertexAttribPointer可以存多種資料，不同資料間通過偏移來區分，這樣就可以只需要一個緩衝區資料了。

引數理解index通過gl.getAttribLocation(gl.program,"a_Position")方法可以返回a_Position屬性的索引，這就是index需要的資料size你需要取幾個資料。

例如:constverties=newFloat32Array([ 0.0,0.5,-0.4,0.19607843137254902,0.8431372549019608,0.8745098039215686,-0.5,-0.5,-0.4,0.4,1.0,0.4,0.5, -0.5,-0.4,1.0,0.4,0.4,0.5,0.4,-0.2,1.0,0.4,0.4,-0.5,0.4, -0.2,1.0,1.0,0.4,0.0,-0.6,-0.2,1.0,1.0,0.4,0.0,0.5,0.0,0.4, 0.4,1.0,-0.5,-0.5,0.0,0.4,0.4,1.0,0.5,-0.5,0.0,1.0,0.4,0.4, ]);如果引數設定為3,那就是說需要3個資料。

type指定資料型別，gl.FLOAT,gl.BYTE等等資料型別，一般為gl.FLOATnormalized對於引數gl.FLOAT無效stride設定偏移量，首先拿到constFSIZE=verties.BYTES_PER_ELEMENT,也就是陣列的位元組長度，偏移量必須是位元組長的的倍數。

關鍵步驟，設定每次拿資料時的間隔，還是拿上面的資料為例，設定為1*FSIZE，則取的資料為:`0.0,0.5,-0.4`, `0.5,-0.4,0.19607843137254902`, `-0.4,0.19607843137254902,0.8431372549019608,` 如果設定為3*FSIZE,則取的資料為:0.0,0.5,-0.4,0.19607843137254902,0.8431372549019608,0.8745098039215686,-0.5,-0.5,-0.4offset需要配合上一個引數理解,例如:gl.vertexAttribPointer(a_Position,3,gl.FLOAT,false,FSIZE*6,3*FSIZE);首先一次拿去6個資料，其中需要的是偏移3個單位的資料，再加上size等於3，所以可以確認所拿的資料是後3個，比如第一次拿6個單位資料:0.0,0.5,-0.4,0.19607843137254902,0.8431372549019608,0.8745098039215686這次正真拿到的則是0.19607843137254902,0.8431372549019608,0.8745098039215686 相關文章 WebGL沒有通道API 2022-02-28 WebGL WebGPU把WebGLProgram與WebGLShader的行為 2022-02-28 WebGLGPU 執行建構函式中指定的任務 2022-02-28 建構函式定義的隱式型別轉換 2022-03-01 matchTemplate函式各個方法的計算公式 2022-03-01 使用SQL以及函式等做資料分析 2022-03-01 SQL mysql函式全面總結KSVM 2022-03-01 MySQL MySQL資料庫基礎篇視窗函式示例解析教程RATZ 2022-03-01 資料庫MySQL MySQL視窗函式的具體使用TOCS 2022-03-01 MySQL MySQL之儲存函式詳細介紹艹籟 2022-03-01 MySQL XNMySQL實戰視窗函式SQL分析班級學生考試成績及生活消費rmq 2022-03-01 MySQL 2022年了你還不瞭解箭頭函式與普通函式的區別嗎？ 2022-03-01 C++派生類函式過載與虛擬函式繼承詳解 2022-03-03 C++ 封裝ReactHook函式useState實現更優雅的setValue 2022-03-03 React PyTorch中torch.matmul()函式的文件詳解 2022-03-04 PyTorch KTL一個支援C++14編輯公式的K線技術工具平臺-第四版，穩定支援Qt5程式設計，zqt5語法升級，MA函式提升效能1000%，更多公式演算法的內建優化實現。

2022-03-04 演算法C++QT 『無為則無心』Python日誌—69、補充：logging.basicConfig()函式說明 2022-03-06 Python 深入理解箭頭函式和傳統函式的區別 2022-03-07 Vue原始碼解讀（10）——編譯器之生成渲染函式 2022-03-07 Vue 最新文章 FlexJobs：遠端工作調查 聲網自研傳輸層協議AUT的落地實踐丨DevforDev專欄 Web應用實時版本檢測，這麼做最方便 基於信通院Serverless工具鏈模型的實踐：ServerlessDevs Tomcat深入淺出(一) 2022年Q1全球主要工業印表機銷售額同比增長率（附原資料表）​​​​ 2021年Q1-2022年Q1小米集團按業務劃分收入來源及規模（附原資料表）​​​​ 2021年Q1-2022年Q1小米集團按業務劃分收入來源及佔比（附原資料表）​​​​ 2021年Q1-2022年Q1全球移動裝置被網路攻擊次數及環比（附原資料表）​​​​ 2022年Q1全球主要工業印表機銷售額市場份額（附原資料表）​​​​ 艾瑞諮詢：2022年中國新式健身房行業研究報告（附下載） 中通服設計：2022年元宇宙技術全景白皮書（附下載）