[WebGL] Shader 코드 분리, 텍스쳐

혀니앤·2022년 5월 27일

컴퓨터 그래픽스

목록 보기

3/7

Shader 코드 분리

XMLHttpRequest 을 사용해서 원하는 vs, fs 파일을 url로 불러올 수 있게 했다.
status로 200을 반환한다면 제대로 파일을 가져온 것이므로 데이터를 읽어올 수 있다.

	var request = new XMLHttpRequest();
    var data;
    request.open('GET', url, false);
    request.send(null);

이미지 불러오기

이번에 커비 디스커버리를 하면서 직접 찍은 이미지
2^n 사이징하여 512*512 사이즈로 만들었다

텍스쳐 설정

기존의 회전하는 큐브에서 텍스쳐를 추가해준다. 이미지를 load한 후 texture들을 bind 해준다

	gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); // 이미지의 원점을 맞추기 위해 회전시킨다
    gl.activeTexture(gl.TEXTURE0); //FS로 전달할 0번째 Texture 창구를 열어준다.
    gl.bindTexture(gl.TEXTURE_2D, f_texture); // 사용할 texture를 TEXTURE_2D 창구에 연결한다 

	// 텍스쳐를 사용할 때 여러 개의 파라미터를 전달해서 어떻게 이미지를 넣을지 정할 수 있다
    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.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.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, f_image);

	// 사용할 Texture Unit 값을 전달한다
    gl.uniform1i(u_Sampler, 0);

    gl.generateMipmap(gl.TEXTURE_2D); //텍스쳐를 매칭하기 위한 Mipmap을 활성화한다.
    gl.bindTexture(gl.TEXTURE_2D, null); //지금 당장 사용할 것이 아니므로 텍스쳐 bind를 해제한다.

큐브 면에 텍스쳐 그리기

큐브를 그리기 전에 텍스쳐를 다시 bind해주고 사용한다

    gl.activeTexture(gl.TEXTURE0); //창구 다시 열어주고
    gl.bindTexture(gl.TEXTURE_2D, textureBuffer); //사용할 텍스쳐 값도 넣어주고
    gl.uniform1i(u_Sampler, 0); // unit 값도 넣어주고

    gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0); //그린다