diff --git a/README.md b/README.md index fe4b4b6d9a844baa5ac6be37fb05e5bb39c73445..333c19e375c3323c2456fc53ef6a2b95453ce0d1 100644 --- a/README.md +++ b/README.md @@ -39,10 +39,10 @@ ## Moving from WebGL1 to WebGL2 -1. `getContext`를 호출할 때 `webgl` 대신 `webgl2`를 사용한다. +### `getContext`를 호출할 때 `webgl` 대신 `webgl2`를 사용한다. `var gl = someCanvas.getContext("webgl2");` -2. WebGL1의 많은 확장들이 WebGL2 표준에 포함되어 확장을 덜 사용해도 된다. +### WebGL1의 많은 확장들이 WebGL2 표준에 포함되어 확장을 덜 사용해도 된다. WebGL1: ```javascript var ext = gl.getExtension("OES_vertex_array_object"); @@ -55,9 +55,9 @@ if (!ext) { WebGL2: `var someVAO = gl.createVertexArray();` -3. `GLSL 300 es` 사용하기 +### `GLSL 300 es` 사용하기 사용하는 쉐이더를 GLSL 3.00 ES로 업그레이드 하면 좋다. 그러기 위해선 쉐이더 선언의 첫 줄이 `#version 300 es`면 된다. 반드시 첫 줄이여야 하기 때문에 주석이나 개행이 이루어지면 안된다. -안 좋은 예: + ```javascript // BAD!!!! +---There's a new line here! // BAD!!!! V @@ -65,28 +65,27 @@ var vertexShaderSource = ` #version 300 es .. `; -``` -좋은 예: -```javascript +// GOOD var vertexShaderSource = `#version 300 es ... `; ``` - 1. `attribute`을 `in`으로 바꾸기 - 2. `varying`을 `in/out`으로 바꾸기 - 3. `gl_FragColor` 대신 원하는 변수 사용 가능 - 4. `texture2D`을 `texture`로 바꾸기 - ```javascript - // WebGL1 - vec4 color1 = texture2D(u_some2DTexture, ...); - vec4 color2 = textureCube(u_someCubeTexture, ...); - - // WebGL2 - vec4 color1 = texture(u_some2DTexture, ...); - vec4 color2 = texture(u_someCubeTexture, ...); - ``` - + +#### `attribute`을 `in`으로 바꾸기 +#### `varying`을 `in/out`으로 바꾸기 +#### `gl_FragColor` 대신 원하는 변수 사용 가능 +#### `texture2D`을 `texture`로 바꾸기 +```javascript +// WebGL1 +vec4 color1 = texture2D(u_some2DTexture, ...); +vec4 color2 = textureCube(u_someCubeTexture, ...); + +// WebGL2 +vec4 color1 = texture(u_some2DTexture, ...); +vec4 color2 = texture(u_someCubeTexture, ...); +``` + ## License MIT License