WebGL

WebGL(Web Graphics Library)은 플러그인을 사용하지 않고 웹 브라우저에서 상호작용 가능한 3D와 2D 그래픽을 표현하기 위한 JavaScript API입니다. WebGL은 HTML5 <canvas> 요소에서 사용할 수 있는, OpenGL ES 2.0을 대부분 충족하는 API를 제공합니다.

WebGL은 Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+, Microsoft Edge build 10240+에서 사용할 수 있습니다. 그러나 사용자 장치의 하드웨어도 WebGL 기능을 지원해야 합니다.

<canvas> 요소는 캔버스 API를 사용해 웹 페이지에서 2D 그래픽을 그릴 때도 사용됩니다.

참고서

표준 인터페이스

확장

이벤트

상수와 자료형

WebGL 2

WebGL 2는 WebGL2RenderingContext 인터페이스를 통해 제공되는 WebGL 메이저 업데이트다. OpenGL ES 3.0 을 기반으로 하며 다음과 같은 특징을 포함한다:

"WebGL 2 lands in Firefox" 블로그 포스트와와 and webglsamples.org/WebGL2Samples 데모도 참고.

안내서와 자습서

안내서

WebGL의 데이터

WebGL 코드를 작성할 때 사용하는 변수, 버퍼와 그 외 다른 형태의 데이터를 알아봅니다.

WebGL 우수 사례

WebGL 콘텐츠의 품질, 성능, 안정성을 높일 수 있는 팁과 제안입니다.

확장 사용

WebGL 확장을 사용하는 법을 알아봅니다.

자습서

WebGL 자습서

초심자를 위한 WebGL 핵심 개념입니다. WebGL을 접해보지 않았다면 여기서 시작해보세요.

예제

기초 WebGL 2D 애니메이션 예제

This example demonstrates the simple animation of a one-color shape. Topics examined are adapting to aspect ratio differences, a function to build shader programs from sets of multiple shaders, and the basics of drawing in WebGL.

예제로 알아보는 WebGL

A series of live samples with short explanations that showcase WebGL concepts and capabilities. The examples are sorted according to topic and level of difficulty, covering the WebGL rendering context, shader programming, textures, geometry, user interaction, and more.

고급 자습서

WebGL 모델 뷰 프로젝션

A detailed explanation of the three core matrices that are typically used to represent a 3D object view: the model, view and projection matrices.

웹을 위한 행렬 계산

A useful guide to how 3D transform matrices work, and can be used on the web — both for WebGL calculations and in CSS3 transforms.

참고자료

  • Raw WebGL: An introduction to WebGL A talk by Nick Desaulniers that introduces the basics of WebGL. This is a great place to start if you've never done low-level graphics programming.
  • Khronos WebGL site The main web site for WebGL at the Khronos Group.
  • Learning WebGL A site with tutorials on how to use WebGL.
  • WebGL Fundamentals A basic tutorial with fundamentals of WebGL.
  • WebGL playground An online tool for creating and sharing WebGL projects. Good for quick prototyping and experimenting.
  • WebGL Academy An HTML/JavaScript editor with tutorials to learn basics of webgl programming.
  • WebGL Stats A site with statistics about WebGL capabilities in browsers on different platforms.

Libraries

  • glMatrix is a JavaScript matrix and vector library for high-performance WebGL apps.
  • PhiloGL is a WebGL framework for data visualization, creative coding, and game development.
  • Pixi.js is a fast, open-source 2D WebGL renderer.
  • PlayCanvas is an open-source game engine.
  • Sylvester is an open-source library for manipulating vectors and matrices. Not optimized for WebGL but extremely robust.
  • three.js is an open-source, fully featured 3D WebGL library.
  • Phaser is a fast, free and fun open source framework for Canvas and WebGL powered browser games

명세

Specification
WebGL Specification
# 5.14
WebGL 2.0 Specification
# 3.7

브라우저 호환성

