Experimental webglWebGL testWebGL benchmark

Getting Started With WebGL - Web APIs - W3cubDocs

文章推薦指數： 80 %
投票人數：10人

WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 2D and 3D rendering in an HTML canvas in browsers that support it without the use ... GettingstartedwithWebGL Next»WebGLenableswebcontenttouseanAPIbasedonOpenGLES2.0toperform2Dand3DrenderinginanHTMLcanvasinbrowsersthatsupportitwithouttheuseofplug-ins.WebGLprogramsconsistofcontrolcodewritteninJavaScriptandshadercode(GLSL)thatisexecutedonacomputer'sGraphicsProcessingUnit(GPU).WebGLelementscanbemixedwithotherHTMLelementsandcompositedwithotherpartsofthepageorpagebackground.ThisarticlewillintroduceyoutothebasicsofusingWebGL.It'sassumedthatyoualreadyhaveanunderstandingofthemathematicsinvolvedin3Dgraphics,andthisarticledoesn'tpretendtotrytoteachyou3Dgraphicsconceptsitself.Thecodeexamplesinthistutorialcanalsobefoundinthewebgl-examplesGitHubrepository.It'sworthnotingherethatthisseriesofarticlesintroducesWebGLitself;however,thereareanumberofframeworksavailablethatencapsulateWebGL'scapabilities,makingiteasiertobuild3Dapplicationsandgames,suchasTHREE.jsandBABYLON.js. Preparingtorenderin3D ThefirstthingyouneedinordertouseWebGLforrenderingisacanvas.TheHTMLfragmentbelowdeclaresacanvasthatoursamplewilldrawinto.

PreparingtheWebGLcontext Themain()functioninourJavaScriptcode,iscalledwhenourscriptisloaded.ItspurposeistosetuptheWebGLcontextandstartrenderingcontent.// //starthere // functionmain(){ constcanvas=document.querySelector("#glCanvas"); //InitializetheGLcontext constgl=canvas.getContext("webgl"); //OnlycontinueifWebGLisavailableandworking if(gl===null){ alert("UnabletoinitializeWebGL.Yourbrowserormachinemaynotsupportit."); return; } //Setclearcolortoblack,fullyopaque gl.clearColor(0.0,0.0,0.0,1.0); //Clearthecolorbufferwithspecifiedclearcolor gl.clear(gl.COLOR_BUFFER_BIT); } window.onload=main; Thefirstthingwedohereisobtainareferencetothecanvas,assigningittoavariablenamedcanvas.Oncewehavethecanvas,wetrytogetaWebGLRenderingContextforitbycallinggetContext()andpassingitthestring"webgl".IfthebrowserdoesnotsupportWebGL,getContext()willreturnnullinwhichcasewedisplayamessagetotheuserandexit.Ifthecontextissuccessfullyinitialized,thevariableglisourreferencetoit.Inthiscase,wesettheclearcolortoblack,andclearthecontexttothatcolor(redrawingthecanvaswiththebackgroundcolor).Atthispoint,youhaveenoughcodethattheWebGLcontextshouldsuccessfullyinitialize,andyoushouldwindupwithabigblack,emptybox,readyandwaitingtoreceivecontent. Viewthecompletecode|Openthisdemoonanewpage Seealso AnintroductiontoWebGL:WrittenbyLuzCaballero,publishedatdev.opera.com.ThisarticleaddresseswhatWebGLis,explainshowWebGLworks(includingtherenderingpipelineconcept),andintroducessomeWebGLlibraries.WebGLFundamentals AnintrotomodernOpenGL:AseriesofnicearticlesaboutOpenGLwrittenbyJoeGroff,providingaclearintroductiontoOpenGLfromitshistorytotheimportantgraphicspipelineconcept,andalsoincludessomeexamplestodemonstratehowOpenGLworks.IfyouhavenoideawhatOpenGLis,thisisagoodplacetostart. Next» ©2005–2021MDNcontributors.LicensedundertheCreativeCommonsAttribution-ShareAlikeLicensev2.5orlater. https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL

請為這篇文章評分？

延伸文章資訊