js如何操作WebGL渲染 WebGL入門必備的5個核心概念

掌握webgl渲染需理解五個核心概念：1.webgl上下文是JS與顯卡通信的橋梁，通過canvas元素獲取；2.著色器用glsl編寫，包括頂點著色器處理位置和片元著色器處理顏色；3.緩沖區存儲頂點、顏色等數據，需上傳至顯卡內存；4.頂點屬性是著色器輸入變量，需配置讀取方式；5.繪制調用指令啟動渲染過程，指定圖元類型及頂點數量。

掌握這五個核心概念，你就能用JS玩轉WebGL渲染啦！別怕，上手其實沒那么難。

渲染，本質上就是用JS告訴顯卡，你想畫什么，怎么畫。

解決方案

1. WebGL上下文 (WebGL Context):

   • 想象一下，WebGL上下文就像一個畫布，但這個畫布是顯卡上的。JS通過這個上下文，才能和顯卡“對話”。
   • 獲取WebGL上下文的代碼很簡單：

   const canvas = document.getElementById('myCanvas'); // 獲取canvas元素 const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); // 嘗試獲取WebGL上下文 if (!gl) {   alert('你的瀏覽器不支持WebGL！'); }
   • canvas.getContext(‘webgl’)是標準的獲取方式，canvas.getContext(‘experimental-webgl’)是為了兼容一些老舊瀏覽器。
   • 如果獲取失敗，說明瀏覽器不支持WebGL，那就沒法玩了。

2. 著色器 (Shaders):

   • 著色器是運行在顯卡上的小程序，用GLSL (OpenGL Shading Language) 編寫。它們負責處理頂點和像素，決定最終在屏幕上顯示什么顏色。
   • 有兩種主要類型的著色器：
     • 頂點著色器 (Vertex Shader): 負責處理頂點的位置，比如把3D坐標轉換成屏幕坐標。
     • 片元著色器 (Fragment Shader): 負責處理像素的顏色，比如根據光照計算像素的顏色。
   • 一個簡單的頂點著色器：

   attribute vec4 a_position; // 頂點位置 void main() {   gl_Position = a_position; // 將頂點位置賦值給gl_Position，這是WebGL的內置變量，表示頂點在屏幕上的位置 }
   • 一個簡單的片元著色器：

   void main() {   gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 將像素顏色設置為紅色 (RGBA: 1.0, 0.0, 0.0, 1.0) }
   • 你需要把這些著色器代碼編譯并鏈接成一個著色器程序 (Shader Program)，才能在WebGL中使用。

3. 緩沖區 (Buffers):

   • 緩沖區是顯卡上的內存區域，用于存儲頂點數據、顏色數據、紋理坐標等。
   • 你需要把數據上傳到緩沖區，然后告訴WebGL如何讀取這些數據。
   • 創建緩沖區的代碼：

   const positionBuffer = gl.createBuffer(); // 創建緩沖區 gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // 綁定緩沖區到gl.ARRAY_BUFFER，表示這是一個頂點緩沖區 const positions = [   0, 0,   0, 0.5,   0.7, 0, ]; // 頂點坐標 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); // 將頂點數據上傳到緩沖區
   • gl.STATIC_DRAW表示數據不會經常改變，WebGL會做一些優化。

4. 頂點屬性 (Vertex Attributes):

   • 頂點屬性是頂點著色器的輸入變量，比如頂點位置、顏色、法線等。
   • 你需要告訴WebGL如何從緩沖區中讀取頂點屬性的數據。
   • 設置頂點屬性的代碼：

   const positionAttributeLocation = gl.getAttribLocation(program, 'a_position'); // 獲取頂點著色器中a_position變量的位置 gl.enableVertexAttribArray(positionAttributeLocation); // 啟用頂點屬性 gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // 綁定緩沖區 gl.vertexAttribPointer(     positionAttributeLocation, // 屬性位置     2,             // 每次讀取2個值 (x, y)     gl.FLOAT,      // 數據類型是浮點數     false,         // 是否需要歸一化     0,             // 步長，0表示緊密排列     0              // 偏移量 );
   • gl.vertexAttribPointer告訴WebGL如何從緩沖區中讀取數據，包括每次讀取多少個值、數據類型、步長和偏移量。

5. 繪制調用 (Draw Call):

   • 繪制調用是告訴WebGL開始渲染的指令。
   • 你需要指定要繪制的圖元類型 (比如三角形、線段、點) 和頂點數量。
   • 繪制三角形的代碼：

   gl.drawArrays(gl.TRIANGLES, 0, 3); // 繪制三角形，從第0個頂點開始，繪制3個頂點
   • gl.TRIANGLES表示繪制三角形，gl.POINTS表示繪制點，gl.LINES表示繪制線段。

WebGL性能優化有哪些技巧？

• 減少Draw Call: 每次Draw Call都會有CPU和GPU之間的切換開銷，盡量把多個物體合并成一個Draw Call。可以使用Instancing技術，或者把多個物體的頂點數據合并到一個緩沖區中。
• 使用紋理圖集 (Texture Atlas): 把多個小紋理合并成一個大紋理，可以減少紋理切換的開銷。
• LOD (Level of Detail): 根據物體距離相機的遠近，使用不同精度的模型。距離遠的物體可以使用低精度的模型，減少頂點數量。
• 剔除 (Culling): 只渲染相機能看到的物體，把相機看不到的物體剔除掉?？梢允褂靡曞F剔除 (Frustum Culling) 和背面剔除 (Backface Culling)。
• 優化著色器代碼: 避免在著色器中使用復雜的計算，盡量把計算放到CPU上。可以使用低精度的浮點數 (mediump, lowp) 來提高性能。

如何調試WebGL程序？

• 使用WebGL Inspector: WebGL Inspector是一個瀏覽器插件，可以讓你查看WebGL的狀態，包括緩沖區、紋理、著色器等。你可以用它來調試渲染錯誤，比如頂點數據錯誤、紋理錯誤、著色器錯誤等。
• 使用console.log: 在著色器中使用console.log可以輸出變量的值，方便你調試著色器代碼。但是要注意，console.log會影響性能，所以只在調試的時候使用。
• 使用斷點調試: 可以在JS代碼中使用斷點調試，查看變量的值，跟蹤代碼的執行流程。
• 逐步渲染: 可以把渲染過程分解成多個步驟，逐步渲染，方便你找到錯誤所在。

WebGL和Three.js有什么區別？

• WebGL是一個底層的圖形API，你需要自己編寫著色器代碼，管理緩沖區，處理頂點屬性等。
• Three.js是一個基于WebGL的3D庫，它封裝了很多常用的3D功能，比如模型加載、材質、光照、陰影等。使用Three.js可以讓你更方便地創建3D場景，而不需要關心底層的WebGL細節。
• 如果你想深入了解3D圖形學，建議學習WebGL。如果你只是想快速創建3D場景，可以使用Three.js。