WebGL 入門-WebGL簡介與3D圖形學

2020-11-26 CSDN技術社區

什麼是WebGL？

WebGL是一項使用JavaScript實現3D繪圖的技術，瀏覽器無需插件支持，Web開發者就能藉助系統顯卡（GPU）進行編寫代碼從而呈現3D場景和對象。

WebGL基於OpenGL ES 2.0，OpenGL ES 是 OpenGL 三維圖形 API 的子集，針對手機、平板電腦和遊戲主機等嵌入式設備而設計。瀏覽器內核通過對OpenGL API的封裝，實現了通過JavaScript調用3D的能力。WebGL 內容作為 HTML5 中的Canvas標籤的特殊上下文實現在瀏覽器中。

WebGL標準由科納斯組織（Khronos Group）開發和維護，Google、Mozilla、Opera和Apple 等瀏覽器廠商都是其中的成員，為這一標準做出了顯著貢獻。

WebGL支持現狀

目前所有的主流桌面瀏覽器都已經支持WebGL，但手機端的瀏覽器只有部分最新版支持。

桌面瀏覽器

  • Mozilla Firefox 4+
  • Google Chrome 8+
  • Internet Explorer 11+
  • Safari 5.1+
  • Opera 12+

移動瀏覽器

  • Firefox 25+
  • Google Chrome 31+
  • Opera Mobile 12+
  • Android Browser 暫不支持
  • iOS Safari暫不支持
  • IE Mobile 暫不支持

 

3D圖形學

在真正開始學習WlebGL之前，我們還要改了解下3D圖形學，有助於接下來的3D圖形編程。

3D坐標系

笛卡兒坐標系相比大家都很熟悉，即數學中常見的直角坐標系，由兩條互相垂直的坐標軸組成，通常標記為x軸和y軸。這種坐標系可以用於定義頁面中元素的坐標位置。

而在繪製3D圖形時，除了x軸和y軸，我們還需要一個z軸，用於表示深度，即3D物體距離屏幕的距離。

點、線、面和網格

3D空間內的所有物體都是由點、線及面組成。一個點由3個值組成 - x、y、z，表示3D空間內的唯一位置。2個點可以連成一條線，3個點我們就可以形成一個平面。多個面相互拼接就組成了網格。

我們常見的球體看起來很圓滑，其實是由很多個點、線、面組合而成的。

紋理貼圖及材質

網格本身是沒有紋理和材質的。

紋理可以定義一個網格表面的外觀，可以是純色或者是填充位圖，甚至更加複雜。

材質就是網格表面的特性，模型外表是否透明、是否會反射等都是通過網格的材質所定義的。

變換和矩陣

3D網格的形狀由頂點位置決定。模型變換就是利用矩陣對模型的大小、位移、旋轉等進行操作。如果你不了解矩陣也無須擔心，許多WebGL庫都能幫助我們完成相應的操作。

攝像機、視口和投影

我們在Canvas上看到的3D空間並非一個真實的3D空間，而是用數學算法將模擬的3D空間投射到2D視口的圖像而已。投影就是將模擬的三維空間內的物體映射到屏幕上生成一個二維圖像的過程。投影分為正交投影和透視投影，這也就是攝像機的實現原理。

攝像機是用戶觀察場景的眼睛，攝像機的視野決定了透視關係和我們在Canvas上看到的內容。

著色器

為了最終的渲染模型，開發者必須精確的定義定點、變換、材質和相機之間的關係。這就是由著色器來完成的。著色器包含了將模型投射到屏幕上的算法，通常是由類C語言編寫，編譯並運行在圖形處理單元(GPU)中。

