這期內容當中小編將會給大家?guī)碛嘘PWeb中如何使用紋理貼圖，文章內容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
成都創(chuàng)新互聯(lián)服務項目包括宣城網站建設、宣城網站制作、宣城網頁制作以及宣城網絡營銷策劃等。多年來，我們專注于互聯(lián)網行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構等提供互聯(lián)網行業(yè)的解決方案，宣城網站推廣取得了明顯的社會效益與經濟效益。目前，我們服務的客戶以成都為中心已經輻射到宣城省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！
為了使圖形能獲得接近于真實物體的材質效果，一般會使用貼圖，貼圖類型主要包括兩種：漫反射貼圖和鏡面高光貼圖。其中漫反射貼圖可以同時實現漫反射光和環(huán)境光的效果。
實際效果請看demo：紋理貼圖
undefined
實現貼圖就需要用到紋理，常用的紋理格式有：2D紋理，立方體紋理，3D紋理。我們使用最基本的2D紋理就能實現本節(jié)需要的效果，我們來看一下使用紋理需要的api。相關教程：js視頻教程
因為紋理的坐標原點位于左下角，和我們通常的左上角坐標原點剛好相反，下面就是將它按Y軸進行反轉，方便我們設置坐標。
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
激活和綁定紋理，gl.TEXTURE0表示0號紋理，可以從0一直往上遞增。TEXTURE_2D則是表示2D紋理。
gl.activeTexture(gl.TEXTURE0);//激活紋理 gl.bindTexture(gl.TEXTURE_2D, texture);//綁定紋理
接著就是設置紋理參數，這個api非常重要，也是紋理最復雜的部分。
gl.texParameteri(target, pname, param)，將param的值賦給綁定到目標的紋理對象的pname參數上。參數：
target: gl.TEXTURE_2D或 gl.TEXTURE_CUBE_MAP
pname: 可指定4個紋理參數
param: 紋理參數的值
可賦給 gl.TEXTURE_MAP_FILTER和 gl.TEXTURE_MIN_FILTER參數的值
gl.NEAREST: 使用原紋理上距離映射后像素中心最近的那個像素的顏色值，作為新像素的值。
gl.LINEAR: 使用距離新像素中心最近的四個像素的顏色值的加權平均，作為新像素的值（和gl.NEAREST相比，該方法圖像質量更好，但也會有較大的開銷。）
可賦給 gl.TEXTURE_WRAP_S和 gl.TEXTURE_WRAP_T的常量：
gl.REPEAT: 平鋪式的重復紋理
gl.MIRRORED_REPEAT: 鏡像對稱的重復紋理
gl.CLAMP_TO_EDGE: 使用紋理圖像邊緣值
設置樣例如下所示：
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texImage2D，將 pixels 指定給綁定的紋理對象，這個api在 WebGL1和 WebGL2中的重載函數多達十幾個，格式類型非常多樣。pixels參數既可以是圖像，canvas，也可以是視頻，我們只看 WebGL1中的調用形式。
// WebGL1: void gl.texImage2D(target, level, internalformat, width, height, border, format, type, ArrayBufferView? pixels); void gl.texImage2D(target, level, internalformat, format, type, ImageData? pixels); void gl.texImage2D(target, level, internalformat, format, type, HTMLImageElement? pixels); void gl.texImage2D(target, level, internalformat, format, type, HTMLCanvasElement? pixels); void gl.texImage2D(target, level, internalformat, format, type, HTMLVideoElement? pixels); void gl.texImage2D(target, level, internalformat, format, type, ImageBitmap? pixels); // WebGL2: //...
我封裝出了一個紋理加載函數，每個api的調用格式可以查看資料，還是先實現我們想要的效果。
重慶分公司
重慶分公司
function loadTexture(url) {
const texture = gl.createTexture();
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
let textureInfo = {
width: 1,
height: 1,
texture: texture,
};
const img = new Image();
return new Promise((resolve,reject) => {
img.onload = function() {
textureInfo.width = img.width;
textureInfo.height = img.height;
gl.bindTexture(gl.TEXTURE_2D, textureInfo.texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
resolve(textureInfo);
};
img.src = url;
});
}首先實現漫反射光貼圖，從網上下載了個地板的貼圖，里面包含了各種類型的貼圖。
緩沖區(qū)要增加頂點對應的紋理坐標，這樣才能通過紋理坐標找到對應的紋理像素，簡稱紋素。
const arrays = {
position: [
-1, 0, -1,
-1, 0, 1,
1, 0, -1,
1, 0, 1
],
texcoord: [
0.0, 1.0,
0.0, 0.0,
1.0, 1.0,
1.0, 0.0
],
normal: [ 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1 ],
};頂點著色器唯一區(qū)別是增加了紋理坐標，需要插值傳入片元著色器
//...
attribute vec2 a_texcoord;
varying vec2 v_texcoord;
void main() {
//...
v_texcoord = a_texcoord;
}片元著色器修改的多一些。主要是使用 texture2D獲取對應坐標下的紋素，代替之前的顏色就可以了。下面就是片元著色器相關代碼
//... vec3 normal = normalize(v_normal); vec4 diffMap = texture2D(u_samplerD, v_texcoord); //光線方向 vec3 lightDirection = normalize(u_lightPosition - v_position); // 計算光線方向和法向量夾角 float nDotL = max(dot(lightDirection, normal), 0.0); // 漫反射光亮度 vec3 diffuse = u_diffuseColor * nDotL * diffMap.rgb; // 環(huán)境光亮度 vec3 ambient = u_ambientColor * diffMap.rgb; //...
js部分加載貼圖對應的圖片，傳遞紋理單元，然后渲染
//...
(async function (){
const ret = await loadTexture('/model/floor_tiles_06_diff_1k.jpg')
setUniforms(program, {
u_samplerD: 0//0號紋理
});
//...
draw();
})()效果如下，鏡面高光部分似乎太刺眼了，因為地板是不會有鏡子一樣光滑強烈的反光的。
為了實現更逼真的高光效果，繼續(xù)實現高光貼圖，實現原理和漫反射一樣，把對應的高光顏色替換成高光貼圖紋素就可以了。
下面就是片元著色器增加修改高光部分
//... vec3 normal = normalize(v_normal); vec4 diffMap = texture2D(u_samplerD, v_texcoord); vec4 specMap = texture2D(u_samplerS, v_texcoord); //光線方向 vec3 lightDirection = normalize(u_lightPosition - v_position); // 計算光線方向和法向量夾角 float nDotL = max(dot(lightDirection, normal), 0.0); // 漫反射光亮度 vec3 diffuse = u_diffuseColor * nDotL * diffMap.rgb; // 環(huán)境光亮度 vec3 ambient = u_ambientColor * diffMap.rgb; // 鏡面高光 vec3 eyeDirection = normalize(u_viewPosition - v_position);// 反射方向 vec3 halfwayDir = normalize(lightDirection + eyeDirection); float specularIntensity = pow(max(dot(normal, halfwayDir), 0.0), u_shininess); vec3 specular = (vec3(0.2,0.2,0.2) + specMap.rgb) * specularIntensity; //...
js同時加載漫反射和高光貼圖
//...
(async function (){
const ret = await Promise.all([
loadTexture('/model/floor_tiles_06_diff_1k.jpg'),
loadTexture('/model/floor_tiles_06_spec_1k.jpg',1)
]);
setUniforms(program, {
u_samplerD: 0,//0號紋理
u_samplerS: 1 //1號紋理
});
//...
draw();
})()最后實現的效果如下，明顯更加接近真實的地板
上述就是小編為大家分享的Web中如何使用紋理貼圖了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
