WebGL 레슨 5 - 텍스쳐에 대하여

Similar documents
WebGL 레슨 3 - 회전 운동

WebGL 레슨 1 - 삼각형과 사각형

Microsoft PowerPoint - chap02-C프로그램시작하기.pptx

WS12. Security

Microsoft PowerPoint - lecture16-ch8.ppt [호환 모드]

Microsoft PowerPoint - lecture3-ch2.ppt [호환 모드]

Windows 8에서 BioStar 1 설치하기

(Microsoft PowerPoint - lecture16-ch8.ppt [\310\243\310\257 \270\360\265\345])

Microsoft PowerPoint - lecture17-ch8.ppt [호환 모드]

SproutCore에 홀딱 반했습니다.

PathEye 공식 블로그 다운로드 받으세요!! 지속적으로 업그래이드 됩니다. 여러분의 의견을 주시면 개발에 반영하겠 습니다.

Microsoft PowerPoint - lecture18-ch8

지도상 유의점 m 학생들이 어려워하는 낱말이 있으므로 자세히 설명해주도록 한다. m 버튼을 무리하게 조작하면 고장이 날 위험이 있으므로 수업 시작 부분에서 주의를 준다. m 활동지를 보고 어려워하는 학생에게는 영상자료를 접속하도록 안내한다. 평가 평가 유형 자기 평가

var answer = confirm(" 확인이나취소를누르세요."); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write(" 확인을눌렀습니다."); else { document.write(" 취소를눌렀습니다.");

Microsoft PowerPoint - lecture17-ch8.ppt

Microsoft PowerPoint - lecture16-ch8.ppt [호환 모드]

zbrush 4r7 p3 crack macintoshinstmank

IRISCard Anywhere 5

서피스셰이더프로그램 셰이더개발을쉽게! Thursday, April 12, 12

Node.JS와 Express를 이용한 디렉터리 파싱

SIGIL 완벽입문

소규모 비즈니스를 위한 플레이북 여기서 다룰 내용은 다음과 같습니다. 1. YouTube 소개 2. YouTube에서 비즈니스를 위한 채널 만들기 3. 눈길을 끄는 동영상 만들기 4. 고객의 액션 유도하기 5. 비즈니스에 중요한 잠재고객에게 더 많이 도달하기

Microsoft PowerPoint - chap04-연산자.pptx

PowerPoint 프레젠테이션

새로운 지점에서 단이 시작하는 경우 기둥코로 시작하라고 표시합니다. 기둥코(standing stitch)로 시작하는 방법은 YouTube 에서 찾아볼 수 있습니다. 특수 용어 팝콘뜨기: 1 코에 한길긴뜨기 5 코, 바늘을 빼고 첫번째 한길긴뜨기코의 앞에서 바늘을 넣은

Microsoft Word - windows server 2003 수동설치_non pro support_.doc

%eb%8f%99%ec%9d%b8-[NO_09]%20%ec%9d%98%ea%b3%bc%eb%8c%80%ed%95%99%20%ec%86%8c%ec%8b%9d%ec%a7%80_F(%ec%b5%9c%ec%a2%85)-2.pdf

쉽게 풀어쓴 C 프로그래밍

Print

아이폰/아이팟 터치용 웹 애플리케이션 개발 팁 12개

Index 1. Intro Install Connect Scratch 1.4 (Offline Editor) Scratch 2.0 (Online Editor) Connect f

Artificial Intelligence: Assignment 6 Seung-Hoon Na December 15, Sarsa와 Q-learning Windy Gridworld Windy Gridworld의 원문은 다음 Sutton 교재의 연습문제

Prototype에서 jQuery로 옮겨타기

XSS Attack - Real-World XSS Attacks, Chaining XSS and Other Attacks, Payloads for XSS Attacks

Microsoft Word - src.doc

SBR-100S User Manual

1

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

Studuino소프트웨어 설치

PowerPoint Presentation

단국대학교멀티미디어공학그래픽스프로그래밍기말고사 (2012 년봄학기 ) 2012 년 6 월 12 일학과학번이름 기말고사 담당교수 : 단국대학교멀티미디어공학전공박경신 l 답은반드시답안지에기술할것. 공간이부족할경우반드시답안지몇쪽의뒤에있다고명기한후기술할것. 그외의경우의답안지뒤

비디오 / 그래픽 아답터 네트워크 만약에 ArcGolbe를 사용하는 경우, 추가적인 디스크 공간 필요. ArcGlobe는 캐시파일을 생성하여 사용 24 비트 그래픽 가속기 Oepn GL 2.0 이상을 지원하는 비디오카드 최소 64 MB 이고 256 MB 이상을 메모리

SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES HTML 연동가이드 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone Fax Co

Microsoft PowerPoint - web-part01-ch10-문서객체모델.pptx

JAVA 프로그래밍실습 실습 1) 실습목표 - 메소드개념이해하기 - 매개변수이해하기 - 새메소드만들기 - Math 클래스의기존메소드이용하기 ( ) 문제 - 직사각형모양의땅이있다. 이땅의둘레, 면적과대각

