BaeBox

Spector.js : WebGL 개발자 도구의 일종. 읽던 책에서 WebGL Inspector라는 툴을 소개해주어서 찾아봤으나, 없어졌는지 도저히 찾을 수가 없더라. 그래서 비슷한거라도 있겠지 하면서 찾아보니까 이게 나왔다. 좋은 것 같다. 하이라이트 되어있는 Mesh들은 클릭하면 각각의 Shader 소스코드를 볼 수 있다. 요기서 받을 수 있다. https://spector.babylonjs.com/#maindemossection Spector.js demos & documentation SpectorJS is an Open source toolking helping to Explore and Troubleshoot your WebGL scenes with ease. spector.babylonjs...

Program : (VertexShader + FragmentShader)가 컴파일된 WebGLShader의 조합. 생각컨대, WebGL의 실행단위라고 이해해도 무방할 것 같다. WebGL 의 실행순서는 다음과 같다. Program 생성 Program에 (컴파일된) Shader 붙임(attach). Program 링크. Program 실행(렌더링) 아래 링크를 꼭 보길 바란다. Smallest GLSL을 보면 군더더기 없이 해당 내용에 대해 볼 수 있다. WebGL이 직관적이지 않은 형태를 띄고 있어 구조를 이해하는데 꽤 오랜 시간이 필요했는데, 정말 감사하게도 아래와 같은 사이트가 있다. https://webglfundamentals.org/webgl/lessons/resources/webgl-stat..

Shader : 렌더링 효과를 계산하는 명령어. VertexShader : 각 정점의 위치를 계산하는 Shader FragmentShader : 정점들을 이어 선으로 만들었을시 생성되는 면들의 색을 채울 색을 계산하는 Shader. 즉, pixel 그리는 Shader 위 이미지는 Vertex Shader 의 예제이고 아래는 Fragment Shader이다. 위 이미지들을 보면 알겠지만, Vertex Shader의 gl_Position은 정점의 위치를 결정하는 변수, Fragment Shader는 gl_FragmentColor는 면의 색상을 결정하는 변수라는 것을 알 수 있다. 즉, Vertex Shader 와 Fragment Shader의 궁극적인 목적은 gl_Position과 gl_FragmentCol..

clip coordinate(clip space) : clipping에 사용되는 그래픽 파이프라인의 좌표계. 표기단위만 다를 뿐, pixel 좌표 비슷한거다. * clipping : 정의된 영역 내에서 렌더링을 선택적으로 활성화/비활성화 하는 방법.

WebGL : 웹 기반의 그래픽 라이브러리 openGL 같은 녀석인데, 웹에서 동작한다고 생각하면 된다. 엄밀히 정의하자면 'Web 기반의 Rasterization 엔진' 이라고 보면 된다. 매우 쉽게 말하면 그냥 점찍는 툴이다. 반드시 webGL이 필요한게 아니라면 어지간하면 Three.js 쓰는게 낫다. * raster image : 비트맵(bitmap) * Rasterization : 비트맵화(bitmap化) 아래 링크에서 web-gl을 배울 수 있다. https://webglfundamentals.org/webgl/lessons/ko/ WebGL Fundamentals Learn WebGL from the ground up. No magic webglfundamentals.org https://d..