[Day7] webGL修羅道（4） - 3D 與動畫 - iT 邦幫忙

[Day7] webGL修羅道- 3D 與動畫. 3D 圖形基礎. 在電腦上看到圖形的方式，通常是透過camera 的概念。

可以想像人的眼睛（或螢幕）就是一台相機的鏡頭，我們透過調整鏡頭 ... 2017iT邦幫忙鐵人賽 DAY 7 0 ModernWeb WebGL與Three.js初探系列第 7篇 [Day7]webGL修羅道（4）-3D與動畫 2017鐵人賽 threejs webgl shader gsgl 愷開 2016-12-2122:11:393966瀏覽 [Day7]webGL修羅道-3D與動畫 3D圖形基礎 在電腦上看到圖形的方式，通常是透過camera的概念。

可以想像人的眼睛（或螢幕）就是一台相機的鏡頭，我們透過調整鏡頭的遠近跟位置來成像。

而成像的方式通常會透過矩陣來轉換，為了方便說明，以下只列舉幾個實務上較常使用到的矩陣。

為了方便計算矩陣，我們使用到gl-matrix.js這個函式庫來簡化我們的矩陣計算。

一個正方體裡頭會有8個點。

所以我們修改createPoints這個函數為8個頂點， varvertices=[ -1,-1,-1,1,0,0,1,//0 1,-1,-1,1,1,0,1,//1 -1,1,-1,0,1,1,1,//2 1,1,-1,0,0,1,1,//3 -1,1,1,1,0.5,0,1,//4 1,1,1,0.5,1,1,1,//5 -1,-1,1,1,0,0.5,1,//6 1,-1,1,0.5,0,1,1,//7 ]; 前三個點代表座標，後面四個點則是代表顏色。

我們要做的事情是將這8個點送給GPU繪製，同時也將顏色的資訊傳給webGL。

用gl.drawElements取代gl.drawArrays畫出 如果只是單純修改頂點，你會發現畫出來的正方體只有三個邊。

因為gl.TRANGLE_STRIP的關係，所以我們每次的繪製，都會利用到前面兩個點，所以有兩個點沒有被繪製到。

如果想要達成正方體的效果，我們必須要再加入兩個重複的點座標。

這顯然有點不合理。

所以這邊我們使用gl.drawElements來取代gl.drawArrays。

drawElements的不同點在於，你可以自己選擇要繪製的頂點數量和開始位置（index）。

所以接下來要做的事情就是建立一個繪製頂點的indexarray，讓webGL如何重複使用這些頂點位置。

functioncreateIndices(){ //建立索引，讓webGL知道要取用哪些頂點 varindices=[ 0,1,2,1,2,3, 2,3,4,3,4,5, 4,5,6,5,6,7, 6,7,0,7,0,1, 0,2,6,2,6,4, 1,3,7,3,7,5 ]; indexCount=indices.length; varindexBuffer=gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,newUint8Array(indices),gl.STATIC_DRAW); } 同時，我們也修改了createVertices裡頭的傳值方式 //原本為gl.vertexAttribPointer(coord,3,gl.FLOAT,false,0,0); //第五個參數代表每次取用頂點後，下一次的頂點從哪裡開始Float32Array.BYTES_PER_ELEMENT*7 gl.vertexAttribPointer(coords,3,gl.FLOAT,false,Float32Array.BYTES_PER_ELEMENT*7,0); gl.enableVertexAttribArray(coords); 建立動畫 通常我們在使用3D動畫效果時，我們會採用矩陣轉換的方式。

我不想太深入數學理論，以下是動畫中常用的矩陣： 縮放：其中Sx,Sy,Sz代表縮放係數 旋轉：對x,y,z做cossin運算，舉例：（對x,y）坐旋轉。

以此類推 在javascript當中並沒有矩陣運算的功能，只能用陣列的方式來做到，所以這邊為了簡化大量的運算，我們引入了gl-matrix.js當作我們的範例，在html加入 以上是較粗淺的矩陣轉換介紹，之後的範例當中如果有機會再和各位詳細說明。

將perspectivematrix及transformmatrix加入shader uniformmat4u_transformMatrix; uniformmat4u_perspectiveMatrix; voidmain(void){ gl_Position=perspectiveMatrix*transformMatrix*coords; gl_PointSize=pointSize; varyingColors=colors; } 在vertexshader當中，我們加入兩個變數transformMatrix及perspectiveMatrix，讓javascript傳值進入。

一般矩陣的相乘在GSGL中直接用*表示即可。

在drawfunction中加入： mat4.rotateX(matrix,matrix,-0.043);//每次旋轉X-0.043 mat4.rotateY(matrix,matrix,0.01);//每次旋轉0.01 mat4.rotateZ(matrix,matrix,0.01);//每次旋轉0.01 vartransformMatrix=gl.getUniformLocation(shaderProgram,"transformMatrix"); gl.uniformMatrix4fv(transformMatrix,false,matrix); 還是要提醒一下，在webGL的座標系統當中，只有-1~1 最後，就可以看到成果啦！ webGLcubeanimation 結論 到目前為止，我們已經學習了不少webGL的API跟運作方式，明天會介紹webGL中蠻重要的功能-sampler（採樣器），並且將我們目前所學的知識做一些應用來當作webGL的結尾。

之後就可以進入高階一點的世界-Three.js了。

留言 追蹤 檢舉 上一篇 [Day6]three.js前置webGL修羅道（3)-動畫與varying 下一篇 [Day8]webGL修羅道-3D紋理貼圖 系列文 WebGL與Three.js初探 共30篇 目錄 RSS系列文 訂閱系列文 95人訂閱 26 [Day26]aframeECS概覽 27 [Day27]aframe範例實作 28 [Day28]webGL番外篇-為什麼你該關注VR 29 [Day29]Aframe範例-3D與d3.js 30 [Day30]aframe常見API&完賽心得 完整目錄 尚未有邦友留言 立即登入留言 iT邦幫忙鐵人賽 參賽組數 1087組 團體組數 52組 累計文章數 20447篇 完賽人數 572人 鐵人賽最新文章 淺談DevOps&Observability 以Ardiuno控制CPU散熱器呼吸燈 超深度鐵人賽後自我審視 建立表與表之間的關聯(Day28) 【Day?(31)】測試環境無法登入 使用程式來管理資料庫(DBMigrate)(Day27) Day31-遲來的鐵人賽心得 STM32CubeMX專案配置詳細教學，點亮LED 撰寫httprequest的複雜一點的測試(Day26) 2022/02/12更新 前往鐵人賽 技術推廣專區 [Day2]抓取每日收盤價 [Day1]基本工具安裝 利用python取得永豐銀行API的Nonce [Day03]tinyML開發板介紹 [Day01]在享受tinyML這道美食之前 永豐金融API測試員 [Day3]使用ta-lib製作指標 [Day4]函數打包與買進持有報酬率試算 計算API所需要的參數:HashID 計算API所需要的參數:IV 前往鐵人賽 熱門問題 將現有系統中心化架構改為去中心化 Windows10設定遠端多人多工要怎麼弄壓 請問怎麼把C:\Users\XXXXX使用者目錄移到D槽捏 手提電腦加入DOMAIN後,回家幾日後就不能LOGIN 加入網域後的筆電，登入問題。

關於UPS及停電大樓柴油緊急發電接法的問題 關於Python與Excel Vmware4.0上的VM要轉移至Vmware7.0無法轉移 Fortigate做WAKEONLAN Reactvite部屬到gh-pagestatusof404()main.jsx IT邦幫忙 熱門tag 看更多 13th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 windows python php windowsserver linux c# 資訊安全 程式設計 css vue.js sql mysql 熱門回答 請問怎麼把C:\Users\XXXXX使用者目錄移到D槽捏 將現有系統中心化架構改為去中心化 VBA只複製數字 Vue3+VueRouter如何在Composables中互相傳值? SQL2000升級SQL2008R2資料庫發生錯誤? 3combaseline2250plus交換器預設IP和初始連接 HPP4300G2系統重灌 O365SMTP寄發系統信件 工作管理員記錄程序cpu問題 Win10滑鼠沒反應 熱門文章 計算機概論-網路通訊與網際網路Networkingandtheinternet(上) 【HTML】【CSS】如何處理inline-block元素之間的空白 DeepLink/DeferredDeepLink深度連結 ISO27001資訊安全管理系統【解析】(十二) Python入門Day6:#WhileTrue的用法 YouTube轉換為MP3 桌面端YouTube影片下載器-10款最佳 OpenProject安裝在ubuntu20.04LTS Apple音樂下載到電腦5個方法輕鬆做到【必學】 【學習筆記】Gitbranch 一週點數排行 更多點數排行 ㊣浩瀚星空㊣(yoching) 居然解出來了(partyyaya) raytracy(raytracy) 天黑(horace_work) 尼克(nickliao1) 海綿寶寶(antijava) Han(c0952199517) juck30808(juck30808) cloudeasy(cloudeasy) haward79(haward79) × At 輸入對方的帳號或暱稱 Loading 找不到結果。

標記 {{result.label}} {{result.account}} 關閉