WebGL: 2D and 3D graphics for the web - Web APIs - MDN ...

WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web ... SkiptomaincontentSkiptoselectlanguageReferencesWebAPIsWebGL:2Dand3DgraphicsforthewebArticleActionsEnglish(US)ReferenceGuidesandtutorialsResourcesSpecificationsBrowsercompatibilitySeealsoRelatedTopics WebGLAPI WebGLtutorial GettingstartedwithWebGL Adding2DcontenttoaWebGLcontext UsingshaderstoapplycolorinWebGL AnimatingobjectswithWebGL Creating3DobjectsusingWebGL UsingtexturesinWebGL LightinginWebGL AnimatingtexturesinWebGL Examplesandarticles Matrixmathfortheweb WebGLmodelviewprojection WebGLbestpractices UsingWebGLextensions Abasic2DWebGLanimationexample WebGLbyexample Interfaces WebGLRenderingContext WebGL2RenderingContext WebGLActiveInfo WebGLBuffer WebGLContextEvent WebGLFramebuffer WebGLProgram WebGLQuery WebGLRenderbuffer WebGLSampler WebGLShader WebGLShaderPrecisionFormat WebGLSync WebGLTexture WebGLTransformFeedback WebGLUniformLocation WebGLVertexArrayObject Documentation: Contribute TheMDNproject ReferenceGuidesandtutorialsResourcesSpecificationsBrowsercompatibilitySeealsoWebGL:2Dand3DgraphicsforthewebWebGL(WebGraphicsLibrary)isaJavaScriptAPIforrenderinghigh-performanceinteractive3Dand2Dgraphicswithinanycompatiblewebbrowserwithouttheuseofplug-ins.WebGLdoessobyintroducinganAPIthatcloselyconformstoOpenGLES2.0thatcanbeusedinHTML5elements.ThisconformancemakesitpossiblefortheAPItotakeadvantageofhardwaregraphicsaccelerationprovidedbytheuser'sdevice. SupportforWebGLispresentinFirefox4+,GoogleChrome9+,Opera12+,Safari5.1+,InternetExplorer11+,andMicrosoftEdgebuild10240+;however,theuser'sdevicemustalsohavehardwarethatsupportsthesefeatures. TheWebGL2APIintroducessupportformuchoftheOpenGLES3.0featureset;it'sprovidedthroughtheWebGL2RenderingContextinterface. TheelementisalsousedbytheCanvasAPItodo2Dgraphicsonwebpages.ReferenceStandardinterfaces WebGLRenderingContext WebGL2RenderingContext WebGLActiveInfo WebGLBuffer WebGLContextEvent WebGLFramebuffer WebGLProgram WebGLQuery WebGLRenderbuffer WebGLSampler WebGLShader WebGLShaderPrecisionFormat WebGLSync WebGLTexture WebGLTransformFeedback WebGLUniformLocation WebGLVertexArrayObject Extensions ANGLE_instanced_arrays EXT_blend_minmax EXT_color_buffer_float EXT_color_buffer_half_float EXT_disjoint_timer_query EXT_float_blend EXT_frag_depth EXT_shader_texture_lod EXT_sRGB EXT_texture_compression_bptc EXT_texture_compression_rgtc EXT_texture_filter_anisotropic EXT_texture_norm16 KHR_parallel_shader_compile OES_element_index_uint OES_fbo_render_mipmap OES_standard_derivatives OES_texture_float OES_texture_float_linear OES_texture_half_float OES_texture_half_float_linear OES_vertex_array_object OVR_multiview2 WEBGL_color_buffer_float WEBGL_compressed_texture_astc WEBGL_compressed_texture_etc WEBGL_compressed_texture_etc1 WEBGL_compressed_texture_pvrtc WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_depth_texture WEBGL_draw_buffers WEBGL_lose_context WEBGL_multi_draw Events webglcontextlost webglcontextrestored webglcontextcreationerror Constantsandtypes WebGLconstants WebGLtypes WebGL2WebGL2isamajorupdatetoWebGLwhichisprovidedthroughtheWebGL2RenderingContextinterface.ItisbasedonOpenGLES3.0andnewfeaturesinclude: 3Dtextures, Samplerobjects, UniformBufferobjects, Syncobjects, Queryobjects, TransformFeedbackobjects, PromotedextensionsthatarenowcoretoWebGL2:VertexArrayobjects,instancing,multiplerendertargets,fragmentdepth. Seealsotheblogpost"WebGL2landsinFirefox"andwebglsamples.org/WebGL2Samplesforafewdemos.GuidesandtutorialsBelow,you'llfindanassortmentofguidestohelpyoulearnWebGLconceptsandtutorialsthatofferstep-by-steplessonsandexamples.Guides DatainWebGL Aguidetovariables,buffers,andothertypesofdatausedwhenwritingWebGLcode. WebGLbestpractices Tipsandsuggestionstohelpyouimprovethequality,performance,andreliabilityofyourWebGLcontent. Usingextensions AguidetousingWebGLextensions. Tutorials WebGLtutorial Abeginner'sguidetoWebGLcoreconcepts.Agoodplacetostartifyoudon'thavepreviousWebGLexperience. Examples Abasic2DWebGLanimationexample Thisexampledemonstratesthesimpleanimationofaone-colorshape.Topicsexaminedareadaptingtoaspectratiodifferences,afunctiontobuildshaderprogramsfromsetsofmultipleshaders,andthebasicsofdrawinginWebGL. WebGLbyexample AseriesoflivesampleswithshortexplanationsthatshowcaseWebGLconceptsandcapabilities.Theexamplesaresortedaccordingtotopicandlevelofdifficulty,coveringtheWebGLrenderingcontext,shaderprogramming,textures,geometry,userinteraction,andmore. Advancedtutorials WebGLmodelviewprojection Adetailedexplanationofthethreecorematricesthataretypicallyusedtorepresenta3Dobjectview:themodel,viewandprojectionmatrices. Matrixmathfortheweb Ausefulguidetohow3Dtransformmatriceswork,andcanbeusedontheweb—bothforWebGLcalculationsandinCSS3transforms. Resources KhronosWebGLsiteThemainwebsiteforWebGLattheKhronosGroup. WebGLFundamentalsAbasictutorialwithfundamentalsofWebGL. RawWebGL:AnintroductiontoWebGLAtalkbyNickDesaulniersthatintroducesthebasicsofWebGL. WebGLplaygroundAnonlinetoolforcreatingandsharingWebGLprojects.Goodforquickprototypingandexperimenting. WebGLAcademyAnHTML/JavaScripteditorwithtutorialstolearnbasicsofwebglprogramming. WebGLStatsAsitewithstatisticsaboutWebGLcapabilitiesinbrowsersondifferentplatforms. Libraries three.jsisanopen-source,fullyfeatured3DWebGLlibrary. Babylon.jsisapowerful,simple,andopengameand3DrenderingenginepackedintoafriendlyJavaScriptframework. Pixi.jsisafast,open-source2DWebGLrenderer. Phaserisafast,freeandfunopensourceframeworkforCanvasandWebGLpoweredbrowsergames. PlayCanvasisanopen-sourcegameengine. glMatrixisaJavaScriptmatrixandvectorlibraryforhigh-performanceWebGLapps. twglisalibraryformakingwebgllessverbose. RedGLisanopen-source3DWebGLlibrary. vtk.jsisaJavaScriptlibraryforscientificvisualizationinyourbrowser. webgl-lintwillhelpfinderrorsinyourWebGLcodeandprovideusefulinfo Specifications Specification WebGLSpecification WebGL2.0Specification OpenGLES2.0 OpenGLES3.0 BrowsercompatibilityWebGL1BCDtablesonlyloadinthebrowserWebGL2BCDtablesonlyloadinthebrowserCompatibilitynotesInadditiontothebrowser,theGPUitselfalsoneedstosupportthefeature.So,forexample,S3TextureCompression(S3TC)isonlyavailableonTegra-basedtablets.MostbrowsersmaketheWebGLcontextavailablethroughthewebglcontextname,butolderonesneedexperimental-webglaswell.Inaddition,theupcomingWebGL2isfullybackwards-compatibleandwillhavethecontextnamewebgl2.GeckonotesWebGLdebuggingandtesting StartingwithGecko10.0(Firefox10.0/Thunderbird10.0/SeaMonkey2.7),therearetwopreferencesavailablewhichletyoucontrolthecapabilitiesofWebGLfortestingpurposes: webgl.min_capability_mode ABooleanpropertythat,whentrue,enablesaminimumcapabilitymode.Wheninthismode,WebGLisconfiguredtoonlysupportthebareminimumfeaturesetandcapabilitiesrequiredbytheWebGLspecification.ThisletsyouensurethatyourWebGLcodewillworkonanydeviceorbrowser,regardlessoftheircapabilities.Thisisfalsebydefault. webgl.disable_extensions ABooleanpropertythat,whentrue,disablesallWebGLextensions.Thisisfalsebydefault. Seealso CanvasAPI CompatibilityinfoaboutWebGLextensions Foundaproblemwiththispage?EditonGitHubSourceonGitHubReportaproblemwiththiscontentonGitHubWanttofixtheproblemyourself?SeeourContributionguide.Lastmodified:Mar23,2022,byMDNcontributors