這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)Web中如何使用紋理貼圖,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括宣城網(wǎng)站建設(shè)、宣城網(wǎng)站制作、宣城網(wǎng)頁(yè)制作以及宣城網(wǎng)絡(luò)營(yíng)銷策劃等。多年來,我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等,向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,宣城網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前,我們服務(wù)的客戶以成都為中心已經(jīng)輻射到宣城省份的部分城市,未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任!
為了使圖形能獲得接近于真實(shí)物體的材質(zhì)效果,一般會(huì)使用貼圖,貼圖類型主要包括兩種:漫反射貼圖和鏡面高光貼圖。其中漫反射貼圖可以同時(shí)實(shí)現(xiàn)漫反射光和環(huán)境光的效果。
實(shí)際效果請(qǐng)看demo:紋理貼圖
undefined
實(shí)現(xiàn)貼圖就需要用到紋理,常用的紋理格式有:2D紋理,立方體紋理,3D紋理。我們使用最基本的2D紋理就能實(shí)現(xiàn)本節(jié)需要的效果,我們來看一下使用紋理需要的api。相關(guān)教程:js視頻教程
因?yàn)榧y理的坐標(biāo)原點(diǎn)位于左下角,和我們通常的左上角坐標(biāo)原點(diǎn)剛好相反,下面就是將它按Y軸進(jìn)行反轉(zhuǎn),方便我們?cè)O(shè)置坐標(biāo)。
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
激活和綁定紋理,gl.TEXTURE0表示0號(hào)紋理,可以從0一直往上遞增。TEXTURE_2D則是表示2D紋理。
gl.activeTexture(gl.TEXTURE0);//激活紋理 gl.bindTexture(gl.TEXTURE_2D, texture);//綁定紋理
接著就是設(shè)置紋理參數(shù),這個(gè)api非常重要,也是紋理最復(fù)雜的部分。
gl.texParameteri(target, pname, param),將param的值賦給綁定到目標(biāo)的紋理對(duì)象的pname參數(shù)上。參數(shù):
target: gl.TEXTURE_2D或 gl.TEXTURE_CUBE_MAP
pname: 可指定4個(gè)紋理參數(shù)
param: 紋理參數(shù)的值
可賦給 gl.TEXTURE_MAP_FILTER和 gl.TEXTURE_MIN_FILTER參數(shù)的值
gl.NEAREST: 使用原紋理上距離映射后像素中心最近的那個(gè)像素的顏色值,作為新像素的值。
gl.LINEAR: 使用距離新像素中心最近的四個(gè)像素的顏色值的加權(quán)平均,作為新像素的值(和gl.NEAREST相比,該方法圖像質(zhì)量更好,但也會(huì)有較大的開銷。)
可賦給 gl.TEXTURE_WRAP_S和 gl.TEXTURE_WRAP_T的常量:
gl.REPEAT: 平鋪式的重復(fù)紋理
gl.MIRRORED_REPEAT: 鏡像對(duì)稱的重復(fù)紋理
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 指定給綁定的紋理對(duì)象,這個(gè)api在 WebGL1和 WebGL2中的重載函數(shù)多達(dá)十幾個(gè),格式類型非常多樣。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: //...
我封裝出了一個(gè)紋理加載函數(shù),每個(gè)api的調(diào)用格式可以查看資料,還是先實(shí)現(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; }); }
首先實(shí)現(xiàn)漫反射光貼圖,從網(wǎng)上下載了個(gè)地板的貼圖,里面包含了各種類型的貼圖。
緩沖區(qū)要增加頂點(diǎn)對(duì)應(yīng)的紋理坐標(biāo),這樣才能通過紋理坐標(biāo)找到對(duì)應(yīng)的紋理像素,簡(jiǎn)稱紋素。
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 ], };
頂點(diǎn)著色器唯一區(qū)別是增加了紋理坐標(biāo),需要插值傳入片元著色器
//... attribute vec2 a_texcoord; varying vec2 v_texcoord; void main() { //... v_texcoord = a_texcoord; }
片元著色器修改的多一些。主要是使用 texture2D獲取對(duì)應(yīng)坐標(biāo)下的紋素,代替之前的顏色就可以了。下面就是片元著色器相關(guān)代碼
//... vec3 normal = normalize(v_normal); vec4 diffMap = texture2D(u_samplerD, v_texcoord); //光線方向 vec3 lightDirection = normalize(u_lightPosition - v_position); // 計(jì)算光線方向和法向量夾角 float nDotL = max(dot(lightDirection, normal), 0.0); // 漫反射光亮度 vec3 diffuse = u_diffuseColor * nDotL * diffMap.rgb; // 環(huán)境光亮度 vec3 ambient = u_ambientColor * diffMap.rgb; //...
js部分加載貼圖對(duì)應(yīng)的圖片,傳遞紋理單元,然后渲染
//... (async function (){ const ret = await loadTexture('/model/floor_tiles_06_diff_1k.jpg') setUniforms(program, { u_samplerD: 0//0號(hào)紋理 }); //... draw(); })()
效果如下,鏡面高光部分似乎太刺眼了,因?yàn)榈匕迨遣粫?huì)有鏡子一樣光滑強(qiáng)烈的反光的。
為了實(shí)現(xiàn)更逼真的高光效果,繼續(xù)實(shí)現(xiàn)高光貼圖,實(shí)現(xiàn)原理和漫反射一樣,把對(duì)應(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); // 計(jì)算光線方向和法向量夾角 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同時(shí)加載漫反射和高光貼圖
//... (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號(hào)紋理 u_samplerS: 1 //1號(hào)紋理 }); //... draw(); })()
最后實(shí)現(xiàn)的效果如下,明顯更加接近真實(shí)的地板
上述就是小編為大家分享的Web中如何使用紋理貼圖了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享文章:Web中如何使用紋理貼圖
轉(zhuǎn)載來于:http://bm7419.com/article38/gocepp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供標(biāo)簽優(yōu)化、虛擬主機(jī)、服務(wù)器托管、網(wǎng)站導(dǎo)航、品牌網(wǎng)站制作、網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)