WebGL - Web APIs | MDN

WebGL (Web Graphics Library) 是一個透過瀏覽器渲染3D及2D圖像的 JavaScript API ，且不需要安裝任何插件。

WebGL 透過與OpenGL ES 2.0緊密連結的API，將3D圖像帶 ... SkiptomaincontentSkiptoselectlanguage給開發者的網頁技術文件WebAPIsWebGLArticleActions正體中文(繁體)ThispagewastranslatedfromEnglishbythecommunity.LearnmoreandjointheMDNWebDocscommunity.Developmenttopics瀏覽器相容性你也可以看看RelatedTopics WebGLAPI WebGLtutorial GettingstartedwithWebGL Adding2DcontenttoaWebGLcontext UsingshaderstoapplycolorinWebGL AnimatingobjectswithWebGL Creating3DobjectsusingWebGL UsingtexturesinWebGL LightinginWebGL AnimatingtexturesinWebGL Examplesandarticles Matrixmathfortheweb WebGLmodelviewprojection WebGLbestpractices UsingWebGLextensions Abasic2DWebGLanimationexample WebGLbyexample Interfaces WebGLRenderingContext(en-US) WebGL2RenderingContext(en-US) WebGLActiveInfo(en-US) WebGLBuffer(en-US) WebGLContextEvent(en-US) WebGLFramebuffer(en-US) WebGLProgram(en-US) WebGLQuery(en-US) WebGLRenderbuffer(en-US) WebGLSampler(en-US) WebGLShader(en-US) WebGLShaderPrecisionFormat(en-US) WebGLSync(en-US) WebGLTexture(en-US) WebGLTransformFeedback(en-US) WebGLUniformLocation(en-US) WebGLVertexArrayObject(en-US) Documentation: Contribute TheMDNproject Developmenttopics瀏覽器相容性你也可以看看WebGLDevelopmenttopics WebGL(WebGraphicsLibrary)是一個透過瀏覽器渲染3D及2D圖像的 JavaScriptAPI，且不需要安裝任何插件。

WebGL透過與OpenGLES2.0緊密連結的API，將3D圖像帶入HTML5中，並可透過canvas元素呈現於瀏覽器中 SupportforWebGLispresentinFirefox 4+,GoogleChrome9+,Opera 12+,Safari5.1+以及InternetExplorer11+;然而，使用者的GPU也必須支援。

從WebGL開始吧 如何設立一個WebGL環境。

增加2D的東西到WebGL環境 如何使用WebGL來呈現一個簡單的平面形狀。

UsingshaderstoapplycolorinWebGL Demonstrateshowtoaddcolortoshapesusingshaders. AnimatingobjectswithWebGL Showshowtorotateandtranslateobjectstocreatesimpleanimations. Creating3DobjectsusingWebGL Showshowtocreateandanimatea3Dobject(inthiscase,acube). UsingtexturesinWebGL Demonstrateshowtomaptexturesontothefacesofanobject. LightinginWebGL HowtosimulatelightingeffectsinyourWebGLcontext. AnimatingtexturesinWebGL Showshowtoanimatetextures;inthiscase,bymappinganOggvideoontothefacesofarotatingcube. WebGLbestpractices TipsandsuggestionstoimproveyourWebGLcontent. Cross-domaintextures Informationaboutloadingtexturesfromdomainsotherthantheonefromwhichyourcontentwasloaded. Usingextensions HowtouseextensionsthatareavailableinWebGL. 資源 WebGLSpecification TheWebGLspecification. KhronosWebGLsite ThemainwebsiteforWebGLattheKhronosGroup. LearningWebGL AsitewithtutorialsonhowtouseWebGL. WebGLFundamentals AbasictutorialwithfundamentalsofWebGL. WebGLMatrices Anintroductiontomatrices'usein2DWebGL.Thisseriesalsogoesontoexplainthemathbehindperspective3D. TheWebGLCookbook AwebsitewithhandyrecipesforwritingWebGLcode. PlanetWebGL AfeedaggregatorforpeopleinvolvedintheWebGLcommunity. ewgl-matrices AblazingfastmatrixlibraryforWebGL glMatrix JavaScriptMatrixandVectorlibraryforHighPerformanceWebGLapps mjs AJavaScriptvectorandmatrixmathlibrary,optimizedforWebGLusage. Sylvester Anopensourcelibraryformanipulatingvectorsandmatrices.NotoptimizedforWebGLbutextremelyrobust. WebGLplayground AnonlinetoolforcreatingandsharingWebGLprojects.Goodforquickprototypingandexperimenting. WebGLAcademy AnHTML/Javascripteditorwithtutorialstolearnbasicsofwebglprogramming.   瀏覽器相容性WebGL1BCDtablesonlyloadinthebrowserWebGL2BCDtablesonlyloadinthebrowser相容性小記Inadditiontothebrowser,theGPUitselfalsoneedstosupportthefeature.So,forexample,S3TextureCompression(S3TC)isonlyavailableonTegra-basedtablets.MostbrowsersmaketheWebGLcontextavailablethroughthewebglcontextname,butolderonesneedexperimental-webglaswell.Inaddition,theupcomingWebGL2isfullybackwards-compatibleandwillhavethecontextnameexperimental-webgl2inthefuturefortesting.Gecko小記WebGLdebuggingandtesting 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. 你也可以看看RawWebGL:atalkbyNickDesaulniers: Foundaproblemwiththispage?EditonGitHubSourceonGitHubReportaproblemwiththiscontentonGitHubWanttofixtheproblemyourself?SeeourContributionguide.Lastmodified:Mar8,2022,byMDNcontributors