Variable Types - bool: boolean - int: signed integer - float: floating point scalar - vec2, vec3, vec4: n-dimensional float vector - bvec2, bvec3, bvec4: n-dimensional boolean vector - ivec2, ivec3, ivec4: n-dimensional integer vector - mat2, mat3, mat4: 2x2, 3x3, 4x4 float matrix - sampler2D: access a 2D texture - samplerCube: access a cube mapped texture Kind of Variables Vertex Shader (VS) Ja..

WebGL에서 다각형(사각형, 오각형, ...)은 여러 삼각형들이 합쳐진 형태로 그려낼 수 있다. 삼각형을 붙이는 방법에는 LINE_STRIP, LINE_LOOP, TRIANGLE_FAN, TRIANGLE_STRIP이 있다. 차례대로 사용해보며 각각이 어떻게 동작하는지 알아보고자 한다. 먼저 html 코드는 아래와 같다. 이전 글에선 drawTriangle() 함수를 실행시키도록 하고 해당 함수 내에서 모든 작업을 진행했으나, 하나의 캔버스에 여러 도형을 그리는 경우 각각의 도형을 그리는 함수를 따로 두어 코드를 간결하게 만들었다. JS 코드는 아래와 같다. 먼저 LINE_STRIP을 사용해보았다. var canvas; var gl; var squareProgram function init() { can..

WebGL은 JavaScript API이다. 즉, html 페이지에 embed할 수 있다는 뜻이다. WebGL은 GPU를 통한 hardware acceleration에 의존한다. https://get.webgl.org/ 사이트에 접속하였을 때 위와 같은 화면이 나온다면 사용하는 브라우저가 JavaScript를 지원함을 의미한다. (안하는 브라우저도 있을까?) WebGL을 이용하여 삼각형을 만들어보자. webgl-utils.js, initShaders.js, MV.js 파일은 https://gist.github.com/Carla-de-Beer/10ad7c7309fad48d94df 에서 구할 수 있다. width 512px, height 512px인 WebGL canvas를 생성한다. js 파일을 생성하고,..