갴발자 디찌 갴발자 디찌

웹지엘 인스펙터 대부분 javascript 개발자들은 크롬 개발자 도구를 이용하여 개발을 진행한다. 그러나 이러한 일반적인 도구들은 일반적인 웹 개발에 적합하고, 웹지엘에 특화되어있지는 않다. 웹지엘을 위해 특별히 제작된 도구가 바로 웹지엘 인스펙터이다. 이것은 Direct3D의 PIX나 오픈지엘의 gDEBugger와 비슷한 기능을 제공하는 웹지엘 디버거다. benvanik.github.io/WebGL-Inspector/ WebGL Inspector An advanced WebGL debugging toolkit About WebGL Inspector is a tool inspired by gDEBugger and PIX with the goal of making the development of adv..

웹지엘이 오류 발생을 감지하면 ,내장된 오류 코드를 생성한다. 오류가 생성되면 다음과 같은 메소드를 호출할때까지 다른 오류는 더이상 생성되지 않는다. gl.getErros() 위의 메소드는 내장된 오류를 조회하는 쿼리이다. 이것은 현재 오류코드를 반환하여 오류 상태를 gl.NO_ERROR로 재설정한다. 이후에는 새로운 오류가 생성될수 있다. 웹지엘 오류 코드 설명 gl.NO_ERROR 마지막 gl.getError() 호출 후에 어떤 새로운 오류도 생성되지 않음 gl.INVALID_ENUM GLenum 인자값의 범위를 초과함. gl.drawArrays()는 원래 gl.TRIANGLES와 같은 적합한 enum 값을 인자로 해야하는데 gl.COLOR_BUFFER_BIT와 같이 다른 타입의 값을 인자로 해 호출..

WEBGL을 이용하여 삼각형을 만들어보자 index.html index.html 파일을 생성하고 그안에 body와 canvas를 만들자. webgl은 canvas안에 그림을 그린다. body 태그안에 정의한 onload이벤트 핸들러는 webglstart()메서드를 호출한다. 현재는 webglstart함수가 없기에 에러가 뜰것이다. onload이벤트는 유저가 브라우저를 통해 웹 페이지에 진입하고 모든 소스 코드의 내용을 완전히 로딩하면 onload이벤트를 시작한다. canvas안에 id 값을 넣어줌으로써 자바스크립트 코드로 접근이 용이하도록 만들어 놓는다. script문을 열고 webglstart 함수를 생성! document.getElementById를 통해 일전에 canvas에 넣어놓았던 id값을 가져..

웹지엘 그래픽 파이프라인 웹지엘 그래픽 파이프라인은 아래 순서와 같다. (웹 애플리케이션 HTML + CSS + 자바스크립트 + 셰이더 소스코드 + 3차원 모델링 데이터) ->웹지엘(자바스크립트 API) -> 버텍스 셰이더 -> 프리미티브 어셈블리 -> 레스터화 -> 프래그먼트 셰이더 -> 가위테스트 ->멀티샘플 프래그먼트 연산 ->스텐실 테스트 -> 깊이 버퍼 테스트 -> 블렌딩 -> 디더링 ->그리기 버퍼 이중 사실 웹지엘 프로그래머에게 가장 중요한 단게는 버텍스 셰이더와 프래그먼트 셰이더이다. 버텍스 셰이더 (웹 애플리케이션 HTML + CSS + 자바스크립트 + 셰이더 소스코드 + 3차원 모델링 데이터) ->웹지엘(자바스크립트 API) -> 버텍스 셰이더 -> 프리미티브 어셈블리 -> 레스터화 -..

WebGL 웹지엘이란 웹상에서 고급 3D 그래픽구현에 필요한 응용 프로그래밍 인터페이스이다. 오픈지엘 ES 2.0을 기반으로 HTML과 자바스크립트를 이용해 ES와 유사한 렌더링 기능을 제공하며, 웹지엘의 렌더링 결 과는 애플에 의해 처음 선보여 웹킷 오픈소스 브라우저 엔진에 내장된 HTML5 캔버스 엘리먼트에 그려진다. 그래픽 API 설계 그래픽 API는 2개의 방법이 존재 웹지엘은 즉시 모드 API를 사용하고있음. 즉시 모드 API 즉시 모드 API는 장면(scene)에 변화 여부에 관계없이 매 프레임마다 전체 장면이 다시 그려진다. API를 노출하는 그래픽 라이브러리는 장면에 그려지는 내부 모델에 대한 어떠한 정보도 유지하지 않는다. 대신에 애플리케이션이 메모리에 해당 정보를 유지하며, 이는 애플리..