WebGL

웹에서 사용할 수 있는 그래픽 라이브러리.

OpenGL을 기반하여 HTML Canvas 요소를 통해 웹 표준에 통합된다.

WebGL2

GPU에서 실행되는 코드를 제공해만 합니다. 그 코드는 두 개 함수 쌍 형태로 제공되어야 하고, 각각의 함수는 정점 셰이더(vertex shader)와 프래그먼트 셰이더(fragment shader)라고 불립니다. 각각은 매우 엄격한 타입(strictly-types)을 가지는 C/C++과 유사한 GLSL(GL Shader Language)로 작성되어야 합니다.

WebGL2는 두 가지 언어로 개발한다.

canvas와 context를 통해 WebGL2 API와 커뮤니케이션하는 Javascript 코드와:

const canvas = document.querySelector("canvas")
const gl = canvas.getContext("webgl2")

GLSL이라는 언어로 셰이더와 프라그먼트를 작성하는 코드로 이루어진다:

##version 300 es

precision highp float;

uniform vec4 u_color;

out vec4 outColor;

void main() {
  outColor = u_color;
}

GLSL 코드는 JS 코드에서 template string을 통해 작성하거나