와플-4년-2호-본문-15.ps

Javascript

아이콘의 정의 본 사용자 설명서에서는 다음 아이콘을 사용합니다. 참고 참고는 발생할 수 있는 상황에 대처하는 방법을 알려 주거나 다른 기능과 함께 작동하는 방법에 대한 요령을 제공합니다. 상표 Brother 로고는 Brother Industries, Ltd.의 등록 상

Microsoft PowerPoint - chap01-C언어개요.pptx


Microsoft 을 열면 깔끔한 사용자 중심의 메뉴 및 레이아웃이 제일 먼저 눈에 띕니다. 또한 은 스마트폰, 테블릿 및 클라우드는 물론 가 설치되어 있지 않은 PC 에서도 사용할 수 있습니다. 따라서 장소와 디바이스에 관계 없이 언제, 어디서나 문서를 확인하고 편집

Poison null byte Excuse the ads! We need some help to keep our site up. List 1 Conditions 2 Exploit plan 2.1 chunksize(p)!= prev_size (next_chunk(p) 3

View Licenses and Services (customer)

RHEV 2.2 인증서 만료 확인 및 갱신

歯Lecture2.PDF

Open GL

로거 자료실

Microsoft PowerPoint - lecture19-ch8.ppt

*2008년1월호진짜

(Microsoft PowerPoint - \301\24613\260\255 - oFusion \276\300 \261\270\274\272)

152*220

chap 5: Trees

Windows Server 2012

Microsoft Outlook G Suite 가이드

RVC Robot Vaccum Cleaner

»êÇÐ-150È£

PowerPoint 프레젠테이션

슬라이드 1

Microsoft PowerPoint - chap10-함수의활용.pptx

Oracle VM VirtualBox 설치 VirtualBox에서 가상머신 설치 가상머신에 Ubuntu 설치

서강대학교공과대학컴퓨터공학과 CSE4170 기초컴퓨터그래픽스기말고사 (2/8) 다음과같이설정되어있는데, cam.pos[0] = 0.0, cam.pos[1] = 0.0, cam.pos[2] = 500.0; 이때의 cam.naxis[] 벡터의세원소값을기술하라. Figure

마지막 변경일 2018년 5월 7일 ** 이항분포와 정규분포의 관계 ** Geogebra와 수학의 시각화 책의 3.2소절 내용임. 가장 최근 파일은 링크를 누르면 받아 보실 수 있습니다.

Microsoft PowerPoint - lecture16-ch8 [호환 모드]

C++ Programming

Microsoft PowerPoint - ch07 - 포인터 pm0415

<4D F736F F F696E74202D203137C0E55FBFACBDC0B9AEC1A6BCD6B7E7BCC72E707074>

Microsoft PowerPoint - web-part03-ch20-XMLHttpRequest기본.pptx

슬라이드 1

ActFax 4.31 Local Privilege Escalation Exploit

슬라이드 1

모수 θ의 추정량은 추출한 개의 표본값을 어떤 규칙에 의해 처리를 해서 모수의 값을 추정하는 방법입니다. 추정량에서 사용되는 규칙은 어떤 표본을 추출했냐에 따라 변하는 것이 아닌 고정된 규칙입니다. 예를 들어 우리의 관심 모수가 모집단의 평균이라고 하겠습니다. 즉 θ

<B3EDB9AEC0DBBCBAB9FD2E687770>

1장. 유닉스 시스템 프로그래밍 개요

Microsoft Word - cg09-final-answer.doc

6. 설치가시작되는동안 USB 드라이버가자동으로로드됩니다. USB 드라이버가성공적으로로드되면 Setup is starting( 설치가시작되는중 )... 화면이표시됩니다. 7. 화면지침에따라 Windows 7 설치를완료합니다. 방법 2: 수정된 Windows 7 ISO

쓰리 핸드(삼침) 요일 및 2405 요일 시간, 및 요일 설정 1. 용두를 2의 위치로 당기고 반시계방향으로 돌려 전날로 를 설정합니다. 2. 용두를 시계방향으로 돌려 전날로 요일을 설정합니다. 3. 용두를 3의 위치로 당기고 오늘 와 요일이 표시될 때까지 시계방향으로

Office 365 사용자 가이드

Microsoft PowerPoint - Practical performance_KR_3.ppt

Microsoft PowerPoint Predicates and Quantifiers.ppt

쉽게 풀어쓴 C 프로그래밍

서강대학교 공과대학 컴퓨터공학과 CSE4170 기초 컴퓨터 그래픽스 중간고사 (1/7) [CSE4170: 기초 컴퓨터 그래픽스] 중간고사 (담당교수: 임 인 성) 답은 연습지가 아니라 답안지에 기술할 것. 답 안지 공간이 부족할 경우, 답안지 뒷면에 기술 하고, 해당

12 강. 문자출력 Direct3D 에서는문자를출력하기위해서 LPD3DXFONT 객체를사용한다 LPD3DXFONT 객체생성과초기화 LPD3DXFONT 객체를생성하고초기화하는함수로 D3DXCreateFont() 가있다. HRESULT D3DXCreateFont

IP Cam DDNS 설정설명서(MJPEG) hwp

PowerPoint Presentation

윈도우시스템프로그래밍

Microsoft PowerPoint - chap13-입출력라이브러리.pptx

Łø·ŸÕ=¤ ¬ ÇX±xÒ¸ 06 - Èpº– 1

PowerPoint Template

SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES ActiveX 컴포넌트가이드 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone Fax

Vision Mission T F T F T F T

Transcription:

Created by Firejune at 2011/05/20, Last modified 2016/08/28 WebGL 레슨 5 - 텍스쳐에 대하여 다섯 번째 WebGL 레슨에 오신 것을 환영합니다. 이 학습은 "NeHe OpenGL의 여섯 번째 튜토리얼"을 바탕으로 하고 있습니다. 이번 레슨에서는 지금까지 만들었던 3D 오브젝트에 텍스처(Texture)를 입혀봅니다. - 별도로 준비된 이미지 파일로 물체의 표면을 덮는 것입니다. 이와 같은 작업을 통하여 믿을 수 없을 정도로 개체를 복잡해 보이게 할 수 있으며 3D장면을 더욱 디테일하게 만드는데 매우 유용하게 사용될 수 있습니다. 벽돌벽으로 이루어진 3차원 미로 게임을 만든다고 상상해 보세요. 벽돌 하나하나를 일일이 객체로 만들어 쌓고 싶지는 않으시겠죠? 당신은 분명히 밋밋한 객체를 만들고 벽돌 이미지를 붙여 대신할 것입니다. 다음 동영상은 WebGL을 지원하는 브라우저에서 이번 레슨의 결과물을 돌려본 결과입니다.

여기를 클릭하여 WebGL에서 작동하는 것을 확인해 보세요. 만약 WebGL이 갖춰지지 않은 환경이라면 레슨 0을 참고하세요. 이것이 어떻게 만들어졌는지 자세히 살펴봅시다. 시작에 앞서... 이 레슨은 충분한 자바스크립트 프로그래밍 지식이 있지만, 3D 그래픽 구현 경험이 없는 사람들을 대상으로 하고 있습니다. 그리고 가능한 한 빨리 자신만의 3D를 구사하여 결과물을 만들수 있도록 하는 것에 목적을 둡니다. 레슨에 사용된 예제에서 실재 구현된 코드를 분석하여 어떤 일이 일어나는지 알아보고 그것을 이해하여 스스로 응용할 수 있도록 하는 것입니다. 만약 이전의 레슨들을 학습하지 않았다면 먼저 학습하고 돌아오세요. 이전 레슨과의 차이점만을 소개하고 있으니까요. 이전과 동일하게 학습내용 중에는 버그 혹은 오류가 있을 수도 있습니다. 뭔가 잘못된 것을 발견하면 댓글로 알려주세요. 가능한 빨리 고치도록 하겠습니다. 여기에 사용된 예제의 소스코드를 얻는 방법은 두가지가 있습니다. 실제 예제가 작동하는 곳에서 "소스 보기"를 선택하거나, GitHub를 사용할 수 있다면 저장소에서 동일한 예제를 다운로드할 수 있습니다.(앞으로 학습할 예제들도 포함되어 있습니다.) 추천하는 방법은 두 번째로, 저장소에서 모두 가져온 다음 즐겨쓰는 텍스트 편집기에서 열어두고 학습하는 것입니다. 텍스쳐 로딩 - inittexture

텍스쳐를 입혀 질감을 표현하는 작동 원리는 3D개체의 점과 색상을 결정하는 특별한 방법이라고 인식하는 것입니다. 레슨 2를 떠올려 보면, 색상은 fragment schader에 의해 설정됩니다. 따라서 우리가 해야 할 일은 이미지를 읽어들이고 fragment shader로 보내주는 것입니다. fragment shader를 처리하는 과정에서 fragment에 사용되는 이미지 조각이 어떻게 작동하는지 알아야 하고, 알아낸 정보를 다시 내보내야 합니다. 그럼 텍스쳐를 로드하는 부분부터 시작해 봅시다. 이 처리는 페이지 하단부에 위치한 자바스크립트 프로세스가 시작되는 지점인 webglstart 함수에서 호출됩니다.(새로운 코드 부근에는 주석이 있습니다.) function webglstart() { var canvas = document.getelementbyid("lesson05-canvas"); initgl(canvas); initshaders(); inittexture(); // added gl.clearcolor(0.0, 0.0, 0.0, 1.0); inittexture 함수를 살펴봅시다. - 맨 위에서 1/3정도에 위치에 있습니다. 이것은 모두 새로운 코드입니다. var nehetexture; function inittexture() { nehetexture = gl.createtexture(); nehetexture.image = new Image(); nehetexture.image.onload = function() { handleloadedtexture(nehetexture)

} nehetexture.image.src = "nehe.gif"; } 텍스쳐를 유지하기 위해 전역 변수를 만듭니다. 당연히, 단 하나의 텍스쳐만을 이용하고 전역 변수를 사용해야 하는 것은 아닙니다. 여기에서는 이해를 돕기위해 이같이 사용했을 뿐입니다. gl.createtexture을 통해 텍스쳐에 대한 참조를 만들어 앞서 작성한 전역 변수에 할당한 다음 텍스쳐에 첨부되는 자바스크립트 이미지 개체를 만들어 새로운 속성에 저장합니다. 되집어 보자면, 특정 개체에 필드를 자유룝게 설정할 수 있다는 자바스크립트의 장점을 이용한 것입니다. 이 텍스쳐 객체는 기본적으로 이미지 필드가 없지만 이런식으로 추가해서 나중에 편리하게 사용할 수 있습니다. 텍스쳐 가공 - handleloadedtexture 다음 과정에서는 이미지 개체에 저장될 실제 이미지를 로드하는 것입니다. 사전 준비 과정으로 콜백 함수를 이미지 개체에 추가합니다. 이 함수는 이미지가 완전히 로드가 완료 되는 시점에 호출됩니다. 따라서 먼저 선언해 두는 것이 안전합니다. 이제 이미지 개체의 src속성을 지정하는 것으로 마무리합니다. 이미지의 로딩은 비동기적으로 수행됩니다. - 그렇기 때문에 src속성에 대한 설정이 즉시 완료됩니다. 그리고 브라우저는 별도의 스레드로 웹서버로 부터 이미지를 로드합니다. 로드가 완료되면 등록한 콜백 함수가 호출되고, 이에 의해서 handleloadedtexture가 호출되는 것입니다.

