009. WebGL - Prac08

이번에는 WebGL에서 Geometry에 Texture를 입혀보는 예제를 소개하도록 하겠다. Local System에서 작동되는 OpenGL 프로그램에서의 Texture로딩은 Local Disk에 저장되어 있는 Image 파일을 읽어들여 사용함을 잘 알고 있을 것이다. 그렇다면, Web상에서 작동하는 WebGL은 어떻게 Texture를 로딩할 것인가? 답은 Local System에서의 방법과 큰 차이가 없다는 것이다. Local System에서, Image 파일을 읽기 위해서는 그 파일의 경로(Local Disk상에서의 경로)를 알고 있어야 한다. 비슷하게 WebGL에서는 Image 파일의 Web상의 경로(절대경로 혹은 상대경로)를 알고 있으면 된다. 그리고 JavaScript의 Image객체를 사용하여 Image Loading을 수행하면 된다. 아래의 예제를 보도록 하자.
위의 예제는 앞서 008. WebGL - Prac07 - JavaScript 파일에서 사용한 방법을 이용하여, Texture 객체를 정의한 코드이다.
new Image();를 이용하여, Image 객체의 인스턴스를 생성하고, loading이 성공했을 때의 이벤트 핸들러를 설정하며, img.src="..."로 이미지의 경로 설정 및 로딩을 시작한다.
만약 경로 "src"에 이미지가 존재하고, 로딩이 성공하면, onload 함수가 호출되고 텍스쳐 생성을 시작한다. 반대로 이미지 로딩에 실패하면, 아무런 동작을 하지 않는다.
이 간단한 몇줄의 코드로 이미지 로딩 및 텍스쳐 생성이 완료 되었다.

1. 텍스쳐좌표와 텍스쳐를 GLSL로 넘기기 위한, Vertex/Fragment Shader 작성.

2. GLSL에 Texture Coordinate와 Texture를 넘기기 위한 핸들 얻음.

3. Vertex Coordinate 데이터를 위한 버퍼 생성.

4. GLSL에 Vertex Coordinate 데이터 버퍼 넘겨줌.

5. Texture인스턴스 생성 및, GLSL에 텍스쳐 넘김.

이전 예제를 바탕으로, 위의 다섯 단계를 추가한 코드를 작성하면, 아래와 비슷한 코드 형태가 될 것이다.

<html>

<head>
	<title>WebGL - Prac08 - Texture</title>
	<script src="glMath.js" type="text/javascript"></script>
	<script src="glUtil.js" type="text/javascript"></script>
	<script type="text/javascript">
		var gl;
		var g_hVertPos;
		var g_hVertTex;
		var g_hWorld;

var g_transPosX=0;

var g_mtxView;

var g_Texture;
		var g_hSampler1;

function start(){
			sayHello();
			if( !initWebGL() ){
				return;
			}

if( !initShader() ){
				return;
			}

var verAry=	[
				0.0, 0.0, 0.0,
				0.5, 0.0, 0.0,
				0.0, 1.0, 0.0
			];

var texAry= [
				0.0, 0.0,
				1.0, 0.0,
				0.0, 1.0
			];

var glBufVert=	gl.createBuffer();
			gl.bindBuffer(gl.ARRAY_BUFFER, glBufVert);
			gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verAry), gl.STATIC_DRAW);

var glBufTex=	gl.createBuffer();
			gl.bindBuffer(gl.ARRAY_BUFFER, glBufTex);
			gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texAry), gl.STATIC_DRAW);

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

gl.bindBuffer(gl.ARRAY_BUFFER, glBufVert);
			gl.vertexAttribPointer(g_hVertPos, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, glBufTex);
			gl.vertexAttribPointer(g_hVertTex, 2, gl.FLOAT, false, 0, 0);

g_Texture=	new Texture("WebGL.png");

gl.enable(gl.TEXTURE_2D);
			gl.activeTexture(gl.TEXTURE0);
			gl.bindTexture(gl.TEXTURE_2D, g_Texture.getTexture());
			gl.uniform1i(g_hSampler1, 0);

g_mtxView=	new Matrix();

//0.05초 마다 drawScene 호출
			setInterval(drawScene, 30);
		}

function drawScene(){
			gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
			
			//x좌표 값을 변경 시킨 후 GLSL에 넘긴다.
			g_transPosX+=	0.01;
			if( g_transPosX>0.5 )	g_transPosX=	0;

g_mtxView.translate(g_transPosX, 0, 0);
			gl.uniformMatrix4fv(g_hWorld, false, g_mtxView.flattern());
			
			gl.drawArrays(gl.TRIANGLES, 0, 3);
		}