api.WebGLRenderingContext

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
WebGLRenderingContext
activeTexture
attachShader
bindAttribLocation
bindBuffer
bindFramebuffer
bindRenderbuffer
bindTexture
blendColor
blendEquation
blendEquationSeparate
blendFunc
blendFuncSeparate
bufferData
bufferSubData
canvas
checkFramebufferStatus
clear
clearColor
clearDepth
clearStencil
colorMask
compileShader
compressedTexImage2D
pixels parameter accepts SharedArrayBuffer type
compressedTexSubImage2D
copyTexImage2D
copyTexSubImage2D
createBuffer
createFramebuffer
createProgram
createRenderbuffer
createShader
createTexture
cullFace
deleteBuffer
deleteFramebuffer
deleteProgram
deleteRenderbuffer
deleteShader
deleteTexture
depthFunc
depthMask
depthRange
detachShader
disable
disableVertexAttribArray
drawArrays
drawElements
drawingBufferColorSpace
drawingBufferFormat
Experimental
drawingBufferHeight
drawingBufferStorage
Experimental
drawingBufferWidth
enable
enableVertexAttribArray
finish
flush
framebufferRenderbuffer
framebufferTexture2D
frontFace
generateMipmap
getActiveAttrib
getActiveUniform
getAttachedShaders
getAttribLocation
getBufferParameter
getContextAttributes
getError
getExtension
getFramebufferAttachmentParameter
getParameter
getProgramInfoLog
getProgramParameter
getRenderbufferParameter
getShaderInfoLog
getShaderParameter
getShaderPrecisionFormat
getShaderSource
getSupportedExtensions
getTexParameter
getUniform
getUniformLocation
getVertexAttrib
getVertexAttribOffset
hint
isBuffer
isContextLost
isEnabled
isFramebuffer
isProgram
isRenderbuffer
isShader
isTexture
lineWidth
linkProgram
makeXRCompatible
pixelStorei
polygonOffset
readPixels
renderbufferStorage
sampleCoverage
scissor
shaderSource
stencilFunc
stencilFuncSeparate
stencilMask
stencilMaskSeparate
stencilOp
stencilOpSeparate
texImage2D
texParameterf
texParameteri
texSubImage2D
uniform1f
uniform1fv
uniform1i
uniform1iv
uniform2f
uniform2fv
uniform2i
uniform2iv
uniform3f
uniform3fv
uniform3i
uniform3iv
uniform4f
uniform4fv
uniform4i
uniform4iv
uniformMatrix2fv
uniformMatrix3fv
uniformMatrix4fv
unpackColorSpace
useProgram
validateProgram
vertexAttrib1f
vertexAttrib1fv
value parameter accepts SharedArrayBuffer type
vertexAttrib2f
vertexAttrib2fv
value parameter accepts SharedArrayBuffer type
vertexAttrib3f
vertexAttrib3fv
value parameter accepts SharedArrayBuffer type
vertexAttrib4f
vertexAttrib4fv
value parameter accepts SharedArrayBuffer type
vertexAttribPointer
viewport
Available in workers
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Has more compatibility info.

