본문 바로가기

Graphics/webgl

[webgl] Hello World 중요한것은 버텍스 쉐이더와 프래그먼트 쉐이더 그리고 GPU는 어떤함수를 호출해서 이 두개의 함수를 호출. 버텍스 쉐이터: 공간좌표 프레그먼트쉐이더: 색상 버텍스 쉐이더 (GLSL) 함수를 작성해보자 결국 GPU가 이것을 호출하니깐, 버텍스 쉐이터 #version 300 es // 이거있어야 WebGL2 // GPU가 버텍스쉐이더를 실행하는데 사용되는 데이터 // (는 버퍼를 통해 받아서 여기에 저장 해놓을거임) in vec4 a_position; // 대충 점의 위치임 // 모든 쉐이더는 main 함수를 가지고 있습니다. void main() { // gl_Position는 버텍스 쉐이더의 미리정의되어 있는 내장 변수입니다. // 여기에 값을 넣어주면 버텍스 쉐이더에서 쓸 준비 끝! gl_Position.. 더보기
[webgl] 기초 이젠 WebGL 하면 대부분 WebGL2 말하는거임 WebGL은 GPU로 돌림(내장GPU 또는 외장 GPU) WebGL은 GPU에서 GLSL 타입으로 두개의 함수를 돌리면서 작동함 vertex shader: 점, 선, 원시형태(primitives)를 그림(rasterize) fragment shader: 픽셀에 색상을 칠함(계산함) GPU에서 GLSL로 작성된 어떤 함수를 호출하여 저 위에 두개의 함수(합쳐서 프로그램이라고 함)를 호출 gl.drawArrays() { run vertex shader () run fragment shader () } 뭐 대충 이런느낌인듯 GPU에서 실행하니깐 이 함수들의 자원(데이터, 변수) 들도 GPU에 있어야함 GPU에 데이터를 제공하는 법 == 쉐이더(함수)가 데이터.. 더보기