function initWebGL(){
			var canvas=	document.getElementById("WebGL-Canvas");
			if( !canvas ){
				alert("Can't find WebGL-Canvas.");
				return false;
			}

try{
				gl=	canvas.getContext("experimental-webgl");
			}catch(e){
			}

if( !gl ){
				alert("Unable to initialize WebGL. Your browser may not support it.");
				return false;
			}

return true;
		}

function initShader(){
			var vertexShaderDesc=	getShader("VertexShader");
			var vertexShader=		gl.createShader(gl.VERTEX_SHADER);
			gl.shaderSource(vertexShader, vertexShaderDesc);
			gl.compileShader(vertexShader);
			if( !gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS) ){
				alert("Error(VertexShader): " + gl.getShaderInfoLog(vertexShader));
				return false;
			}

var fragmentShaderDesc=	getShader("FragmentShader");
			var fragmentShader=		gl.createShader(gl.FRAGMENT_SHADER);
			gl.shaderSource(fragmentShader, fragmentShaderDesc);
			gl.compileShader(fragmentShader);
			if( !gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS) ){
				alert("Error(FragmentShader): " + gl.getShaderInfoLog(fragmentShader));
				return false;
			}

var shaderProgram=	gl.createProgram();
			gl.attachShader(shaderProgram, vertexShader);
			gl.attachShader(shaderProgram, fragmentShader);
			gl.linkProgram(shaderProgram);

if( !gl.getProgramParameter(shaderProgram, gl.LINK_STATUS) ){
				alert("Unagle to initialize the shader program.");
				return false;
			}

gl.useProgram(shaderProgram);

g_hVertPos=	gl.getAttribLocation(shaderProgram, "aPos");
			if( g_hVertPos==-1 ){
				alert("Unable to find Vertex Attribute Location.");
				return false;
			}
			gl.enableVertexAttribArray(g_hVertPos);

g_hVertTex=	gl.getAttribLocation(shaderProgram, "aTexCoordinate");			
			if( g_hVertTex==-1 ){
				alert("Unable to find Vertex Color Attribute Location.");
				return false;
			}
			gl.enableVertexAttribArray(g_hVertTex);

g_hWorld=	gl.getUniformLocation(shaderProgram, "gWorld");
			if( g_hWorld==-1 ){
				alert("Unable to find 'gView' uniform location.");
				return false;
			}

g_hSampler1=	gl.getUniformLocation(shaderProgram, "gSampler1");
			if( g_hSampler1==-1 ){
				alert("Unable to find 'gSampler1' uniform location.");
				return false;
			}

return true;
		}

function getShader(id){
			var shaderScript=	document.getElementById(id);
			if( !shaderScript ){
				alert("Unable to get shader script. id='" + id + "'");
				return null;
			}

var shaderDesc=	"";
			var currentChild=	shaderScript.firstChild;
			while( currentChild ){
				if( currentChild.nodeType==3 ){
					shaderDesc+=	currentChild.textContent;
				}
				currentChild=	currentChild.nextSibling;
			}

return shaderDesc;
		}

</script>

uniform mat4 gWorld;

varying vec2 vTexCoordinate;

void main(){
			gl_Position= gWorld * vec4(aPos, 1.0);
			vTexCoordinate=	aTexCoordinate;
		}
	</script>

uniform sampler2D gSampler1;

void main(){
			gl_FragColor= texture2D(gSampler1, vTexCoordinate);
		}
	</script>

</head>

<body onload="start()">
	<canvas id="WebGL-Canvas" style="border: 1px solid green" width="400" height="300">
		Your browser doesn't appear to support the HTML5 <code><canvas></code> element.
	</canvas>
</body>

</html>

위 코드의 결과는 아래와 같다.

사용한 텍스쳐는 아래와 같다.

'Computer > WebGL' 카테고리의 다른 글

011. WebGL - GwtGL - About GwtGL (0)	2011.05.11
010. WebGL - Prac09 - Text Rendering (0)	2010.04.19
008. WebGL - Prac07 - JavaScript 파일 (0)	2010.04.07
007. WebGL - Prac06 - Animation (0)	2010.04.07
006. WebGL - Prac05 - DrawTriangleWithColor (0)	2010.04.06

dogbull(犬牛)

009. WebGL - Prac08 - Texture

'Computer > WebGL' 카테고리의 다른 글

티스토리툴바

009. WebGL - Prac08 - Texture

'Computer > WebGL' 카테고리의 다른 글

관련글

티스토리툴바