webgl （原生）基礎入門指南【一】

JerryC 發布于2019-08-01 16:39 / 1258人閱讀

摘要：本系列將從最簡單最基礎的原生入手，手把手教你寫準備上下文同二維場景一樣，我們需要一個畫布來繪制，在中建立一個元素。前三個分量表示三原色的飽和度，最后一個表示不透明度。

來看這篇文章的同學一定是被近來的3D場景效果所震撼，抱著‘這TM怎么做的！’的來心態來學習webgl的吧。
也行你已經有threejs或其他3d場景開發框架的使用經驗，卻不知道webgl原生到底怎么寫。本系列將從最簡單最基礎的原生API入手，手把手教你寫webgl

準備webgl上下文

同二維場景一樣，我們需要一個畫布來繪制，在html中建立一個 canvas 元素。代碼如下：

// index.html



  
  
  Webgl  Hello world!

start() 函數將會在文檔加載完成之后被調用。它的任務是設置 WebGL 上下文并開始渲染內容。

// index.js
function start() {
  var canvas = document.getElementById("main");
  // 初始化 WebGL 上下文
  var gl = initWebGL(canvas);
  // 開始渲染
  ......
}

function initWebGL(canvas) {
  // 創建全局變量
  var gl = null;
  
  try {
    // 嘗試獲取標準上下文，如果失敗，回退到試驗性上下文
    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  }
  catch(e) {}
  
  // 如果沒有GL上下文，馬上放棄
  if (!gl) {
    alert("WebGL初始化失敗，可能是因為您的瀏覽器不支持。");
    gl = null;
  }
  return gl;
}

getContext("context 參數") 返回參數支持的上下文，如果參數無效，則返回 null 。我們在畫二維canvas的時候才用的是.getContext("2d")，返回 CanvasRenderingContext2D 對象 ;三維卻并不是想當然的"3d"而是canvas.getContext("webgl") 或者 canvas.getContext("experimental-webgl")，返回一個WebGLRenderingContext 對象。不同的瀏覽器內核支持的參數不同，具體如下：

清屏clearColor

畫過canvas的親應該都會使用一個顏色填充來清理幀畫面。webgl同意需要這樣一個清理函數在繪制下一畫面的時候。webgl才用rgba的四色系統來定義顏色。與我們平時所用的顏色系統不一樣的是，RGBA四個分量使用0.0~0.1之間的數值來表示。前三個分量表示三原色的飽和度，最后一個表示不透明度。

值得一提的是，webgl計算都是才用浮點計算，所以數值一般1寫為1.0,數值 0 寫為 0.0

這里我們需要進行四個初始化步驟

設置清除顏色(藍色，不透明)

gl.clearColor(0.0, 1.0, 1.0, 1.0);

深度清理

gl.clearDepth(1.0);

開啟“深度測試”, Z-緩存

gl.enable(gl.DEPTH_TEST);

設置深度測試，近的物體遮擋遠的物體

gl.depthFunc(gl.LEQUAL);

清理畫布的時候調用 gl.clear(gl.COLOR_BUFFER_BIT);來清理畫布。
這樣我們便準好了一個webgl的畫布可以開始繪圖了。
demo地址：http://codepen.io/leanneCC/pe...

GPU云服務器云服務器入門基礎基礎入門 python入門基礎 python基礎入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/50665.html

Threejs教程之著色器

摘要：學習基礎具備基本和著色器語言知識，不一定要深入學習。著色器所謂的材質對象本質上就是著色器代碼和需要傳遞的數據光源顏色矩陣。比更方便些，著色器中的很多變量不用聲明，系統會自動幫你設置，比如頂點坐標變量投影矩陣視圖矩陣 Three.js著色器很多時候如果想寫一些特效，往往需要編寫著色器代碼GLSL，如果你不熟悉著色器語言，自然需要學習著色器語言語法，如果你有著色器語言基礎，直接使用Thr...

darkbaby123 2019-08-23 12:08 評論0 收藏0
SegmentFault 技術周刊 Vol.35 - WebGL：打開網頁看大片

摘要：在文末，我會附上一個可加載的模型方便學習中文藝術字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術生態鏈中最為令人振奮的標準之一，它把 Web 帶入了 3D 的時代。初識 WebGL 先通過幾個使用 Web...

objc94 2019-08-21 17:08 評論0 收藏0
JavaScript矢量化地圖庫 – 快速入門

摘要：注意在代碼中將其替換為自己剛剛申請的運行，顯示地圖修改保存之后點擊運行就可以得到一幅矢量地圖了，此過程可能會稍微有點長，要耐心多等一會兒。 VectorMap.js是一個開源地圖渲染JavaScript庫，可以使用WebGL或者HTML5兩種方式進行交互式矢量地圖（包括矢量瓦片地圖，一般性矢量數據地圖）和柵格瓦片地圖的渲染。 WebGL渲染意味著高性能，大數據， HTML5渲染意...

MiracleWong 2019-08-23 17:19 評論0 收藏0
WebGL入門demo

摘要：而是一款框架，由于其易用性被廣泛應用。如果要學習，拋棄那些復雜的原生接口從這款框架入手是一個不錯的選擇。需要相機，演員這里是地球，場景，導演。最后拍好了戲交給渲染器來制片，發布。狀態也在不停的更新。 WebGL入門demo three.js入門開場白哇哦，繪制氣球耶，在網頁上？對啊！厲害了！3D效果圖也能在網頁上繪制出來啊，這么好玩的事情，趕緊來看看！這里是屬于WebGL的應用，...

lijinke666 2019-08-21 11:52 評論0 收藏0