webgl 프로젝션 매핑/쿼드 워핑/모서리 핀

Question

화면 픽셀에 해당하는 임의 위치의 모서리가있는 사각형에 사각형 텍스처를 매핑하고 싶습니다. drawQuad(x1,y1, x2,y2, x3,y3, x4,y4)과 같은 것입니다. WebGL을 사용하여이 작업을 수행하는 데 필요한 데모가 있습니까?

WebGL을 사용하여 수행 한 모든 작업은 형상 투영, 조명 및 카메라를 쉽게 만드는 Three.js를 사용했습니다. 그러나 이것은 더 간단합니다 : 조명이나 카메라 앵글이 필요없고, 네 모서리의 절대 위치를 입력하는 것뿐입니다. 이 저수준을 사용할 수 있다면 Three.js를 사용하는 것에 반대하지 않습니다.

Quartz Composer에서 an explanation with a GLSL vertex shader이 발견되었습니다.

---

업데이트 내 프로젝트에서

나는 내가 어떤 요소 (캔버스, IMG, DIV, 비디오)를 늘릴 수 있고, 비와 함께 찢어하지 않기 때문에, 지금은 CSS로가는 종료 평면 모양 ... 결국 나는 WebGL 옵션을 다시 방문 할 수도 있습니다. 만약 누군가 네 모퉁이를 임의의 위치로 드래그하는 예제가 있다면, 여기에 추가 할 것입니다.

Answer 1

나는 강력하게 "학습 WebGL을"에서 읽는 자습서를 제안한다.

쿼드의 모든 정점에 대해 "UV 좌표"를 보냅니다. UV 좌표는 텍스쳐의 어느 부분이 정점에 묶여 있는지를 알려주는 vec2 데이터입니다.

예를 들어 (0,0) uv는 텍스처의 왼쪽 위 모서리를 나타내며 (0.3, 0.4)는 텍스처의 30 % 너비와 40 % 높이에 해당하는 텍스처의 위치를 ​​나타냅니다.

uniform sampler2D uTexture; 
varying vec2 vUV; 
void main() 
    vec4 color_from_texture = texture2D (uTexture, vUV); 
    gl_FragColor = color_from_texture; 
} 

이것은 샘플링 질감이라고, 당신은 texture2D 함수를 호출하여 어떤 위치에 질감에서 데이터를 읽어 : texture2D, 여기에 사용입니다 - GLSL 쉐이더에서

는이 특별한 기능입니다.

쿼드의 정점은 위치 (x1, y1), (x1, y2), (x2, y2)이며 해당 UV 좌표는 (0.0, 0.0), (1.0 , 0,0), (0.0, 1.0), (1.0, 1.0)이다. UV 좌표를 한 점에서 다른 점으로 완전히 정의하여 텍스처를 어떻게 확장하는지 주목하십시오.

버텍스 쉐이더는 다음과 같이 보일 것입니다 :

는

attribute vec2 aUV; 
attribute vec2 aVertexPos; 
varying vec2 vUV; 
void main() { 
    vUV = aUv; 
    gl_Position = vec4(aVertexPos, 1.0); // maybe modelViewMatrix * projMatrix * vec4(aVertexPos, 1.0) 
} 

셰이더 UV 다른 텍스처 데이터를 샘플링 할 것이다, 따라서 각각의 조각은 UV 이리저리 자신의, 보간 값을 얻을 것이다 하나 개의 삼각형을 결합 정점 사이에 좌표를 보간합니다.

은주의 깊게 읽고, 그 후, 쿼드을 만드는 것은 쉬워야한다 :이 도움이 http://learningwebgl.com/blog/?p=507

희망을.

• • •  

라이브 예 : http://abstract-algorithm.com/quad.html