js. Download it, install it, then open a command prompt / console / terminal window. If you're on Windows the installer will add a special " ...
English
Français
日本語
한국어
Polski
Portuguese
Русский
简体中文
TableofContents
WebGLFundamentals.org
Fix,Fork,Contribute
WebGLSetupandInstallation
Technicallyyoudon'tneedanythingotherthanawebbrowsertodoWebGL
development.Gotojsfiddle.netorjsbin.com
orcodepen.ioandjuststartapplyingthelessonshere.
Onallofthemyoucanreferenceexternalscriptsbyaddinga
tagpairifyouwanttouseexternalscripts.
Still,therearelimits.WebGLhasstrongerrestrictionsthanCanvas2Dforloadingimages
whichmeansyoucan'teasilyaccessimagesfromaroundthewebforyourWebGLwork.
Ontopofthatit'sjustfastertoworkwitheverythinglocal.
Let'sassumeyouwanttorunandeditthesamplesonthissite.Thefirstthingyoushould
doisdownloadthesite.Youcandownloadithere.
Unzipthefilesintosomefolder.
UsingasmallsimpleeasyWebServer
Nextupyoushouldinstallasmallwebserver.Iknow"webserver"soundsscarybutthetruthisweb
serversareactuallyextremelysimple.
Here'saverysimpleonewithaninterfacecalledServez.
Justpointitatthefolderwhereyouunzippedthefiles,click"Start",thengoto
inyourbrowserhttp://localhost:8080/webgl/andchoose
asample.
Ifyoupreferthecommandline,anotherwayistousenode.js.
Downloadit,installit,thenopenacommandprompt/console/terminalwindow.Ifyou'reonWindowstheinstaller
willaddaspecial"NodeCommandPrompt"sousethat.
Theninstallservezbytyping
npm-ginstallservez
Ifyou'reonOSXuse
sudonpm-ginstallservez
Onceyou'vedonethattype
servezpath/to/folder/where/you/unzipped/files
Itshouldprintsomethinglike
Theninyourbrowsergotohttp://localhost:8080/webgl/.
Ifyoudon'tspecifyapaththenservezwillservethecurrentfolder.
UsingyourBrowsersDeveloperTools
Mostbrowserhaveextensivedevelopertoolsbuiltin.
DocsforChrome'sarehere,
Firefox'sarehere.
Learnhowtousethem.IfnothingelsealwayschecktheJavaScriptconsole.Ifthereisanissueitwilloftenhave
anerrormessage.Readtheerrormessagecloselyandyoushouldgetacluewheretheissueis.
WebGLLint
Hereisascripttocheckforseveral
webglerrors.Justaddthistoyourpagebeforeyourotherscripts
andyourprogramwillthrowanexceptionifitgetsaWebGLerrorandifyou'relucky
printmoreinfo.
Youcanalsoaddnamestoyourwebglresources
(buffer,textures,shaders,programs,...)sothatwhenyougetanerrormessageit
willincludethenamesoftheresourcesrelevanttotheerror.
Extensions
TherearevariousWebGLInspectors.
Here'soneforChromeandFirefox.
Note:READTHEDOCS!
Theextensionversionofspector.jscapturesframes.Whatthisismeansisitonly
worksifyourWebGLappsuccessfullyinitializesitselfandthenrendersina
requestAnimationFrameloop.Youclickthe"record"buttonanditcaptures
alltheWebGLAPIcallsforone"frame".
Thismeanswithoutsomeworkitwon'thelpyoufindissuesduringinitialization.
Toworkaroundthatthereare2methods.
Useitasalibrary,notasanextension.
Seethedocs.Thiswayyoucantellit"CapturetheWebGLAPIcommandsnow!"
Changeyourappsothatitdoesn'tstartuntilyouclickabutton.
Thiswayyoucangototheextensionandpick"record"andthenstartyour
app.Ifyourappdoesn'tanimatethenjustaddafewfakeframes.Example:
start
functionmain(){
//GetAWebGLcontext
/**@type{HTMLCanvasElement}*/
constcanvas=document.querySelector("#canvas");
constgl=canvas.getContext("webgl");
if(!gl){
return;
}
conststartElem=document.querySelector('button');
startElem.addEventListener('click',start,{once:true});
functionstart(){
//runtheinitializationinrAFsincespectoronlycapturesinsiderAFevents
requestAnimationFrame(()=>{
//doalltheinitialization
init(gl);
});
//makesomoreframessospectorhassomethingtolookat.
requestAnimationFrame(()=>{});
requestAnimationFrame(()=>{});
requestAnimationFrame(()=>{});
}
}
main();
Nowyoucanclick"record"inthespector.jsextension,thenclick"start"inyourpage
andspectorwillrecordyourinitialization.
Safarialsohasasimilarbuiltinfeaturethathassimilarissueswithsimilarworkarounds.
WhenIuseahelperlikethisI'lloftenclickonadrawcall,andchecktheuniforms.IfIseeabunchofNaN(NaN=NotaNumber)thenIcanusuallytrackdownthecodethatsetthatuniformandfindthebug.
InspecttheCode
Alsoalwaysrememberyoucaninspectthecode.Youcanusuallyjustpickviewsource
Evenifyoucan'trightclickapageorifthesourceisinaseparatefile
youcanalwaysviewthesourceinthedevtools
GetStarted
Hopefullythathelpsyougetstarted.Nowbacktothelessons.
English
Français
日本語
한국어
Polski
Portuguese
Русский
简体中文
Fundamentals
Fundamentals
HowItWorks
ShadersandGLSL
WebGLStateDiagram
ImageProcessing
ImageProcessing
ImageProcessingContinued
2Dtranslation,rotation,scale,matrixmath
2DTranslation
2DRotation
2DScale
2DMatrices
3D
Orthographic3D
3DPerspective
3DCameras
Lighting
DirectionalLighting
PointLighting
SpotLighting
StructureandOrganization
LessCode,MoreFun
DrawingMultipleThings
SceneGraphs
Geometry
Geometry-Lathe
Loading.objfiles
Loading.objw.mtlfiles
Textures
Textures
DataTextures
Using2orMoreTextures
CrossOriginImages
PerspectiveCorrectTextureMapping
PlanarandPerspectiveProjectionMapping
RenderingToATexture
RendertoTexture
Shadows
Shadows
Techniques
2D
2D-DrawImage
2D-MatrixStack
Sprites
3D
Cubemaps
Environmentmaps
Skyboxes
Skinning
Fog
Picking(clickingonstuff)
Text
Text-HTML
Text-Canvas2D
Text-UsingaTexture
Text-UsingaGlyphTexture
Textures
RampTextures(ToonShading)
GPGPU
GPGPU
Tips
SmallestPrograms
DrawingWithoutData
Shadertoy
PullingVertices
Optimization
IndexedVertices(gl.drawElements)
InstancedDrawing
Misc
SetupAndInstallation
Boilerplate
ResizingtheCanvas
Animation
Points,Lines,andTriangles
MultipleViews,MultipleCanvases
VisualizingtheCamera
WebGLandAlpha
2Dvs3Dlibraries
Anti-Patterns
WebGLMatricesvsMathMatrices
PrecisionIssues
Takingascreenshot
PreventtheCanvasBeingCleared
GetKeyboardInputFromaCanvas
UseWebGLasBackgroundinHTML
CrossPlatformIssues
QuestionsandAnswers
Reference
Attributes
TextureUnits
Framebuffers
readPixels
References
HelperAPIDocs
TWGL,AtinyWebGLhelperlibrary
github
Questions?Askonstackoverflow.
Issue/Bug?Createanissueongithub.
Usecodegoeshere
forcodeblocks
commentspoweredbyDisqus