WebGL顏色與紋理怎么使用

這篇“WebGL顏色與紋理怎么使用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“WebGL顏色與紋理怎么使用”文章吧。

顏色

三角形顏色

在之前的例子中，我們繪制了三角形的圖形，并給它填充了顏色，如果想要顏色是漸變的，則可以把顏色和頂點類似在不同的頂點上設置不同的顏色向量值。

著色器中

const VSHADER_SOURCE = `
  attribute vec4 a_position;
  attribute vec4 aColor;
  varying vec4 vColor;
  void main(void){
    gl_Position=a_position;
    vColor = aColor;
  }
`
const FSHADER_SOURCE = `
  precision mediump float;
  varying vec4 vColor;
  void main() {
    gl_FragColor = vColor;
  }
`

定義了aColor屬性，這樣可以再去設置不同頂點上對應的顏色值

let aPsotion = webgl.getAttribLocation(webgl.program, "a_position")
let arr = [
  -0.5, 0.5, 0.0,   1.0, 0.0, 0.0, 1.0, // 左上角，紅色
  -0.5, -0.5, 0.0,  0.0, 1.0, 0.0, 1.0, // 左下角，綠色
  0.5, -0.5, 0.0,   0.0, 0.0, 1.0, 1.0, // 右下角，藍色
]
let vertexArr = new Float32Array(arr)
let trangleBuffer = webgl.createBuffer()
webgl.bindBuffer(webgl.ARRAY_BUFFER, trangleBuffer)
webgl.bufferData(webgl.ARRAY_BUFFER, vertexArr, webgl.STATIC_DRAW)
webgl.enableVertexAttribArray(aPsotion)
webgl.vertexAttribPointer(aPsotion, 3, webgl.FLOAT, false, 7 * Float32Array.BYTES_PER_ELEMENT, 0)
const colorAttributeLocation = webgl.getAttribLocation(webgl.program, "aColor");
webgl.vertexAttribPointer(colorAttributeLocation, 4, webgl.FLOAT, false, 7 * Float32Array.BYTES_PER_ELEMENT, 3 * Float32Array.BYTES_PER_ELEMENT);
webgl.enableVertexAttribArray(colorAttributeLocation);

在這里有兩個大的步驟

• 圖形裝配過程：將頂點坐標構成幾何圖形

• 光柵化過程：將圖形轉化成片元

在光柵化結束后，程序開始逐個的片元調用片元著色器， 那么在這三個點之間的顏色，WebGL系統用這3個頂點的顏色內插出來的，這個過程被稱為內插過程

具體解析: 在頂點著色器中，三角形的3個頂點的顏色賦給varying變量v_Color,然后片元著色器中的varying變量v_Color就接收到了內插之后的片元顏色，在片元著色器中，我們把片元的顏色賦值給gl_FragColor變量，這樣就繪制出了一個彩色的三角形。

紋理

什么是紋理？

可以形象的理解成某個物體的“皮膚”,而這個“皮膚”可以看成是一張圖片，而這張圖片中每一個點是一個片元（紋素），每個片元上涂上合適的顏色。

術語：貼圖或是紋理映射

• 準備好需要映射到物體上的紋理圖像，例如PNG、BMP、DDS、HDR等

• 給幾何圖形配置的紋理映射方式

• 加載紋理圖像，并進行配置，以在WebGL中使用

• 在片元著色器中將相應的紋素從紋理中抽取出來，并將紋素中的顏色通過片元進行繪制

紋理坐標

紋理坐標是紋理圖像上的坐標，通過紋理坐標可以在紋理圖像上獲取紋素顏色，WebGL系統中紋理坐標是二維的，簡稱st坐標系統

注意：紋理坐標和區域坐標的關系

const vertices = [
  // 頂點坐標           // 紋理坐標
  -0.5,  0.5, 0.0,     0.0, 1.0, // 左上角
   0.5,  0.5, 0.0,     1.0, 1.0, // 右上角
   0.5, -0.5, 0.0,     1.0, 0.0, // 右下角
  -0.5, -0.5, 0.0,     0.0, 0.0  // 左下角
];

這樣你在腦海中就有一個概念了，頂點坐標和紋理坐標的關系映射。 當我們在區域內繪制了紋理圖像，你會發現，這個圖片和原來的圖片是旋轉了90°，這個又涉及到了一個概念：圖片坐標

