이 명세는 HTML 5 canvas 요소 [CANVAS]를 위한 추가 렌더링 컨텍스트와 지원 객체들을 설명한다. 이 컨텍스트는 OpenGL ES 2.0 API에 밀접하게 부합하는 API를 사용하여 렌더링할 수 있게 한다.
이 문서는 편집자 초안이다. 진행 중인 작업 이외의 것으로 이 문서를 인용하지 말아야 한다.
이 명세에 대한 공개 논의는 [email protected] 메일링 리스트에서 환영한다 (안내, 아카이브).
명세 또는 그 적합성 테스트에 대한 버그는 이슈 트래커에 제출하기 바란다. Github 저장소에 대한 풀 리퀘스트도 환영한다.
WebGL™은 웹을 위해 설계된 immediate mode 3D 렌더링 API이다. 이는 OpenGL® ES 2.0에서 파생되었으며, 유사한 렌더링 기능을 제공하지만 HTML 컨텍스트에서 제공한다. WebGL은 HTML Canvas 요소를 위한 렌더링 컨텍스트로 설계되었다. HTML Canvas는 웹 페이지에서 프로그램 방식의 렌더링을 위한 목적지를 제공하며, 서로 다른 렌더링 API를 사용해 그 렌더링을 수행할 수 있게 한다. Canvas 명세의 일부로 설명되는 그러한 인터페이스는 2D canvas 렌더링 컨텍스트인 CanvasRenderingContext2D뿐이다. 이 문서는 또 다른 그러한 인터페이스인 WebGLRenderingContext를 설명하며, 이는 WebGL API를 제공한다.
API의 immediate mode 특성은 대부분의 웹 API와 다른 점이다. 3D 그래픽의 많은 사용 사례를 고려하여, WebGL은 어떤 사용 사례에도 적용할 수 있는 유연한 프리미티브를 제공하는 방식을 선택한다. 라이브러리는 WebGL 위에 특정 영역에 더 맞춤화된 API를 제공할 수 있으며, 이에 따라 WebGL에 개발을 가속하고 단순화할 수 있는 편의 계층을 추가할 수 있다. 그러나 OpenGL ES 2.0에서 유래했기 때문에, 현대 데스크톱 OpenGL 또는 OpenGL ES 2.0 개발에 익숙한 개발자가 WebGL 개발로 전환하는 것은 비교적 수월해야 한다.
이 문서에 설명된 많은 함수에는 OpenGL ES man 페이지로 연결되는 링크가 포함되어 있다. 이러한 페이지가 OpenGL ES 2.0 명세 [GLES20]와 일치하도록 모든 노력을 기울이지만, 오류가 포함될 수 있다. 모순이 있는 경우 OpenGL ES 2.0 명세가 최종 권위를 가진다.
이 문서의 나머지 섹션은 OpenGL ES 2.0 명세와 함께 읽도록 의도되어 있다 (이 글을 쓰는 시점에는 2.0.25이며, Khronos OpenGL ES API Registry에서 이용할 수 있다). 별도로 명시하지 않는 한, 각 메서드의 동작은 OpenGL ES 2.0 명세에 의해 정의된다. 이 명세는 상호 운용성 또는 보안을 보장하기 위해 OpenGL ES 2.0과 다를 수 있으며, OpenGL ES 2.0이 구현 정의로 남겨둔 영역을 정의하는 경우가 많다. 이러한 차이점은 WebGL과 OpenGL ES 2.0의 차이점 섹션에 요약되어 있다.
WebGL API를 사용하기 전에, 작성자는 아래에 설명된 대로 주어진
HTMLCanvasElement [CANVAS] 또는
OffscreenCanvas [OFFSCREENCANVAS]에 대한
WebGLRenderingContext 객체를 얻어야 한다. 이 객체는
OpenGL 상태를 관리하고 드로잉 버퍼에 렌더링하는 데 사용되며,
이 드로잉 버퍼는 컨텍스트 생성 시점에 생성되어야 한다.
각 WebGLRenderingContext에는 생성 시 설정되는
연관된 canvas가 있으며, 이는
canvas [CANVAS] 또는 offscreen
canvas [OFFSCREENCANVAS]이다.
각 WebGLRenderingContext에는 생성 시
WebGLContextAttributes 객체에
설정되는 컨텍스트 생성 매개변수가 있다.
각 WebGLRenderingContext에는 드로잉 버퍼가 생성될 때마다
WebGLContextAttributes 객체에
설정되는 실제 컨텍스트 매개변수가 있다.
각 WebGLRenderingContext에는 처음에는 설정되지 않은
webgl 컨텍스트 상실 플래그가 있다.
canvas 요소 또는 offscreen canvas 객체의
getContext() 메서드가 contextId webgl
[CANVASCONTEXTS]에 대해 새 객체를 반환해야 하는 경우,
사용자 에이전트는 다음 단계를 수행해야 한다:
WebGLRenderingContext 객체 context를 생성한다.
getContext() 메서드와 연관된 canvas 또는 offscreen
canvas로 둔다.
WebGLContextAttributes 객체 contextAttributes를 생성한다.
getContext()가 두 번째 인수 options와 함께 호출된 경우,
contextAttributes의 속성을 options에 지정된 값에서 설정한다.
WebGLContextAttributes 객체 actualAttributes를 생성한다.
canvas 컨텍스트 타입 'experimental-webgl'은 역사적으로 아직 완전하지 않거나 적합하지 않은 WebGL 구현에 대한 접근을 제공하는 데 사용되어 왔다.
사용자 에이전트가 webgl 및 experimental-webgl
canvas 컨텍스트 타입을 모두 지원하는 경우, 이 둘은 별칭으로 취급되어야 한다.
예를 들어, getContext('webgl') 호출이 WebGLRenderingContext를
성공적으로 생성한 경우, 이후 getContext('experimental-webgl') 호출은
동일한 컨텍스트 객체를 반환해야 한다.
API 호출이 렌더링되는 드로잉 버퍼는 WebGLRenderingContext 객체 생성 시 정의되어야 한다. 다음 설명은 드로잉 버퍼를 생성하는 방법을 정의한다.
아래 표는 드로잉 버퍼를 구성하는 모든 버퍼와 그 최소 크기,
그리고 기본적으로 정의되는지 여부를 보여준다. 이 드로잉 버퍼의 크기는
HTMLCanvasElement 또는 OffscreenCanvas의 width 및
height 속성에 의해 결정되어야 한다. 아래 표는 또한
처음 생성될 때, 크기가 변경될 때, 또는 preserveDrawingBuffer
컨텍스트 생성 속성이 false인 경우 표시 후에 이러한 버퍼가
클리어되어야 하는 값을 보여준다.
| 버퍼 | 클리어 값 | 최소 크기 | 기본적으로 정의됨? |
|---|---|---|---|
| 색상 | (0, 0, 0, 0) | 컴포넌트당 8비트 | 예 |
| 깊이 | 1.0 | 16비트 정수 | 예 |
| 스텐실 | 0 | 8비트 | 아니요 |
HTMLCanvasElement.width 및 .height 값이 1보다 작으면 1로 처리된다.
0x0 canvas는 1x1 drawingBufferWidth/Height를 산출한다.
요청된 width 또는 height를 만족할 수 없는 경우, 드로잉 버퍼가 처음 생성될 때이든
HTMLCanvasElement 또는 OffscreenCanvas의
width 및 height 속성이 변경될 때이든,
더 작은 치수의 드로잉 버퍼가 생성되어야 한다. 실제로 사용되는 치수는
구현에 의존하며, 동일한 종횡비의 버퍼가 생성된다는 보장은 없다.
실제 드로잉 버퍼 크기는 drawingBufferWidth 및
drawingBufferHeight 속성에서 얻을 수 있다.
WebGL 구현은 고해상도 디스플레이에서 드로잉 버퍼 크기에 대한 어떤 자동
스케일링도 수행해서는 안 된다. 컨텍스트의 drawingBufferWidth
및 drawingBufferHeight는 구현 의존 제약을 제외하고,
canvas의 width 및 height 속성과 가능한 한
일치해야 한다.
위 제약은 고해상도 디스플레이에서도 canvas 요소가 웹 페이지에서 차지하는 공간의 양을 변경하지 않는다. canvas의 고유 치수 [CANVAS]는 그 좌표 공간의 크기와 같으며, 이 수치는 CSS 픽셀로 해석되고, CSS 픽셀은 해상도 독립적이다 [CSS].
WebGL 애플리케이션은 window.devicePixelRatio와 같은
속성을 검사하고, canvas의 width 및 height를
그 계수만큼 스케일링하고, CSS width와 height를 원래 width와 height로
설정함으로써 고해상도 디스플레이에서 드로잉 버퍼 픽셀과 화면 픽셀 사이의
1:1 비율을 달성할 수 있다. 애플리케이션은 canvas의 width
및 height 속성을 단순히 확대함으로써 더 높은 해상도
디스플레이에서 실행되는 효과를 시뮬레이트할 수 있다.
선택적 WebGLContextAttributes 객체는
버퍼가 정의되는지 여부를 변경하는 데 사용될 수 있다. 또한 색상 버퍼가
알파 채널을 포함할지 여부를 정의하는 데에도 사용될 수 있다. 정의된 경우,
알파 채널은 HTML compositor가 색상 버퍼를 페이지의 나머지 부분과
결합하는 데 사용된다. WebGLContextAttributes 객체는
getContext의 첫 번째 호출에서만 사용된다. 드로잉 버퍼가
생성된 후에는 그 속성을 변경하는 기능이 제공되지 않는다.
depth, stencil 및 antialias 속성이
true로 설정된 경우 이는 요청이지 요구사항이 아니다. WebGL 구현은 이를
존중하기 위해 최선의 노력을 해야 한다. 그러나 이러한 속성 중 하나라도
false로 설정된 경우, WebGL 구현은 관련 기능을 제공해서는 안 된다.
WebGL 구현 또는 그래픽 하드웨어에서 지원하지 않는 속성 조합이
WebGLRenderingContext 생성 실패를 야기해서는 안 된다.
실제 컨텍스트 매개변수는 생성된
드로잉 버퍼의 속성으로 설정된다. alpha,
premultipliedAlpha 및 preserveDrawingBuffer
속성은 WebGL 구현에 의해 반드시 준수되어야 한다.
WebGL은 합성 작업 직전에 자신의 드로잉 버퍼를 HTML 페이지 compositor에 표시하지만, 이전 합성 작업 이후 다음 중 하나 이상이 호출된 경우에만 표시한다:
드로잉 버퍼가 합성을 위해 표시되기 전에, 구현은 모든 렌더링 작업이 드로잉 버퍼로 flush되었는지 보장해야 한다. 기본적으로 합성 후에는 드로잉 버퍼의 내용이 위 표에 표시된 기본값으로 클리어되어야 한다.
이 기본 동작은 WebGLContextAttributes
객체의 preserveDrawingBuffer 속성을 설정하여 변경할 수 있다.
이 플래그가 true인 경우, 작성자가 그 내용을 클리어하거나 덮어쓸 때까지
드로잉 버퍼의 내용이 보존되어야 한다. 이 플래그가 false인 경우, 렌더링
함수가 반환된 후 이 컨텍스트를 소스 이미지로 사용하여 작업을 수행하려고 하면
정의되지 않은 동작으로 이어질 수 있다. 여기에는 readPixels 또는
toDataURL 호출, 이 컨텍스트를 다른 컨텍스트의
texImage2D 또는 drawImage 호출의 소스 이미지로
사용하는 것, 또는 이 컨텍스트의 canvas에서
ImageBitmap
[HTML]을 생성하는 것이 포함된다.
드로잉 버퍼를 보존하는 것이 때때로 바람직하더라도, 일부 플랫폼에서는
상당한 성능 손실을 야기할 수 있다. 가능하면 이 플래그는 false로 유지하고
다른 기법을 사용해야 한다. 드로잉 버퍼에 렌더링하는 동일한 함수 안에서
readPixels 또는 toDataURL을 호출하는 것과 같은
동기적 드로잉 버퍼 접근 기법을 사용하여 드로잉 버퍼의 내용을 얻을 수 있다.
작성자가 일련의 호출에 걸쳐 동일한 드로잉 버퍼에 렌더링해야 하는 경우,
Framebuffer Object를 사용할 수 있다.
구현은 작성자가 다른 프로세스에서 버퍼 내용에 접근할 수 없다는 보장을 할 수 있는 한, Drawing Buffer의 요구되는 암묵적 clear 작업을 최적화하여 제거할 수 있다. 예를 들어, 작성자가 명시적 clear를 수행하면 암묵적 clear는 필요하지 않다.
renderbufferStorage와 유사하게,
드로잉 버퍼의 형식과 크기를 다시 지정한다.
클리어 동작은 HTMLCanvasElement.width 및
HTMLCanvasElement.height를 설정한 다음 드로잉 버퍼 형식을
변경하는 것과 동일하다. 이 메서드는 WebGLContextAttributes.antialias를
존중한다.
drawingBufferStorage는 width와 height를 동시에 효율적으로
다시 지정할 수 있게 한다.
HTMLCanvasElement.width 및 HTMLCanvasElement.height에서는
하나를 설정한 다음 다른 하나를 설정하면 중간 재할당이 발생할 수 있지만,
User Agents는 이를 최적화하여 제거하려고 한다.
drawingBufferStorage가 성공하면 drawingBufferFormat은
sizedFormat이 된다.
drawingBufferWidth 및 drawingBufferHeight는 각각
width 및 height가 된다.
따라서 기본 framebuffer에 대한 작업은 sizedFormat의
attachment를 가진 비기본 framebuffer에서 작업하는 것처럼 동작한다.
예를 들어 drawingBufferStorage(gl.RGBA16F, 1, 1) 이후에는
framebuffer가 "floatish"이므로, readPixels의 주 format/type 쌍은
RGBA/UNSIGNED_BYTE 대신
RGBA/FLOAT이다.
WebGLContextAttributes.alpha가 false이면
INVALID_OPERATION을 생성한다.
RGBA8은 sizedFormat에 대해 항상 지원된다.
또한 다음 enums는 현재 renderbufferStorage에 대해 유효한 경우
지원된다:
RGBA8
SRGB8_ALPHA8 (0x8C43) (예: EXT_sRGB에서)
RGBA16F (0x881A) (예: EXT_color_buffer_half_float에서)
sizedFormat이 현재 지원되지 않으면 INVALID_ENUM을 생성한다.
WebGL 1.0에서 SRGB8_ALPHA8은 확장 EXT_sRGB를 필요로 한다.
WebGL 2.0에서 SRGB8_ALPHA8은 확장을 필요로 하지 않는다.
WebGL 1.0에서 RGBA16F는 확장 EXT_color_buffer_half_float를 필요로 한다.
WebGL 2.0에서 RGBA16F는 확장 EXT_color_buffer_float를 필요로 한다.
width 또는 height가 한계 MAX_RENDERBUFFER_SIZE보다 크면
INVALID_VALUE를 생성한다.
할당에 실패하면 OUT_OF_MEMORY를 생성한다.
OpenGL은 렌더링 결과가 드로잉 버퍼에 배치되는 방식을 정의하는 직사각형 뷰포트를 상태의 일부로 관리한다. WebGL 컨텍스트 context가 생성되면, 뷰포트는 원점이 (0, 0)이고 width 및 height가 (context.drawingBufferWidth, context.drawingBufferHeight)와 같은 직사각형으로 초기화된다.
WebGL 구현은 canvas 요소의 크기 조정에 응답하여 OpenGL 뷰포트의 상태에 영향을 주어서는 안 된다.
var canvas = document.getElementById('canvas1');
var gl = canvas.getContext('webgl');
canvas.width = newWidth;
canvas.height = newHeight;
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
근거: 뷰포트를 자동으로 설정하면 이를 수동으로 설정하는 애플리케이션을
방해하게 된다. 애플리케이션은 canvas 크기 변경에 응답하기 위해
onresize 핸들러를 사용하고, 이어서 OpenGL 뷰포트를 설정할 것으로
기대된다.
OpenGL API는 애플리케이션이 렌더링 중 사용되는 blending mode를 수정할 수 있게 하며,
이러한 이유로 드로잉 버퍼의 alpha 값이 해석되는 방식을 제어할 수 있게 한다.
WebGLContextAttributes 섹션의
premultipliedAlpha 매개변수를 보라.
HTML Canvas APIs toDataURL 및 drawImage는
premultipliedAlpha 컨텍스트 생성 매개변수를 반드시 존중해야 한다.
WebGL 콘텐츠가 렌더링되고 있는 Canvas에 대해 toDataURL이 호출될 때,
요청된 이미지 형식이 premultiplied alpha를 지정하지 않고 WebGL 컨텍스트의
premultipliedAlpha 매개변수가 true로 설정되어 있으면,
픽셀 값은 de-multiply되어야 한다. 즉, 색상 채널이 alpha 채널로 나누어진다.
이 작업은 손실이 있다는 점에 유의하라.
WebGL로 렌더링된 Canvas를 CanvasRenderingContext2D의
drawImage 메서드에 전달할 때, CanvasRenderingContext2D
구현의 premultiplication 요구에 따라 그리기 작업 중 렌더링된 WebGL 콘텐츠를
수정해야 할 수도 있고 그렇지 않을 수도 있다.
WebGL로 렌더링된 Canvas를 texImage2D API에 전달할 때,
전달된 canvas의 premultipliedAlpha 컨텍스트 생성 매개변수 설정과
목적지 WebGL 컨텍스트의 UNPACK_PREMULTIPLY_ALPHA_WEBGL pixel store
매개변수에 따라, 픽셀 데이터를 premultiplied 형식으로 또는 그 형식에서 변경해야
할 수 있다.
OpenGL은 상태의 일부로 여러 종류의 리소스를 관리한다. 이들은 정수 객체 이름으로 식별되며 다양한 생성 호출을 통해 OpenGL에서 얻어진다. 반대로 WebGL은 이러한 리소스를 DOM 객체로 표현한다. 각 객체는 WebGLObject 인터페이스에서 파생된다. 현재 지원되는 리소스는 textures, buffers(즉 VBOs), framebuffers, renderbuffers, shaders 및 programs이다. WebGLRenderingContext 인터페이스에는 각 타입에 대해 WebGLObject 하위 클래스를 생성하는 메서드가 있다. 기저 그래픽 라이브러리의 데이터는 이러한 객체에 저장되며, 이들에 의해 완전히 관리된다. DOM 객체는 작성자가 명시적 참조를 유지하는 동안뿐만 아니라, 기저 그래픽 라이브러리에서 사용 중인 동안에도 살아 있게 된다. DOM 객체가 파괴되면, 그 리소스를 삭제 대상으로 표시한다. 작성자가 DOM 객체가 파괴되기 전에 객체를 삭제 대상으로 표시하려는 경우, 해당 delete 함수를 명시적으로 호출할 수 있다. (예: deleteTexture)
textures 및 vertex buffer objects(VBOs)와 같은 WebGL 리소스는 초기 사용자
데이터 값 없이 생성되었더라도 항상 초기화된 데이터를 포함해야 한다.
초기 값 없이 리소스를 생성하는 것은 texture 또는 VBO를 위한 공간을 예약하고,
이후 texSubImage 또는 bufferSubData 호출을 사용해
이를 수정하는 데 흔히 사용된다. 이러한 호출에 초기 데이터가 제공되지 않는 경우,
WebGL 구현은 그 내용을 0으로 초기화해야 한다. depth 리소스는 기본 1.0 clear depth로
클리어되어야 한다. 이는 요청된 VBO 크기의 zeroed 임시 버퍼를 생성해야 할 수 있으며,
그래야 올바르게 초기화될 수 있다. texture 또는 VBO로 데이터를 로드하는 다른 모든
형태는 ArrayBuffers 또는 images와 같은 DOM 객체를 포함하므로, 이미 초기화되어야 한다.
WebGL 리소스가 drawElements 또는 drawArrays와 같은
호출을 통해 shaders에 의해 접근될 때, WebGL 구현은 shader가 범위를 벗어난 데이터나
초기화되지 않은 데이터에 접근할 수 없도록 보장해야 한다.
WebGL 구현에 의해 강제되어야 하는 제한 사항은
Enabled Vertex Attributes and Range Checking을 보라.
정보 누출을 방지하기 위해 WebGL은 다음을 textures로 업로드하는 것을 허용하지 않는다:
texImage2D 또는 texSubImage2D 메서드가
그 밖에는 올바른 인수와 함께 호출되었지만, 이러한 제한을 위반하는
HTMLImageElement, HTMLVideoElement,
HTMLCanvasElement 또는 ImageBitmap을 인수로 받은 경우,
SECURITY_ERR 예외가 반드시 throw되어야 한다.
WebGL은 2D canvas 렌더링 컨텍스트와 같은 다른 API보다 cross-domain media의 사용에 대해 더 강한 제한을 부과할 수밖에 없다. shaders를 사용하여 GPU에 업로드된 textures의 내용을 간접적으로 추론할 수 있기 때문이다.
WebGL 애플리케이션은 media를 호스팅하는 서버의 협조와 함께 Cross-Origin Resource Sharing [CORS]을 사용하여 다른 도메인에서 온 images 및 videos를 활용할 수 있다. 이러한 media를 사용하려면 애플리케이션이 그렇게 할 수 있는 권한을 명시적으로 요청해야 하며, 서버는 권한을 명시적으로 부여해야 한다. 다른 도메인에서 온 image 및 video 요소의 성공적인 CORS-enabled fetch는 이러한 요소의 origin을 포함하는 Document의 origin으로 설정되게 한다 [HTML].
다음 ECMAScript 예제는 다른 도메인에서 온 image에 대해 CORS 요청을 발행하는 방법을 보여준다. image는 credentials, 즉 cookies 없이 서버에서 fetch된다.
var gl = ...; var image = new Image(); // The onload handler should be set to a function which uploads the HTMLImageElement // using texImage2D or texSubImage2D. image.onload = ...; image.crossOrigin = "anonymous"; image.src = "http://other-domain.com/image.jpg";
이러한 규칙은 WebGL을 사용해 렌더링된 canvas의 origin-clean 플래그가 절대 false로 설정되지 않음을 의미한다는 점에 유의하라.
image 및 video 요소에 대해 CORS 요청을 발행하는 방법에 대한 자세한 정보는 다음을 참조하라:
WebGL 구현은 The OpenGL ES Shading Language, Version 1.00 [GLES20GLSL]에 부합하고 Appendix A의 Sections 4 및 5에서 요구하는 최소 기능을 초과하지 않는 shaders만 받아들여야 한다. 특히:
for loops는 Appendix A의 구조적 제약에 부합해야 한다. while 및 do-while loops는 Appendix A에서 선택 사항이므로
허용되지 않는다.앞서 언급한 명세의 예약 식별자에 더해, "webgl_" 및 "_webgl_"로 시작하는 식별자는 WebGL에서 사용하기 위해 예약되어 있다. 이러한 prefix로 시작하는 함수, 변수, 구조체 이름 또는 구조체 필드를 선언하는 shader는 로드되도록 허용되어서는 안 된다.
WebGL 1.0 구현은 shaders에서 line continuation character '\'도 추가로 지원해야 한다.
의도적으로든 의도치 않게든, 렌더링에 바람직하지 않게 긴 시간이 걸리는 shaders와 geometry의 조합을 만드는 것이 가능하다. 이 문제는 사용자 에이전트가 이미 보호 장치를 가진 long-running scripts 문제와 유사하다. 그러나 long-running draw calls는 사용자 에이전트뿐만 아니라 전체 window system의 상호작용성을 잃게 할 수 있다.
일반적인 경우에는 이 문제를 방지하기 위해 들어오는 shaders의 구조에 제한을 부과하는 것이 가능하지 않다. 실험 결과 매우 엄격한 구조적 제한조차 긴 렌더링 시간을 방지하기에 충분하지 않으며, 그러한 제한은 shader 작성자가 일반적인 알고리즘을 구현하지 못하게 할 수 있음이 나타났다.
User agents는 지나치게 긴 렌더링 시간과 그에 따른 상호작용성 손실을 방지하기 위한 보호 장치를 구현해야 한다. 제안되는 보호 장치에는 다음이 포함된다:
OS 및 그래픽 API 계층의 지원 인프라는 시간이 지남에 따라 개선될 것으로 예상되며, 이것이 이러한 보호 장치의 정확한 성격이 명시되지 않은 이유이다.
Shaders는 애플리케이션 자신의 데이터 밖에 있는 array 요소를 읽거나 쓰도록 허용되어서는
안 된다. 여기에는 array 타입의 모든 변수뿐만 아니라, array subscripting syntax를
사용해 접근되는 vec3 또는 mat4와 같은 vector 또는 matrix 타입도
포함된다. 컴파일 중 감지되는 경우, 이러한 접근은 오류를 생성하고 shader가 컴파일되지
못하게 해야 한다. 그렇지 않으면, 런타임에서 범위를 벗어난 읽기는 다음 값 중 하나를 반환해야 한다:
범위를 벗어난 쓰기는 discarded되거나 프로그램이 접근할 수 있는 storage의 지정되지 않은 값을 수정한다.
이 동작은 [KHRROBUSTACCESS]에 정의된 것을 복제한다.
shaders에서 array indexing 작업의 정적 분석을 단순화하는 제한 사항에 대한 자세한 정보는 지원되는 GLSL 구성 요소를 보라.
이 섹션은 위에서 설명한 기능에 대한 런타임 접근을 지원하기 위해 DOM에 추가되는 인터페이스와 기능을 설명한다.
다음 타입들은 다음 섹션의 모든 인터페이스에서 사용된다.
typedef unsigned long GLenum;
typedef boolean GLboolean;
typedef unsigned long GLbitfield;
typedef byte GLbyte; /* 'byte' should be a signed 8 bit type. */
typedef short GLshort;
typedef long GLint;
typedef long GLsizei;
typedef long long GLintptr;
typedef long long GLsizeiptr;
// Ideally the typedef below would use 'unsigned byte', but that doesn't currently exist in Web IDL.
typedef octet GLubyte; /* 'octet' should be an unsigned 8 bit type. */
typedef unsigned short GLushort;
typedef unsigned long GLuint;
typedef unrestricted float GLfloat;
typedef unrestricted float GLclampf;
// The power preference settings are documented in the WebGLContextAttributes
// section of the specification.
enum WebGLPowerPreference { "default", "low-power", "high-performance" };
WebGLContextAttributes 딕셔너리는 드로잉 표면 속성을 포함하며
getContext의 두 번째 매개변수로 전달된다.
dictionary WebGLContextAttributes {
boolean alpha = true;
boolean depth = true;
boolean stencil = false;
boolean antialias = true;
boolean premultipliedAlpha = true;
boolean preserveDrawingBuffer = false;
WebGLPowerPreference powerPreference = "default";
boolean failIfMajorPerformanceCaveat = false;
boolean desynchronized = false;
};
다음 목록은 WebGLContextAttributes 객체의 각 속성과 그 사용을 설명한다.
각 속성의 기본값은 위에 표시되어 있다. 기본값은 getContext에
두 번째 매개변수가 전달되지 않았거나, 주어진 이름의 속성이 없는 사용자 객체가
전달된 경우 사용된다.
값이 true이면 페이지 compositor는 드로잉 버퍼가 premultiplied alpha가 적용된 색상을 포함한다고 가정한다. 값이 false이면 페이지 compositor는 드로잉 버퍼의 색상이 premultiplied되지 않았다고 가정한다. 이 플래그는 alpha 플래그가 false이면 무시된다.
premultipliedAlpha:true인 경우, 페이지 compositor로 보내지는
모든 픽셀은 alpha 값보다 작거나 같은 색상 값을 가져야 하며,
그렇지 않으면 이러한 범위를 벗어난 픽셀 값을 합성한 결과 색상은
정의되지 않는다.
premultipliedAlpha:true에서
vec4(1.0, 0.0, 0.0, 0.5)는 red 대신 green으로 표시될 수 있으며,
이는 최적화된 packed compositing 연산의 overflow 때문일 수 있다.
일관된 동작을 요구할 때 발생하는 다루기 어려운 성능 영향 때문에
이는 정의되지 않은 것으로 둔다.
premultipliedAlpha 플래그의 효과에 대한 자세한 정보는
Premultiplied Alpha를 보라.
일부 하드웨어에서는 preserveDrawingBuffer 플래그를 true로
설정하면 상당한 성능상의 영향이 있을 수 있다.
이 WebGL 컨텍스트에 적합한 GPU 구성이 무엇인지 사용자 에이전트에 알려주는 힌트를 제공한다. 이는 여러 GPU가 있는 시스템에서 어느 GPU가 사용되는지에 영향을 줄 수 있다. 예를 들어, dual-GPU 시스템에는 렌더링 성능을 희생하는 대신 전력을 더 적게 소비하는 GPU가 하나 있을 수 있다. 이 속성은 힌트일 뿐이며 WebGL 구현은 이를 무시하도록 선택할 수 있음에 유의하라.
WebGL 구현은 이 속성의 값과 관계없이 전력 및 메모리 소비를 조절하기 위해 context lost 및 restored 이벤트를 사용한다.
허용되는 값은 다음과 같다:
default
사용자 에이전트가 가장 적합한 GPU 구성을 결정하게 한다. 이것이 기본값이다.
high-performance
전력 소비보다 렌더링 성능을 우선시하는 GPU 구성에 대한 요청을 나타낸다. 모바일 장치에서 배터리 수명을 크게 감소시킬 수 있으므로, 개발자는 이것이 절대적으로 필요하다고 판단하는 경우에만 이 값을 지정하는 것이 권장된다. 구현은 처음에는 이 요청을 존중하다가, 일정 시간이 지난 후 컨텍스트를 잃게 하고 이 요청을 무시하는 새 컨텍스트를 복원하도록 결정할 수 있다.
high-performance를 요청하는 애플리케이션은 User Agents가
background high-performance 컨텍스트를 잃게 하기로 결정할
가능성이 매우 높으므로, 견고한 context loss 처리를 테스트하고
유지해야 한다.
low-power
렌더링 성능보다 전력 절약을 우선시하는 GPU 구성에 대한 요청을 나타낸다. 일반적으로 콘텐츠가 그리기 성능에 의해 제약될 가능성이 낮은 경우, 예를 들어 초당 한 프레임만 렌더링하거나, 단순한 shaders와 비교적 단순한 geometry만 그리거나, 작은 HTML canvas 요소를 사용하는 경우에 이를 사용해야 한다. 모바일 장치에서 배터리 수명을 크게 개선할 수 있으므로, 개발자는 콘텐츠가 허용한다면 이 값을 사용하는 것이 권장된다.
false로 두어야 한다. 높은 성능을 요구하는 애플리케이션은
이 매개변수를 true로 설정할 수 있으며, 컨텍스트 생성에 실패하면
2D canvas 컨텍스트와 같은 fallback 렌더링 경로를 사용하는 것을 선호할 수 있다.
또는 애플리케이션은 이 매개변수를 false로 설정하여 WebGL 컨텍스트
생성을 다시 시도할 수 있으며, 성능을 개선하기 위해 reduced-fidelity 렌더링
모드를 사용해야 함을 알고 있어야 한다.
값이 true이면, 사용자 에이전트는 ordinary 사용자 에이전트 렌더링 알고리즘을 우회하거나, canvas paint cycle을 event loop와 desynchronize하거나, 또는 둘 다를 수행하여 입력 이벤트에서 rasterization까지 측정되는 latency를 줄이도록 canvas의 렌더링을 최적화할 수 있다. 이 모드가 일반적인 paint 메커니즘, rasterization 또는 둘 다를 우회하는 한, visible tearing artifacts를 도입할 수 있다.
사용자 에이전트는 보통 표시되고 있지 않은 buffer에 렌더링한 다음,
이를 표시를 위해 scan out되는 buffer와 빠르게 교환한다. 전자의 buffer는
back buffer라고 불리고 후자는 front buffer라고 불린다.
latency를 줄이기 위한 인기 있는 기법은 front buffer rendering이라고
하며, single buffer rendering이라고도 한다. 이 기법에서는 렌더링이
scanning out 프로세스와 병렬로, 그리고 경쟁적으로 발생한다. 이 기법은
tearing artifacts를 도입할 가능성을 대가로 latency를 줄이며,
desynchronized boolean의 전부 또는 일부를 구현하는 데
사용될 수 있다. [MULTIPLEBUFFERING]
desynchronized boolean은 drawing 애플리케이션처럼 입력과
rasterization 사이의 latency가 중요한 특정 종류의 애플리케이션을
구현할 때 유용할 수 있다.
getContext에 전달하는
ECMAScript 예제이다. 이 예제는 페이지에 "canvas1"이라는 이름의 canvas 요소가
존재한다고 가정한다.
var canvas = document.getElementById('canvas1');
var context = canvas.getContext('webgl',
{ antialias: false,
stencil: true });
WebGLObject 인터페이스는 모든 GL 객체의 부모 인터페이스이다.
각 WebGLObject에는 처음에는 설정되지 않은
내부 invalidated 플래그가 있다.
각 WebGLObject에는 기본값이 ""인 .label
속성이 있다.
구현은 오류 메시지 등에서 디버깅을 개선하고,
가능한 경우 native-level 디버깅 도구를 지원하기 위해 기저 driver에 label을
제공하는 데 이 애플리케이션 제공 label 문자열을 사용해야 한다.
구현은 label 때문에 동작을 변경해서는 안 된다.
[Exposed=(Window,Worker)]
interface WebGLObject {
attribute USVString label;
};
WebGLBuffer 인터페이스는 OpenGL Buffer Object를 나타낸다. 기저 객체는
glGenBuffers를 호출한 것처럼 생성되고
(OpenGL
ES 2.0 §2.9, man page)
, glBindBuffer를 호출한 것처럼 바인딩되며
(OpenGL
ES 2.0 §2.9, man page)
glDeleteBuffers를 호출한 것처럼 삭제 대상으로 표시된다
(OpenGL
ES 2.0 §2.9, man page)
.
[Exposed=(Window,Worker)]
interface WebGLBuffer : WebGLObject {
};
WebGLFramebuffer 인터페이스는 OpenGL Framebuffer Object를 나타낸다.
기저 객체는 glGenFramebuffers를 호출한 것처럼 생성되고
(OpenGL
ES 2.0 §4.4.1, man page)
, glBindFramebuffer를 호출한 것처럼 바인딩되며
(OpenGL
ES 2.0 §4.4.1, man page)
glDeleteFramebuffers를 호출한 것처럼 삭제 대상으로 표시된다
(OpenGL
ES 2.0 §4.4.1, man
page)
.
[Exposed=(Window,Worker)]
interface WebGLFramebuffer : WebGLObject {
};
WebGLProgram 인터페이스는 OpenGL Program Object를 나타낸다. 기저 객체는
glCreateProgram을 호출한 것처럼 생성되고
(OpenGL
ES 2.0 §2.10.3, man page)
, glUseProgram을 호출한 것처럼 사용되며
(OpenGL
ES 2.0 §2.10.3, man page)
glDeleteProgram을 호출한 것처럼 삭제 대상으로 표시된다
(OpenGL
ES 2.0 §2.10.3, man page)
.
[Exposed=(Window,Worker)]
interface WebGLProgram : WebGLObject {
};
WebGLRenderbuffer 인터페이스는 OpenGL Renderbuffer Object를 나타낸다.
기저 객체는 glGenRenderbuffers를 호출한 것처럼 생성되고
(OpenGL
ES 2.0 §4.4.3, man
page)
, glBindRenderbuffer를 호출한 것처럼 바인딩되며
(OpenGL
ES 2.0 §4.4.3, man
page)
glDeleteRenderbuffers를 호출한 것처럼 삭제 대상으로 표시된다
(OpenGL
ES 2.0 §4.4.3, man
page)
.
[Exposed=(Window,Worker)]
interface WebGLRenderbuffer : WebGLObject {
};
WebGLShader 인터페이스는 OpenGL Shader Object를 나타낸다. 기저 객체는
glCreateShader를 호출한 것처럼 생성되고
(OpenGL
ES 2.0 §2.10.1, man page)
, glAttachShader를 호출한 것처럼 Program에 attach되며
(OpenGL
ES 2.0 §2.10.3, man page)
glDeleteShader를 호출한 것처럼 삭제 대상으로 표시된다
(OpenGL
ES 2.0 §2.10.1, man page)
.
[Exposed=(Window,Worker)]
interface WebGLShader : WebGLObject {
};
WebGLTexture 인터페이스는 OpenGL Texture Object를 나타낸다. 기저 객체는
glGenTextures를 호출한 것처럼 생성되고
(OpenGL
ES 2.0 §3.7.13, man page)
, glBindTexture를 호출한 것처럼 바인딩되며
(OpenGL
ES 2.0 §3.7.13, man page)
glDeleteTextures를 호출한 것처럼 삭제 대상으로 표시된다
(OpenGL
ES 2.0 §3.7.13, man page)
.
[Exposed=(Window,Worker)]
interface WebGLTexture : WebGLObject {
};
WebGLUniformLocation 인터페이스는 shader program 안의 uniform 변수 위치를
나타낸다.
[Exposed=(Window,Worker)]
interface WebGLUniformLocation {
};
WebGLActiveInfo 인터페이스는 getActiveAttrib 및 getActiveUniform 호출에서
반환되는 정보를 나타낸다.
[Exposed=(Window,Worker)]
interface WebGLActiveInfo {
readonly attribute GLint size;
readonly attribute GLenum type;
readonly attribute DOMString name;
};
다음 속성을 사용할 수 있다:
size
타입 GLint
type
타입 GLenum
name
타입 DOMString
WebGLShaderPrecisionFormat 인터페이스는 getShaderPrecisionFormat 호출에서
반환되는 정보를 나타낸다.
[Exposed=(Window,Worker)]
interface WebGLShaderPrecisionFormat {
readonly attribute GLint rangeMin;
readonly attribute GLint rangeMax;
readonly attribute GLint precision;
};
다음 속성을 사용할 수 있다:
rangeMin
타입 GLint
rangeMax
타입 GLint
precision
타입 GLint
Vertex, index, texture 및 기타 데이터는 ArrayBuffer, Typed Arrays 및 DataView를 사용하여 WebGL 구현으로 전송되며, 이는 ECMAScript specification [ECMASCRIPT]에 정의되어 있다.
Typed Arrays는 interleaved, heterogeneous vertex data의 생성, 큰 vertex buffer object로 구분된 데이터 블록을 업로드하는 것, 그리고 OpenGL programs에서 요구되는 대부분의 다른 사용 사례를 지원한다.
var numVertices = 100; // for example
// Compute the size needed for the buffer, in bytes and floats
var vertexSize = 3 * Float32Array.BYTES_PER_ELEMENT +
4 * Uint8Array.BYTES_PER_ELEMENT;
var vertexSizeInFloats = vertexSize / Float32Array.BYTES_PER_ELEMENT;
// Allocate the buffer
var buf = new ArrayBuffer(numVertices * vertexSize);
// Map this buffer to a Float32Array to access the positions
var positionArray = new Float32Array(buf);
// Map the same buffer to a Uint8Array to access the color
var colorArray = new Uint8Array(buf);
// Set up the initial offset of the vertices and colors within the buffer
var positionIdx = 0;
var colorIdx = 3 * Float32Array.BYTES_PER_ELEMENT;
// Initialize the buffer
for (var i = 0; i < numVertices; i++) {
positionArray[positionIdx] = ...;
positionArray[positionIdx + 1] = ...;
positionArray[positionIdx + 2] = ...;
colorArray[colorIdx] = ...;
colorArray[colorIdx + 1] = ...;
colorArray[colorIdx + 2] = ...;
colorArray[colorIdx + 3] = ...;
positionIdx += vertexSizeInFloats;
colorIdx += vertexSize;
}
WebGLRenderingContext는 canvas 요소에
OpenGL ES 2.0 스타일 렌더링을 가능하게 하는 API를 나타낸다.
WebGLRenderingContext 인터페이스의 어떤 메서드 또는
getExtension 메서드가 반환한 인터페이스의 어떤 메서드의 구현을
수행하기 전에, 다음 단계를 반드시 수행해야 한다:
[WebGLHandlesContextLoss] 확장 속성이 나타나면,
호출된 메서드의 구현을 수행하고, 그 결과를 반환한 뒤 이 단계를 종료한다. WebGLObject이면, INVALID_OPERATION 오류를
생성하고 use default return value를 true로 둔다. any 또는 nullable 타입이면,
null을 반환한다. 자세한 내용은 context lost 이벤트를 보라.
typedef (ImageBitmap or
ImageData or
HTMLImageElement or
HTMLCanvasElement or
HTMLVideoElement or
OffscreenCanvas or
VideoFrame) TexImageSource;
typedef ([AllowShared] Float32Array or sequence<GLfloat>) Float32List;
typedef ([AllowShared] Int32Array or sequence<GLint>) Int32List;
interface mixin WebGLRenderingContextBase
{
/* ClearBufferMask */
const GLenum DEPTH_BUFFER_BIT = 0x00000100;
const GLenum STENCIL_BUFFER_BIT = 0x00000400;
const GLenum COLOR_BUFFER_BIT = 0x00004000;
/* BeginMode */
const GLenum POINTS = 0x0000;
const GLenum LINES = 0x0001;
const GLenum LINE_LOOP = 0x0002;
const GLenum LINE_STRIP = 0x0003;
const GLenum TRIANGLES = 0x0004;
const GLenum TRIANGLE_STRIP = 0x0005;
const GLenum TRIANGLE_FAN = 0x0006;
/* AlphaFunction (not supported in ES20) */
/* NEVER */
/* LESS */
/* EQUAL */
/* LEQUAL */
/* GREATER */
/* NOTEQUAL */
/* GEQUAL */
/* ALWAYS */
/* BlendingFactorDest */
const GLenum ZERO = 0;
const GLenum ONE = 1;
const GLenum SRC_COLOR = 0x0300;
const GLenum ONE_MINUS_SRC_COLOR = 0x0301;
const GLenum SRC_ALPHA = 0x0302;
const GLenum ONE_MINUS_SRC_ALPHA = 0x0303;
const GLenum DST_ALPHA = 0x0304;
const GLenum ONE_MINUS_DST_ALPHA = 0x0305;
/* BlendingFactorSrc */
/* ZERO */
/* ONE */
const GLenum DST_COLOR = 0x0306;
const GLenum ONE_MINUS_DST_COLOR = 0x0307;
const GLenum SRC_ALPHA_SATURATE = 0x0308;
/* SRC_ALPHA */
/* ONE_MINUS_SRC_ALPHA */
/* DST_ALPHA */
/* ONE_MINUS_DST_ALPHA */
/* BlendEquationSeparate */
const GLenum FUNC_ADD = 0x8006;
const GLenum BLEND_EQUATION = 0x8009;
const GLenum BLEND_EQUATION_RGB = 0x8009; /* same as BLEND_EQUATION */
const GLenum BLEND_EQUATION_ALPHA = 0x883D;
/* BlendSubtract */
const GLenum FUNC_SUBTRACT = 0x800A;
const GLenum FUNC_REVERSE_SUBTRACT = 0x800B;
/* Separate Blend Functions */
const GLenum BLEND_DST_RGB = 0x80C8;
const GLenum BLEND_SRC_RGB = 0x80C9;
const GLenum BLEND_DST_ALPHA = 0x80CA;
const GLenum BLEND_SRC_ALPHA = 0x80CB;
const GLenum CONSTANT_COLOR = 0x8001;
const GLenum ONE_MINUS_CONSTANT_COLOR = 0x8002;
const GLenum CONSTANT_ALPHA = 0x8003;
const GLenum ONE_MINUS_CONSTANT_ALPHA = 0x8004;
const GLenum BLEND_COLOR = 0x8005;
/* Buffer Objects */
const GLenum ARRAY_BUFFER = 0x8892;
const GLenum ELEMENT_ARRAY_BUFFER = 0x8893;
const GLenum ARRAY_BUFFER_BINDING = 0x8894;
const GLenum ELEMENT_ARRAY_BUFFER_BINDING = 0x8895;
const GLenum STREAM_DRAW = 0x88E0;
const GLenum STATIC_DRAW = 0x88E4;
const GLenum DYNAMIC_DRAW = 0x88E8;
const GLenum BUFFER_SIZE = 0x8764;
const GLenum BUFFER_USAGE = 0x8765;
const GLenum CURRENT_VERTEX_ATTRIB = 0x8626;
/* CullFaceMode */
const GLenum FRONT = 0x0404;
const GLenum BACK = 0x0405;
const GLenum FRONT_AND_BACK = 0x0408;
/* DepthFunction */
/* NEVER */
/* LESS */
/* EQUAL */
/* LEQUAL */
/* GREATER */
/* NOTEQUAL */
/* GEQUAL */
/* ALWAYS */
/* EnableCap */
/* TEXTURE_2D */
const GLenum CULL_FACE = 0x0B44;
const GLenum BLEND = 0x0BE2;
const GLenum DITHER = 0x0BD0;
const GLenum STENCIL_TEST = 0x0B90;
const GLenum DEPTH_TEST = 0x0B71;
const GLenum SCISSOR_TEST = 0x0C11;
const GLenum POLYGON_OFFSET_FILL = 0x8037;
const GLenum SAMPLE_ALPHA_TO_COVERAGE = 0x809E;
const GLenum SAMPLE_COVERAGE = 0x80A0;
/* ErrorCode */
const GLenum NO_ERROR = 0;
const GLenum INVALID_ENUM = 0x0500;
const GLenum INVALID_VALUE = 0x0501;
const GLenum INVALID_OPERATION = 0x0502;
const GLenum OUT_OF_MEMORY = 0x0505;
/* FrontFaceDirection */
const GLenum CW = 0x0900;
const GLenum CCW = 0x0901;
/* GetPName */
const GLenum LINE_WIDTH = 0x0B21;
const GLenum ALIASED_POINT_SIZE_RANGE = 0x846D;
const GLenum ALIASED_LINE_WIDTH_RANGE = 0x846E;
const GLenum CULL_FACE_MODE = 0x0B45;
const GLenum FRONT_FACE = 0x0B46;
const GLenum DEPTH_RANGE = 0x0B70;
const GLenum DEPTH_WRITEMASK = 0x0B72;
const GLenum DEPTH_CLEAR_VALUE = 0x0B73;
const GLenum DEPTH_FUNC = 0x0B74;
const GLenum STENCIL_CLEAR_VALUE = 0x0B91;
const GLenum STENCIL_FUNC = 0x0B92;
const GLenum STENCIL_FAIL = 0x0B94;
const GLenum STENCIL_PASS_DEPTH_FAIL = 0x0B95;
const GLenum STENCIL_PASS_DEPTH_PASS = 0x0B96;
const GLenum STENCIL_REF = 0x0B97;
const GLenum STENCIL_VALUE_MASK = 0x0B93;
const GLenum STENCIL_WRITEMASK = 0x0B98;
const GLenum STENCIL_BACK_FUNC = 0x8800;
const GLenum STENCIL_BACK_FAIL = 0x8801;
const GLenum STENCIL_BACK_PASS_DEPTH_FAIL = 0x8802;
const GLenum STENCIL_BACK_PASS_DEPTH_PASS = 0x8803;
const GLenum STENCIL_BACK_REF = 0x8CA3;
const GLenum STENCIL_BACK_VALUE_MASK = 0x8CA4;
const GLenum STENCIL_BACK_WRITEMASK = 0x8CA5;
const GLenum VIEWPORT = 0x0BA2;
const GLenum SCISSOR_BOX = 0x0C10;
/* SCISSOR_TEST */
const GLenum COLOR_CLEAR_VALUE = 0x0C22;
const GLenum COLOR_WRITEMASK = 0x0C23;
const GLenum UNPACK_ALIGNMENT = 0x0CF5;
const GLenum PACK_ALIGNMENT = 0x0D05;
const GLenum MAX_TEXTURE_SIZE = 0x0D33;
const GLenum MAX_VIEWPORT_DIMS = 0x0D3A;
const GLenum SUBPIXEL_BITS = 0x0D50;
const GLenum RED_BITS = 0x0D52;
const GLenum GREEN_BITS = 0x0D53;
const GLenum BLUE_BITS = 0x0D54;
const GLenum ALPHA_BITS = 0x0D55;
const GLenum DEPTH_BITS = 0x0D56;
const GLenum STENCIL_BITS = 0x0D57;
const GLenum POLYGON_OFFSET_UNITS = 0x2A00;
/* POLYGON_OFFSET_FILL */
const GLenum POLYGON_OFFSET_FACTOR = 0x8038;
const GLenum TEXTURE_BINDING_2D = 0x8069;
const GLenum SAMPLE_BUFFERS = 0x80A8;
const GLenum SAMPLES = 0x80A9;
const GLenum SAMPLE_COVERAGE_VALUE = 0x80AA;
const GLenum SAMPLE_COVERAGE_INVERT = 0x80AB;
/* GetTextureParameter */
/* TEXTURE_MAG_FILTER */
/* TEXTURE_MIN_FILTER */
/* TEXTURE_WRAP_S */
/* TEXTURE_WRAP_T */
const GLenum COMPRESSED_TEXTURE_FORMATS = 0x86A3;
/* HintMode */
const GLenum DONT_CARE = 0x1100;
const GLenum FASTEST = 0x1101;
const GLenum NICEST = 0x1102;
/* HintTarget */
const GLenum GENERATE_MIPMAP_HINT = 0x8192;
/* DataType */
const GLenum BYTE = 0x1400;
const GLenum UNSIGNED_BYTE = 0x1401;
const GLenum SHORT = 0x1402;
const GLenum UNSIGNED_SHORT = 0x1403;
const GLenum INT = 0x1404;
const GLenum UNSIGNED_INT = 0x1405;
const GLenum FLOAT = 0x1406;
/* PixelFormat */
const GLenum DEPTH_COMPONENT = 0x1902;
const GLenum ALPHA = 0x1906;
const GLenum RGB = 0x1907;
const GLenum RGBA = 0x1908;
const GLenum LUMINANCE = 0x1909;
const GLenum LUMINANCE_ALPHA = 0x190A;
/* PixelType */
/* UNSIGNED_BYTE */
const GLenum UNSIGNED_SHORT_4_4_4_4 = 0x8033;
const GLenum UNSIGNED_SHORT_5_5_5_1 = 0x8034;
const GLenum UNSIGNED_SHORT_5_6_5 = 0x8363;
/* Shaders */
const GLenum FRAGMENT_SHADER = 0x8B30;
const GLenum VERTEX_SHADER = 0x8B31;
const GLenum MAX_VERTEX_ATTRIBS = 0x8869;
const GLenum MAX_VERTEX_UNIFORM_VECTORS = 0x8DFB;
const GLenum MAX_VARYING_VECTORS = 0x8DFC;
const GLenum MAX_COMBINED_TEXTURE_IMAGE_UNITS = 0x8B4D;
const GLenum MAX_VERTEX_TEXTURE_IMAGE_UNITS = 0x8B4C;
const GLenum MAX_TEXTURE_IMAGE_UNITS = 0x8872;
const GLenum MAX_FRAGMENT_UNIFORM_VECTORS = 0x8DFD;
const GLenum SHADER_TYPE = 0x8B4F;
const GLenum DELETE_STATUS = 0x8B80;
const GLenum LINK_STATUS = 0x8B82;
const GLenum VALIDATE_STATUS = 0x8B83;
const GLenum ATTACHED_SHADERS = 0x8B85;
const GLenum ACTIVE_UNIFORMS = 0x8B86;
const GLenum ACTIVE_ATTRIBUTES = 0x8B89;
const GLenum SHADING_LANGUAGE_VERSION = 0x8B8C;
const GLenum CURRENT_PROGRAM = 0x8B8D;
/* StencilFunction */
const GLenum NEVER = 0x0200;
const GLenum LESS = 0x0201;
const GLenum EQUAL = 0x0202;
const GLenum LEQUAL = 0x0203;
const GLenum GREATER = 0x0204;
const GLenum NOTEQUAL = 0x0205;
const GLenum GEQUAL = 0x0206;
const GLenum ALWAYS = 0x0207;
/* StencilOp */
/* ZERO */
const GLenum KEEP = 0x1E00;
const GLenum REPLACE = 0x1E01;
const GLenum INCR = 0x1E02;
const GLenum DECR = 0x1E03;
const GLenum INVERT = 0x150A;
const GLenum INCR_WRAP = 0x8507;
const GLenum DECR_WRAP = 0x8508;
/* StringName */
const GLenum VENDOR = 0x1F00;
const GLenum RENDERER = 0x1F01;
const GLenum VERSION = 0x1F02;
/* TextureMagFilter */
const GLenum NEAREST = 0x2600;
const GLenum LINEAR = 0x2601;
/* TextureMinFilter */
/* NEAREST */
/* LINEAR */
const GLenum NEAREST_MIPMAP_NEAREST = 0x2700;
const GLenum LINEAR_MIPMAP_NEAREST = 0x2701;
const GLenum NEAREST_MIPMAP_LINEAR = 0x2702;
const GLenum LINEAR_MIPMAP_LINEAR = 0x2703;
/* TextureParameterName */
const GLenum TEXTURE_MAG_FILTER = 0x2800;
const GLenum TEXTURE_MIN_FILTER = 0x2801;
const GLenum TEXTURE_WRAP_S = 0x2802;
const GLenum TEXTURE_WRAP_T = 0x2803;
/* TextureTarget */
const GLenum TEXTURE_2D = 0x0DE1;
const GLenum TEXTURE = 0x1702;
const GLenum TEXTURE_CUBE_MAP = 0x8513;
const GLenum TEXTURE_BINDING_CUBE_MAP = 0x8514;
const GLenum TEXTURE_CUBE_MAP_POSITIVE_X = 0x8515;
const GLenum TEXTURE_CUBE_MAP_NEGATIVE_X = 0x8516;
const GLenum TEXTURE_CUBE_MAP_POSITIVE_Y = 0x8517;
const GLenum TEXTURE_CUBE_MAP_NEGATIVE_Y = 0x8518;
const GLenum TEXTURE_CUBE_MAP_POSITIVE_Z = 0x8519;
const GLenum TEXTURE_CUBE_MAP_NEGATIVE_Z = 0x851A;
const GLenum MAX_CUBE_MAP_TEXTURE_SIZE = 0x851C;
/* TextureUnit */
const GLenum TEXTURE0 = 0x84C0;
const GLenum TEXTURE1 = 0x84C1;
const GLenum TEXTURE2 = 0x84C2;
const GLenum TEXTURE3 = 0x84C3;
const GLenum TEXTURE4 = 0x84C4;
const GLenum TEXTURE5 = 0x84C5;
const GLenum TEXTURE6 = 0x84C6;
const GLenum TEXTURE7 = 0x84C7;
const GLenum TEXTURE8 = 0x84C8;
const GLenum TEXTURE9 = 0x84C9;
const GLenum TEXTURE10 = 0x84CA;
const GLenum TEXTURE11 = 0x84CB;
const GLenum TEXTURE12 = 0x84CC;
const GLenum TEXTURE13 = 0x84CD;
const GLenum TEXTURE14 = 0x84CE;
const GLenum TEXTURE15 = 0x84CF;
const GLenum TEXTURE16 = 0x84D0;
const GLenum TEXTURE17 = 0x84D1;
const GLenum TEXTURE18 = 0x84D2;
const GLenum TEXTURE19 = 0x84D3;
const GLenum TEXTURE20 = 0x84D4;
const GLenum TEXTURE21 = 0x84D5;
const GLenum TEXTURE22 = 0x84D6;
const GLenum TEXTURE23 = 0x84D7;
const GLenum TEXTURE24 = 0x84D8;
const GLenum TEXTURE25 = 0x84D9;
const GLenum TEXTURE26 = 0x84DA;
const GLenum TEXTURE27 = 0x84DB;
const GLenum TEXTURE28 = 0x84DC;
const GLenum TEXTURE29 = 0x84DD;
const GLenum TEXTURE30 = 0x84DE;
const GLenum TEXTURE31 = 0x84DF;
const GLenum ACTIVE_TEXTURE = 0x84E0;
/* TextureWrapMode */
const GLenum REPEAT = 0x2901;
const GLenum CLAMP_TO_EDGE = 0x812F;
const GLenum MIRRORED_REPEAT = 0x8370;
/* Uniform Types */
const GLenum FLOAT_VEC2 = 0x8B50;
const GLenum FLOAT_VEC3 = 0x8B51;
const GLenum FLOAT_VEC4 = 0x8B52;
const GLenum INT_VEC2 = 0x8B53;
const GLenum INT_VEC3 = 0x8B54;
const GLenum INT_VEC4 = 0x8B55;
const GLenum BOOL = 0x8B56;
const GLenum BOOL_VEC2 = 0x8B57;
const GLenum BOOL_VEC3 = 0x8B58;
const GLenum BOOL_VEC4 = 0x8B59;
const GLenum FLOAT_MAT2 = 0x8B5A;
const GLenum FLOAT_MAT3 = 0x8B5B;
const GLenum FLOAT_MAT4 = 0x8B5C;
const GLenum SAMPLER_2D = 0x8B5E;
const GLenum SAMPLER_CUBE = 0x8B60;
/* Vertex Arrays */
const GLenum VERTEX_ATTRIB_ARRAY_ENABLED = 0x8622;
const GLenum VERTEX_ATTRIB_ARRAY_SIZE = 0x8623;
const GLenum VERTEX_ATTRIB_ARRAY_STRIDE = 0x8624;
const GLenum VERTEX_ATTRIB_ARRAY_TYPE = 0x8625;
const GLenum VERTEX_ATTRIB_ARRAY_NORMALIZED = 0x886A;
const GLenum VERTEX_ATTRIB_ARRAY_POINTER = 0x8645;
const GLenum VERTEX_ATTRIB_ARRAY_BUFFER_BINDING = 0x889F;
/* Read Format */
const GLenum IMPLEMENTATION_COLOR_READ_TYPE = 0x8B9A;
const GLenum IMPLEMENTATION_COLOR_READ_FORMAT = 0x8B9B;
/* Shader Source */
const GLenum COMPILE_STATUS = 0x8B81;
/* Shader Precision-Specified Types */
const GLenum LOW_FLOAT = 0x8DF0;
const GLenum MEDIUM_FLOAT = 0x8DF1;
const GLenum HIGH_FLOAT = 0x8DF2;
const GLenum LOW_INT = 0x8DF3;
const GLenum MEDIUM_INT = 0x8DF4;
const GLenum HIGH_INT = 0x8DF5;
/* Framebuffer Object. */
const GLenum FRAMEBUFFER = 0x8D40;
const GLenum RENDERBUFFER = 0x8D41;
const GLenum RGBA4 = 0x8056;
const GLenum RGB5_A1 = 0x8057;
const GLenum RGBA8 = 0x8058;
const GLenum RGB565 = 0x8D62;
const GLenum DEPTH_COMPONENT16 = 0x81A5;
const GLenum STENCIL_INDEX8 = 0x8D48;
const GLenum DEPTH_STENCIL = 0x84F9;
const GLenum RENDERBUFFER_WIDTH = 0x8D42;
const GLenum RENDERBUFFER_HEIGHT = 0x8D43;
const GLenum RENDERBUFFER_INTERNAL_FORMAT = 0x8D44;
const GLenum RENDERBUFFER_RED_SIZE = 0x8D50;
const GLenum RENDERBUFFER_GREEN_SIZE = 0x8D51;
const GLenum RENDERBUFFER_BLUE_SIZE = 0x8D52;
const GLenum RENDERBUFFER_ALPHA_SIZE = 0x8D53;
const GLenum RENDERBUFFER_DEPTH_SIZE = 0x8D54;
const GLenum RENDERBUFFER_STENCIL_SIZE = 0x8D55;
const GLenum FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE = 0x8CD0;
const GLenum FRAMEBUFFER_ATTACHMENT_OBJECT_NAME = 0x8CD1;
const GLenum FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL = 0x8CD2;
const GLenum FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE = 0x8CD3;
const GLenum COLOR_ATTACHMENT0 = 0x8CE0;
const GLenum DEPTH_ATTACHMENT = 0x8D00;
const GLenum STENCIL_ATTACHMENT = 0x8D20;
const GLenum DEPTH_STENCIL_ATTACHMENT = 0x821A;
const GLenum NONE = 0;
const GLenum FRAMEBUFFER_COMPLETE = 0x8CD5;
const GLenum FRAMEBUFFER_INCOMPLETE_ATTACHMENT = 0x8CD6;
const GLenum FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT = 0x8CD7;
const GLenum FRAMEBUFFER_INCOMPLETE_DIMENSIONS = 0x8CD9;
const GLenum FRAMEBUFFER_UNSUPPORTED = 0x8CDD;
const GLenum FRAMEBUFFER_BINDING = 0x8CA6;
const GLenum RENDERBUFFER_BINDING = 0x8CA7;
const GLenum MAX_RENDERBUFFER_SIZE = 0x84E8;
const GLenum INVALID_FRAMEBUFFER_OPERATION = 0x0506;
/* WebGL-specific enums */
const GLenum UNPACK_FLIP_Y_WEBGL = 0x9240;
const GLenum UNPACK_PREMULTIPLY_ALPHA_WEBGL = 0x9241;
const GLenum CONTEXT_LOST_WEBGL = 0x9242;
const GLenum UNPACK_COLORSPACE_CONVERSION_WEBGL = 0x9243;
const GLenum BROWSER_DEFAULT_WEBGL = 0x9244;
readonly attribute (HTMLCanvasElement or OffscreenCanvas) canvas;
readonly attribute GLsizei drawingBufferWidth;
readonly attribute GLsizei drawingBufferHeight;
readonly attribute GLenum drawingBufferFormat;
/* Upon context creation, drawingBufferColorSpace and unpackColorSpace both
default to the value "srgb". */
attribute PredefinedColorSpace drawingBufferColorSpace;
attribute PredefinedColorSpace unpackColorSpace;
[WebGLHandlesContextLoss] WebGLContextAttributes? getContextAttributes();
[WebGLHandlesContextLoss] boolean isContextLost();
sequence<DOMString>? getSupportedExtensions();
object? getExtension(DOMString name);
undefined drawingBufferStorage(GLenum sizedFormat, unsigned long width, unsigned long height);
undefined activeTexture(GLenum texture);
undefined attachShader(WebGLProgram program, WebGLShader shader);
undefined bindAttribLocation(WebGLProgram program, GLuint index, DOMString name);
undefined bindBuffer(GLenum target, WebGLBuffer? buffer);
undefined bindFramebuffer(GLenum target, WebGLFramebuffer? framebuffer);
undefined bindRenderbuffer(GLenum target, WebGLRenderbuffer? renderbuffer);
undefined bindTexture(GLenum target, WebGLTexture? texture);
undefined blendColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha);
undefined blendEquation(GLenum mode);
undefined blendEquationSeparate(GLenum modeRGB, GLenum modeAlpha);
undefined blendFunc(GLenum sfactor, GLenum dfactor);
undefined blendFuncSeparate(GLenum srcRGB, GLenum dstRGB,
GLenum srcAlpha, GLenum dstAlpha);
[WebGLHandlesContextLoss] GLenum checkFramebufferStatus(GLenum target);
undefined clear(GLbitfield mask);
undefined clearColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha);
undefined clearDepth(GLclampf depth);
undefined clearStencil(GLint s);
undefined colorMask(GLboolean red, GLboolean green, GLboolean blue, GLboolean alpha);
undefined compileShader(WebGLShader shader);
undefined copyTexImage2D(GLenum target, GLint level, GLenum internalformat,
GLint x, GLint y, GLsizei width, GLsizei height,
GLint border);
undefined copyTexSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset,
GLint x, GLint y, GLsizei width, GLsizei height);
WebGLBuffer createBuffer();
WebGLFramebuffer createFramebuffer();
WebGLProgram createProgram();
WebGLRenderbuffer createRenderbuffer();
WebGLShader? createShader(GLenum type);
WebGLTexture createTexture();
undefined cullFace(GLenum mode);
undefined deleteBuffer(WebGLBuffer? buffer);
undefined deleteFramebuffer(WebGLFramebuffer? framebuffer);
undefined deleteProgram(WebGLProgram? program);
undefined deleteRenderbuffer(WebGLRenderbuffer? renderbuffer);
undefined deleteShader(WebGLShader? shader);
undefined deleteTexture(WebGLTexture? texture);
undefined depthFunc(GLenum func);
undefined depthMask(GLboolean flag);
undefined depthRange(GLclampf zNear, GLclampf zFar);
undefined detachShader(WebGLProgram program, WebGLShader shader);
undefined disable(GLenum cap);
undefined disableVertexAttribArray(GLuint index);
undefined drawArrays(GLenum mode, GLint first, GLsizei count);
undefined drawElements(GLenum mode, GLsizei count, GLenum type, GLintptr offset);
undefined enable(GLenum cap);
undefined enableVertexAttribArray(GLuint index);
undefined finish();
undefined flush();
undefined framebufferRenderbuffer(GLenum target, GLenum attachment,
GLenum renderbuffertarget,
WebGLRenderbuffer? renderbuffer);
undefined framebufferTexture2D(GLenum target, GLenum attachment, GLenum textarget,
WebGLTexture? texture, GLint level);
undefined frontFace(GLenum mode);
undefined generateMipmap(GLenum target);
WebGLActiveInfo? getActiveAttrib(WebGLProgram program, GLuint index);
WebGLActiveInfo? getActiveUniform(WebGLProgram program, GLuint index);
sequence<WebGLShader>? getAttachedShaders(WebGLProgram program);
[WebGLHandlesContextLoss] GLint getAttribLocation(WebGLProgram program, DOMString name);
any getBufferParameter(GLenum target, GLenum pname);
any getParameter(GLenum pname);
[WebGLHandlesContextLoss] GLenum getError();
any getFramebufferAttachmentParameter(GLenum target, GLenum attachment,
GLenum pname);
any getProgramParameter(WebGLProgram program, GLenum pname);
DOMString? getProgramInfoLog(WebGLProgram program);
any getRenderbufferParameter(GLenum target, GLenum pname);
any getShaderParameter(WebGLShader shader, GLenum pname);
WebGLShaderPrecisionFormat? getShaderPrecisionFormat(GLenum shadertype, GLenum precisiontype);
DOMString? getShaderInfoLog(WebGLShader shader);
DOMString? getShaderSource(WebGLShader shader);
any getTexParameter(GLenum target, GLenum pname);
any getUniform(WebGLProgram program, WebGLUniformLocation location);
WebGLUniformLocation? getUniformLocation(WebGLProgram program, DOMString name);
any getVertexAttrib(GLuint index, GLenum pname);
[WebGLHandlesContextLoss] GLintptr getVertexAttribOffset(GLuint index, GLenum pname);
undefined hint(GLenum target, GLenum mode);
[WebGLHandlesContextLoss] GLboolean isBuffer(WebGLBuffer? buffer);
[WebGLHandlesContextLoss] GLboolean isEnabled(GLenum cap);
[WebGLHandlesContextLoss] GLboolean isFramebuffer(WebGLFramebuffer? framebuffer);
[WebGLHandlesContextLoss] GLboolean isProgram(WebGLProgram? program);
[WebGLHandlesContextLoss] GLboolean isRenderbuffer(WebGLRenderbuffer? renderbuffer);
[WebGLHandlesContextLoss] GLboolean isShader(WebGLShader? shader);
[WebGLHandlesContextLoss] GLboolean isTexture(WebGLTexture? texture);
undefined lineWidth(GLfloat width);
undefined linkProgram(WebGLProgram program);
undefined pixelStorei(GLenum pname, GLint param);
undefined polygonOffset(GLfloat factor, GLfloat units);
undefined renderbufferStorage(GLenum target, GLenum internalformat,
GLsizei width, GLsizei height);
undefined sampleCoverage(GLclampf value, GLboolean invert);
undefined scissor(GLint x, GLint y, GLsizei width, GLsizei height);
undefined shaderSource(WebGLShader shader, DOMString source);
undefined stencilFunc(GLenum func, GLint ref, GLuint mask);
undefined stencilFuncSeparate(GLenum face, GLenum func, GLint ref, GLuint mask);
undefined stencilMask(GLuint mask);
undefined stencilMaskSeparate(GLenum face, GLuint mask);
undefined stencilOp(GLenum fail, GLenum zfail, GLenum zpass);
undefined stencilOpSeparate(GLenum face, GLenum fail, GLenum zfail, GLenum zpass);
undefined texParameterf(GLenum target, GLenum pname, GLfloat param);
undefined texParameteri(GLenum target, GLenum pname, GLint param);
undefined uniform1f(WebGLUniformLocation? location, GLfloat x);
undefined uniform2f(WebGLUniformLocation? location, GLfloat x, GLfloat y);
undefined uniform3f(WebGLUniformLocation? location, GLfloat x, GLfloat y, GLfloat z);
undefined uniform4f(WebGLUniformLocation? location, GLfloat x, GLfloat y, GLfloat z, GLfloat w);
undefined uniform1i(WebGLUniformLocation? location, GLint x);
undefined uniform2i(WebGLUniformLocation? location, GLint x, GLint y);
undefined uniform3i(WebGLUniformLocation? location, GLint x, GLint y, GLint z);
undefined uniform4i(WebGLUniformLocation? location, GLint x, GLint y, GLint z, GLint w);
undefined useProgram(WebGLProgram? program);
undefined validateProgram(WebGLProgram program);
undefined vertexAttrib1f(GLuint index, GLfloat x);
undefined vertexAttrib2f(GLuint index, GLfloat x, GLfloat y);
undefined vertexAttrib3f(GLuint index, GLfloat x, GLfloat y, GLfloat z);
undefined vertexAttrib4f(GLuint index, GLfloat x, GLfloat y, GLfloat z, GLfloat w);
undefined vertexAttrib1fv(GLuint index, Float32List values);
undefined vertexAttrib2fv(GLuint index, Float32List values);
undefined vertexAttrib3fv(GLuint index, Float32List values);
undefined vertexAttrib4fv(GLuint index, Float32List values);
undefined vertexAttribPointer(GLuint index, GLint size, GLenum type,
GLboolean normalized, GLsizei stride, GLintptr offset);
undefined viewport(GLint x, GLint y, GLsizei width, GLsizei height);
};
interface mixin WebGLRenderingContextOverloads
{
undefined bufferData(GLenum target, GLsizeiptr size, GLenum usage);
undefined bufferData(GLenum target, AllowSharedBufferSource? data, GLenum usage);
undefined bufferSubData(GLenum target, GLintptr offset, AllowSharedBufferSource data);
undefined compressedTexImage2D(GLenum target, GLint level, GLenum internalformat,
GLsizei width, GLsizei height, GLint border,
[AllowShared] ArrayBufferView data);
undefined compressedTexSubImage2D(GLenum target, GLint level,
GLint xoffset, GLint yoffset,
GLsizei width, GLsizei height, GLenum format,
[AllowShared] ArrayBufferView data);
undefined readPixels(GLint x, GLint y, GLsizei width, GLsizei height,
GLenum format, GLenum type, [AllowShared] ArrayBufferView? pixels);
undefined texImage2D(GLenum target, GLint level, GLint internalformat,
GLsizei width, GLsizei height, GLint border, GLenum format,
GLenum type, [AllowShared] ArrayBufferView? pixels);
undefined texImage2D(GLenum target, GLint level, GLint internalformat,
GLenum format, GLenum type, TexImageSource source); // May throw DOMException
undefined texSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset,
GLsizei width, GLsizei height,
GLenum format, GLenum type, [AllowShared] ArrayBufferView? pixels);
undefined texSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset,
GLenum format, GLenum type, TexImageSource source); // May throw DOMException
undefined uniform1fv(WebGLUniformLocation? location, Float32List v);
undefined uniform2fv(WebGLUniformLocation? location, Float32List v);
undefined uniform3fv(WebGLUniformLocation? location, Float32List v);
undefined uniform4fv(WebGLUniformLocation? location, Float32List v);
undefined uniform1iv(WebGLUniformLocation? location, Int32List v);
undefined uniform2iv(WebGLUniformLocation? location, Int32List v);
undefined uniform3iv(WebGLUniformLocation? location, Int32List v);
undefined uniform4iv(WebGLUniformLocation? location, Int32List v);
undefined uniformMatrix2fv(WebGLUniformLocation? location, GLboolean transpose, Float32List value);
undefined uniformMatrix3fv(WebGLUniformLocation? location, GLboolean transpose, Float32List value);
undefined uniformMatrix4fv(WebGLUniformLocation? location, GLboolean transpose, Float32List value);
};
[Exposed=(Window,Worker)]
interface WebGLRenderingContext
{
};
WebGLRenderingContext includes WebGLRenderingContextBase;
WebGLRenderingContext includes WebGLRenderingContextOverloads;
다음 속성을 사용할 수 있다:
canvas
타입 (HTMLCanvasElement or OffscreenCanvas)
drawingBufferWidth
타입 GLsizei
HTMLCanvasElement의
width 속성과 다를 수 있다.
drawingBufferHeight
타입 GLsizei
HTMLCanvasElement의
height 속성과 다를 수 있다.
drawingBufferFormat
타입 GLenum
alpha:true 및 alpha:false에 대해 각각
RGBA8 또는 RGB8이다.
drawingBufferColorSpace
타입
PredefinedColorSpace
(명세)
unpackColorSpace
타입
PredefinedColorSpace
(명세)
TexImageSource 소스가 이 컨텍스트의 textures에 업로드될 때
변환되는 color space.
OpenGL ES 2.0은 렌더링에 사용할 상태 값을 유지한다. 이 그룹의 모든 호출은 별도로 언급하지 않는 한 해당 OpenGL counterpart와 동일하게 동작한다.
blendColor는 EXT_color_buffer_half_float 또는
WEBGL_color_buffer_float가 활성화되어 있지 않은 한, 인수를 0에서 1 범위로
clamp한다.
depth 값은 0에서 1 범위로 clamp된다.
zNear 및 zFar 값은 0에서 1 범위로 clamp되며,
zNear는 zFar보다 작거나 같아야 한다.
Viewport Depth Range를 보라.
| pname | 반환 타입 |
|---|---|
| ACTIVE_TEXTURE | GLenum |
| ALIASED_LINE_WIDTH_RANGE | Float32Array (요소 2개) |
| ALIASED_POINT_SIZE_RANGE | Float32Array (요소 2개) |
| ALPHA_BITS | GLint |
| ARRAY_BUFFER_BINDING | WebGLBuffer |
| BLEND | GLboolean |
| BLEND_COLOR | Float32Array (값 4개) |
| BLEND_DST_ALPHA | GLenum |
| BLEND_DST_RGB | GLenum |
| BLEND_EQUATION_ALPHA | GLenum |
| BLEND_EQUATION_RGB | GLenum |
| BLEND_SRC_ALPHA | GLenum |
| BLEND_SRC_RGB | GLenum |
| BLUE_BITS | GLint |
| COLOR_CLEAR_VALUE | Float32Array (값 4개) |
| COLOR_WRITEMASK | sequence<GLboolean> (값 4개) |
| COMPRESSED_TEXTURE_FORMATS | Uint32Array |
| CULL_FACE | GLboolean |
| CULL_FACE_MODE | GLenum |
| CURRENT_PROGRAM | WebGLProgram |
| DEPTH_BITS | GLint |
| DEPTH_CLEAR_VALUE | GLfloat |
| DEPTH_FUNC | GLenum |
| DEPTH_RANGE | Float32Array (요소 2개) |
| DEPTH_TEST | GLboolean |
| DEPTH_WRITEMASK | GLboolean |
| DITHER | GLboolean |
| ELEMENT_ARRAY_BUFFER_BINDING | WebGLBuffer |
| FRAMEBUFFER_BINDING | WebGLFramebuffer |
| FRONT_FACE | GLenum |
| GENERATE_MIPMAP_HINT | GLenum |
| GREEN_BITS | GLint |
| IMPLEMENTATION_COLOR_READ_FORMAT | GLenum |
| IMPLEMENTATION_COLOR_READ_TYPE | GLenum |
| LINE_WIDTH | GLfloat |
| MAX_COMBINED_TEXTURE_IMAGE_UNITS | GLint |
| MAX_CUBE_MAP_TEXTURE_SIZE | GLint |
| MAX_FRAGMENT_UNIFORM_VECTORS | GLint |
| MAX_RENDERBUFFER_SIZE | GLint |
| MAX_TEXTURE_IMAGE_UNITS | GLint |
| MAX_TEXTURE_SIZE | GLint |
| MAX_VARYING_VECTORS | GLint |
| MAX_VERTEX_ATTRIBS | GLint |
| MAX_VERTEX_TEXTURE_IMAGE_UNITS | GLint |
| MAX_VERTEX_UNIFORM_VECTORS | GLint |
| MAX_VIEWPORT_DIMS | Int32Array (요소 2개) |
| PACK_ALIGNMENT | GLint |
| POLYGON_OFFSET_FACTOR | GLfloat |
| POLYGON_OFFSET_FILL | GLboolean |
| POLYGON_OFFSET_UNITS | GLfloat |
| RED_BITS | GLint |
| RENDERBUFFER_BINDING | WebGLRenderbuffer |
| RENDERER | DOMString |
| SAMPLE_ALPHA_TO_COVERAGE | GLboolean |
| SAMPLE_BUFFERS | GLint |
| SAMPLE_COVERAGE | GLboolean |
| SAMPLE_COVERAGE_INVERT | GLboolean |
| SAMPLE_COVERAGE_VALUE | GLfloat |
| SAMPLES | GLint |
| SCISSOR_BOX | Int32Array (요소 4개) |
| SCISSOR_TEST | GLboolean |
| SHADING_LANGUAGE_VERSION | DOMString |
| STENCIL_BACK_FAIL | GLenum |
| STENCIL_BACK_FUNC | GLenum |
| STENCIL_BACK_PASS_DEPTH_FAIL | GLenum |
| STENCIL_BACK_PASS_DEPTH_PASS | GLenum |
| STENCIL_BACK_REF | GLint |
| STENCIL_BACK_VALUE_MASK | GLuint |
| STENCIL_BACK_WRITEMASK | GLuint |
| STENCIL_BITS | GLint |
| STENCIL_CLEAR_VALUE | GLint |
| STENCIL_FAIL | GLenum |
| STENCIL_FUNC | GLenum |
| STENCIL_PASS_DEPTH_FAIL | GLenum |
| STENCIL_PASS_DEPTH_PASS | GLenum |
| STENCIL_REF | GLint |
| STENCIL_TEST | GLboolean |
| STENCIL_VALUE_MASK | GLuint |
| STENCIL_WRITEMASK | GLuint |
| SUBPIXEL_BITS | GLint |
| TEXTURE_BINDING_2D | WebGLTexture |
| TEXTURE_BINDING_CUBE_MAP | WebGLTexture |
| UNPACK_ALIGNMENT | GLint |
| UNPACK_COLORSPACE_CONVERSION_WEBGL | GLenum |
| UNPACK_FLIP_Y_WEBGL | GLboolean |
| UNPACK_PREMULTIPLY_ALPHA_WEBGL | GLboolean |
| VENDOR | DOMString |
| VERSION | DOMString |
| VIEWPORT | Int32Array (요소 4개) |
sequences 또는 typed arrays를 반환하는 모든 쿼리는 매번 새 객체를 반환한다.
pname이 위 표에 없으면 INVALID_ENUM 오류를 생성하고
null을 반환한다.
pname이 IMPLEMENTATION_COLOR_READ_FORMAT
또는 IMPLEMENTATION_COLOR_READ_TYPE이고, 현재 바인딩된 framebuffer가
framebuffer complete가 아니면 INVALID_OPERATION 오류를
생성하고 null을 반환한다.
다음 pname 인수들은 현재 WebGL 구현의 어떤 측면을 설명하는 문자열을 반환한다:
| VERSION | 다음 형식의 버전 또는 릴리스 번호를 반환한다
WebGL<space>1.0<optional><space><vendor-specific information></optional>.
|
| SHADING_LANGUAGE_VERSION | 다음 형식의 버전 또는 릴리스 번호를 반환한다
WebGL<space>GLSL<space>ES<space>1.0<optional><space><vendor-specific information></optional>.
|
| VENDOR | 이 WebGL 구현을 담당하는 회사를 반환한다. 이 이름은 릴리스마다 변경되지 않는다. |
| RENDERER | renderer의 이름을 반환한다. 이 이름은 일반적으로 특정 하드웨어 플랫폼 구성에 고유하다. 릴리스마다 변경되지 않는다. |
현재 WebGL 구현에서 사용할 수 있는 확장을 쿼리하는 방법에 대한 정보는 Extension Queries를 보라.
CONTEXT_LOST_WEBGL을
반환한다. 이후에는 컨텍스트가 복원될 때까지 NO_ERROR를
반환한다.
isEnabled 쿼리에 대해서도 동일한 boolean 값을
getParameter를 통해 얻을 수 있다.
UNPACK_FLIP_Y_WEBGL,
UNPACK_PREMULTIPLY_ALPHA_WEBGL
및 UNPACK_COLORSPACE_CONVERSION_WEBGL 매개변수를 허용한다.
이러한 매개변수에 대한 문서는
Pixel Storage Parameters를 보라.
그리기 명령은 현재 바인딩된 framebuffer 내부의 픽셀만 수정할 수 있다. 또한 viewport와 scissor box도 그리기에 영향을 준다.
viewport는 normalized device coordinates에서 window coordinates로 x 및 y의
affine transformation을 지정한다. viewport의 크기는 처음에
The WebGL Viewport 섹션에 지정된 대로 결정된다.
scissor box는 그리기를 제한하는 직사각형을 정의한다. scissor test가
활성화되어 있으면 clear를 포함한 그리기 명령으로 scissor box
안에 있는 픽셀만 수정할 수 있으며, primitives는 viewport, 현재 바인딩된
framebuffer 및 scissor box의 교집합 내부에서만 그려질 수 있다. scissor
test가 활성화되어 있지 않으면 primitives는 viewport와 현재 바인딩된
framebuffer의 교집합 내부에서만 그려질 수 있다.
Buffer objects(VBOs라고도 함)는 GLSL shaders를 위한 vertex attribute data를 보관한다.
buffer가 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. INVALID_OPERATION 오류를 생성하고, 현재 바인딩은 그대로 유지된다.
삭제 대상으로 표시된 객체를 바인딩하려는 시도는
INVALID_OPERATION 오류를 생성하고, 현재 바인딩은 그대로 유지된다.
INVALID_VALUE 오류가 생성된다.
void bufferSubData(GLenum target, GLintptr offset, AllowSharedBufferSource data) (OpenGL ES 2.0 §2.9, man page)
INVALID_VALUE 오류가 생성된다. data가 null이면
INVALID_VALUE 오류가 생성된다.
buffer가 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. | pname | 반환 타입 |
|---|---|
| BUFFER_SIZE | GLint |
| BUFFER_USAGE | GLenum |
pname이 위 표에 없으면 INVALID_ENUM 오류를 생성한다.
OpenGL 오류가 생성되면 null을 반환한다.
WebGLRenderingContext에 의해
생성되었다면 false를 반환한다. Framebuffer objects는 drawing buffer에 대한 대체 렌더링 대상을 제공한다. 이들은 color, alpha, depth 및 stencil buffers의 컬렉션이며, 나중에 texture로 사용될 이미지를 렌더링하는 데 자주 사용된다.
framebuffer가 이 컨텍스트와 다른
WebGLRenderingContext에 의해 생성되었다면
INVALID_OPERATION 오류를 생성한다. WebGLFramebuffer 객체를 주어진 binding point
(target)에 바인딩한다. 이는 반드시
FRAMEBUFFER여야 한다.
framebuffer가 null이면 컨텍스트가 제공하는 기본 framebuffer가
바인딩되고, target FRAMEBUFFER의 상태를 수정하거나 쿼리하려는 시도는
INVALID_OPERATION 오류를 생성한다.
삭제 대상으로 표시된 객체를 바인딩하려는 시도는
INVALID_OPERATION 오류를 생성하고, 현재 바인딩은 그대로 유지된다.
FRAMEBUFFER_UNSUPPORTED를 반환한다.
framebuffer가 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. renderbuffer가 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. texture가 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. | pname | 반환 타입 |
|---|---|
| FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE | GLenum |
| FRAMEBUFFER_ATTACHMENT_OBJECT_NAME | WebGLRenderbuffer or WebGLTexture |
| FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL | GLint |
| FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE | GLint |
pname이 위 표에 없으면 INVALID_ENUM 오류를 생성한다.
OpenGL 오류가 생성되면 null을 반환한다.
WebGLRenderingContext에 의해
생성되었다면 false를 반환한다. Renderbuffer objects는 framebuffer object에서 사용되는 개별 buffers를 위한 저장소를 제공하는 데 사용된다.
renderbuffer가 이 컨텍스트와 다른
WebGLRenderingContext에 의해 생성되었다면
INVALID_OPERATION 오류를 생성한다. WebGLRenderbuffer 객체를 주어진 binding point
(target)에 바인딩한다. 이는 반드시
RENDERBUFFER여야 한다.
renderbuffer가 null이면 현재 이
target에 바인딩된 renderbuffer 객체가 언바인딩된다.
삭제 대상으로 표시된 객체를 바인딩하려는 시도는
INVALID_OPERATION 오류를 생성하고, 현재 바인딩은 그대로 유지된다.
renderbuffer가 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. | pname | 반환 타입 |
|---|---|
| RENDERBUFFER_WIDTH | GLint |
| RENDERBUFFER_HEIGHT | GLint |
| RENDERBUFFER_INTERNAL_FORMAT | GLenum |
| RENDERBUFFER_RED_SIZE | GLint |
| RENDERBUFFER_GREEN_SIZE | GLint |
| RENDERBUFFER_BLUE_SIZE | GLint |
| RENDERBUFFER_ALPHA_SIZE | GLint |
| RENDERBUFFER_DEPTH_SIZE | GLint |
| RENDERBUFFER_STENCIL_SIZE | GLint |
pname이 위 표에 없으면 INVALID_ENUM 오류를 생성한다.
OpenGL 오류가 생성되면 null을 반환한다.
WebGLRenderingContext에 의해
생성되었다면 false를 반환한다.
Texture objects는 texturing operations를 위한 저장소와 상태를 제공한다. WebGLTexture가
바인딩되어 있지 않은 경우(예: bindTexture에 null 또는 0을 전달한 경우), texture 객체를
수정하거나 쿼리하려는 시도는 INVALID_OPERATION 오류를 생성해야 한다.
이는 아래 함수들에 표시되어 있다.
texture가 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. INVALID_OPERATION 오류를 생성하고, 현재 바인딩은 그대로 유지된다.
void compressedTexImage2D(GLenum target, GLint level, GLenum internalformat, GLsizei width, GLsizei height, GLint border, [AllowShared] ArrayBufferView pixels) (OpenGL ES 2.0 §3.7.3, man page)
void compressedTexSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLsizei width, GLsizei height, GLenum format, [AllowShared] ArrayBufferView pixels) (OpenGL ES 2.0 §3.7.3, man page)
INVALID_OPERATION 오류가 생성된다. INVALID_ENUM 오류를 생성하고 즉시 반환한다.
Compressed Texture Support를 보라.
INVALID_OPERATION 오류가 생성된다. texImage2D가 호출된 뒤
copyTexSubImage2D가 호출된 것처럼 동작한다.
copyTexSubImage2D에서와 같이, framebuffer 밖에 있는 모든 source pixels에 대해
대응하는 destination texels는 그대로 남아 있으므로, null data와 함께
texImage2D가 호출된 것처럼 zero-initialized contents를 유지한다.
이는 framebuffer 밖에 있는 source pixels에 대해, 대응하는 destination pixels가
관련 texels의 모든 channels가 0으로 초기화되는 결합된 효과를 가진다.
Reading Pixels Outside the Framebuffer를 보라. INVALID_OPERATION 오류가 생성된다.
INVALID_OPERATION 오류가 생성된다. INVALID_OPERATION 오류가 생성된다.
INVALID_OPERATION 오류가 생성된다.
INVALID_OPERATION 오류가 생성된다. INVALID_OPERATION 오류가 생성된다.
texture가 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. INVALID_OPERATION 오류가 생성된다.
| pname | 반환 타입 |
|---|---|
| TEXTURE_MAG_FILTER | GLenum |
| TEXTURE_MIN_FILTER | GLenum |
| TEXTURE_WRAP_S | GLenum |
| TEXTURE_WRAP_T | GLenum |
pname이 위 표에 없으면 INVALID_ENUM 오류를 생성한다.
WebGLTexture가 바인딩되지 않은 상태(위 참조)에서 이 함수를 호출하려는 시도가
이루어지면 INVALID_OPERATION 오류를 생성한다.
OpenGL 오류가 생성되면 null을 반환한다.
texture가 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. INVALID_OPERATION 오류가 생성된다.
| pname | 반환 타입 |
|---|---|
| TEXTURE_MAG_FILTER | GLenum |
| TEXTURE_MIN_FILTER | GLenum |
| TEXTURE_WRAP_S | GLenum |
| TEXTURE_WRAP_T | GLenum |
pname이 위 표에 없으면 INVALID_ENUM 오류를 생성한다.
WebGLTexture가 바인딩되지 않은 상태(위 참조)에서 이 함수를 호출하려는 시도가
이루어지면 INVALID_OPERATION 오류를 생성한다.
OpenGL 오류가 생성되면 null을 반환한다.
WebGLTexture가 유효하면 true를 반환하고, 그렇지 않으면 false를 반환한다.
texture가 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 false를 반환한다.
texture의 invalidated
flag가 설정되어 있으면 false를 반환한다.
- void texImage2D(GLenum target, GLint level, GLint internalformat,
GLsizei width, GLsizei height, GLint border, GLenum format,
GLenum type, [AllowShared] ArrayBufferView? pixels)
(OpenGL
ES 2.0 §3.7.1, man page)
-
pixels가 null이면, 충분한 크기의 0으로 초기화된 buffer가
전달된다.
pixels가 non-null이면, pixels의 타입은 읽을 데이터의 타입과
일치해야 한다. UNSIGNED_BYTE인 경우 Uint8Array 또는 Uint8ClampedArray가
제공되어야 한다. UNSIGNED_SHORT_5_6_5, UNSIGNED_SHORT_4_4_4_4 또는
UNSIGNED_SHORT_5_5_5_1인 경우 Uint16Array가 제공되어야 한다. 타입이
일치하지 않으면 INVALID_OPERATION 오류가 생성된다.
WebGLTexture가 바인딩되지 않은 상태(위 참조)에서 이 함수를 호출하려는 시도가
이루어지면 INVALID_OPERATION 오류가 생성된다.
이 함수의 동작에 영향을 주는 WebGL-specific pixel storage parameters는
Pixel Storage Parameters를 보라.
pixels가 non-null이지만 그 크기가 지정된
width, height, format, type 및 pixel storage parameters에
필요한 것보다 작으면 INVALID_OPERATION 오류를 생성한다.
-
void texImage2D(GLenum target, GLint level, GLint
internalformat,
GLenum format, GLenum type, TexImageSource source) /* May throw DOMException */
(OpenGL
ES 2.0 §3.7.1, man
page)
-
주어진 element 또는 image data를 현재 바인딩된 WebGLTexture에 업로드한다.
texture의 width 및 height는
Texture Upload Width and Height 섹션에 지정된 대로 설정된다.
먼저, source image data는 개념적으로
unpackColorSpace
속성이 지정한 color space로 변환된다. 단,
UNPACK_COLORSPACE_CONVERSION_WEBGL pixel storage parameter가
NONE으로 설정된 경우는 제외한다.
이 color space conversion은 ImageBitmap 객체에도 적용되지만,
다른 texture unpack parameters는 ImageBitmap에 적용되지 않는다.
이는 그것들이 ImageBitmap 생성 중 지정될 것으로 기대되기 때문이다.
구현 경험상 WebGL textures에 업로드할 때 ImageBitmap의
color space conversion을 가능한 한 늦게 수행하는 것이 유익한 것으로
드러났다.
다음으로, source image data는 format 및 type 인수가 지정한
데이터 타입과 형식으로 변환된 다음 WebGL 구현으로 전송된다. Format conversion은
다음 표에 따라 수행된다. packed pixel format이 지정되어 image data에서
precision bits의 손실을 의미하는 경우, 이 precision 손실은 반드시 발생해야 한다.
Source DOM 이미지 형식
대상 WebGL 형식
ALPHA
RGB
RGBA
LUMINANCE
LUMINANCE_ALPHA
Grayscale (1 channel)
A = 255 (1.0)
R = sourceGray
G = sourceGray
B = sourceGray
R = sourceGray
G = sourceGray
B = sourceGray
A = 255 (1.0)
L = sourceGray
L = sourceGray
A = 255 (1.0)
Grayscale + Alpha (2 channels)
A = sourceAlpha
R = sourceGray
G = sourceGray
B = sourceGray
R = sourceGray
G = sourceGray
B = sourceGray
A =
sourceAlpha
L = sourceGray
L = sourceGray
A = sourceAlpha
Color (3 channels)
A = 255 (1.0)
R = sourceRed
G = sourceGreen
B = sourceBlue
R = sourceRed
G = sourceGreen
B = sourceBlue
A = 255
(1.0)
L = sourceRed
L = sourceRed
A = 255 (1.0)
Color + Alpha (4 channels)
A = sourceAlpha
R = sourceRed
G = sourceGreen
B = sourceBlue
R = sourceRed
G = sourceGreen
B = sourceBlue
A =
sourceAlpha
L = sourceRed
L = sourceRed
A = sourceAlpha
ImageBitmap 이외의 인수 타입으로 이 함수가 호출될 때 그 동작에
영향을 주는 WebGL-specific pixel storage parameters는
Pixel Storage Parameters를 보라.
source에서 WebGL 구현으로 전송되는 첫 번째 pixel은 source의 왼쪽 위 모서리에
해당한다. 이 동작은 위에서 언급한 섹션에 설명된 대로 ImageBitmap
인수를 제외하고 UNPACK_FLIP_Y_WEBGL
pixel storage
parameter에 의해 수정된다.
source가 채널당 8비트를 가진 RGB 또는 RGBA lossless image를 포함하는
HTMLImageElement 또는 ImageBitmap인 경우, 브라우저는
모든 채널의 전체 precision이 보존됨을 보장한다.
원본 HTMLImageElement가 alpha channel을 포함하고
UNPACK_PREMULTIPLY_ALPHA_WEBGL pixel storage parameter가 false인 경우,
RGB 값은 원본 파일 형식에서 직접 파생되었든 다른 color format에서 변환되었든
alpha channel에 의해 premultiplied된 적이 없음을 보장한다.
HTMLCanvasElement 또는 OffscreenCanvas의 CanvasRenderingContext2D의 일부 구현은
color 값을 내부적으로 premultiplied form으로 저장한다. 이러한 canvas가
UNPACK_PREMULTIPLY_ALPHA_WEBGL pixel storage parameter가 false로
설정된 상태에서 WebGL texture에 업로드되면, color channels는 alpha channel에 의해
un-multiplied되어야 하며, 이는 손실이 있는 작업이다. 따라서 WebGL 구현은
alpha < 1.0인 colors가 CanvasRenderingContext2D를 통해 canvas에 먼저 그려진 뒤
UNPACK_PREMULTIPLY_ALPHA_WEBGL pixel storage parameter가 false로
설정된 상태에서 WebGL texture에 업로드될 때 losslessly 보존된다고 보장할 수 없다.
WebGLTexture가 바인딩되지 않은 상태(위 참조)에서 이 함수를 호출하려는 시도가
이루어지면 INVALID_OPERATION 오류가 생성된다.
이 함수가 data 속성이 neutered된 ImageData와 함께
호출되면 INVALID_VALUE 오류가 생성된다.
이 함수가 neutered된 ImageBitmap과 함께 호출되면
INVALID_VALUE 오류가 생성된다.
이 함수가 포함하는 Document의 origin과 다른 origin을 가진
HTMLImageElement 또는 HTMLVideoElement와 함께 호출되거나,
bitmap의 origin-clean 플래그가 false로 설정된 HTMLCanvasElement,
ImageBitmap
또는 OffscreenCanvas와 함께 호출되면,
SECURITY_ERR 예외가 반드시
throw되어야 한다. Origin Restrictions를 보라.
source가 null이면 INVALID_VALUE 오류가
생성된다.
- void texParameterf(GLenum target, GLenum pname, GLfloat param)
(OpenGL
ES 2.0 §3.7.4, man
page)
-
WebGLTexture가 바인딩되지 않은 상태(위 참조)에서 이 함수를 호출하려는 시도가
이루어지면
INVALID_OPERATION 오류가 생성된다.
- void texParameteri(GLenum target, GLenum pname, GLint param)
(OpenGL
ES 2.0 §3.7.4, man
page)
-
WebGLTexture가 바인딩되지 않은 상태(위 참조)에서 이 함수를 호출하려는 시도가
이루어지면
INVALID_OPERATION 오류가 생성된다.
- void texSubImage2D(GLenum target, GLint level, GLint xoffset,
GLint yoffset,
GLsizei width, GLsizei height,
GLenum format, GLenum type, [AllowShared] ArrayBufferView? pixels)
(OpenGL
ES 2.0 §3.7.2, man
page)
-
format 및 pixels 인수에 대한 제한 사항은
texImage2D를 보라.
WebGLTexture가 바인딩되지 않은 상태(위 참조)에서 이 함수를 호출하려는 시도가
이루어지면 INVALID_OPERATION 오류가 생성된다.
type이 texture를 정의하는 데 원래 사용된 타입과 일치하지 않으면
INVALID_OPERATION 오류가 생성된다.
pixels가 null이면 INVALID_VALUE 오류가
생성된다.
pixels가 non-null이지만 그 크기가 지정된
width, height, format, type 및 pixel storage parameters에
필요한 것보다 작으면 INVALID_OPERATION 오류를 생성한다.
이 함수의 동작에 영향을 주는 WebGL-specific pixel storage parameters는
Pixel Storage Parameters를 보라.
-
void texSubImage2D(GLenum target, GLint level, GLint
xoffset, GLint yoffset,
GLenum format, GLenum type, TexImageSource source) /* May throw DOMException */
(OpenGL
ES 2.0 §3.7.2, man
page)
-
주어진 element 또는 image data의 내용으로 현재 바인딩된 WebGLTexture의
하위 직사각형을 업데이트한다.
업데이트되는 하위 직사각형의 width 및 height는
Texture Upload Width and Height 섹션에 지정된 대로 결정된다.
format 및 type 인수의 해석, WebGL-specific pixel
storage parameters의 처리, 입력의 잠재적인 color space transformations에 대해서는
texImage2D를 보라.
source에서 WebGL 구현으로 전송되는 첫 번째 pixel은 source의 왼쪽 위 모서리에
해당한다. 이 동작은 위에서 언급한 섹션에 설명된 대로 ImageBitmap
인수를 제외하고 UNPACK_FLIP_Y_WEBGL
pixel storage
parameter에 의해 수정된다.
WebGLTexture가 바인딩되지 않은 상태(위 참조)에서 이 함수를 호출하려는 시도가
이루어지면 INVALID_OPERATION 오류가 생성된다.
type이 texture를 정의하는 데 원래 사용된 타입과 일치하지 않으면
INVALID_OPERATION 오류가 생성된다.
이 함수가 data 속성이 neutered된 ImageData와 함께
호출되면 INVALID_VALUE 오류가 생성된다.
이 함수가 neutered된 ImageBitmap과 함께 호출되면
INVALID_VALUE 오류가 생성된다.
이 함수가 포함하는 Document의 origin과 다른 origin을 가진
HTMLImageElement 또는 HTMLVideoElement와 함께 호출되거나,
bitmap의 origin-clean 플래그가 false로 설정된 HTMLCanvasElement,
ImageBitmap,
또는 OffscreenCanvas와 함께 호출되면,
SECURITY_ERR 예외가 반드시 throw되어야 한다.
Origin Restrictions를 보라.
source가 null이면 INVALID_VALUE 오류가
생성된다.
OpenGL ES 2.0으로 렌더링하려면 OpenGL ES의 shading language인 GLSL ES로 작성된 shaders를 사용해야 한다. Shaders는 source 문자열(shaderSource)로 로드되고, 컴파일되며 (compileShader), program에 attach되어야 한다(attachShader). 이 program은 link되고(linkProgram) 이후 사용되어야 한다(useProgram).
program 또는 shader 중 하나가 이 컨텍스트와 다른
WebGLRenderingContext에 의해 생성되었다면
INVALID_OPERATION 오류를 생성한다.
program이 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. INVALID_VALUE 오류를 생성한다. name이 GLSL Constructs에 따른
예약된 WebGL prefix 중 하나로 시작하면
INVALID_OPERATION 오류를 생성한다. shader가 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. program이 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. shader가 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. program 또는 shader 중 하나가 이 컨텍스트와 다른
WebGLRenderingContext에 의해 생성되었다면
INVALID_OPERATION 오류를 생성한다.
program이 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. 전달된 program에 attach된 shaders 목록을 나타내는 새 객체를 반환한다.
이 함수 실행 중 OpenGL 오류가 생성되면 null을 반환한다.
program이 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. | pname | 반환 타입 |
|---|---|
| DELETE_STATUS | GLboolean |
| LINK_STATUS | GLboolean |
| VALIDATE_STATUS | GLboolean |
| ATTACHED_SHADERS | GLint |
| ACTIVE_ATTRIBUTES | GLint |
| ACTIVE_UNIFORMS | GLint |
pname이 위 표에 없으면 INVALID_ENUM 오류를 생성하고
null을 반환한다.
이 함수 실행 중 OpenGL 오류가 생성되면 null을 반환한다.
program이 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. 이 함수 실행 중 OpenGL 오류가 생성되면 null을 반환한다.
shader가 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. | pname | 반환 타입 |
|---|---|
| SHADER_TYPE | GLenum |
| DELETE_STATUS | GLboolean |
| COMPILE_STATUS | GLboolean |
pname이 위 표에 없으면 INVALID_ENUM 오류를 생성하고
null을 반환한다.
이 함수 실행 중 OpenGL 오류가 생성되면 null을 반환한다.
지정된 shader numeric format의 범위와 precision을 설명하는 새
WebGLShaderPrecisionFormat을 반환한다. shadertype 값은
FRAGMENT_SHADER 또는 VERTEX_SHADER일 수 있다. precisiontype 값은
LOW_FLOAT, MEDIUM_FLOAT, HIGH_FLOAT, LOW_INT, MEDIUM_INT 또는 HIGH_INT일 수 있다.
이 함수 실행 중 OpenGL 오류가 생성되면 null을 반환한다.
shader가 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. 이 함수 실행 중 OpenGL 오류가 생성되면 null을 반환한다.
shader가 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. 이 함수 실행 중 OpenGL 오류가 생성되면 null을 반환한다.
WebGLRenderingContext에 의해 생성되었다면 false를 반환한다. WebGLRenderingContext에 의해 생성되었다면 false를 반환한다. program이 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. useProgram에 정의된 대로 현재 사용 중인
current program object이기도 하면, 다음과 같다:
INVALID_OPERATION 오류를 생성한다.
Current program invalidated upon unsuccessful
link를 보라.
shader가 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. program이 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. program이 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. shaders에서 사용되는 값은 uniforms 또는 vertex attributes로 전달된다.
index의 vertex attribute를 array로 활성화한다. WebGL은 활성화된
vertex attributes와 관련해 OpenGL ES 2.0을 넘어서는 추가 규칙을 부과한다.
Enabled Vertex Attributes and Range
Checking을 보라.
program이 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. WebGLActiveInfo 객체를 반환한다. 전달된 index가 범위를
벗어나면 INVALID_VALUE 오류를 생성하고 null을 반환한다.
이 함수 실행 중 OpenGL 오류가 생성되면 null을 반환한다.
program이 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성한다. WebGLActiveInfo 객체를 반환한다. 전달된 index가 범위를
벗어나면 INVALID_VALUE 오류를 생성하고 null을 반환한다.
이 함수 실행 중 OpenGL 오류가 생성되면 null을 반환한다.
program의 invalidated flag가
설정되어 있으면 INVALID_OPERATION 오류를 생성하고
-1을 반환한다.program이 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성하고 -1을 반환한다.program이 삭제되었다면
INVALID_VALUE 오류를 생성하고 -1을 반환한다.program이 링크되지 않았다면
INVALID_OPERATION 오류를 생성하고 -1을 반환한다.name이
Maximum Uniform and Attribute Location Lengths에
정의된 제한보다 길면 INVALID_VALUE 오류를 생성하고 -1을 반환한다.name이
Characters Outside the GLSL Source Character Set을
포함하면 INVALID_VALUE 오류를 생성하고 -1을 반환한다.name이 GLSL Constructs에 따른
예약된 WebGL prefix 중 하나로 시작하고 위에 설명한 오류 조건이 적용되지 않으면,
오류를 생성하지 않고 -1을 반환한다.
program 또는 location 중 하나가 이 컨텍스트와 다른
WebGLRenderingContext에 의해 생성되었다면
INVALID_OPERATION 오류를 생성한다. | uniform type | 반환 타입 |
|---|---|
| boolean | GLboolean |
| int | GLint |
| float | GLfloat |
| vec2 | Float32Array (요소 2개) |
| ivec2 | Int32Array (요소 2개) |
| bvec2 | sequence<GLboolean> (요소 2개) |
| vec3 | Float32Array (요소 3개) |
| ivec3 | Int32Array (요소 3개) |
| bvec3 | sequence<GLboolean> (요소 3개) |
| vec4 | Float32Array (요소 4개) |
| ivec4 | Int32Array (요소 4개) |
| bvec4 | sequence<GLboolean> (요소 4개) |
| mat2 | Float32Array (요소 4개) |
| mat3 | Float32Array (요소 9개) |
| mat4 | Float32Array (요소 16개) |
| sampler2D | GLint |
| samplerCube | GLint |
sequences 또는 typed arrays를 반환하는 모든 쿼리는 매번 새 객체를 반환한다.
이 함수 실행 중 OpenGL 오류가 생성되면 null을 반환한다.
program이 이 컨텍스트와 다른 WebGLRenderingContext에 의해
생성되었다면 INVALID_OPERATION 오류를 생성하고 null을 반환한다.program이 삭제되었다면
INVALID_VALUE 오류를 생성하고 null을 반환한다.program이 링크되지 않았다면
INVALID_OPERATION 오류를 생성하고 null을 반환한다.name이
Maximum Uniform and Attribute Location Lengths에
정의된 제한보다 길면 INVALID_VALUE 오류를 생성하고 null을 반환한다.name이
Characters Outside the GLSL Source Character Set을
포함하면 INVALID_VALUE 오류를 생성하고 null을 반환한다.name이 GLSL Constructs에 따른
예약된 WebGL prefix 중 하나로 시작하고 위에 설명한 오류 조건이 적용되지 않으면,
오류를 생성하지 않고 null을 반환한다.WebGLUniformLocation을 반환한다. name이 전달된 program의
active uniform 변수에 대응하지 않으면 반환값은 null이다.
| pname | 반환 타입 |
|---|---|
| VERTEX_ATTRIB_ARRAY_BUFFER_BINDING | WebGLBuffer |
| VERTEX_ATTRIB_ARRAY_ENABLED | GLboolean |
| VERTEX_ATTRIB_ARRAY_SIZE | GLint |
| VERTEX_ATTRIB_ARRAY_STRIDE | GLint |
| VERTEX_ATTRIB_ARRAY_TYPE | GLenum |
| VERTEX_ATTRIB_ARRAY_NORMALIZED | GLboolean |
| CURRENT_VERTEX_ATTRIB | Float32Array (요소 4개) |
sequences 또는 typed arrays를 반환하는 모든 쿼리는 매번 새 객체를 반환한다.
pname이 위 표에 없으면 INVALID_ENUM 오류를 생성한다.
OpenGL 오류가 생성되면 null을 반환한다.
void uniform[1234][fi](WebGLUniformLocation? location, ...)
void uniform[1234][fi]v(WebGLUniformLocation? location, ...)
void uniformMatrix[234]fv(WebGLUniformLocation? location, GLboolean transpose, ...) (OpenGL ES 2.0 §2.10.4, man page)
location이 null이 아니고, 이전 getUniformLocation
호출을 통해 현재 사용 중인 program에서 얻어진 것이 아니라면
INVALID_OPERATION 오류가 생성된다. 전달된
location이 null이면, 전달된 data는 조용히 무시되고
어떤 uniform 변수도 변경되지 않는다.
v로 끝나는 형식) 중 하나에 전달된 array의 길이가
유효하지 않으면 INVALID_VALUE 오류가 생성된다. 길이가 너무 짧거나
할당된 타입의 정수 배수가 아니면 유효하지 않다.
uniform1i를 사용할 때 성능 문제가 관찰되었다. sampler uniform이
참조하는 texture를 변경하려면, uniform 자체를 업데이트하기 위해
uniform1i를 사용하는 것보다 uniform이 참조하는 texture unit에
새 texture를 바인딩하는 것이 선호되어야 한다.
void vertexAttrib[1234]f(GLuint index, ...)
void vertexAttrib[1234]fv(GLuint index, ...) (OpenGL ES 2.0 §2.7, man page)
vertexAttrib를 통해 설정된 값은 중간에 drawArrays 또는
drawElements 호출이 있었더라도, CURRENT_VERTEX_ATTRIB param으로
getVertexAttrib 함수에서 반환될 것이 보장된다.
v로 끝나는 형식) 중 하나에 전달된 array가 너무 짧으면
INVALID_VALUE 오류가 생성된다.
INVALID_OPERATION 오류가 생성된다.
Buffer Offset and Stride Requirements를 보라.
offset이 음수이면 INVALID_VALUE 오류가 생성된다. ARRAY_BUFFER target에
WebGLBuffer가 바인딩되어 있지 않고 offset이 0이 아니면
INVALID_OPERATION 오류가 생성된다. WebGL에서 지원되는 최대 stride는
255이다. Vertex Attribute Data Stride를 보라.
OpenGL ES 2.0에는 현재 바인딩된 (draw) framebuffer에 쓸 수 있는 여러 호출이 있다. WebGL은 그러한 모든 호출을 [Draw Operations]로 분류한다.
또한 렌더링은 drawing buffer 또는 Framebuffer object로 지정될 수 있다. 렌더링이 drawing buffer로 지정된 경우, 렌더링 호출 중 하나를 수행하면 다음 합성 작업 시작 시 drawing buffer가 HTML page compositor에 표시되어야 한다.
여기에는 다음이 포함되지만, (extensions 또는 WebGL 2.0의 추가로 인해) 이에 국한되지는 않는다:
cleardrawArraysdrawElementsdrawArraysInstancedANGLE를 추가하고,
WebGL 2.0은
drawArraysInstanced를 추가한다.
이러한 호출 중 하나가 complete framebuffer의 missing attachment에 그리기를 시도하면, 해당 attachment에는 아무것도 그려지지 않고 오류도 생성되지 않는다. Drawing to a Missing Attachment에 따른다.
INVALID_VALUE 오류가 생성된다.
CURRENT_PROGRAM이 null이면 INVALID_OPERATION 오류가 생성된다.
INVALID_OPERATION 오류가 생성된다. 또한 offset은 음수가 아니어야 하며,
그렇지 않으면 INVALID_VALUE 오류가 생성된다.
Buffer Offset and Stride Requirements를 보라. count가 0보다 크면,
non-null WebGLBuffer가 ELEMENT_ARRAY_BUFFER
binding point에 바인딩되어 있어야 하며, 그렇지 않으면
INVALID_OPERATION 오류가 생성된다.INVALID_OPERATION 오류가 생성된다.
drawArrays 및 drawElements 호출 중
OpenGL ES 2.0에 지정된 것 이상의 추가 오류 검사를 수행한다.
Enabled Vertex
Attributes and Range Checking을 보라.
OpenGL ES 2.0에는 현재 바인딩된 (read) framebuffer에서 읽을 수 있는 여러 호출이 있다. WebGL은 그러한 모든 호출을 [Read Operations]로 분류한다.
여기에는 다음이 포함되지만, (extensions 또는 WebGL 2.0의 추가로 인해) 이에 국한되지는 않는다:
copyTexImage2DcopyTexSubImage2DreadPixelspixels를 채운다.
readPixels에서 반환되는 data는 가장 최근에 전송된 drawing command 기준으로
최신이어야 한다.
pixels의 타입은 읽을 data의 타입과 일치해야 한다. 예를 들어,
UNSIGNED_BYTE인 경우 Uint8Array 또는 Uint8ClampedArray가 제공되어야 한다.
UNSIGNED_SHORT_5_6_5, UNSIGNED_SHORT_4_4_4_4 또는 UNSIGNED_SHORT_5_5_5_1인 경우
Uint16Array가 제공되어야 한다. FLOAT인 경우 Float32Array가 제공되어야 한다.
타입이 일치하지 않으면 INVALID_OPERATION 오류가 생성된다.
format과 type의 조합은 두 가지만 허용된다.
첫 번째는 format RGBA 및 type UNSIGNED_BYTE이다.
두 번째는 구현이 선택한 format이다. 이 format에 대한 format 및
type 값은 각각 symbolic constants IMPLEMENTATION_COLOR_READ_FORMAT 및
IMPLEMENTATION_COLOR_READ_TYPE과 함께
getParameter를 호출하여 결정할 수 있다.
구현이 선택한 format은 현재 바인딩된 rendering surface의 format에 따라 달라질 수 있다.
지원되지 않는 format 및 type 조합은 INVALID_OPERATION
오류를 생성한다.
readPixels에 제공해도 반드시
INVALID_ENUM이 생성되는 것은 아니다.
pixels가 null이면 INVALID_VALUE 오류가 생성된다.
pixels가 non-null이지만 pixel store modes를 고려하여 지정된
직사각형의 모든 pixels를 가져오기에 충분히 크지 않으면 INVALID_OPERATION
오류가 생성된다.
INVALID_OPERATION 오류가 생성된다.
모바일 장치의 전원 이벤트와 같은 발생 상황은 언제든지 WebGL rendering context를 잃게 할 수 있으며, 애플리케이션은 이를 다시 구축해야 할 수 있다. 자세한 내용은 WebGLContextEvent를 보라. 다음 메서드는 context lost 이벤트를 감지하는 데 도움을 준다.
WebGL 구현은 extension mechanism을 통해 해당 기능을 먼저 활성화하지 않고서는
어떤 추가 매개변수, constants 또는 functions도 지원해서는 안 된다.
getSupportedExtensions 함수는 이 구현이 지원하는 extension strings의
array를 반환한다. extension은 그 strings 중 하나를 getExtension 함수에
전달함으로써 활성화된다. 이 호출은 해당 extension이 정의한 constants 또는 functions를
포함하는 객체를 반환한다. 그 객체의 정의는 extension에 고유하며 extension specification에
의해 정의되어야 한다.
extension이 활성화되면 WebGL rendering context가 lost될 때만 비활성화된다(아래 참조).
단, "WEBGL_lose_context" extension은 context loss가 발생해도 활성 상태로 남는다.
getExtension이 반환한 객체와 같이 비활성화된 extension이 참조하는 모든
객체는 더 이상 WebGL rendering context와 연결되지 않는다. WebGLObject에서
파생된 모든 extension 객체는 자신의
invalidated flag가 true로 설정된다.
context loss 이후 extensions의 methods 동작은
"The WebGL context" 섹션의 단계에 의해 정의된다.
extension을 비활성화하는 다른 mechanism은 없다.
대소문자를 구분하지 않는 비교를 고려하여 동일한 extension string으로
getExtension을 여러 번 호출하면, extension이 활성화되어 있는 한 동일한
객체를 반환해야 한다. 먼저 getExtension을 호출하여 활성화하지 않고 extension의
기능을 사용하려는 시도는 적절한 GL 오류를 생성해야 하며, 그 기능을 사용해서는 안 된다.
이 명세는 어떤 extensions도 정의하지 않는다. 별도의 WebGL extension registry가 특정 WebGL 구현에서 지원될 수 있는 extensions를 정의한다.
getSupportedExtensions에서 반환된 이름 중 하나와
ASCII
case-insensitive match [HTML]인 경우에만 객체를
반환하고, 그렇지 않으면 null을 반환한다.
getExtension에서 반환된 객체는 extension이 제공하는 constants 또는
functions를 포함한다. extension이 아무 constants 또는 functions도 정의하지 않는 경우,
반환된 객체는 constants 또는 functions를 갖지 않을 수 있지만, 고유한 객체는
반드시 반환되어야 한다. 그 객체는 extension이 활성화되었음을 나타내는 데 사용된다.
WebGL은 WebGL rendering context의 상태에 중요한 변화가 있을 때
WebGLContextEvent 이벤트를 생성한다. 이벤트는 DOM Event System
[DOM3EVENTS]을 사용해 전송되며, WebGL rendering context와
연관된 HTMLCanvasElement 또는 OffscreenCanvas로 dispatch된다.
WebGLContextEvent 이벤트를 trigger할 수 있는 status change의 종류는
context의 loss, context의 restoration,
그리고 context 생성 불가능이다.
e라는 이름의 WebGL context event를 fire한다는 것은
WebGLContextEvent 인터페이스를 사용하는
event가,
그 type
속성 [DOM4]이 e로 초기화되고,
cancelable 속성이 true로 초기화되며,
isTrusted
속성 [DOM4]이 true로 초기화된 상태로,
주어진 객체에 dispatch되는 것을
의미한다.
[Exposed=(Window,Worker)]
interface WebGLContextEvent : Event {
constructor(DOMString type, optional WebGLContextEventInit eventInit = {});
readonly attribute DOMString statusMessage;
};
// EventInit is defined in the DOM4 specification.
dictionary WebGLContextEventInit : EventInit {
DOMString statusMessage = "";
};
이 섹션에서 queued된 모든 tasks [HTML]에 대한 task source는 WebGL task source이다.
다음 속성을 사용할 수 있다:
statusMessage 타입 DOMString
사용자 에이전트가 WebGLRenderingContext context와 연관된
drawing buffer가 lost되었음을 감지하면, 다음 단계를 실행해야 한다:
WebGLObject 인스턴스의
invalidated flag를 설정한다.
statusMessage 속성을 ""로 설정한다.
context가 lost된 동안 생성된 WebGLObject
(예: createBuffer()를 통한 WebGLBuffer)는
invalidated flag가 설정된 상태로
생명을 시작한다.
webglcontextlost 이벤트의 기본 동작을 방지하고
webglcontextrestored 이벤트가 전달될 수 있게 한다:
canvas.addEventListener("webglcontextlost", function(e) { e.preventDefault(); }, false);
사용자 에이전트가 WebGLRenderingContext context에 대해
drawing
buffer를 restore해야 할 때, 다음 단계를 실행해야 한다:
statusMessage 속성을 ""로 설정한다.
function initializeGame() {
initializeWorld();
initializeResources();
}
function initializeResources() {
initializeShaders();
initializeBuffers();
initializeTextures();
// ready to draw, start the main loop
renderFrame();
}
function renderFrame() {
updateWorld();
drawSkyBox();
drawWalls();
drawMonsters();
requestId = window.requestAnimationFrame(
renderFrame, canvas);
}
canvas.addEventListener(
"webglcontextlost", function (event) {
// inform WebGL that we handle context restoration
event.preventDefault();
// Stop rendering
window.cancelAnimationFrame(requestId);
}, false);
canvas.addEventListener(
"webglcontextrestored", function (event) {
initializeResources();
}, false);
initializeGame();
사용자 에이전트가 canvas에서 WebGL context creation error를 fire해야 할 때, 다음 단계를 수행해야 한다:
statusMessage 속성을 실패의 성격에 대한
platform dependent 문자열로 설정한다.
var errorInfo = "";
function onContextCreationError(event) {
canvas.removeEventListener(
"webglcontextcreationerror",
onContextCreationError, false);
errorInfo = e.statusMessage || "Unknown";
}
canvas.addEventListener(
"webglcontextcreationerror",
onContextCreationError, false);
var gl = canvas.getContext("webgl");
if(!gl) {
alert("A WebGL context could not be created.\nReason: " +
errorInfo);
}
이 섹션은 여러 운영 체제와 장치에서의 이식성을 개선하기 위해 OpenGL ES 2.0 API에 비해 WebGL API에 적용된 변경 사항을 설명한다.
WebGL API에서 주어진 buffer object는 그 수명 동안 ARRAY_BUFFER 또는
ELEMENT_ARRAY_BUFFER binding point 중 하나에만 바인딩될 수 있다.
이 제한은 주어진 buffer object가 vertices 또는 indices 중 하나만 포함할 수 있고,
둘 다 포함할 수 없음을 의미한다.
WebGLBuffer의 타입은 그것이 처음 bindBuffer의 인수로 전달될 때
초기화된다. 이후 동일한 WebGLBuffer를 다른 binding point에 바인딩하려는
bindBuffer 호출은 INVALID_OPERATION 오류를 생성하며,
binding point의 상태는 그대로 유지된다.
WebGL API는 client-side arrays를 지원하지 않는다.
vertex attribute가 enableVertexAttribArray를 통해 array로 활성화되었지만
해당 attribute에 buffer가 바인딩되어 있지 않으면(일반적으로 bindBuffer 및
vertexAttribPointer를 통해), draw commands(drawArrays 또는
drawElements)는 INVALID_OPERATION 오류를 생성한다.
indexed draw command(drawElements)가 호출되었고
ELEMENT_ARRAY_BUFFER binding point에 WebGLBuffer가
바인딩되어 있지 않으면, INVALID_OPERATION 오류가 생성된다.
ARRAY_BUFFER binding point에 WebGLBuffer가 바인딩되지 않은 상태에서
vertexAttribPointer가 호출되고 offset이 0이 아니면,
INVALID_OPERATION 오류가 생성된다.
client-side arrays가 전혀 지원되지 않더라도 VERTEX_ATTRIB_ARRAY_BUFFER_BINDING을 null로 설정할 수 있게 하면, binding을 원래 상태로 clear할 수 있다. 이는 그렇지 않으면 엄밀히 가능하지 않다.
이는 non-default VAO 객체에 대한 OpenGL ES 3.0.5 [GLES30] p25의 동작과도 일치한다.
WebGL API는 default textures를 지원하지 않는다. texture 관련 작업과 쿼리가 성공하려면
non-null WebGLTexture 객체가 바인딩되어 있어야 한다.
컴파일된 shaders의 binary representations에 접근하는 것은 WebGL API에서 지원되지 않는다.
여기에는 OpenGL ES 2.0 ShaderBinary entry point가 포함된다. 또한
shader binary formats와 shader compiler의 사용 가능 여부를 getParameter로
쿼리하는 것은 WebGL API에서 지원되지 않는다.
모든 WebGL 구현은 on-line shader compiler를 암묵적으로 지원해야 한다.
drawElements 및 vertexAttribPointer의 offset 인수와
vertexAttribPointer의 stride 인수는 호출에 전달된 data type의
크기의 배수여야 하며, 그렇지 않으면 INVALID_OPERATION 오류가 생성된다.
이는 OpenGL ES 2.0.25 [GLES20] p24의 다음 요구사항을 강제한다:
"Clients must align data elements consistent with the requirements of the client
platform, with an additional base-level requirement that an offset within a buffer
to a datum comprising N basic machine units be a multiple of
N."
또한 drawElements의 offset 인수는 non-negative여야 하며,
그렇지 않으면 INVALID_VALUE 오류가 생성된다.
active vertex attribute를 위한 data fetch가 필요한 drawing command를 호출함으로써,
그 attribute가 array로 활성화되어 있을 때 직접적으로(drawArrays) 또는
indexed draw(drawElements)에서 간접적으로 WebGLBuffer의 범위 밖 data를
draw commands가 요청할 수 있다.
이런 일이 발생하면 다음 동작 중 하나가 결과로 나타난다:
vertex attribute가 array로 활성화되어 있고, buffer가 해당 attribute에 바인딩되어 있지만,
그 attribute가 current program에 의해 소비되지 않는다면, 바인딩된 buffer의 크기와 관계없이
drawArrays 또는 drawElements 호출 중 오류가 생성되지 않는다.
ELEMENT_ARRAY_BUFFER의 범위 밖 index elements를 fetch하는 indexed drawing command
(drawElements)를 호출하면 INVALID_OPERATION 오류가 발생한다.
WebGL은 DEPTH_STENCIL_ATTACHMENT framebuffer object attachment point와
DEPTH_STENCIL renderbuffer internal format을 추가한다. depth 및 stencil
buffers를 모두 framebuffer object에 attach하려면, DEPTH_STENCIL
internal format으로 renderbufferStorage를 호출한 다음,
DEPTH_STENCIL_ATTACHMENT attachment point로
framebufferRenderbuffer를 호출한다.
DEPTH_ATTACHMENT attachment point에 attach된 renderbuffer는
DEPTH_COMPONENT16 internal format으로 할당되어야 한다.
STENCIL_ATTACHMENT attachment point에 attach된 renderbuffer는
STENCIL_INDEX8 internal format으로 할당되어야 한다.
DEPTH_STENCIL_ATTACHMENT attachment point에 attach된 renderbuffer는
DEPTH_STENCIL internal format으로 할당되어야 한다.
WebGL API에서 다음 attachment point 조합에 renderbuffers를 동시에 attach하는 것은 오류이다:
DEPTH_ATTACHMENT + DEPTH_STENCIL_ATTACHMENT
STENCIL_ATTACHMENT + DEPTH_STENCIL_ATTACHMENT
DEPTH_ATTACHMENT + STENCIL_ATTACHMENT
checkFramebufferStatus는 FRAMEBUFFER_UNSUPPORTED를 반환해야 한다.
INVALID_FRAMEBUFFER_OPERATION 오류를 생성하고 즉시 반환해야 하며,
framebuffer, destination texture 또는 destination memory의 내용은 그대로 둔다.
COLOR_ATTACHMENT0 = RGBA/UNSIGNED_BYTE texture
COLOR_ATTACHMENT0 = RGBA/UNSIGNED_BYTE texture + DEPTH_ATTACHMENT =
DEPTH_COMPONENT16 renderbuffer
COLOR_ATTACHMENT0 = RGBA/UNSIGNED_BYTE texture +
DEPTH_STENCIL_ATTACHMENT = DEPTH_STENCIL renderbuffer
width 및 height 매개변수가 명시적으로 지정되지 않는 한,
texImage2D가 설정하는 texture의 width 및 height와
texSubImage2D가 업데이트하는 sub-rectangle의 width 및 height는
업로드된 TexImageSource source 객체를 기반으로 결정된다:
source 타입 ImageData
ImageData 객체의 실제 pixel width 및 height를
나타낸다.
source 타입 HTMLImageElement
HTMLImageElement 객체의 width 및 height 속성의 현재 값으로 설정된다.
source 타입 HTMLCanvasElement 또는
OffscreenCanvas
HTMLCanvasElement 또는
OffscreenCanvas 객체의 width 및 height 속성의 현재 값으로 설정된다.
source 타입 HTMLVideoElement 또는 VideoFrame[WEBCODECS]
WebGL API는 pixelStorei에 대해 다음 추가 parameters를 지원한다.
UNPACK_FLIP_Y_WEBGL 타입 boolean
texImage2D 또는
texSubImage2D 호출 중 source data가 vertical axis를 따라 뒤집혀,
개념적으로 마지막 row가 첫 번째로 전송된다. 초기값은 false이다.
0이 아닌 값은 모두 true로 해석된다.
UNPACK_PREMULTIPLY_ALPHA_WEBGL 타입 boolean
texImage2D 또는 texSubImage2D 호출 중
source data의 alpha channel이 존재하면, data transfer 중 color channels에
곱해진다. 초기값은 false이다. 0이 아닌 값은 모두
true로 해석된다.
UNPACK_COLORSPACE_CONVERSION_WEBGL 타입 unsigned long
BROWSER_DEFAULT_WEBGL로 설정된 경우, 브라우저의 기본 colorspace conversion
(예: display-p3 image를 srgb로 변환)이 TexImageSource 타입 인수를 받는
이후 texture data upload calls(예: texImage2D 및
texSubImage2D) 중 적용된다.
정확한 변환은 browser와 file type 모두에 따라 달라질 수 있다.
NONE으로 설정된 경우, RGBA로의 변환 이외에는 colorspace conversion이
적용되지 않는다.
(예를 들어, rec709 YUV video는 여전히 rec709 RGB data로 변환되지만, 이후 예를 들어
srgb RGB data로 변환되지는 않는다)
초기값은 BROWSER_DEFAULT_WEBGL이다.
TexImageSource가 ImageBitmap이면, 이 세 parameters는
무시된다. 대신 원하는 format의 ImageBitmap을 생성하려면 동등한
ImageBitmapOptions를
사용해야 한다.
[Read Operations]의 경우, out-of-bounds pixels sub-areas에서의 reads는 그에 대응하는 destination sub-areas를 건드리지 않는다.
WebGL은 resources를 zeros로 미리 초기화한 것처럼 동작한다.
따라서 예를 들어 copyTexImage2D는 out-of-bounds framebuffer reads에
대응하는 sub-areas에 zeros를 가지게 된다.
WebGL API에서 stencil testing이 활성화되어 있고 현재 바인딩된 framebuffer가 stencil buffer를
가진 경우, 다음 경우 중 하나라도 true인 동안 draw하는 것은 illegal이다.
그렇게 하면 INVALID_OPERATION 오류가 생성된다.
(STENCIL_WRITEMASK & maxStencilValue) != (STENCIL_BACK_WRITEMASK & maxStencilValue)
face의 FRONT 및 BACK 값과 각각 연관된 mask 매개변수에 대해
stencilMaskSeparate가 지정한 대로)
(STENCIL_VALUE_MASK & maxStencilValue) != (STENCIL_BACK_VALUE_MASK & maxStencilValue)
face의 FRONT 및 BACK 값과 각각 연관된 mask 매개변수에 대해
stencilFuncSeparate가 지정한 대로)
clamp(STENCIL_REF, 0, maxStencilValue) != clamp(STENCIL_BACK_REF, 0, maxStencilValue)
face의 FRONT 및 BACK 값과 각각 연관된 ref 매개변수에 대해
stencilFuncSeparate가 지정한 대로)
여기서 maxStencilValue는 ((1 << s) - 1)이며,
s는 draw framebuffer의 stencil bits 수이다.
(stencil bits가 없으면, 이러한 checks는 항상 통과한다.)
WebGL API는 최대 255 bytes의 vertex attribute data strides를 지원한다.
stride 매개변수 값이 255를 초과하면 vertexAttribPointer 호출은
INVALID_VALUE 오류를 생성한다.
WebGL API는 near plane이 far plane의 값보다 큰 값으로 매핑되는 depth ranges를
지원하지 않는다. zNear가 zFar보다 크면
depthRange 호출은 INVALID_OPERATION 오류를 생성한다.
WebGL API에서 constant color와 constant alpha는 blend function에서 source 및
destination factors로 함께 사용될 수 없다. 두 factors 중 하나가
CONSTANT_COLOR 또는 ONE_MINUS_CONSTANT_COLOR로 설정되고
다른 하나가 CONSTANT_ALPHA 또는 ONE_MINUS_CONSTANT_ALPHA로
설정되면 blendFunc 호출은 INVALID_OPERATION 오류를 생성한다.
srcRGB가 CONSTANT_COLOR 또는
ONE_MINUS_CONSTANT_COLOR로 설정되고 dstRGB가
CONSTANT_ALPHA 또는 ONE_MINUS_CONSTANT_ALPHA로 설정되거나
그 반대이면, blendFuncSeparate 호출은 INVALID_OPERATION
오류를 생성한다.
GL_FIXED data type을 지원하지 않는다.
Supported GLSL Constructs에 따라, "webgl_" 및 "_webgl_"로 시작하는 identifiers는 WebGL에서 사용하기 위해 예약되어 있다.
OpenGL ES 2.0 API에서 available extensions는
glGetString(GL_EXTENSIONS)를 호출하여 결정되며, 이는 space-separated
extension strings 목록을 반환한다. WebGL API에서는 EXTENSIONS enumerant가
제거되었다.
대신 available extensions의 집합을 결정하려면 getSupportedExtensions를
호출해야 한다.
core WebGL 명세는 지원되는 compressed texture formats를 정의하지 않는다. 따라서 다른 extensions가 활성화되어 있지 않은 경우:
compressedTexImage2D
및 compressedTexSubImage2D 메서드는
INVALID_ENUM 오류를 생성한다.
COMPRESSED_TEXTURE_FORMATS와 함께
getParameter를 호출하면
zero-length array(Uint32Array 타입)를 반환한다.
WebGL 구현은 uncompressed form보다 더 효율적인 compressed texture formats만 노출해야 한다.
GLSL ES spec [GLES20GLSL]는 token 길이에 대한 한계를 정의하지 않는다. WebGL은 길이 256 characters까지의 tokens를 지원해야 한다. 256 characters보다 긴 tokens를 포함하는 shaders는 compile에 실패해야 한다.
WebGL은 어떤 HTML DOMString [DOMSTRING]도
shaderSource에 오류 없이 전달하는 것을 지원한다.
그러나 shader compilation 중, GLSL preprocessing 및 comment stripping 이후 남아 있는
모든 characters는 [GLES20GLSL]의 character set 안에
반드시 있어야 한다.
그렇지 않으면 shader는 반드시 compile에 실패해야 한다.
특히 이는 다음을 허용한다:
// 你好
#ifdef __cplusplus #line 42 "foo.glsl" #endif(double-quote character는 GLSL character set 밖에 있지만, preprocessing에 의해 제거되므로 shader sources에서 허용된다)
GLSL ES spec [GLES20GLSL]는 OpenGL ES shading language의 source character set을 ISO/IEC 646:1991의 subset으로 정의하며, 이는 보통 ASCII [ASCII]라고 불린다. 일부 GLSL 구현은 comments 안에서도 ASCII range 밖의 characters를 허용하지 않는다. browsers는 전체 DOMString character set의 preprocessing을 반드시 올바르게 처리해야 하지만, WebGL 구현은 일반적으로 safety를 위해 GLSL driver에 전달되는 shader source가 ASCII만 포함하도록 보장해야 한다. 구현은 debugging purposes를 위해, 필요하면 blank lines를 삽입하는 방식으로 line numbers를 보존해야 한다.
이 set에 속하지 않는 character를 포함하는 문자열이 다른 shader-related entry
points
bindAttribLocation,
getAttribLocation,
또는 getUniformLocation 중 하나에 전달되면,
INVALID_VALUE 오류가 생성된다.
WebGL은 GLSL shaders에서 structures의 nesting에 제한을 부과한다. struct의 field가 다른 struct type을 참조할 때 nesting이 발생한다. GLSL ES spec [GLES20GLSL]는 embedded structure definitions를 금지한다. top-level struct definition의 fields는 nesting level 1을 가진다.
WebGL은 structure nesting level 4의 지원을 요구한다. 4 levels보다 깊게 nested된 structures를 포함하는 shaders는 compile에 실패해야 한다.
WebGL은 uniform 및 attribute locations의 길이에 256 characters 제한을 부과한다.
WebGL API에서는 INFO_LOG_LENGTH, SHADER_SOURCE_LENGTH,
ACTIVE_UNIFORM_MAX_LENGTH, 및 ACTIVE_ATTRIBUTE_MAX_LENGTH
enumerants가 제거되었다. OpenGL ES 2.0 API에서 이러한 enumerants는
glGetActiveAttrib 같은 호출에 전달되는 buffers의 크기를 결정하는 데 필요하다.
WebGL API에서 유사한 호출(getActiveAttrib,
getActiveUniform, getProgramInfoLog,
getShaderInfoLog, 및 getShaderSource)은 모두
DOMString을 반환한다.
WebGL API에서 texSubImage2D에 전달되는 type 인수는
texture object를 원래 정의하는 데 사용된 타입(즉, texImage2D 사용)과
일치해야 한다.
OpenGL ES Shading Language, Version 1.00 [GLES20GLSL], Appendix A, Section 7 "Counting of Varyings and Uniforms"는 shader 안의 모든 uniform 및 varying variables에 필요한 storage를 계산하기 위한 conservative algorithm을 정의한다. GLSL ES specification은 Appendix A에 정의된 packing algorithm이 성공하면, shader가 target platform에서 compilation에 성공해야 한다고 요구한다. WebGL API는 추가로 shader의 uniform variables 또는 program의 varying variables 중 하나에 대해 packing algorithm이 실패하면, compilation 또는 linking이 실패해야 한다고 요구한다.
고정 크기 registers grid를 사용하는 대신, target architecture의 row 수는 다음 방식으로 결정된다:
getParameter(MAX_VERTEX_UNIFORM_VECTORS)
getParameter(MAX_FRAGMENT_UNIFORM_VECTORS)
getParameter(MAX_VARYING_VECTORS)
위 텍스트는 packing algorithm이 강제하는 제약 때문에 shader 또는 program의 compilation 또는 linking이 반드시 실패해야 하는 상황을 정의한다. 이 algorithm에 따라 variables가 성공적으로 pack되더라도, 최소 요구량보다 더 많은 variables를 사용하는 shader가 반드시 성공적으로 compile된다는 보장은 없다. scalar arrays가 여러 columns를 소비하도록 확장되는 것을 포함하여 구현에서 inefficiencies가 관찰되었다. 개발자는 multiple variables를 columns에 자동으로 packing하는 것에 크게 의존하지 않아야 한다. 대신 vec4와 같은 더 큰 variables를 정의하고, 값을 rightmost columns에 명시적으로 pack해야 한다.
OpenGL ES 2.0 API에서는 같은 texture에 write와 read를 모두 수행하는 호출을 만들어 feedback loop를 생성할 수 있다. 이 명세는 이러한 feedback loops가 존재하는 경우 undefined behavior가 발생한다고 지정한다.
WebGL API에서는 그러한 feedback loops를 유발할 수 있는 작업(OpenGL ES 2.0 spec의
정의에 따른)은 대신 INVALID_OPERATION 오류를 생성한다.
OpenGL ES 2.0 API에서는 color attachment가 없는 complete framebuffer에서 color data의 ReadPixels와 같이, 명령이 missing attachment에서 data를 source로 사용하려 할 때 무슨 일이 발생하는지 지정되어 있지 않다.
WebGL API에서는 missing된 attachment에서 data가 필요한 모든
[Read Operations]가
INVALID_OPERATION 오류를 생성한다.
OpenGL ES 2.0 API에서는 color attachment가 없는 complete framebuffer에서 draw buffer를 clear하는 것처럼, 명령이 missing attachment에 draw하려 할 때 무슨 일이 발생하는지 지정되어 있지 않다.
WebGL API에서는 missing된 attachment에 draw하는 모든 [Draw Operations]가 해당 attachment에 아무것도 그리지 않는다. 오류는 생성되지 않는다.
WebGL API에서 lineWidth에 전달된 width 매개변수가
NaN으로 설정되면, INVALID_VALUE 오류가 생성되고 line width는 변경되지 않는다.
애플리케이션이 둘 이상의 attribute name을 같은 location에 bind하는 것이 가능하다.
이를 aliasing이라고 한다. 같은 location에 alias된 둘 이상의 attributes가 executable
program에서 active인 경우, linkProgram은 실패해야 한다.
GLSL ES [GLES20GLSL] spec은 vertex shader에서
gl_Position에 write하지 않는 한 그 값을 undefined로 둔다. WebGL은
gl_Position의 초기값이 (0,0,0,0)임을 보장한다.
GLSL ES 1.00 [GLES20GLSL] spec은 global variable
initializers를 constant expressions로 제한한다. WebGL API에서는 GLSL ES 1.00 shaders의
global variable initializers에서 const qualifier가 붙지 않은 다른 global
variables와 uniform values를 사용할 수 있다. Global variable initializers는 global
initializer expressions여야 하며, 이는 다음 중 하나로 정의된다:
다음은 global initializer expressions에서 사용할 수 없다:
global variable initializer가 수정되지 않은 GLSL ES spec을 위반하는 경우, 즉 global variable initializer가 constant expression이 아닌 경우, compilers는 warning을 생성해야 한다.
GLSL ES preprocessor specification이 참조하는 C++ standard는 #if 또는
#elif directive의 controlling expression을 parsing할 때
macro replacement에 의해 defined operator가 생성되는 경우
undefined behavior를 가진다. WebGL API가 처리하는 shader code가 preprocessor expression
내부의 macro replacement 중 defined token을 생성하면,
이는 compiler error가 되어야 한다.
이는 defined operator를 처리하는 preprocessor directives 밖의 macro expansion에는
영향을 주지 않는다.
defined를 macro name으로 사용하는 것도 C++ standard에서 undefined behavior를
가진다. WebGL API에서는 defined를 macro name으로 사용하는 것이
compiler error가 되어야 한다.
GLSL ES 1.00 [GLES20GLSL] specification은
extension specification이 달리 말하지 않는 한 #extension directives가
non-preprocessor tokens보다 먼저 나타나야 한다고 요구한다. WebGL API에서는
GLSL ES 1.00 shaders에서 #extension directives가 항상
non-preprocessor tokens 뒤에 나타날 수 있다. GLSL ES 1.00 shaders에서
#extension directives의 scope는 항상 전체 shader이며,
나중에 나타나는 #extension directives는 전체 shader에 대해 이전 것을
override한다.
#extension directives를 어디에 배치해야 하는지 결정하게 한 것은
spec에 많은 해석의 여지를 만들어 왔다. 실제로 GLES 구현은 GLSL ES spec에 쓰인 규칙을
강제하지 않았고, WebGL 구현도 마찬가지였으므로, 기존 content와 compatible하면서
spec을 well-defined로 만드는 유일한 방법은 이 규칙을 완화하는 것이다.
WebGL API에서 cube complete가 아닌 cube map의 face는 framebuffer attachment complete가
아니다. incomplete cube map의 face가 attach되어 있을 때 framebuffer status를 쿼리하면
FRAMEBUFFER_INCOMPLETE_ATTACHMENT를 반환해야 한다.
GL로 vertices를 전송하는 모든 command는 CURRENT_PROGRAM이 null이면
INVALID_OPERATION을 생성한다. 여기에는 drawElements 및
drawArrays가 포함된다.
fragment shader가 gl_FragColor 또는 gl_FragData 둘 다에
write하지 않으면, shader execution 이후 fragment colors의 값은 그대로 유지된다.
GLSL ES [GLES20GLSL] spec은 local 및 global variables가
shader에 의해 initialize되지 않는 한 그 값을 undefined로 둔다. WebGL은 그러한 variables가
zero로 initialize됨을 보장한다:
0.0, vec4(0.0), 0, false, 등.
OpenGL ES 2.0 spec [GLES20] section 2.1.2 "Data Conversions", subsection "Conversion from Integer to Floating-Point"는 bit width가 b인 type의 normalized signed integer c에서 floating-point value f로의 conversion을 다음과 같이 정의한다:
WebGL program에 attach된 shaders 중 하나라도 statically used vertex attribute와 같은 이름을 가진 uniform을 선언하면, program linking은 실패해야 한다.
POINTS primitives는 vertex가 clip volume 밖에 있지만 near 및 far clip planes
안에 있는 경우 discard될 수도 있고 아닐 수도 있다.
wide points의 clipping은 GLES와 GL에서 다르게 동작하며, 이러한 동작 차이는 구현에서 우회하기 어렵다.
OpenGL ES 2.0.25 p46:
If the primitive under consideration is a point, then clipping discards it if it lies outside the near or far clip plane; otherwise it is passed unchanged.
OpenGL 3.2 Core p97:
If the primitive under consideration is a point, then clipping passes it unchanged if it lies within the clip volume; otherwise, it is discarded.
WebGL API에서 linkProgram에 전달된 program이 useProgram에 의해
정의된 현재 사용 중인 current program object이기도 하고 link가 실패하면, 현재 렌더링
상태가 참조하는 executable code는 즉시 invalidated된다. current program을 사용하는
이후 draw calls는 INVALID_OPERATION 오류를 생성한다.
relink가 실패한 programs에 대해 draw calls를 즉시 reject하면 WebGL 구현이 더 robust해진다. OpenGL ES API의 동작은 current program이 변경될 때까지 current executable이 보존되는 것이다. 이 동작을 모든 scenarios에서 올바르게 구현하는 것은 어렵고, security bugs로 이어졌다.
shaders 안의 identifiers는 예를 들어 "g__Foo"에서처럼 double-underscores를
포함할 수 있다.
이 명세는 Khronos WebGL Working Group에 의해 제작되었다.
특별한 감사를 전한다: Arun Ranganathan (Mozilla), Chris Marrin (Apple), Jon Leech, Kenneth Russell (Google), Kenneth Waters (Google), Mark Callow (HI), Mark Steele (Mozilla), Oliver Hunt (Apple), Tim Johansson (Opera), Vangelis Kokkevis (Google), Vladimir Vukicevic (Mozilla), Gregg Tavares (Google)
추가로 감사를 전한다: Alan Hudson (Yumetech), Benoit Jacob (Mozilla), Bill Licea Kane (AMD), Boris Zbarsky (Mozilla), Cameron McCormack (Mozilla), Cedric Vivier (Zegami), Dan Gessel (Apple), David Ligon (Qualcomm), David Sheets (Ashima Arts), Glenn Maynard, Greg Roth (Nvidia), Jacob Strom (Ericsson), Jeff Gilbert (Mozilla), Kari Pulli (Nokia), Teddie Stenvi (ST-Ericsson), Neil Trevett (Nvidia), Per Wennersten (Ericsson), Per-Erik Brodin (Ericsson), Shiki Okasaka (Google), Tom Olson (ARM), Zhengrong Yao (Ericsson), 그리고 Khronos WebGL Working Group의 구성원들.