webgl 系列 —— 漸變三角形

来源:https://www.cnblogs.com/pengjiali/archive/2023/03/14/17216109.html
-Advertisement-
Play Games

其他章節請看： webgl 系列 漸變三角形 本文通過一個漸變三角形的示例逐步分析：varying變數、合併緩衝區、圖形裝配、光柵化、varying 內插 繪製三個點v1 需求：繪製三個相同顏色的點，效果如下： 通過三角形的學習，這個需求非常容易實現。代碼如下： const VSHADER_SOUR ...


其他章節請看：

webgl 系列

漸變三角形

本文通過一個漸變三角形的示例逐步分析：varying變數、合併緩衝區、圖形裝配、光柵化、varying 內插

繪製三個點v1

需求：繪製三個相同顏色的點，效果如下：

通過三角形的學習，這個需求非常容易實現。代碼如下：

const VSHADER_SOURCE = `
attribute vec4 a_Position;
void main() {
  gl_Position = a_Position;
  gl_PointSize = 10.0;               
}
`

const FSHADER_SOURCE = `
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`

function main() {
    const canvas = document.getElementById('webgl');
    const gl = canvas.getContext("webgl");
    if (!gl) {
        console.log('Failed to get the rendering context for WebGL');
        return;
    }

    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log('Failed to intialize shaders.');
        return;
    }

    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    const vertices = {
        data: new Float32Array([
            0.0, 0.5,
            -0.5, -0.5,
            0.5, -0.5
        ]),
        vertexNumber: 3,
        count: 2,
    }

    initVertexBuffers(gl, vertices)

    gl.drawArrays(gl.POINTS, 0, vertices.vertexNumber);
}

function initVertexBuffers(gl, {data, count}) {
    const vertexBuffer = gl.createBuffer();
    if (!vertexBuffer) {
        console.log('創建緩衝區對象失敗');
        return -1;
    }

    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

    const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    if (a_Position < 0) {
        console.log('Failed to get the storage location of a_Position');
        return -1;
    }

    gl.vertexAttribPointer(a_Position, count, gl.FLOAT, false, 0, 0);

    gl.enableVertexAttribArray(a_Position);
}

繪製三個點v2

需求

需求：繪製三個不同顏色的點（基於版本1），效果如下：

Tip: 繪製三個點不同顏色的點其實也就完成了漸變三角形的繪製。這裡調用了兩次 drawArrays()，也就是繪製了兩個圖元，一系列點、三角形。

核心代碼

相對版本1，變化的代碼如下：

 const VSHADER_SOURCE = `
 attribute vec4 a_Position;
+attribute vec4 a_Color;
+varying vec4 v_Color;
 void main() {
   gl_Position = a_Position;
-  gl_PointSize = 10.0;
+  gl_PointSize = 10.0;
+  v_Color = a_Color;
 }
 `

 const FSHADER_SOURCE = `
+precision mediump float;
+varying vec4 v_Color;
 void main() {
-  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
+  gl_FragColor = v_Color;
 }
 `

function main() {
     const vertices = {
         data: new Float32Array([
-            0.0, 0.5,
-            -0.5, -0.5,
-            0.5, -0.5
+            0.0,   0.5, 1.0, 0.0, 0.0,
+            -0.5, -0.5, 0.0, 1.0, 0.0,
+            0.5,  -0.5, 0.0, 0.0, 1.0,
         ]),
         vertexNumber: 3,
         count: 2,
     initVertexBuffers(gl, vertices)

     gl.drawArrays(gl.POINTS, 0, vertices.vertexNumber);
+    gl.drawArrays(gl.TRIANGLE_FAN, 0, vertices.vertexNumber);
 }

function initVertexBuffers(gl, {data, count}) {
     const vertexBuffer = gl.createBuffer();

-    gl.vertexAttribPointer(a_Position, count, gl.FLOAT, false, 0, 0);

+    const FSIZE = data.BYTES_PER_ELEMENT;
+    gl.vertexAttribPointer(a_Position, count, gl.FLOAT, false, FSIZE * 5, 0);
     gl.enableVertexAttribArray(a_Position);
+    const a_Color = gl.getAttribLocation(gl.program, 'a_Color');
+    if (a_Color < 0) {
+        console.log('Failed to get the storage location of a_Color');
+        return -1;
+    }
+    gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);
+    gl.enableVertexAttribArray(a_Color);
 }