特別說明： 圖片坐標

以左上角為原點，向右為x軸正方向，向下為y軸正方向。也就是說，對于一個像素點(x,y)，x表示橫坐標，y表示縱坐標，坐標軸的方向如下圖所示：

(0,0)----------------> x
  |
  |
  |
  |
  v
  y

但WebGL中的坐標向上為y軸正方向，所以導致圖片是倒立的。

解決方案

先把解決辦法給出來吧，兩張方式，選取一種即可

• 在圖片的onload方法中：webgl.pixelStorei(webgl.UNPACK_FLIP_Y_WEBGL, 1)

• 在片元著色器中gl_FragColor = texture2D(u_texture, vec2(v_texcoord.x, 1.0 - v_texcoord.y));

其目的都是對紋理圖像進行Y軸(T軸)的反轉

紋理圖像

實現過程

• 頂點著色器中點的坐標繪制區域

• 紋理坐標用來裝圖片

• 通過紋理映射texture2D將區域換上“皮膚”

著色器設置

const VSHADER_SOURCE = `
  attribute vec2 a_position;
  varying vec2 v_texcoord;
  void main() {
    gl_Position = vec4(a_position, 0.0, 1.0);
    v_texcoord = a_position * 0.5 + 0.5;
  }
`
const FSHADER_SOURCE = `
  precision mediump float;
  uniform sampler2D u_texture;
  varying vec2 v_texcoord;
  void main() {
    gl_FragColor = texture2D(u_texture, vec2(v_texcoord.x, 1.0 - v_texcoord.y));
  }
`

著色器中使用sampler2D類型的變量來訪問紋理數據

看看核心的方法

const texture = webgl.createTexture()
const image = new Image()
image.src = ''
texture.image = image
image.onload = function () {
  webgl.bindTexture(webgl.TEXTURE_2D, texture)
  webgl.texParameteri(
    webgl.TEXTURE_2D,
    webgl.TEXTURE_WRAP_S,
    webgl.CLAMP_TO_EDGE
  )
  webgl.texParameteri(
    webgl.TEXTURE_2D,
    webgl.TEXTURE_WRAP_T,
    webgl.CLAMP_TO_EDGE
  )
  webgl.texParameteri(
    webgl.TEXTURE_2D,
    webgl.TEXTURE_MIN_FILTER,
    webgl.LINEAR
  )
  webgl.texImage2D(
    webgl.TEXTURE_2D,
    0,
    webgl.RGBA,
    webgl.RGBA,
    webgl.UNSIGNED_BYTE,
    texture.image
  )
  const textureLoc = webgl.getUniformLocation(webgl.program, 'u_texture');
  webgl.uniform1i(textureLoc, 0);
  draw()
  webgl.drawArrays(webgl.TRIANGLE_STRIP, 0, 4);
}

texParameteri() 設置紋理圖片的參數

參數：

• TEXTURE_WRAP_T、CLAMP_TO_EDGE: 設置紋理 S/T 軸方向上的邊緣環繞方式為 CLAMP_TO_EDGE，即在超出邊緣的部分使用紋理邊緣的像素顏色填充.

• TEXTURE_MIN_FILTER、LINEAR: 設置紋理的縮小過濾方式為 LINEAR，即當紋理需要被縮小時，使用線性過濾的方式得到縮小后的像素顏色值.

texImage2D 加載紋理圖片

• 第一個參數是紋理類型

• 第二個參數是細節級別

• 第三個參數是紋理格式

• 第四個參數也是紋理格式

• 第五個參數是紋理數據的類型

• 最后一個參數是要加載的紋理圖片

這里使用了 RGBA 格式，表示紅、綠、藍和透明度，使用 UNSIGNED_BYTE 數據類型，表示每個顏色分量使用一個字節存儲

uniform1i()

• location：表示要傳遞給哪個 uniform 變量的位置

• value：表示要傳遞的整數值

注意哦！ 這里的value可不能隨便個整數

在WebGL中，紋理單元編號從0開始，最多可以使用16個紋理單元。因此，如果你想使用第一個紋理單元，就需要將value設置為0；如果你想使用第二個紋理單元，就需要將value設置為1

以上就是關于“WebGL顏色與紋理怎么使用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。