![]()
브라우저의 주요 기능 - 사용자가 선택한 자원(HTML, PDF, Image 등)을 서버에 요청하고 브라우저에 표시하는 것을 말함 - 브라우저는 HTML, CSS에 따라 HTML을 해석하고 표시 브라우저의 기본 구조 1. 사용자 인터페이스 - 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분 2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어 3. 렌더링 엔진 - 요청한 콘텐츠를 표시, HTML 요청시 HTML과 css 파싱해서 표시 4. 통신 - http 요청과 같은 네트워크 호출에 사용 5. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그린다. os 사용자 인터페이스 체계 사용 6. 자바스크립트 해석기 7. 자료 저장소 - 자료 저장, 쿠키를 저장하는 것과 같이 ..
초기 코드 완성 코드 aVertexPosition은 3개의 원소로 구성된 벡터 Attribute: WebGL API에서 버텍스 셰이더로 데이터를 보내기 위해 사용하는 특별 입력 변수 vec4 좌표계 셰이더에서 사용하는 vector type GPU에 렌더링에 필요한 셰이더를 만들고 업로드를 위해서는 셰이더 객체를 만들고 객체에 로드 후 컴파일 + 링크 필요
![]()
WebGL이란 Web Graphics Library의 약자로 Web상에서 2D 및 3D 그래픽을 렌더링하기 위한 로우 레벨 Javascript API를 말함. OpenGL ES 2.0을 기반으로 브라우저 엔진에 내장된 HTML5 Canvas 요소 위에 그려짐. Canvas는 처음부터 3D 그래픽을 렌더링하지는 못했음. 처음에는 일부 위젯과 애플 운영체제의 애플리케이션에서 2D 그래픽 렌더링을 위해 공개되었었음. WebGL이 등장 이후부터 3D 게임이나 고급 3D 그래픽 애플리케이션을 만들 수 있음. WebGL 장점 - 로열티 없이 누구나 사용 가능 - 렌더링 가속화를 지원하는 그래픽 하드웨어를 활용 - 별도의 플러그인이 필요 없으며, 웹 브라우저에 내장되어 실행 - OpenGL ES 2.0을 기반으로 하..
![]()
티스토리에 코드를 넣을때 불편한 점이 매우 많음따라서 코드 양이 많을 때 이를 예쁘게 보이게 하는 방법을 찾다 보니 syntax hightlighter라는 것이 눈에 들어옴syntax highliter의 공식 사이트는 http://alexgorbatchev.com/SyntaxHighlighter/ 이다.여기에서 다운로드가 아닌 hosting 으로 highlighter를 적용해본다.아래쪽에 내려가보면 이렇게 되어있다. 적용 방법1. 티스토리 관리자 페이지 접속2. HTML/CSS 편집 클릭3. header 부분에 다음과 같은 부분 입력 입력 후 각 글마다 html모드로 넘어간 후내용이렇게 사용한다.