完整代碼

const VSHADER_SOURCE = `
attribute vec4 a_Position;
attribute vec4 a_Color;
varying vec4 v_Color;
void main() {
  gl_Position = a_Position;
  gl_PointSize = 10.0;  
  v_Color = a_Color;             
}
`

const FSHADER_SOURCE = `
precision mediump float;
varying vec4 v_Color;
void main() {
  gl_FragColor = v_Color;
}
`

function main() {
    const canvas = document.getElementById('webgl');
    const gl = canvas.getContext("webgl");
    if (!gl) {
        console.log('Failed to get the rendering context for WebGL');
        return;
    }

    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log('Failed to intialize shaders.');
        return;
    }

    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    const vertices = {
        data: new Float32Array([
            0.0,   0.5, 1.0, 0.0, 0.0,
            -0.5, -0.5, 0.0, 1.0, 0.0,
            0.5,  -0.5, 0.0, 0.0, 1.0,
        ]),
        vertexNumber: 3,
        count: 2,
    }

    initVertexBuffers(gl, vertices)

    gl.drawArrays(gl.POINTS, 0, vertices.vertexNumber);
    gl.drawArrays(gl.TRIANGLE_FAN, 0, vertices.vertexNumber);
}

function initVertexBuffers(gl, { data, count }) {
    const vertexBuffer = gl.createBuffer();
    if (!vertexBuffer) {
        console.log('創建緩衝區對象失敗');
        return -1;
    }

    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

    const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    if (a_Position < 0) {
        console.log('Failed to get the storage location of a_Position');
        return -1;
    }

    const FSIZE = data.BYTES_PER_ELEMENT;
    gl.vertexAttribPointer(a_Position, count, gl.FLOAT, false, FSIZE * 5, 0);
    gl.enableVertexAttribArray(a_Position);
    const a_Color = gl.getAttribLocation(gl.program, 'a_Color');
    if (a_Color < 0) {
        console.log('Failed to get the storage location of a_Color');
        return -1;
    }
    gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);
    gl.enableVertexAttribArray(a_Color);
}

改變顏色(varying)

前面我們說過著色器語言（GLSL ES）有三種類型的“變數”，我們已經使用了兩種：

  • attribute - 傳輸的是那些與頂點相關的數據。只有頂點著色器才能使用。例如頂點的位置、大小、顏色
  • uniform - 傳輸的是那些對於所有頂點都相同的數據。例如變化矩陣

現在我們可以將顏色從 js 傳入 attribute。但真正影響顏色繪製的是片元著色器的 gl_FragColor，目前我們是靜態設置。就像這樣：

const FSHADER_SOURCE = `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); 
  }
`

如何將頂點著色器中的數據傳入片元著色器？

我們曾經通過 uniform 給片元著色器傳遞顏色。就像這樣：

const FSHADER_SOURCE = `
uniform vec4 u_FragColor;
void main() {
  gl_FragColor = u_FragColor;
}
`

但是 uniform 是相同的的變數，沒法為每個頂點準備一個值。為了讓每個點的顏色不同，需要使用varying（不同的）變數。

使用 varying 給片元著色器傳遞值（顏色）。就像這樣：

const VSHADER_SOURCE = `
// 定義一個 attribute 變數，用於接收 js 傳入的顏色
attribute vec4 a_Color;
// 定義 varying 變數。用於傳遞給片元著色器
varying vec4 v_Color;
void main() {
  gl_Position = a_Position;
  gl_PointSize = 10.0;  
  // 給 varying 變數賦值
  v_Color = a_Color;             
}
`

const FSHADER_SOURCE = `
precision mediump float;
// 聲明一個與頂點著色器中相同的 varying 變數名，用於接收顏色
varying vec4 v_Color;
void main() {
  gl_FragColor = v_Color;
}
`

