웹 학습: 텍스처 맵을 사용하는 방법

그래픽이 실제 객체에 가까운 물질적 효과를 얻을 수 있도록 하기 위해 일반적으로 텍스처에는 확산 반사 맵과 반사 하이라이트 맵의 두 가지 주요 유형이 사용됩니다. 확산 반사 맵은 확산 반사광과 주변광의 효과를 동시에 얻을 수 있습니다.
실제 효과는 데모를 참조하세요. 텍스처 맵

2D 텍스처

맵을 구현하려면 텍스처를 사용해야 합니다. 일반적으로 사용되는 텍스처 형식은 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개의 텍스처 매개변수를 지정할 수 있습니다

  1. 확대(gl.TEXTURE_MAP_FILTER): 드로우 범위가 기존보다 넓습니다. 텍스처 자체가 더 클 때 텍스처 색상을 얻는 방법. 예를 들어 16*16 텍스처 이미지를 32*32 픽셀 공간에 매핑하면 텍스처 크기가 원래 크기의 2배가 됩니다. 기본값은 gl.LINEAR입니다.
  2. Minify(gl.TEXTURE_MIN_FILTER): 텍스처의 드로우 리턴이 텍스처 자체보다 작을 때 텍셀 색상을 얻는 방법. 예를 들어 32*32 텍스처 이미지를 16*16 픽셀 공간에 매핑하면 텍스처 크기는 원래 크기만 됩니다. 기본값은 gl.NEAREST_MIPMAP_LINEAR입니다.
  3. 가로 채우기(gl.TEXTURE_WRAP_S): 텍스처 이미지의 왼쪽 또는 오른쪽 영역을 채우는 방법을 나타냅니다. 기본값은 gl.REPEAT입니다.
  4. 세로 패딩(gl.TEXTURE_WRAP_T): 텍스처 이미지 위와 아래 영역을 채우는 방법을 나타냅니다. 기본값은 gl.REPEAT입니다.

• param: 텍스처 매개변수

  1. 의 값은 gl.TEXTURE_MAP_FILTER 및 gl.TEXTURE_MIN_FILTER에 할당될 수 있습니다. 매개변수의 값

     gl.NEAREST: 거리 매핑을 사용한 후 원본 텍스처에서 가장 가까운 픽셀 중심 해당 픽셀의 색상 값이 새 픽셀의 값으로 사용됩니다.

     gl.LINEAR: 새 픽셀의 중심에 가장 가까운 4개의 픽셀 색상 값의 가중 평균을 새 픽셀의 값으로 사용합니다(gl.NEAREST와 비교하여 이 방법이 더 나은 이미지 품질을 제공합니다) , 그러나 더 높은 오버헤드를 갖습니다.)

  2. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!