Learn WebGL — LearnWebGL

These tutorials start with the “big picture” and then study the details of each ... Therefore, when you learn WebGL, you are learning OpenGL for an ...   LearnWebGL TableofContents BookIndex LearnWebGL¶ Thetraditionalapproachtolearningasubjectistodividethetopicinto sub-topics,studyeachsub-topic,andthen showhowthesub-topicsrelatetoeachother.Thatisnotthe approachforthesetutorials.Thesetutorialsstartwiththe“bigpicture” andthenstudythedetailsofeachsub-systemthatcomposesthecomplex overallsystem.Thestudyofeachsub-systemstarts frombasicprinciplesandtriestoavoidanyassumptionsaboutwhat thestudentknowsordoesnotknow. WhylearnWebGL?Verysimply,itistheonlycrossplatformsolution forproducingreal-time,3Dcomputergraphicswehave. YoucouldlearnDirect3D,whichisaproprietarysystemmadebyMicrosoft, butyouwouldberestrictedtorunningyoursoftwareonaMicrosoftbasedcomputer. YoucouldlearnOpenGL,whichiscrossplatform,butOpenGLdoesnothavea definitivewaytointerfacetoanoperatingsystem’suserinterface. WebGLisanoffspringofOpenGLthatexecutesinallmodernwebbrowsers, includingwebbrowsersontabletsandphones.Therefore,whenyoulearnWebGL, youarelearningOpenGLforanenvironmentthatbasicallywillexecuteon allmoderncomputingdevices.Thatisreallycool!!! Thesetutorialsaredesignedtobestudiedinsequencebecausetheybuild oneachother. Westartwiththe“bigpicture”toshowthecriticalsub-systemsofany WebGLwebpage. Thenweisolatethedetailsinanindividualsub-systemandattempttomake senseofwhyitisdesignedlikeitisandhowitworks. Note:WebGLrequiresprogrammingandyou areencouragedtoexperimentwithsamplecodeateachstageofyourlearning. Goodprogrammingpracticesuseanincrementaldevelopmentcycle. Youstartdevelopmentwithasimpleworkingprogramandusea simplecycleofimplement/test,implement/test,implement/test,...untilyou reachyourgoal.Rarely,ifever,shouldyouprogramacomplexWebGLprogram “fromscratch.”Alwaysstartwithaworkingprogramandaddcomplexityslowly. AcriticalideafortheselessonsisthatyouMUST masteratopicbeforemovingtoanewtopic.Ifyouareconfusedabout evenasmallpartofatopic,youwillprobablynotunderstandthemore complextopicthatfollow.Sotakeyourtimeandthoroughlymastereach topicbeforemovingtothenexttopic. TableofContents¶ SECTION1:TheBigPicture¶ 1.1-Introduction 1.2-3DComputerGraphics-WhatandHow 1.3-ComputerGraphics-ABriefHistory 1.4-FileOrganizationForWebGLprograms 1.5-SoftwareOrganizationForWebGLprograms 1.6-SoftwareCodingStandards SECTION2:ToolsandLanguages¶ 2.1-IntroductiontoLanguagesandTools 2.2-HTMLandCSS 2.3-JavaScriptLanguage 2.4-DOMandjQuery 2.5-CanvasandGLContext 2.6-AsynchronousFileLoading 2.7-Events 2.8-Debugging SECTION3:ModelData¶ 3.1-Introduction-DescribingVirtualWorlds 3.2-ModelingLocation 3.3-Direction/Orientation 3.4-Volume/Surfaces 3.5-MaterialProperties 3.6-Color 3.7-TextureMaps 3.8-LightModeling 3.9-SurfaceNormals 3.10-Lines SECTION4:Modeling¶ 4.1-3DModeling 4.2-Blender 4.3-OBJDataFormat SECTION5:RenderingBasics¶ 5.1-IntroductiontoRendering 5.2-APrimeronShaders 5.3-APrimeronBufferObjects 5.4-ASimpleModel 5.5-Example1:OneColorperModel 5.6-Example2:OneColorperTriangle 5.7-Example3:OneColorperVertex 5.8-Example4:Textures 5.9-InterleavedBuffers 5.10-ConvertingOBJModelDatatoBufferObjects SECTION6:ModelTransformations¶ 6.1-IntroductiontoTransformations 6.2-Scaling 6.3-Translating 6.4-Rotating 6.5-TransformationMatrices 6.6-AMatrixCodeLibrary-Learn_webgl_matrix 6.7-UsingLearn_webgl_matrix-ARobotArmBase 6.8-ChainingTransformations-AddingaForearm 6.9-ChainingTransformations-AddinganUpperArm 6.10-ChainingTransformations(Summary) 6.11-MoreMatrixMathConcepts 6.12-CodingIssues SECTION7:Cameras¶ 7.1-IntroductiontoCameras 7.2-CameraMath 7.3-CameraMovement 7.4-MovingaCamera 7.5-RotatingaCamera 7.6-PointsAlongAPath 7.7-TimingAlongAPath 7.8-ScreenUpdatesandAnimation SECTION8:ProjectionsandViewports¶ 8.1-IntroductiontoProjections 8.2-OrthographicProjections 8.3-PerspectiveProjections 8.4-Viewports 8.5-SummaryofProjectionsandViewports SECTION9:Lights¶ 9.1-IntroductiontoLighting 9.2-DiffuseLighting 9.3-SpecularLighting 9.4-AmbientLighting 9.5-CombiningAmbient,Diffuse,andSpecularLighting 9.6-FragmentShaderDebugging 9.7-LightAttenuation 9.8-TypesofLightSources SECTION10:SurfaceProperties¶ 10.1-IntroductiontoSurfaceProperties 10.2-SurfaceColors 10.3-Smooth“Phong”Shading 10.4-TextureMappingUsingImages 10.5-TextureMapping-TextureCoordinates 10.6-TextureMappingUsingProcedures 10.7-TextureMappingUsingProcedures-Continued 10.8-TransformationsonTextureMaps 10.9-OtherSurfaceManipulations 10.10-CombiningLightandSurfaceProperties SECTION11:AdvancedRenderingandTransparency¶ 11.1-IntroductiontoAdvancedRendering 11.2-HiddenSurfaceRemoval 11.3-SelectingObjects 11.4-Transparency(andAlphaBlending) 11.5-Shadows 11.6-ParticleSystems 11.7-Overlays SECTION12:ShaderLanguage¶ 12.1-WebGLShaderLanguage 12.2-GLSLDataTypesandVariables 12.3-GLSLControlStructures 12.4-GLSLOperators(MathematicalandLogical) 12.5-GLSLBuilt-inFunctionsandVariables 12.6-GLSLCompilingandLinking Appendices¶ Acknowledgements¶ WebGLReferences TutorialAuthor NextSection-1.1-Introduction