gfxfundamentals/webgl-fundamentals - GitHub

WebGL itself is simple. These lessons try to show that simplicity and well as teach the fundamentals of 2D math and 3D math so readers can hopefully have an ... Skiptocontent {{message}} gfxfundamentals / webgl-fundamentals Public Notifications Fork 543 Star 3.7k WebGLlessonsthatstartwiththebasics webglfundamentals.org License Viewlicense 3.7k stars 543 forks Star Notifications Code Issues 32 Pullrequests 6 Discussions Actions Projects 0 Wiki Security Insights More Code Issues Pullrequests Discussions Actions Projects Wiki Security Insights gfxfundamentals/webgl-fundamentals Thiscommitdoesnotbelongtoanybranchonthisrepository,andmaybelongtoaforkoutsideoftherepository. master Branches Tags Couldnotloadbranches Nothingtoshow {{refName}} default Couldnotloadtags Nothingtoshow {{refName}} default 10 branches 0 tags Code Latestcommit Magic-zhu and greggman fix:img.src=urlismissinginline142 … b3f8115 Jul4,2022 fix:img.src=urlismissinginline142 Add`img.src=url`inline142 b3f8115 Gitstats 1,705 commits Files Permalink Failedtoloadlatestcommitinformation. Type Name Latestcommitmessage Committime .github/workflows usenode16ongithubactions Dec22,2021 .vscode [email protected] Dec24,2021 3rdparty grablatest Jul16,2020 build stats Apr20,2021 source_assets addsourcefor3df Jul18,2017 webgl fix:img.src=urlismissinginline142 Jul4,2022 .eslintrc.js lint Sep1,2020 .gitattributes addmorebinaryfiles Jan4,2019 .gitignore http->https Apr6,2020 .npmrc .npmrc Dec28,2020 CNAME addCNAME Jan18,2015 Gruntfile.js don'tlintqnaexamples Feb17,2021 LICENSE © Feb17,2021 README.md Fixtypos May13,2021 contributors.md Createcontributors.md Apr12,2021 docs.md http->https Apr6,2020 icon.png addiconforsourcetree Dec16,2016 package.json [email protected] Mar4,2022 robots.txt http->https Apr6,2020 toc.hanson addframebuffers Nov17,2020 todo.md updatetodo Sep14,2017 Viewcode WebGLFundamentals Contributing Translating langinfo.hanson index.md toc.html lang.css Translationnotes UIlocalization Tobuild Continuousbuild Buildoptions TODO AlistofarticlesI'dliketowriteorseewritten README.md WebGLFundamentals ThisisaseriesoflessonsortutorialsaboutWebGL. UnlikemostWebGLlessonsthesearenotbasedoffofOpenGL. OpenGLis20yearsold.ThelessonsofOpenGLdon'tmatchwellwithWebGL. TheAPIshavechangedtoomuch.TheideasofOpenGLandOpenGLtutorials areoutofdatewithWebGL,OpenGLES2.0andthelandofshaders. IwouldarguethatWebGLisactuallyaverysimpleAPI.Whatmakesit appearcomplicatedisthewayinwhichit'sused.Thecomplications areaddedbytheprogrammer.WebGLitselfissimple. Theselessonstrytoshowthatsimplicityandwellasteachthe fundamentalsof2Dmathand3Dmathsoreaderscanhopefully haveaneasiertimewritingtheirownWebGLprogramsand understandingthecomplexitythatotherprogrammerspileon topofsimpleWebGL. Thisisworkinprogress.Feelfreetocontribute. Contributing Ofcoursebugfixesarealwayswelcome. Ifyou'dliketowriteanewarticlepleasetrytoalwaystake onestepatatime.Don'tdo2ormorethingsinasinglestep. Explainanynewmathinthesimplesttermspossible.Ideally withdiagramswherepossible. Translating Eachtranslationgoesinafolderunderwebgl/lessons/. Requiredfilesare langinfo.hanson index.md toc.html langinfo.hanson Definesvariouslanguagespecificoptions. HansonisaJSONlikeformatbutallowscomments. Currentfieldsare { //Thelanguage(willshowupinthelanguageselectionmenu) language:'English', //Phrasethatappearsunderexamples defaultExampleCaption:"clickheretoopeninaseparatewindow", //Titlethatappearsoneachpage title:'WebGLFundamentals', //Basicdescriptionthatappearsoneachpage description:'LearnWebGLfromthegroundup.Nomagic', //Linktothelanguageroot. link:'https://webglfundamentals.org/webgl/lessons/ja',//replace`ja`withcountrycode //htmlthatappearsafterthearticleandbeforethecomments commentSectionHeader:'

', //markdownthatappearsforuntranslatedarticles missing:"Sorrythisarticlehasnotbeentranslatedyet.[TranslationsWelcome](https://github.com/gfxfundamentals/webgl-fundamentals)!😄\n\n[Here'stheoriginalEnglisharticlefornow]({{{origLink}}}).", //thephrase"TableofContents" toc:"TableofContents", //translationofcategoriesfortableofcontents categoryMapping:{ 'fundamentals':"Fundamentals", 'image-processing':"ImageProcessing", 'matrices':"2Dtranslation,rotation,scale,matrixmath", '3d':"3D", 'lighting':"Lighting", 'organization':"StructureandOrganization", 'geometry':"Geometry", 'textures':"Textures", 'rendertargets':"RenderingToATexture", '2d':"2D", 'text':"Text", 'misc':"Misc", 'reference':"Reference", }, } index.md Thisisthetemplateforthemainpageforeachlanguage toc.html Thisistemplateforthetableofcontentsforthelanguage. Itisincludedonboththeindexandoneacharticle.Theonly partsnotauto-generatedarethelinksendinglinkswhich youcantranslateifyouwantto. ThebuildsystemwillcreateaplaceholderforeveryEnglisharticleforwhichthereisnocorrespondingarticleinthatlanguage.Itwillbefilledwiththemissingmessagefromabove. lang.css Thisisincludedifandonlyifitexists.I'dstronglyprefernottohaveto useit.InparticularIdon'twantpeopletogetintoargumentsaboutfonts butbasicallyit'sawaytochoosethefontsperlanguage.Youshouldonlyset thevariablesthatareabsolutelyneeded.Example /*lessons/ko/lang.css*/ /*Onlycommentinoverridesasabsolutelynecessary!*/ :root{ --article-font-family:"bestfontforkoreanarticletext"; --headline-font-family:"bestfontforkoreanheadlines"; /*ablockofcode*/ /*--code-block-font-family:"LucidaConsole",Monaco,monospace;*/ /*awordinasentence*/ /*--code-font-family:monospace;*/ } Notice2settingsarenotchanged.Itseemsunlikelytomethatcodewould needadifferentfontperlanguage. PS:Whilewe'rehere,Ilovecodefontswithligaturesbuttheyseemlikeabad ideaforatutorialsitebecausetheligatureshidetheactualcharactersneeded sopleasedon'taskfororusealigaturecodefonthere. Translationnotes ThebuildprocesswillmakeaplaceholderhtmlfileforeacharticlethathasanEnglish.mdfilein webgl/lessonsbutnocorresponding.mdfileforthelanguage.Thisistomakeiteasytoinclude linksinanarticlethatlinkstoanotherarticlebutthatotherarticlehasnotyetbeentranslated. Thiswayyoudon'thavetogobackandfixalreadytranslatedarticles.Justtranslateonearticle atatimeandleavethelinksasis.They'lllinktoplaceholdersuntilsomeonetranslatesthemissing articles. Articleshavefrontmatteratthetop Title:LocalizedTitleofarticle Description:Localizeddescriptionofarticle(usedinRSSandsocialmediatags) TOC:LocalizedtextforTableofContents DONOTCHANGELINKS:Forexamplealinktoalocalresourcesmightlooklike [text](link) or Whileyoucanaddqueryparameters(seebelow)donotadd"../"totrytomakethelinkrelativetothe .mdfile.LinksshouldstayasthoughthearticleexistsatthesamelocationastheoriginalEnglish. UIlocalization SomeofthediagramsallowpassingtranslationsfortheUIandothertext. Forexampleifthereisaslidernamed"rotation" youcanadd"?ui-rotation=girar"attheendoftheURLforthediagram.For2ormoretranslations separatethemwitha&.CertaincharactersaredisallowedinURLslike=,#,&etc.Forthose usetheiruriencoding. Fordiagramlabelsyou'llhavetolookinsidethecode.Forexampleforthe directionallightingdiagramnearthestartofthecodeitlookslikethis constlang={ lightDir:opt.lightDir||"lightdirection", dot:opt.dot||"dot(reverseLightDirection,surfaceDirection)=", surface1:opt.surface1||"surface", surface2:opt.surface2||"direction", }; Whichmeansyoucanlocalizethelabelslikethis {{{diagramurl="resources/directional-lighting.html?lightDir=光線方向&surface1=オブジェクト&surface2=表面方向&dot=dot(光線反対方向,表面方向)%20%3D%20&ui-rotation=角度"caption="方向を回転してみて"width="500"height="400"}}} Fortesting,referencethesampledirectlyinyourbrowser.Forexample http://localhost:8080/webgl/lessons/resources/directional-lighting.html?lightDir=光線方向&surface1=オブジェクト&surface2=表面方向&dot=dot(光線反対方向,表面方向)%20%3D%20&ui-rotation=角度 Tobuild Thesiteisbuiltintotheoutfolder Steps gitclonehttps://github.com/gfxfundamentals/webgl-fundamentals.git cdwebgl-fundamentals npminstall npmrunbuild npmstart nowopenyourbrowsertohttp://localhost:8080 Continuousbuild Youcanrunnpmrunwatchafteryou'vebuilttogetcontinuousbuilding. Onlythearticle.mdfilesandfilesthatarenormallycopiedarewatched. Theindexfiles(thetoppagewiththetableofcontents)isnotregenerated nordoeschangingatemplaterebuildallthearticles. Buildoptions Thisismostlyfordebuggingbuild.js.Sinceittakesawhiletoprocessallthefiles youcansetARTICLE_FILTERtoasubstringofthefilenamestoprocess.Forexample ARTICLE_FILTER=rotationnpmrunbuild Willbuildthesiteasthoughonlyarticleswithrotationintheirfilenameexist. TODO AlistofarticlesI'dliketowriteorseewritten lighting normalmaps geometry plane,cube,sphere,cone,disc,torus linesvstriangles vertexcolors other pre-process(don'tload.obj,.dae,.fbxetcatruntime) pre-optimize(textureatlas,sizes,combinemeshes,etc...) animation blendshapes hierarchicalanimation debugging debuggingJSWebGL example(https://goo.gl/8U5whT) CHECKTHEGAWDDAMNCONSOLE! actuallyreadtheerrormessage understandit. INVALID_ENUMmeansoneofyourgl.XXXvaluesisnotvalidperiod INVALID_VALUEmeansoneoftheintorfloatvaluesisprobablyoff INVALID_OPERATIONmeanssomethingyoutriedtodowon'tworkforthegivenstate texturenotrenderable attributeoutofrange checkyourframebuffers checkyourextensions makeshortersamples(MCVE) removeanycodeyoudon'tneed getridofCSS getridofHTML considerusingaPOINT(noattributesneeded) don'tuseimagesiftheyarenotrelevant.Useacanvasorasingleanddoublepixeltexture WhilecreatingthisMCVEyou'lloftenfindthebug debuggingashader setfragmentshadertosolidcolor. rendernormals rendertexcoords rendercube/sphere/plane text glyphcache postprocessing DOF glow lightrays RGBglitch,CRTdistortion,scanlines colormapping/tonemapping Creativecoding colorpalettes tilemaps generatedgeometry histogram particles toon/rampshading proceduraltextures codeorganization scenegraph puttinglightsandcamerainscenegraph EngineCreation culling frustumculling gridculling quadtree/octtree portals(isthisstillathing?) PVS materials lightingDB Physicallybasedrendering About WebGLlessonsthatstartwiththebasics webglfundamentals.org Topics webgl math shaders glsl glsl-shaders 3d 3d-math Resources Readme License Viewlicense Stars 3.7k stars Watchers 98 watching Forks 543 forks Releases Noreleasespublished Packages0 Nopackagespublished Contributors79 +68contributors Languages HTML 64.5% JavaScript 31.1% CSS 4.4% Youcan’tperformthatactionatthistime. Yousignedinwithanothertaborwindow.Reloadtorefreshyoursession. Yousignedoutinanothertaborwindow.Reloadtorefreshyoursession.