WebGL texture 매핑에 대해 질문드립니다.

6시간째 고민하고 여러번 검색하고 이래저래 해봐도 안되서 질문드립니다.

텍스쳐를 매핑하는데 어떻게 매핑하는데는 성공을 했습니다만... 텍스쳐를 사각형에 매핑을 해야하는데 사각형에 매핑이 되지 않고 삼각형에 매핑이 되더군요. 그래서 이걸 고쳐보려고 검색도 해보고 다른 사람의 코드도 보고 해봤는데 다른 코드와 어디서 차이가 나서 문제가 발생하는지 잘 모르겠습니다.

지금 발생하는 문제는 사각형에 이미지가 정확하게 1장만 그려져야하는데 중첩되어져 그러지고 있는 문제입니다.

위의 이미지가 원본이미지이고 아래 캔버스가 WebGL로 그려지는 부분인데 저런식으로 4번그려지고 있습니다.

어떻게 해결해야할지 모르겠어서 도움을 요청합니다.

아래는 제가 지금까지 만든 소스코드입니다.

--- index.html ---

<html>

<head>

<title>Homework</title>

</head>

</body>

</html>

--- WebGL.js ---

var VSHADER_SOURCE =

'attribute vec4 a_Position;\n' +

'attribute vec2 a_TexCoord; \n' +

'varying vec2 v_TexCoord; \n' +

'void main() {\n' +

' gl_Position = a_Position;\n' +

' v_TexCoord = a_TexCoord; \n' +

'}\n';

var FSHADER_SOURCE =

'precision mediump float; \n' +

'uniform sampler2D u_Sampler; \n' +

'varying vec2 v_TexCoord; \n' +

'void main() { \n' +

' gl_FragColor = texture2D(u_Sampler, v_TexCoord); \n' +

'} \n';

function main(){

var canvas = document.getElementById('example');

var gl = canvas.getContext('webgl');

if(!gl){

console.log('Failed to get webgl');

return;

}

initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);

gl.clearColor(0.5, 0.5, 0.5, 1.0);

gl.clear(gl.COLOR_BUFFER_BIT);

var vertices = [

-0.9, 0.9, 0, 0,0,0,

0.9, -0.9, 0, 0,0,0,

0.9, 0.9, 0, 0,0,0,

0.9, -0.9, 0, 0,0,0,

-0.9, 0.9, 0, 0,0,0,

-0.9, -0.9, 0, 0,0,0

];

var vbo = gl.createBuffer();

if(!vbo){

console.log('Failed to create buffer');

return;

}

gl.bindBuffer(gl.ARRAY_BUFFER, vbo);

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

var posLoc = gl.getAttribLocation(gl.program, 'a_Position');

gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 4*6, 0);

gl.enableVertexAttribArray(posLoc);

canvas.onmousedown =

function(){

gl.bindBuffer(gl.ARRAY_BUFFER, vbo);

var posLoc = gl.getAttribLocation(gl.program, 'a_Position');

gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 4*6, 0);

gl.enableVertexAttribArray(posLoc);

//텍스쳐

var a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord');

gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, true, 4*6, 4*0);

gl.enableVertexAttribArray(a_TexCoord);

var u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler');

gl.enableVertexAttribArray(u_Sampler);

var texture = gl.createTexture();

gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);

gl.activeTexture(gl.TEXTURE0);

var image = new Image();

image.onload = function(){

gl.clearColor(0.5, 0.5, 0.5, 1.0);

gl.clear(gl.COLOR_BUFFER_BIT);

gl.bindTexture(gl.TEXTURE_2D, texture);

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);

gl.generateMipmap(gl.TEXTURE_2D);

gl.uniform1i(u_Sampler,0);

gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);

gl.drawArrays(gl.TRIANGLES, 0, 6);

};

image.src = '1.jpg';

};

}