Web中如何使用紋理貼圖-創(chuàng)新互聯(lián)

這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)Web中如何使用紋理貼圖，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)專注于烏審企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,電子商務(wù)商城網(wǎng)站建設(shè)。烏審網(wǎng)站建設(shè)公司,為烏審等地區(qū)提供建站服務(wù)。全流程按需定制開發(fā)，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

為了使圖形能獲得接近于真實物體的材質(zhì)效果，一般會使用貼圖，貼圖類型主要包括兩種：漫反射貼圖和鏡面高光貼圖。其中漫反射貼圖可以同時實現(xiàn)漫反射光和環(huán)境光的效果。
實際效果請看demo：紋理貼圖

undefined

Web中如何使用紋理貼圖

2D紋理

實現(xiàn)貼圖就需要用到紋理，常用的紋理格式有：2D紋理，立方體紋理，3D紋理。我們使用最基本的2D紋理就能實現(xiàn)本節(jié)需要的效果，我們來看一下使用紋理需要的api。相關(guān)教程：js視頻教程

因為紋理的坐標原點位于左下角，和我們通常的左上角坐標原點剛好相反，下面就是將它按Y軸進行反轉(zhuǎn)，方便我們設(shè)置坐標。

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);//綁定紋理

接著就是設(shè)置紋理參數(shù)，這個api非常重要，也是紋理最復雜的部分。

gl.texParameteri(target, pname, param)，將param的值賦給綁定到目標的紋理對象的pname參數(shù)上。參數(shù)：

target:gl.TEXTURE_2D或gl.TEXTURE_CUBE_MAP
pname: 可指定4個紋理參數(shù)
1. 放大（gl.TEXTURE_MAP_FILTER）:當紋理的繪制范圍比紋理本身更大時，如何獲取紋理顏色。比如，將16*16的紋理圖像映射到32*32像素的空間時，紋理的尺寸變?yōu)樵嫉膬杀?。默認值為gl.LINEAR。
2. 縮?。?strong>gl.TEXTURE_MIN_FILTER）: 當紋理的繪制返回比紋理本身更小時，如何獲取紋素顏色。比如，將32*32的紋理圖像映射到16*16像素空間里，紋理的尺寸就只有原始的一般。默認值為gl.NEAREST_MIPMAP_LINEAR。
3. 水平填充（gl.TEXTURE_WRAP_S）: 表示如何對紋理圖像左側(cè)或右側(cè)區(qū)域進行填充。默認值為gl.REPEAT。
4. 垂直填充（gl.TEXTURE_WRAP_T）: 表示如何對紋理圖像上方和下方的區(qū)域進行填充。默認值為gl.REPEAT。
param: 紋理參數(shù)的值
1. 可賦給gl.TEXTURE_MAP_FILTER和gl.TEXTURE_MIN_FILTER參數(shù)的值
  gl.NEAREST: 使用原紋理上距離映射后像素中心最近的那個像素的顏色值，作為新像素的值。
  gl.LINEAR: 使用距離新像素中心最近的四個像素的顏色值的加權(quán)平均，作為新像素的值（和gl.NEAREST相比，該方法圖像質(zhì)量更好，但也會有較大的開銷。）
2. 可賦給gl.TEXTURE_WRAP_S和gl.TEXTURE_WRAP_T的常量：
  gl.REPEAT: 平鋪式的重復紋理
  gl.MIRRORED_REPEAT: 鏡像對稱的重復紋理
  gl.CLAMP_TO_EDGE: 使用紋理圖像邊緣值

設(shè)置樣例如下所示：

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中的重載函數(shù)多達十幾個，格式類型非常多樣。pixels參數(shù)既可以是圖像，canvas，也可以是視頻，我們只看WebGL1中的調(diào)用形式。

// 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:
//...

我封裝出了一個紋理加載函數(shù)，每個api的調(diào)用格式可以查看資料，還是先實現(xiàn)我們想要的效果。

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;
    });
}

漫反射貼圖

首先實現(xiàn)漫反射光貼圖，從網(wǎng)上下載了個地板的貼圖，里面包含了各種類型的貼圖。

緩沖區(qū)要增加頂點對應(yīng)的紋理坐標，這樣才能通過紋理坐標找到對應(yīng)的紋理像素，簡稱紋素。

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獲取對應(yīng)坐標下的紋素，代替之前的顏色就可以了。下面就是片元著色器相關(guān)代碼

//...
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部分加載貼圖對應(yīng)的圖片，傳遞紋理單元，然后渲染

//...
(async function (){
    const ret = await loadTexture('/model/floor_tiles_06_diff_1k.jpg')
    setUniforms(program, {
        u_samplerD: 0//0號紋理
    });
    //...
    draw();
})()

效果如下，鏡面高光部分似乎太刺眼了，因為地板是不會有鏡子一樣光滑強烈的反光的。

Web中如何使用紋理貼圖

鏡面高光貼圖

為了實現(xiàn)更逼真的高光效果，繼續(xù)實現(xiàn)高光貼圖，實現(xiàn)原理和漫反射一樣，把對應(yīng)的高光顏色替換成高光貼圖紋素就可以了。
下面就是片元著色器增加修改高光部分

//...
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();
})()

最后實現(xiàn)的效果如下，明顯更加接近真實的地板

Web中如何使用紋理貼圖

上述就是小編為大家分享的Web中如何使用紋理貼圖了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。

文章題目：Web中如何使用紋理貼圖-創(chuàng)新互聯(lián)
鏈接地址：http://weahome.cn/article/jicss.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

Web中如何使用紋理貼圖-創(chuàng)新互聯(lián)

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管