代碼解析：

  • 通過在頂點著色器中聲明一個 attribute 變數用於接收 js 傳入的顏色
  • 在頂點著色器中聲明一個 varying 變數，用於接收 attribute 中的顏色，並將顏色傳給片元著色器
  • 片元著色器聲明一個與頂點著色器中相同的 varying 變數名，接收顏色

Tip：頂點著色器中的 varying 變數 v_Color 與 片元著色器中的 varying 變數 v_Color 不同。中間涉及 varying 內插，下文會介紹。

合併緩衝區

漸變三角形將頂點和每個頂點的顏色寫在一起，數據結構如下：

         data: new Float32Array([
-            0.0, 0.5,
-            -0.5, -0.5,
-            0.5, -0.5
+            0.0,   0.5, 1.0, 0.0, 0.0,
+            -0.5, -0.5, 0.0, 1.0, 0.0,
+            0.5,  -0.5, 0.0, 0.0, 1.0,
         ]),

在漸變三角形示例中我們只用了一個緩衝區對象（const vertexBuffer = gl.createBuffer();），當然也可以使用兩個緩衝區對象來實現相同的效果。核心代碼如下：

// 聲明第二個緩衝區對象：顏色緩衝區
const vertexColorBuffer = gl.createBuffer();
if (!vertexColorBuffer) {
    console.log('創建緩衝區對象失敗');
    return -1;
}

gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
// 顏色數據抽離出來
const colors = new Float32Array([
    1.0, 0.0, 0.0,
    0.0, 1.0, 0.0,
    0.0, 0.0, 1.0,
]);
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
const a_Color = gl.getAttribLocation(gl.program, 'a_Color');
if (a_Color < 0) {
    console.log('Failed to get the storage location of a_Color');
    return -1;
}
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Color);

將多個緩衝區合併，代碼更簡潔。思路：

  • 首先將頂點位置和顏色寫在一個數組中
  • 然後通過 vertexAttribPointer() 來讀取不同的信息（頂點位置、顏色）。

請看代碼：

const vertices = {
    // 頂點位置和顏色寫在一起
    data: new Float32Array([
        0.0,   0.5, 1.0, 0.0, 0.0,
        -0.5, -0.5, 0.0, 1.0, 0.0,
        0.5,  -0.5, 0.0, 0.0, 1.0,
    ]),
    vertexNumber: 3,
    count: 2,
}
// 每個元素所占用的位元組數
const FSIZE = data.BYTES_PER_ELEMENT;
// FSIZE * 5 - 指定每個點的位元組數
// 0 - 偏移量
gl.vertexAttribPointer(a_Position, count, gl.FLOAT, false, FSIZE * 5, 0);
/*
提取顏色：
3 - 分量數
FSIZE * 2 - 偏移量，從第三個開始
*/
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);

例如提取顏色：每個點總共位元組數是 FSIZE * 5，顏色占3個分量，從第三（FSIZE * 2）個數開始讀取 3 個分量。

為什麼是漸變

我們定義了三個不同顏色的點，繪製出來的三角形為什麼卻是漸變色彩？

要回答這個問題，需要說一下整個繪製過程。

請看下圖：

  • 首先確定頂點坐標，我們傳了三個頂點
  • 接著將孤立的頂點坐標裝配成幾何圖形。幾何圖形的類別由 drawArrays() 第一個參數決定
  • 將裝配好的幾何圖形轉為片元（簡單認為是像素，這裡為了示意，只顯示了10個片元），這個過程稱為光柵化。

圖形裝配和光柵化過程如下圖所示：

一旦光柵化結束，程式就開始逐片元調用片元著色器。這裡調用了10次，每調用一次就處理一個片元。對於每個片元，片元著色器計算出該片元的顏色，並寫入顏色緩衝區，當最後一個片元被處理完成，瀏覽器就會顯示最終結果。就像這樣：

