그래픽이 실제 객체에 가까운 물질적 효과를 얻을 수 있도록 하기 위해 일반적으로 텍스처에는 확산 반사 맵과 반사 하이라이트 맵의 두 가지 주요 유형이 사용됩니다. 확산 반사 맵은 확산 반사광과 주변광의 효과를 동시에 얻을 수 있습니다.
실제 효과는 데모를 참조하세요. 텍스처 맵
맵을 구현하려면 텍스처를 사용해야 합니다. 일반적으로 사용되는 텍스처 형식은 2D 텍스처, 큐브 텍스처, 3D 텍스처입니다. 가장 기본적인 2D 텍스처를 사용하여 이 섹션에서 요구하는 효과를 얻을 수 있습니다. 텍스처를 사용하는 데 필요한 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: 새 픽셀의 중심에 가장 가까운 4개의 픽셀 색상 값의 가중 평균을 새 픽셀의 값으로 사용합니다(gl.NEAREST와 비교하여 이 방법이 더 나은 이미지 품질을 제공합니다) , 그러나 더 높은 오버헤드를 갖습니다.)
gl.TEXTURE_WRAP_S 및 gl.TEXTURE_WRAP_T에 할당할 수 있는 상수:
gl.REPEAT: 타일 반복 텍스처
gl.MI RRORED_REP EAT: 거울 대칭 반복 텍스처
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, 바인딩된 텍스처 개체에 픽셀을 할당합니다. , 이 API WebGL1 및 WebGL2에는 12개 이상의 오버로드된 함수가 있으며 형식 유형이 매우 다양합니다. 픽셀 매개변수는 이미지, 캔버스 또는 비디오일 수 있습니다. 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;
});
}먼저 확산 반사광 맵을 구현해 보겠습니다. 인터넷에서 다양한 종류의 맵이 포함된 층별 맵을 다운로드했습니다.
버퍼는 정점에 해당하는 텍스처 좌표를 추가해야 텍셀이라고 하는 해당 텍스처 픽셀을 텍스처 좌표를 통해 찾을 수 있습니다.
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 ],
};버텍스 셰이더의 유일한 차이점은 보간되어 프래그먼트 셰이더에 전달되어야 하는 텍스처 좌표를 추가한다는 것입니다.
//...
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; // 环境光亮度 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();
})()반사 하이라이트 부분이 너무 눈부신 것 같아서 효과가 다음과 같습니다. 바닥은 거울 반사만큼 매끄럽고 강하지 않습니다.
为了实现更逼真的高光效果，继续实现웹 학습: 텍스처 맵을 사용하는 방법，实现原理和漫反射一样，把对应的高光颜色替换成웹 학습: 텍스처 맵을 사용하는 방법纹素就可以了。
下面就是片元着色器增加修改高光部分
//... 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; // 环境光亮度 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();
})()最后实现的效果如下，明显更加接近真实的地板
위 내용은 웹 학습: 텍스처 맵을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