function handleloadedtexture(texture) { gl.bindtexture(gl.texture_2d, texture); gl.pixelstorei(gl.unpack_flip_y_webgl, true); gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.rgba, gl.unsigned_byte, texture.image); gl.texparameteri(gl.texture_2d, gl.texture_mag_filter, gl.nearest); gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.nearest); gl.bindtexture(gl.texture_2d, null); } 가장 먼저 할 일은 WebGL의 텍스쳐가 "current"텍스쳐라고 알려주는 것입니다. WebGL의 텍스쳐 함수는 인수로 대상을 지정하는 것이 아니라, 모두 "current"텍스쳐에서 수행됩니다. bindtexture가 current를 지정하는 함수입니다. 이것은 이미 살펴본 바 있는 gl.bindbuffer 때와 똑같네요. 이제 WebGL의 텍스쳐로 로드된 이미지를 세로 방향으로 회전하라고 지시합니다. 이것을 하는 이유는 좌표계에 차이가 있기 때문입니다. 이번 텍스쳐 좌표계는 일반적인 수학에서 사용하는 것과 마찬가지로, 세로는 위쪽 방향으로 증가합니다. 이것은 정점 좌표로 사용하는 X, Y, Z 좌표와 일치합니다. 이와는 반대로, 대부분의 그래픽 시스템 - 예를 들어 텍스쳐 이미지에 GIF 형식의 이미지를 사용하면 세로축의 아래 방향이 증가합니다. 가로축은 모두 동일한 좌표계입니다. 이 세로축의 차이는 WebGL의 관점에서 텍스쳐에 사용되는 GIF 이미지는 이미 세로 방향으로 전환되고 있기 때문에 "unflip"을 지정할 필요가 있다는 것을 의미합니다.(Ilmari Heikkinen씨의 댓글 덕분에 명확하게 되었습니다)

