webgl | Notion

[Day4] WebGL 修羅道(1) - 用 100行程式碼畫...一個點 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

不須使用外掛程式/

在HTML的 [canvas](<https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API>)元素中實現二維及三維渲染/

WebGL 程式包含了由 JavaSrcipt 及著色器(GLSL)撰寫的控制碼以及在電腦的圖形處理器( GPU )上執行的特效程式碼(著色器程式碼)

WebGL 元素可以加入其他 HTML 元素之中並與網頁或網頁背景的其他部分混合

<body>
  <canvas id="glCanvas" width="640" height="480"></canvas>
</body>

準備 WebGL背景資料

在下面的JavaScript 程式碼，當指令完成讀取後會執行 main() 函式。目的是為了設定 WebGL 背景資料並且開始渲染內容。

main();

// 從這開始
function main() {
  const canvas = document.querySelector("#glCanvas");
  // 初始化 GL context
  const gl = canvas.getContext("webgl");

  // 當 WebGL 有效才繼續執行
  if (gl === null) {
    alert("無法初始化 WebGL，您的瀏覽器不支援。");
    return;
  }

  // 設定清除色彩為黑色，完全不透明
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  // 透過清除色來清除色彩緩衝區
  gl.clear(gl.COLOR_BUFFER_BIT);
}

我們所要做的第一件事就是

-獲取canvas 的引用，把它保存在'canvas' 變量裡。

當我們獲取到canvas之後，

-我們會調用getContext函數並向它傳遞"webgl"參數，來嘗試獲取WebGLRenderingContext。

-變量'gl' 會用來引用該上下文。在這個例子裡，我們用黑色清除上下文內已有的元素。（用背景顏色重繪canvas）。

渲染環境(rendering context)

[<canvas>](<https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/canvas>)產生一個固定大小的繪圖畫布，這個畫布上有一或多個渲染環境(rendering context)，我們可以用渲染環境來產生或操作顯示內容的渲染環境(rendering context)。不同環境(context)可能會提供不同型態的渲染方式，好比說WebGL使用OpenGL ES的3D環境(context)，而這裡我們主要將討論2D渲染環境(rendering context)。