Day 9 : WebGL初探 - iT 邦幫忙

WebGL又是基於OpenGL ES而發展的函式庫，所以可以說只要是OpenGL 2.0版本運行ok的程式碼，應該就 ... WebGL 是JavaScript API， 內容都寫在HTML5 的 標籤底下 ... DAY 9 1 30天實戰跨平台行動APP系列第 9篇 Day9:WebGL初探 鐵人賽 opengl webgl cwchang886 2014-10-0823:58:147714瀏覽 截至目前為止，我們已經完成了 用FB登入機制達成的使用者系統 了解了怎麼使用GraphAPI取得FB資料 現在就是要把這些資料呈現在3D的地球上了！我們要使用的是OpenGL這套API， OpenGL是一套c語言的跨平台繪製2D和3D圖形的函式庫，想學習的推薦鼎鼎有名的nehe教學網站 http://nehe.gamedev.net/ 或是可以購買OpenGLSuperBible這本書來看！除了OpenGL本身之外還有OpenGLES與WebGL OpenGLES(embeddedsystem)就是嵌入式系統用的函式庫，是根據OpenGL2.0發展而來， WebGL又是基於OpenGLES而發展的函式庫，所以可以說只要是OpenGL2.0版本運行ok的程式碼，應該就可以在 OpenGLES跟WebGL運行無誤！實際上到底可不可以只寫一次就好呢，還是要debugeverywhere，可以來試試看。

準備開發環境：支援webGL的瀏覽器 因為今年已經2014了，我想這應該是沒什麼問題，我使用的作業系統是OSX10.9.5，Safari，Chrome，Firefox都有支援 HelloWorld 那我們第一步當然是來做個WebGL的HelloWorld囉，OpenGL的HelloWorld通常都不是輸出文字，都只是簡單的圖形， 因為其實OpenGL要輸出文字頗麻煩的。

WebGL是JavaScriptAPI，內容都寫在HTML5的標籤底下 所以第一步就是做一個canvas區域 YourbrowserdoesnotsupporttheHTML5canvaselement. 為了方便辨識，我們將網頁頁面背景設成黑色，而canvas背景顏色設為白色。

getContext 當我們要在canvas標簽底下繪圖，就要先取得context，canvascontext有兩種， 第一是2d，第二就是webgl或experimental-webgl，我有用過2d的context來做我們公司系統的文件流程圖也還算熟悉， functioninitWebGL(canvas){ gl=null; try{ //Trytograbthestandardcontext.Ifitfails,fallbacktoexperimental. gl=canvas.getContext("webgl")||canvas.getContext("experimental-webgl"); } catch(e){} //Ifwedon'thaveaGLcontext,giveupnow if(!gl){ alert("UnabletoinitializeWebGL.Yourbrowsermaynotsupportit."); gl=null; } returngl; } 初始化 得到context後，就可以來進行OpenGL的一些初始設定 functioninit(){ varcanvas=document.getElementById("main_canvas"); gl=initWebGL(canvas); if(gl){ gl.clearColor(1.0,0.0,0.0,1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); } } window.onload=init; 我們將環境初始化為背景紅色，然後讓頁面一讀取就呼叫初始化函式，結果就是 這個樣子！代表我們初始化成功了 shader程式碼 我們必需要寫shader程式，shader有分成兩種，vertexshader跟fragmentshader， vertexshader是控制vertex的資料，fragmentshader是控制最後pixel的顏色值，先這樣理解就好 attributevec3aVertexPosition; voidmain(void){ gl_Position=vec4(aVertexPosition,1.0); } voidmain(void){ gl_FragColor=vec4(1.0,1.0,1.0,1.0); } 稍微解釋一下上面兩段程式，gl_Position跟gl_FragColor是系統變數，就是最後的輸出， 而vec3與vec4是GLSL的變數，attribute就是我們可以從gl主程式傳送至shader程式的連結變數， 這邊的vertexshader就是接受我們船進去的vertex值，沒有做什麼變動，fragmentshader就是將最後輸出的顏色都指定為白色 初始化shader 完成了程式碼後就可以初始化shader，初始化的步驟是 創建shader->連結程式碼->編譯->與gl程式聯結 functioninitShaders(){ vertexShader=gl.createShader(gl.VERTEX_SHADER); fragmentShader=gl.createShader(gl.FRAGMENT_SHADER); varvs_source=document.getElementById('vertex-shader').html(), fs_source=document.getElementById('fragment-shader').html(); gl.shaderSource(vertexShader,vs_source); gl.shaderSource(fragmentShader,fs_source); gl.compileShader(vertexShader); gl.compileShader(fragmentShader); glProgram=gl.createProgram(); gl.attachShader(glProgram,vertexShader); gl.attachShader(glProgram,fragmentShader); gl.linkProgram(glProgram); gl.useProgram(glProgram); } 繪圖 functiondrawScene(){ vertexPositionAttribute=gl.getAttribLocation(glProgram,"aVertexPosition"); gl.enableVertexAttribArray(vertexPositionAttribute); gl.bindBuffer(gl.ARRAY_BUFFER,trianglesVerticeBuffer); gl.vertexAttribPointer(vertexPositionAttribute,3,gl.FLOAT,false,0,0); gl.drawArrays(gl.TRIANGLES,0,6); } 首先我們先呼叫vertex的aVertexPositionattribute，再將VBO傳送給他， 就可以繪圖了！ 留言 追蹤 檢舉 上一篇 Day8：FacebookGraphAPI實作 下一篇 Day10WebGLShader介紹 系列文 30天實戰跨平台行動APP 共26篇 目錄 RSS系列文 訂閱系列文 15人訂閱 22 Day22檢視目標 23 Day23滑鼠輸入 24 Day24Demo 25 Day25整合FB登入 26 鐵人賽25~30 完整目錄 尚未有邦友留言 立即登入留言 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}} 關閉