다음 단계에는 방금 로드된 이미지를 teximage2d 함수에서 그래픽 카드의 텍스쳐 공간에 업로드하는 것입니다. 인수를 사용하여 어떤 종류의 이미지를 사용하거나, 디테일 수준(LOD, level of detai - 다음 레슨에서 설명합니다), 어떠한 형식으로 그래픽 카드에 저장할 것인지(다시 말하지만 다음 레슨에서 설명할께요.) 또한 이미지의 각 "channel" 크기(빨강, 녹색, 파랑을 저장하는데 사용하는 데이터 타입) 그리고 이미지 자체을 지정합니다. 이후로 계속되는 두 라인에서 텍스쳐에 특별한 스케일링 파라미터를 설정합니다. 첫 번째로 텍스쳐 이미지의 크기로 화면에 얼마나 크게 표시하는 지를 지정하여 WebGL에 전달합니다. 다시 말하자면, 어떻게 스케일 할지에 대한 힌트를 주는 것입니다. 다음 라인 역시 이와 비슷한 것으로, 축소하는 경우에 대한 것입니다. NEAREST는 기존의 이미지를 그대로 사용하기 때문에 가장 매력없는 스케일링 방법입니다. 가까이에서 보면 아주 뭉툭해(blocky) 보이죠. 그러나 이 방법은 느린 시스템에서도 빠르게 작동한다는 장점이 있습니다. 다음 레슨에서는 다른 스케일링 방법들을 알아보겠습니다. 각각의 성능과 외형의 품질 비교할 수 있을 것입니다. 여기까지 완료되면 current texture를 null로 설정합니다. 반드시 필요한 일은 아니지만, 작업에 사용한 후 스스로 정리한다는 의미에서 좋은 습관입니다. 텍스쳐 버퍼 추가 - initbuffers 이제 텍스쳐 로드와 관련된 모든 코드의 작성은 끝났습니다. 다음은

