下面是本文例子的運(yùn)行截圖，可以前往我的博客查看代碼演示。
紋理通常來說就是一張圖片，我們?yōu)槊恳粋€(gè)頂點(diǎn)指定紋理坐標(biāo)，然后就可以在Shader中獲取相應(yīng)的紋理像素點(diǎn)顏色了。
紋理坐標(biāo)
首先解釋一下什么是紋理坐標(biāo)。WebGL中把一張圖的左上角定為0，0點(diǎn)，長寬都定義為1，剩余四個(gè)點(diǎn)的坐標(biāo)就會(huì)如下圖所示。這樣就構(gòu)成了紋理坐標(biāo)系統(tǒng)。
一般使用uv來表示紋理坐標(biāo)，uv是一個(gè)二維向量(u,v)，u和v的取值從0到1。我在代碼中為每個(gè)頂點(diǎn)數(shù)據(jù)增加了2個(gè)float來表示uv的值。下面是新的頂點(diǎn)數(shù)據(jù)代碼。
function makeBuffer() {
var triangle = [
// Z軸上的平面
-0.5, 0.5, 0.5, 0, 0, 1, 0, 0,
-0.5, -0.5, 0.5, 0, 0, 1, 0, 1,
0.5, -0.5, 0.5, 0, 0, 1, 1, 1,
0.5, -0.5, 0.5, 0, 0, 1, 1, 1,
0.5, 0.5, 0.5, 0, 0, 1, 1, 0,
-0.5, 0.5, 0.5, 0, 0, 1, 0, 0,
-0.5, 0.5, -0.5, 0, 0, -1, 0, 0,
-0.5, -0.5, -0.5, 0, 0, -1, 0, 1,
0.5, -0.5, -0.5, 0, 0, -1, 1, 1,
0.5, -0.5, -0.5, 0, 0, -1, 1, 1,
0.5, 0.5, -0.5, 0, 0, -1, 1, 0,
-0.5, 0.5, -0.5, 0, 0, -1, 0, 0,
// X軸上的平面
0.5, -0.5, 0.5, 1, 0, 0, 0, 0,
0.5, -0.5, -0.5, 1, 0, 0, 0, 1,
0.5, 0.5, -0.5, 1, 0, 0, 1, 1,
0.5, 0.5, -0.5, 1, 0, 0, 1, 1,
0.5, 0.5, 0.5, 1, 0, 0, 1, 0,
0.5, -0.5, 0.5, 1, 0, 0, 0, 0,
-0.5, -0.5, 0.5, -1, 0, 0, 0, 0,
-0.5, -0.5, -0.5, -1, 0, 0, 0, 1,
-0.5, 0.5, -0.5, -1, 0, 0, 1, 1,
-0.5, 0.5, -0.5, -1, 0, 0, 1, 1,
-0.5, 0.5, 0.5, -1, 0, 0, 1, 0,
-0.5, -0.5, 0.5, -1, 0, 0, 0, 0,
// Y軸上的平面
-0.5, 0.5, 0.5, 0, 1, 0, 0, 0,
-0.5, 0.5, -0.5, 0, 1, 0, 0, 1,
0.5, 0.5, -0.5, 0, 1, 0, 1, 1,
0.5, 0.5, -0.5, 0, 1, 0, 1, 1,
0.5, 0.5, 0.5, 0, 1, 0, 1, 0,
-0.5, 0.5, 0.5, 0, 1, 0, 0, 0,
-0.5, -0.5, 0.5, 0, -1, 0, 0, 0,
-0.5, -0.5, -0.5, 0, -1, 0, 0, 1,
0.5, -0.5, -0.5, 0, -1, 0, 1, 1,
0.5, -0.5, -0.5, 0, -1, 0, 1, 1,
0.5, -0.5, 0.5, 0, -1, 0, 1, 0,
-0.5, -0.5, 0.5, 0, -1, 0, 0, 0,
];
buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangle), gl.STATIC_DRAW);
return buffer;
}
我們分析一下X軸0.5處的平面的頂點(diǎn)數(shù)據(jù)。
0.5, -0.5, 0.5, 1, 0, 0, 0, 0,
0.5, -0.5, -0.5, 1, 0, 0, 0, 1,
0.5, 0.5, -0.5, 1, 0, 0, 1, 1,
0.5, 0.5, -0.5, 1, 0, 0, 1, 1,
0.5, 0.5, 0.5, 1, 0, 0, 1, 0,
0.5, -0.5, 0.5, 1, 0, 0, 0, 0,
第一個(gè)三角形uv和頂點(diǎn)對(duì)應(yīng)關(guān)系如下。
0.5, -0.5, 0.5點(diǎn)對(duì)應(yīng)的uv是0, 0，
0.5, -0.5, -0.5點(diǎn)對(duì)應(yīng)的uv是0, 1，
0.5, 0.5, -0.5點(diǎn)對(duì)應(yīng)的uv是1, 1。
第二個(gè)三角形uv和頂點(diǎn)對(duì)應(yīng)關(guān)系如下。
0.5, 0.5, -0.5點(diǎn)對(duì)應(yīng)的uv是1, 1，
0.5, 0.5, 0.5點(diǎn)對(duì)應(yīng)的uv是1, 0，
0.5, -0.5, 0.5點(diǎn)對(duì)應(yīng)的uv是0, 0。
這兩個(gè)三角形的uv分別對(duì)應(yīng)紋理的兩個(gè)三角部分，合在一起剛好是完整的紋理。
在3D建模中，這種頂點(diǎn)和
uv的映射關(guān)系是要通過建模工具去完成的，只有為每個(gè)頂點(diǎn)配置了合適的uv，才能讓貼圖按照你想要的方式顯示出來。
然后增加綁定uv屬性的代碼。
uvLoc = gl.getAttribLocation(program, 'uv');
gl.enableVertexAttribArray(uvLoc);
gl.vertexAttribPointer(uvLoc, 2, gl.FLOAT, false, 4 * 8, 4 * 6);
將頂點(diǎn)數(shù)據(jù)最后兩個(gè)float綁定到Shader的uv屬性上。
生成紋理
我們有了坐標(biāo)，那么紋理數(shù)據(jù)怎么獲取呢？下面是獲取代碼。
function makeTexture() {
woodTexture = gl.createTexture();
woodTexture.isReady = false;
woodImage = new Image();
woodImage.crossOrigin = "";
woodImage.onload = function () {
gl.bindTexture(gl.TEXTURE_2D, woodTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,gl.UNSIGNED_BYTE, woodImage);
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.bindTexture(gl.TEXTURE_2D, null);
woodTexture.isReady = true;
}
woodImage.src = "http://www.gltech.win/public/webgl-experiment/wood.png";
}
gl.texImage2D用來把圖片數(shù)據(jù)傳遞為WebGL系統(tǒng)。gl.texParameterf用來設(shè)置圖片的相關(guān)參數(shù)。gl.TEXTURE_MAG_FILTER和gl.TEXTURE_MIN_FILTER分別代表圖片放大或者縮小時(shí)的采樣。gl.LINEAR代表采樣的方式，還可以使用gl.NEAREST進(jìn)行采樣，gl.NEAREST方式直接采樣坐標(biāo)點(diǎn)最近的像素，速度比較快，gl.LINEAR會(huì)采樣多個(gè)顏色算加權(quán)平均，效果會(huì)更好。可以根據(jù)實(shí)際情況選擇。
如果圖片和你的網(wǎng)頁不在一個(gè)域下，需要設(shè)置跨域
woodImage.crossOrigin = "";。
綁定和使用紋理
有了紋理，接下來就要把它傳遞給Shader，前面我們已經(jīng)把每個(gè)頂點(diǎn)的紋理坐標(biāo)傳遞給了Vertex Shader。在Vertex Shader中新增了屬性attribute vec2 uv;，以及varying vec2 fragUV;。Vertex Shader做的事情就是把uv直接傳遞給Fragment Shader，讓它去處理。
attribute vec4 position;
attribute vec3 normal;
attribute vec2 uv;
varying vec3 fragNormal;
varying vec2 fragUV;
uniform float elapsedTime;
uniform mat4 projectionMatrix;
uniform mat4 cameraMatrix;
uniform mat4 modelMatrix;
void main() {
fragNormal = normal;
fragUV = uv;
gl_Position = projectionMatrix * cameraMatrix * modelMatrix * position;
}
Fragment Shader中增加了uniform sampler2D diffuseMap;，sampler2D是紋理的參數(shù)類型。然后將diffuseMap在紋理坐標(biāo)fragUV上的像素顏色作為基本色vec4 materialColor = texture2D(diffuseMap, fragUV);。texture2D函數(shù)用來采樣紋理在某個(gè)uv坐標(biāo)下的顏色，返回值類型是vec4。
precision highp float;
varying vec3 fragNormal;
varying vec2 fragUV;
uniform float elapsedTime;
uniform vec3 lightDirection;
uniform mat4 normalMatrix;
uniform sampler2D diffuseMap;
void main(void) {
vec3 normalizedLightDirection = normalize(-lightDirection);
vec3 transformedNormal = normalize((normalMatrix * vec4(fragNormal, 1.0)).xyz);
float diffuseStrength = dot(normalizedLightDirection, transformedNormal);
diffuseStrength = clamp(diffuseStrength, 0.0, 1.0);
vec3 diffuse = vec3(diffuseStrength);
vec3 ambient = vec3(0.3);
vec4 finalLightStrength = vec4(ambient + diffuse, 1.0);
vec4 materialColor = texture2D(diffuseMap, fragUV);
gl_FragColor = finalLightStrength * materialColor;
}
回到JS代碼。將我們生成的紋理綁定到uniform diffuseMap上。
if (woodTexture.isReady) {
var diffuseLoc = gl.getUniformLocation(program, "diffuseMap");
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, woodTexture);
gl.uniform1i(diffuseLoc, 0);
}
綁定紋理的流程是：
- 激活紋理的某個(gè)通道
gl.activeTexture(gl.TEXTURE0);。通道0是默認(rèn)激活的，所以本例中這一句也可以不寫。 - 綁定生成的紋理到
gl.TEXTURE_2D，gl.bindTexture(gl.TEXTURE_2D, woodTexture);，注意這里是綁定到gl.TEXTURE_2D而不是gl.TEXTURE0。 - 將0傳遞給
uniformdiffuseMap,如果激活的是gl.TEXTURE1就傳遞1，以此類推。
到此，紋理的基本使用方法就介紹完了。
注意，作為紋理的圖片的尺寸最好是2的n次方，比如1024，512。一方面提高性能，另一方面不是所有的3D圖形處理系統(tǒng)都支持非2的n次方尺寸的紋理。
