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

時間 2019-11-11

標籤 webgl 原生基礎入門指南简体版

原文原文鏈接

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

準備webgl上下文

同二維場景同樣，咱們須要一個畫布來繪製，在html中創建一個 canvas 元素。代碼以下：web

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>Webgl  Hello world!</title>
</head>
<body onload="start()">
  <canvas id='main' width=500 height=400></canvas>
  <script src="./index.js"></script>
</body>
</html>

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

// 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框架

這裏咱們須要進行四個初始化步驟函數