相關焦點

  • webgl 迷宮項目開發總結
    項目簡介項目分為兩個部分：第一部分是一個迷宮Maze， 首先生成矩形cell數組，每個cell有4個side，然後一步一步地remove side（不包括迷宮邊緣的side），直到全部的cell 都連通（connected）。然後在迷宮的左邊緣創建一個入口，在右邊緣創建一個出口。
  • WebGL 入門-原生API介紹
    當前，大部分瀏覽器都使用語法 canvas.getContext("experimental-webgl") 來獲取 WebGLRenderingContext。//從Canvas中獲取上下文function initWebGL(canvas) {    var gl;    try {        gl = canvas.getContext("experimental-webgl") || canvas.getContext("webgl");    } catch (
  • WebGL 3D程序開發
    http://webglsamples.org/ 這個網址展示了Google發布的一些示例WebGL程序，在驚嘆美輪美奐的效果的同時，我們發現發布和運行也變得非常簡單。下方運營：weikashouji
  • 八大瘋狂的 HTML5 Canvas 及 WebGL 動畫效果
    原文地址：http://favbulous.com/post/895/8-crazy-animations-withwebgl-and-html5-canvas文/hiwebgl
  • 如何在Internet Explorer 11中開啟WebGL
    目前IE 11對WebGL的支持度仍然非常有限，你可以把一下代碼另存為HTML文件，然後在IE 11中打開，你會發現網頁中出現一片藍色的區域，而這正代表著網頁成功獲得了名為「experimental-webgl」的3D繪製上下文——Internet Explorer 11終於支持WebGL了！
  • WebGL 1.0標準規範正式公布 3D網際網路開啟
    WebGL 1.0正式版標準規範全文：http://www.khronos.org/registry/webgl/specs/latest/
  • 令人激動的新興 Web 技術:WebGL和SVG
    最近一位 HTML5 專家 Rich Clark(作者的好朋友)為大家做了一個 HTML5 APIs 的簡介，在文章中為大家指向了一個令人迷惑的網頁(web 平臺：瀏覽器技術 http://platform.html5.org/)，其中包含兩個很長的專欄和小正文並提及到一些讓人感到迷茫的技術，例如「window.crypto.getRandomValues」和「DOM Mutation
  • WebGL 入門 – WebGL框架
    x3dom X3DOM是一個實驗性的開源框架，它有一個原創的X3D元素，可以通過X3D插件、Flash或WebGL渲染。
  • Threejs開發3D地圖實踐總結
    也算是由傳統web轉型到webgl圖形學開發中，坑不少，做了一下總結分享。 1、法向量問題 法線是垂直於我們想要照亮的物體表面的向量。法線代表表面的方向因此他們為光源和物體的交互建模中具有決定性作用。每一個頂點都有一個關聯的法向量。
  • webgl、Javascript、HTML、ThingJS、cesium都是什麼鬼?
    webgl——是一種3D繪圖協議，這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定，WebGL可以為HTML5。Canvas提供硬體3D加速渲染，這樣Web開發人員就可以藉助系統顯卡來在瀏覽器裡更流暢地展示3D場景和模型了，還能創建複雜的導航和數據視覺化。
  • 基於HTML5 的 WebGL 3D 版俄羅斯方塊
    = new ht.graph3d.Graph3dView(dataModel);g3d.addToDOM();var node = new ht.Node();node.s({　　'shape3d': 'damBoard',　　'shape3d.reverse.flip': true,　　'3d.movable': false,　　'3d.editable': false,　　'3d.selectable
  • 基於WebGL的虛擬太陽系漫遊技術實現 ThingJS 科幻片
    比起Three.js的開源技術探索者風格，ThingJS是更為頂層的封裝庫，ThingJS繼承了webgl的技術優點，並且提供了較為全面的物聯網開發邏輯（如地球、城市、建築、設備等等）。ThingJS開發特點如下：掩蓋了渲染細節。將 webGL原生API的細節抽象化，3D場景拆解為網格、材質和光源。面向對象。
  • 基於HTML5的WebGL經典3D虛擬機房漫遊動畫
    數據模型中，詳情請參考HT for Web 序列化手冊：var g3d = window.g3d = new ht.graph3d.Graph3dView(), dataModel = g3d.dm(), view = g3d.getView(), path = null; g3d.setMovableFunc(function(data) { return false; }); g3d.setVisibleFunc
  • 基於webgl的三維室內空間邏輯建模 three.js ThingJS
    [ThingJS]是一款基於webgl的3D框架，比three.js更為頂層！能夠實現室內的交互、POI的顯示、樓層選擇及表達方式的切換，支持跨平臺多終端的應用，平臺自動設置場景光照效果，讓3D開發更加輕鬆，喜歡的點個讚再走哦~
  • 基於WebGL的3D可視化告警系統關鍵技術解析 ThingJS
    新一代3D框架如果直接使用 WebGL開發3D效率比較低，需要開發者對圖形學知識有很深入的了解，碎片化的概念並不易於開發。為了解決開發效率低的問題，出現了基於 JavaScript語言的第三方庫-three.js，這是開源的技術，受到了廣大前端轉3D開發師的追捧。
  • 藉助WebGL三維可視化技術檢索3D動態圖像
    可視化是採用計算機圖形學和圖形處理技術將數據轉換成圖形或者圖像顯示出來的技術。可視化數據信息的展示要通過客戶端和伺服器，客戶端發出請求時先通過模型框架，模型框架判斷用戶點擊事件，通過HTTP協議向伺服器發出請求。服務端接收到請求信息交由SSH框架進行處理，由框架向資料庫訪問數據，再把數據返回給客戶端，客戶端把數據填充到模型中，得到數據填充的模型要通過支持HTML5的瀏覽器渲染。
  • CMU出品,計算機圖形學秋季課程已上線,B站同步字幕視頻
    為期 3 個多月的 CMU《計算機圖形學》課程已經進入了最後的授課階段，授課者也放出了大多數課程主題的線上視頻。B 站也同步更新了這門課程的視頻。計算機圖形學（Computer Graphics）是研究計算機在硬體和軟體幫助下創建計算機圖形的學科，近年來受到了學界和業界的廣泛關注。