initbuffers를 살펴 보도록합시다. 여기에는 레슨 4에 존재했던 피라미드에 관한 부분을 모두 제거했습니다. 더 흥미로운 사실은 큐브 vertex colour buffer가 새로운 것으로 대체되는 것입니다 - texture coordinate buffer가 등장하죠. cubevertextexturecoordbuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, cubevertextexturecoordbuffer); var texturecoords = [ // Front face 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, // Back face 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 0.0, 0.0, // Top face 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, // Bottom face 1.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // Right face 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 0.0, 0.0,

// Left face 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, ]; gl.bufferdata(gl.array_buffer, new Float32Array(textureCoords), gl.static_draw); cubevertextexturecoordbuffer.itemsize = 2; cubevertextexturecoordbuffer.numitems = 24; 이렇게 손보았더니 이 코드를 읽기가 참 편안해 졌군요. 이것은 정점마다 각 속성을 버퍼에 설정하고 있다는 것을 알 수 있습니다. 정점마다 2개의 값을 가진다고 말할수 있죠. 이 텍스쳐 좌표가 의미하는 것은 데카르트(Cartesian) 좌표(x, y)로 텍스쳐 상의 어느 지점에 정점이 위치하는지 지정하는 방법입니다. 텍스쳐의 크기는 표준화되기 때문에 크기는 높이 1, 너비 1이고 (0,0)이 왼쪽 (1,1)이 오른쪽 상단에 해당합니다. initbuffers의 변화는 이것 뿐입니다. 이제는 drawscene의 변화를 살펴볼 차례입니다. 우리가 이 레슨에서 가장 흥미를 느껴야하는 변화는 텍스쳐를 사용하도록 변경하는 부분입니다. 이 함수는 피라미드와 관련한 코드를 삭제한 것과 이에 따른 큐브의 회전 방법이 변경된 것에 대한 몇 가지 간략한 변동사항은 여러분이 직접 살펴 보도록 하세요. 이 함수의 변경된 부분에 대해서는 자세히 다루지 않도록 하겠습니다. var xrot = 0; // changed var yrot = 0; // changed var zrot = 0; // changed

function drawscene() { gl.viewport(0, 0, gl.viewportwidth, gl.viewportheight); gl.clear(gl.color_buffer_bit gl.depth_buffer_bit); mat4.perspective(45, gl.viewportwidth / gl.viewportheight, 0.1, 100.0, pmatrix); mat4.identity(mvmatrix); mat4.translate(mvmatrix, [0.0, 0.0, -5.0]); // changed mat4.rotate(mvmatrix, degtorad(xrot), [1, 0, 0]); // changed mat4.rotate(mvmatrix, degtorad(yrot), [0, 1, 0]); // changed mat4.rotate(mvmatrix, degtorad(zrot), [0, 0, 1]); // changed gl.bindbuffer(gl.array_buffer, cubevertexpositionbuffer); gl.vertexattribpointer(shaderprogram.vertexpositionattribute, cubevertexpositionbuffer.itemsize, gl.float, false, 0, 0); animete함수에도 xrot, yrot, zrot를 갱신하는 프로세스에 대응하는 변화가 있지만 설명하지 않습니다. 자 이제부터 본론입니다. 텍스쳐에 관한 부분을 살펴봅시다. initbuffers함수에서 텍스쳐 좌표를 포함하는 버퍼를 설정했기 때문에 쉐이더에서 이것을 이용할 수 있도록 다음과 같이 적합한 속성을 바인드해 줄 필요가 있습니다. gl.bindbuffer(gl.array_buffer, cubevertextexturecoordbuffer); gl.vertexattribpointer(shaderprogram.texturecoordattribute, cubevertextexturecoordbuffer.itemsize, gl.float, false, 0, 0);...이제 WebGL은 각 버텍스가 텍스쳐의 어느 부분을 사용할지를

전달했습니다. 좀 전에 가져온 텍스쳐를 이용하는 것을 전달하고 큐브를 그립니다. gl.activetexture(gl.texture0); // added gl.bindtexture(gl.texture_2d, nehetexture); // added gl.uniform1i(shaderprogram.sampleruniform, 0); // added gl.bindbuffer(gl.element_array_buffer, cubevertexindexbuffer); setmatrixuniforms(); gl.drawelements(gl.triangles, cubevertexindexbuffer.numitems, gl.unsigned_short, 0); 여기서 일어난 일은 다소 복잡합니다. WebGL은 gl.drawelements와 같은 기능의 함수 호출에 대하여 최대 32개까지 텍스쳐를 사용할 수 있고 이들은 TEXTURE0에서 TEXTURE31로 넘버링이 되어 있습니다. 처음 두 줄은 좀 전에 로드된 텍스쳐를 TEXTURE0으로 사용할 것으로 선언하고, 세 번째 줄에 쉐이더의 uniform 변수에 0이라는 번호를 전달합니다.(uniform 변수는 다른 메트릭스를 위해 이용하는 경우와 마찬가지로 initshader의 쉐이더에서 보관하고 있습니다) 여기에는 텍스쳐 0을 사용하여 쉐이더에 전하고 있는 것입니다. 이 값이 어떻게 사용되는지에 대한것은 나중에 알아보겠습니다. 어쨌든, 이 세 줄이 실행되면 계속할 준비가 된 것입니다. 큐브를 형성하기 위한 삼각형을 그리는 일은 이전과 동일한 코드를 실행합니다. 텍스쳐 쉐이더 이제, 남은 설명이 필요한 새로운 코드는 쉐이더입니다. 먼저 vertex

shader를 살펴 보도록합니다. attribute vec3 avertexposition; attribute vec2 atexturecoord; // added uniform mat4 umvmatrix; uniform mat4 upmatrix; varying vec2 vtexturecoord; // added void main(void) { gl_position = upmatrix * umvmatrix * vec4(avertexposition, 1.0); vtexturecoord = atexturecoord; // added } 이것은 레슨 2에서 색상지정과 관련하여 작업을 수행했던 적이 있는 vertex shader와 아주 비슷합니다. 여기에서 행해지고 있는 것은 색상 대신 텍스쳐 좌표를 정점마다 속성으로부터 받고 varying변수에 출력하고 있을 뿐입니다. 모든 버텍스에 대하여 처리되도록 호출되면, WebGL은 fragment(기본적으로 모든 픽셀을 일일이 처리하죠)를 위해 정점 사이의 출력값을 선형으로 보간(linear interpolation)합니다. - 레슨 2에서 색상을 다룬던 그대로 말이죠. 따라서 (1,0)의 텍스쳐 좌표 (0,0)텍스쳐 좌표를 가진 정점 가운데 fragment는 텍스쳐 좌표는 (0.5,0)를 얻게 되는 것입니다. (0,0)과 (1,1)사이에서 (0.5,0.5)를 얻을 것입니다. 다음은 fragment shader입니다. #ifdef GL_ES precision highp float;

#endif varying vec2 vtexturecoord; //added uniform sampler2d usampler; //added void main(void) { gl_fragcolor = texture2d(usampler, vec2(vtexturecoord.s, vtexturecoord.t)); //added } 여기에서 보완된 텍스쳐 좌표를 꺼냅니다. 또한 쉐이더에서 텍스쳐를 나타내는 sampler 유형의 값을 가지고 있습니다. drawscene에서 텍스쳐는 gl.texture0에 바인드 되었고 uniform변수인 usampler는 0으로 설정되어 있습니다. 이 sampler는 텍스쳐를 나타냅니다. 쉐이더를 만드는 것은 texture2d 함수를 사용하여 원하는 색상을 텍스쳐 좌표를 사용하여 텍스쳐에서 추출하는 것입니다. fragment를 위한 색상을 얻어내면 완료된 것입니다. 화면에 텍스쳐가 입혀진 개체가 나타나고 있습니다. 이번 레슨은 여기까지입니다. 이 레슨에서는 WebGL에서 3D 개체에 텍스쳐를 입히는 방법으로 이미지를 로드한 다음 WebGL에 텍스쳐를 사용한다는 사실을 알리고, 개체에 텍스쳐 좌표를 만들어 주고, 쉐이더에서 텍스쳐 좌표를 사용하는 것에 대하여 배웠습니다. 만약 질문이나 내용의 정정이 필요하다면 댓글로 남겨주세요. 다음 레슨에서는 Web 페이지를 보고있는 사람이 직접 조작할 수 있도록 키보드 입력을 통해 3D화면을 이동하는 방법에 대하여 다룹니다. 레슨 6을

학습하면 사용자가 직접 큐브를 회전하거나 확대, 축소 등을 할 수 있도록 할 수 있습니다. 더불어 WebGL에 텍스쳐의 스케일링을 위해 WebGL에게 던져주는 힌트를 조정해 봅니다. 이 문서의 원본은 WebGL Lesson 5 introducing textures입니다. 최근들어 이곳저곳 신경쓸 일들이 급증해서 통 블로그에 시간을 할애하지 못하고 있네요. 역시, 관리직은 저랑 잘 안맞는단 말예요. Powered by TCPDF (www.tcpdf.org)