漸變其實是由 varying 變數的內插導致的。比如繪製一條線，一端是紅色，一端是藍色，我們在頂點著色器向 varying 變數 v_Color 賦上兩個顏色，webgl 會計算出線段上所有點（片元）的顏色，並賦值給片元著色器中的 varying 變數 v_Color。就像這樣：

頂點著色器中的 v_Color 和片元著色器中的 v_Color 不是一回事。示意如下：

其他章節請看：

webgl 系列

作者：彭加李
出處：https://www.cnblogs.com/pengjiali/p/17216109.html
本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接。

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • DBA必備的Mysql知識點：數據類型和運算符
    摘要：本文主要為大家帶來Mysql中的3種數據類型和3種運算符。 本文分享自華為雲社區《Mysql中的數據類型和運算符》，作者： 1+1=王。 Mysql的數據類型 Mysql支持數值型、文本型和日期時間型三大數據類型。 數值型數據 數值型是描述定量數據的數據類型，包括整數型數據類型和浮點型數據類型 ...
  • DSC：數倉SQL腳本遷移的神奇工具
    摘要：本文介紹的DSC工具是針對資料庫切換時面臨的遷移任務而開發的免安裝命令行工具。目的是提供簡單、快速、可靠的SQL腳本遷移服務。 本文分享自華為雲社區《GaussDB(DWS)DSC工具系列：DSC工具初識【玩轉PB級數倉GaussDB(DWS)】》，作者：積少成多 。 DSC背景介紹與DSC介 ...
  • mysql鎖初識
    MySQL鎖的粒度分為：行級鎖、表級鎖、頁級鎖。 一、行級鎖(INNODB引擎) 行級鎖是Mysql中鎖定粒度最細的一種鎖，表示只針對當前操作的行進行加鎖。 行級鎖能大大減少資料庫操作的衝突。其加鎖粒度最小，但加鎖的開銷也最大。 行級鎖分為共用鎖 和 排他鎖。 特點：開銷大，加鎖慢；會出現死鎖；鎖定 ...
  • 巧妙使用SQL Server的計算列實現項目唯一規則快速定製
    轉載自作者zhang502219048的微信公眾號【SQL資料庫編程】：巧妙使用SQL Server的計算列實現項目唯一規則快速定製 軟體產品，相當於是一個通用模板。而軟體項目，則是基於軟體產品的項目個性化定製。不同軟體項目的定製多種多樣，如何能快速實現軟體項目的定製，則是軟體產品設計者所需要優先考 ...
  • Vue——initLifecycle【五】
    前言 前面我們簡單的瞭解了 vue 初始化時的一些大概的流程，這裡我們詳細的瞭解下具體的內容；這塊建議搭建可以根據 demo 進行 debugger 來觀察； 內容 這一塊主要圍繞init.ts中的initLifecycle進行剖析。 initLifecycle initLifecycle的方法位於 ...
  • 股票問題-求收益最大值
    分享一個面試題： 聲明一個數組，代表股票的各個期值，求在這個階段最大的收益值為多少？ 簡言之:其實就是求數組中兩個值的差值中，最大的值。 第一反應的思路就是，進行雙層迴圈進行差值計算，再從差值計算獲得的數組中選出最大的值。面試完想了這個方法一下有些麻煩，還不如直接就在迴圈中比較出來，選出最大值，直接 ...
  • Web前端雜亂知識複習
    OSI OSI是Open System Interconnect的縮寫，意為開放式系統互聯。其各個層次的劃分遵循下列原則： ​ （1）同一層中的各網路節點都有相同的層次結構，具有同樣的功能。 ​ （2）同一節點內相鄰層之間通過介面進行通信。 ​ （3）七層結構中的每一層使用下一層提供的服務，並且向其 ...
  • Vue——mergeOptions【四】
    前言 前面我們簡單的瞭解了 vue 初始化時的一些大概的流程，這裡我們詳細的瞭解下具體的內容; 這塊建議搭建可以根據 demo 進行 debugger 來觀察； 內容 這一塊主要圍繞init.ts中的mergeOptions進行剖析。 mergeOptions mergeOptions的方法位於sc ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類