사진에서 WebGL 텍스처 만들기

사진을 사용하여 Warp 예제를 위한 WebGL 텍스처를 만듭니다.

사진 로드

WebGL은 사진을 사용하여 도형을 더욱 사실적이거나 유용하게 하는 텍스처를 만듭니다. Warp 예제에서는 모든 크기의 사진을 사용할 수 있지만 WebGL에는 작동하도록 설정된 크기의 이미지가 필요합니다. 선택한 이미지의 크기를 조정하기 위해 예제에서는 3단계 프로세스를 사용하여 WebGL 텍스처를 만듭니다.

다음 코드와 단계에서는 Warp 예제에서 2D 캔버스 명령을 사용하여 이미지를 텍스처로 로드하기 전에 텍스처 크기를 조정하는 방법을 알아봅니다.

이 코드는 이미지를 가져오고 크기를 조정한 다음 2D 캔버스에 배치합니다.


// load a the user's image.
this.loadImageX = function (dataURL) {
    var image = new Image();
    
    image.onload = function () {
        renderer.loadImage2(image);
    }

    image.src = dataURL;
}

// This function does the heavy lifting of creating the texture from the image.
this.loadImage2 = function (image) {
    // Convert the image to a square image via the temporary 2d canvas. 
    var canvas = document.getElementById("2dcanvas");
    var ctx = canvas.getContext("2d");
    var canvHeight = document.getElementById("2dcanvas").height;

    var x = 0;
    var y = 0;
    var xx = canvHeight;
    var yy = canvHeight;

    ctx.clearRect(0, 0, canvHeight, canvHeight);
    // If image isn't square, adjust width, height, and origin so it's centered.
       if (image.width < image.height) {
        // Change origin and dimensions if the image isn't square.
        // Change x, xx
        xx = image.width / image.height * canvHeight;
        x = (canvHeight - xx) / 2;
    }
    if (image.width > image.height) {
        // Change y, yy 
      yy = image.height / image.width * canvHeight;
      y = (canvHeight - yy) / 2;
    }

// Put the image on the canvas, scaled using xx & yy.
    ctx.drawImage(image, 0, 0, image.width, image.height, x, y, xx, yy);


  1. Image 개체 및 사진 로드가 완료될 때 loadImage2 함수를 호출하는 이벤트를 만듭니다.
  2. 이미지 로드가 완료되면 loadImage2가 호출됩니다.
  3. LoadImage2는 document.getElementById를 사용하여 HTML 코드에서 2D 캔버스를 가져옵니다.
  4. 캔버스를 사용하면 함수가 getContext("2d")를 사용하여 캔버스 요소에서 2D 컨텍스트를 가져옵니다.
  5. 캔버스 높이를 가져오고 이미지를 캔버스에 배치하는 데 사용되는 origin x, origin y, height 및 width 변수를 만듭니다. 캔버스가 정사각형이므로 높이가 높이 및 너비에 둘 다 사용됩니다.
  6. clearRect를 사용하여 캔버스를 지웁니다.
  7. 이미지의 최대 크기를 가져옵니다. 이미지가 정사각형이 아니면 조정된 높이 또는 너비와 더 짧은 쪽을 위해 캔버스에 대한 오프셋을 계산합니다.
  8. drawImage를 사용하여 이미지를 캔버스에 배치합니다. drawImage 메서드는 이미지를 캔버스의 특정 원점에 배치하고 캔버스에 대해 지정된 원점, 높이 및 너비에 따라 크기를 자동으로 조정합니다.

LoadImage2는 텍스처 개체를 만들고 다음 단계에 따라 캔버스에서 이미지를 로드합니다.


// Create a texture object that will contain the image.
var texture = gl.createTexture();

// Bind the texture the target (TEXTURE_2D) of the active texture unit.
gl.bindTexture(gl.TEXTURE_2D, texture);

// Flip the image's Y axis to match the WebGL texture coordinate space.
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    
// Set the parameters so we can render any size image.        
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.LINEAR);

  // Upload the resized canvas image into the texture.
