도형의 uv 좌표가 질감의 범위를 벗어날 때 질감의 동작 방식을 변경합니다.
texture()가 작동하기 위해서는 도형 표면에 있는 점을 이미지의 픽셀에 매핑하는 방법이 필요합니다. rect() 및 box()와 같은 내장된 도형은 이미 각 정점을 기반으로 이러한 질감 매핑을 가지고 있습니다. vertex()로 만든 사용자 지정 도형은 질감 매핑을 UV 좌표로 전달해야 합니다.
vertex()를 호출할 때는 vertex(x, y, z, u, v)에서와 같이 5개의 매개 변수를 포함해야 이미지 내 좌표 (u, v)에 있는 픽셀에 좌표 (x, y, z)의 정점을 매핑할 수 있습니다. 예를 들어, 직사각형 이미지의 모서리는 기본적으로 직사각형의 모서리에 매핑됩니다.
// Apply the image as a texture. texture(img); <p>// Draw the rectangle. rect(0, 0, 30, 50); </p>위 코드 스니펫의 이미지 크기가 300 x 500 픽셀 이상인 경우 다음과 같은 결과를 얻을 수 있습니다.
// Apply the image as a texture. texture(img); <p>// Draw the rectangle. beginShape();</p> <p>// Top-left. // u: 0, v: 0 vertex(0, 0, 0, 0, 0);</p> <p>// Top-right. // u: 300, v: 0 vertex(30, 0, 0, 300, 0);</p> <p>// Bottom-right. // u: 300, v: 500 vertex(30, 50, 0, 300, 500);</p> <p>// Bottom-left. // u: 0, v: 500 vertex(0, 50, 0, 0, 500);</p> <p>endShape(); </p>textureWrap()은 uv 좌표가 질감의 범위를 넘어설 때 질감이 어떻게 작동하는지를 제어합니다. 그렇게 하면 타일링과 같은 흥미로운 시각적 효과를 얻을 수 있습니다. 예를 들어, 위의 사용자 지정 모양은 u 좌표가 이미지의 너비보다 클 수 있습니다.
// Apply the image as a texture. texture(img); <p>// Draw the rectangle. beginShape(); vertex(0, 0, 0, 0, 0);</p> <p>// Top-right. // u: 600 vertex(30, 0, 0, 600, 0);</p> <p>// Bottom-right. // u: 600 vertex(30, 50, 0, 600, 500);</p> <p>vertex(0, 50, 0, 0, 500); endShape(); </p>u 좌표인 600은 질감 이미지의 너비인 300보다 큽니다. 이것은 흥미로운 가능성을 만들어냅니다.
첫번째 매개 변수인 wrapX에는 세 종류의 상수를 넣을 수 있습니다. 만약 textureWrap(CLAMP)에서와 같이 CLAMP가 전달되면 질감의 가장자리에 있는 픽셀이 도형의 가장자리로 확장됩니다. 만약 textureWrap(REPEAT)에서와 같이 REPEAT가 전달되면 질감이 도형의 가장자리에 도달할 때까지 반복적으로 타일링됩니다. 만약 textureWrap(MIRROR)에서와 같이 MIRROR가 전달되면 질감이 도형의 가장자리에 도달할 때까지 타일 간 방향이 전환되며 반복적으로 타일링됩니다. CLAMP가 기본 동작 값입니다.
두번째 매개 변수인 wrapY는 선택 사항이며 앞과 동일한 세 종류의 상수인 CLAMP, REPEAT, MIRROR를 넣을 수 있습니다. 만약 textureWRAP(MIRROR, REPEAT)에서와 같이 이 중 하나가 전달되면, 질감은 수평으로는 MIRROR, 수직으로는 REPEAT으로 동작합니다. 기본적으로는 wrapY는 wrapX와 같은 값을 가집니다.
참고: textureWrap()은 WebGL 모드에서만 사용할 수 있습니다.
예제
구문
textureWrap(wrapX, [wrapY])매개변수
CLAMP, REPEAT, MIRROR 중 하나
CLAMP, REPEAT, MIRROR 중 하나