api.WebGL2RenderingContext

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
WebGL2RenderingContext
activeTexture
attachShader
beginQuery
beginTransformFeedback
bindAttribLocation
bindBuffer
bindBufferBase
bindBufferRange
bindFramebuffer
bindRenderbuffer
bindSampler
bindTexture
bindTransformFeedback
bindVertexArray
blendColor
blendEquation
blendEquationSeparate
blendFunc
blendFuncSeparate
blitFramebuffer
bufferData
srcData parameter accepts SharedArrayBuffer type
bufferSubData
srcData parameter accepts SharedArrayBuffer type
canvas
checkFramebufferStatus
clear
clearBufferfi
clearBufferfv
values parameter accepts SharedArrayBuffer type
clearBufferiv
values parameter accepts SharedArrayBuffer type
clearBufferuiv
values parameter accepts SharedArrayBuffer type
clearColor
clearDepth
clearStencil
clientWaitSync
colorMask
compileShader
compressedTexImage2D
pixels parameter accepts SharedArrayBuffer type
compressedTexImage3D
pixels parameter accepts SharedArrayBuffer type
compressedTexSubImage2D
srcData parameter accepts SharedArrayBuffer type
compressedTexSubImage3D
copyBufferSubData
copyTexImage2D
copyTexSubImage2D
copyTexSubImage3D
createBuffer
createFramebuffer
createProgram
createQuery
createRenderbuffer
createSampler
createShader
createTexture
createTransformFeedback
createVertexArray
cullFace
deleteBuffer
deleteFramebuffer
deleteProgram
deleteQuery
deleteRenderbuffer
deleteSampler
deleteShader
deleteSync
deleteTexture
deleteTransformFeedback
deleteVertexArray
depthFunc
depthMask
depthRange
detachShader
disable
disableVertexAttribArray
drawArrays
drawArraysInstanced
drawBuffers
drawElements
drawElementsInstanced
drawRangeElements
drawingBufferColorSpace
drawingBufferFormat
Experimental
drawingBufferHeight
drawingBufferStorage
Experimental
drawingBufferWidth
enable
enableVertexAttribArray
endQuery
endTransformFeedback
fenceSync
finish
flush
framebufferRenderbuffer
framebufferTexture2D
framebufferTextureLayer
frontFace
generateMipmap
getActiveAttrib
getActiveUniform
getActiveUniformBlockName
getActiveUniformBlockParameter
getActiveUniforms
getAttachedShaders
getAttribLocation
getBufferParameter
getBufferSubData
dstData parameter accepts SharedArrayBuffer type
getContextAttributes
getError
getExtension
getFragDataLocation
getFramebufferAttachmentParameter
getIndexedParameter
getInternalformatParameter
getParameter
getProgramInfoLog
getProgramParameter
getQuery
getQueryParameter
getRenderbufferParameter
getSamplerParameter
getShaderInfoLog
getShaderParameter
getShaderPrecisionFormat
getShaderSource
getSupportedExtensions
getSyncParameter
getTexParameter
getTransformFeedbackVarying
getUniform
getUniformBlockIndex
getUniformIndices
getUniformLocation
getVertexAttrib
getVertexAttribOffset
hint
invalidateFramebuffer
invalidateSubFramebuffer
isBuffer
isContextLost
isEnabled
isFramebuffer
isProgram
isQuery
isRenderbuffer
isSampler
isShader
isSync
isTexture
isTransformFeedback
isVertexArray
lineWidth
linkProgram
makeXRCompatible
pauseTransformFeedback
pixelStorei
polygonOffset
readBuffer
readPixels
pixels parameter accepts SharedArrayBuffer type
renderbufferStorage
renderbufferStorageMultisample
resumeTransformFeedback
sampleCoverage
samplerParameterf
samplerParameteri
scissor
shaderSource
stencilFunc
stencilFuncSeparate
stencilMask
stencilMaskSeparate
stencilOp
stencilOpSeparate
texImage2D
texImage3D
srcData parameter accepts SharedArrayBuffer type
texParameterf
texParameteri
texStorage2D
texStorage3D
texSubImage2D
texSubImage3D
srcData parameter accepts SharedArrayBuffer type
transformFeedbackVaryings
uniform1f
uniform1fv
uniform1i
uniform1iv
uniform1ui
uniform1uiv
uniform2f
uniform2fv
uniform2i
uniform2iv
uniform2ui
uniform2uiv
uniform3f
uniform3fv
uniform3i
uniform3iv
uniform3ui
uniform3uiv
uniform4f
uniform4fv
uniform4i
uniform4iv
uniform4ui
uniform4uiv
uniformBlockBinding
uniformMatrix2fv
value parameter accepts SharedArrayBuffer type
uniformMatrix2x3fv
data parameter accepts SharedArrayBuffer type
uniformMatrix2x4fv
data parameter accepts SharedArrayBuffer type
uniformMatrix3fv
value parameter accepts SharedArrayBuffer type
uniformMatrix3x2fv
data parameter accepts SharedArrayBuffer type
uniformMatrix3x4fv
data parameter accepts SharedArrayBuffer type
uniformMatrix4fv
value parameter accepts SharedArrayBuffer type
uniformMatrix4x2fv
data parameter accepts SharedArrayBuffer type
uniformMatrix4x3fv
data parameter accepts SharedArrayBuffer type
unpackColorSpace
useProgram
validateProgram
vertexAttrib1f
vertexAttrib1fv
value parameter accepts SharedArrayBuffer type
vertexAttrib2f
vertexAttrib2fv
value parameter accepts SharedArrayBuffer type
vertexAttrib3f
vertexAttrib3fv
value parameter accepts SharedArrayBuffer type
vertexAttrib4f
vertexAttrib4fv
value parameter accepts SharedArrayBuffer type
vertexAttribDivisor
vertexAttribI4i
vertexAttribI4iv
value parameter accepts SharedArrayBuffer type
vertexAttribI4ui
vertexAttribI4uiv
value parameter accepts SharedArrayBuffer type
vertexAttribIPointer
vertexAttribPointer
viewport
waitSync

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Has more compatibility info.

같이 보기