//    Note: a canvas is used here but can be replaced by an image object. 
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);


  1. WebGL 컨텍스트(gl)를 가져오고 createTexture를 사용하여 새 WebGLTexture 개체를 만듭니다. CreateTexture는 WebGLTexture 개체와 사용할 텍스처 유형(TEXTURE_2D 또는 TEXTURE_CUBE_MAP)을 허용합니다. Warp 예제에서는 TEXTURE_2D를 사용합니다.
  2. bindTexture를 사용하여 활성 텍스처가 되도록 텍스처를 바인딩합니다. 이 텍스처를 활성화하면 후속 텍스처 작업에서 이 텍스처가 사용됩니다.
  3. WebGL 텍스처 좌표계가 pixelStorei와 일치하도록 텍스처의 좌표계를 변경합니다. 플래그 UNPACK_FLIP_Y_WEBGL을 사용하면 Y축이 왼쪽 위 모서리의 0에서 왼쪽 아래 모서리의 0으로 변경됩니다. 아래 참고를 참조하세요.
  4. texParameteri를 TEXTURE_WRAP_S 및 TEXTURE_WRAP_T와 함께 사용하여 WebGL이 이미지 래핑을 처리하는 방법을 지정합니다. 이러한 상수는 영역 채우기가 이미지보다 큰 경우 측면이나 위쪽 및 아래쪽까지 영역을 채우는 방법을 WebGL에 알립니다. CLAMP_TO_EDGE 매개 변수는 이미지를 바둑판식으로 배열하도록 WebGL에 알립니다. 예를 들어 이미지를 1.5 좌표로 샘플링하는 경우 .5로 샘플링하는 것과 동일합니다.
  5. 또한 texParameteri를 TEXTURE_MIN_FILTER 및 TEXTURE_MAX_FILTER 상수와 함께 사용하여 색상 계산 방법을 지정합니다. LINEAR 플래그를 사용하면 텍스처가 초기 크기보다 크게 확장됨에 따라 가장 가까운 픽셀 4개를 사용하여 새로운 픽셀의 색을 계산하도록 WebGL에 지시합니다.
  6. texImage2D를 대상 텍스처 유형(TEXTURE_2D), 수준(항상 0임), 내부 형식 및 이미지 형식(둘 다 RGBA임), 텍스처 데이터 형식(UNSIGNED_BYTE), 그리고 마지막으로 이미지(이 경우 2D 캔버스)와 함께 사용하여 이미지를 텍스처로 로드합니다.
  7. clearRect를 사용하여 캔버스를 지웁니다.

참고  

텍스처는 s/t 좌표계라는 시스템을 사용합니다. 여기서 원점은 왼쪽 아래에 있는 0,0이며 s 액세스는 가로로 이동하고 t 축은 세로로 이동합니다. 측면 및 위쪽으로 이동한다고 가정합니다. 나중에 이를 확인할 수 있습니다. s/t 이름을 사용하면 WebGL에 사용되는 x/y/z 좌표계와 구분할 수 있습니다. 이미지를 텍스처에 복사하면 pixelStorei를 사용하여 GPU로 전송할 때 이미지를 대칭 이동하도록 texImage2D를 설정할 수 있습니다. 왼쪽 위에 0,0 원점이 있는 좌표계에서 왼쪽 아래에 0,0 원점이 있는 s/t 시스템으로 사진을 전환하려면 UNPACK_FLIP_Y_WEBGL 플래그를 사용하여 pixelStorei를 호출합니다. 이는 여러 텍스처를 한꺼번에 사용하는 경우에 중요할 수 있습니다.

UI 지원에서 파일 가져오기, 마우스 이동 및 파일 저장에 대한 예의 개요를 확인할 수 있습니다.

관련 항목

GLSL을 사용하여 WebGL 셰이더 작성
UI 지원
WebGL 데모, 참조 및 리소스

 

 

표시:
© 2014 Microsoft