30 Experimental WebGL Websites - Awwwards

WebGL is no longer a technology exclusive to big projects containing 3D scenes, storytelling-based narratives and complicated visual effects ... EnableDarkMode ENGLISH Theawardsofdesign,creativityandinnovationontheinternet Magazinefordesignersandwebdevelopers 83 Collect 30ExperimentalWebGLWebsites Articleby Awwwards in WebDesign -March29 WebGLisnolongeratechnologyexclusivetobigprojectscontaining3Dscenes,storytelling-basednarrativesandcomplicatedvisualeffects,it’sbeenwithusforafewyearsanditsusetodayhasnowbeenextendedtosecondaryelementsinthecompositionandsmalleffectswithfilters(shaders)thatcan’tbereplicatedwithjavascriptorCSSoutsidethecanvas. TherearelibrariestomaketheimmensetaskofcreatingathreedimensionalscenedirectlyinWebGLeasier-asyouknowThree.jsisthemostused,butnottheonlyone.Thereareagoodamountofframeworks,tools,gameenginesandlibrarieswhicharealsoworthexperimentingwith. YoucanfindframeworksspecialisedinWebVRlikeA-FrameandthePhysicalBasedRenderengines(PBR)thatcreatesurprisingscenesandhighlyrealisticmaterialsinourbrowser. WebGLisnotonlyfor3DscenesandPixi.jsarrivedtofacilitatethecreationandenrichmentofvisualeffects,applyingshadersto2Dscenesandnoticeablyimprovingtherenderingofthoseeffects.WebGL,ontheotherhand,hasbecometheperfectenvironmentfortheimplementationofAI,forexampleinthisarticle"HowyoucanuseAI,AR,andWebGLshaderstoassistthevisuallyimpaired"youcanreadaboutanappthathelpsthevisuallyimpaireddetectobjectsintheirsurroundings.TheappusesaVRheadsetandappliesashader,“EdgeDetection”torecogniseobjectsusingcomputervisionalgorithms.Thisisonlyoneofhundredsofexamplesthatyoucanfind,muchlikethefamousGoogleAIExperiments.WebGLisalsoofcoursethebaseforAPIsincludingWebAudio,WebVRandthefutureWebXR. 30.WebGLExperimentalWebsites☆彡 ThisisonlyatinyselectionoftherecentWebGLsitesofnote,butifyouwanttolookbackatthehistoryofthebestprojectsoverthelastfewyears,gotoourcollectionWEBGLorsearchusingthetagWebGLintechnologies.YoucanalsoexplorethetagsThree.jsorPixi.jsallshowingfabulousexamplesoftheuseofWebGL. IntotheStorm by Media.Monks andGSD&M in H.M JDilla'sDonuts:15ytribute by ArvinLeeuwis andIngmarCoenen in H.M BlobMixer-Creatingandsharing3DblobsInThree.js LeVoyageAzarien by joseph-azar andFélixPéault in H.M WLDLGHT by MathisBiabiany ,PatrickHeng ,FlorianZumbrunn ,LoïcBelaïd-Remesal ,LionelTaurus andPinkYellow in H.M DesignEmbraced by DesignEmbraced andLuisHenriqueBizarro in H.M KentaToshikuraPortfolio-Webdesignerandfront-enddeveloperInWebGL Dark:OfficialNetflixGuide by Media.Monks andhenrikandsofia in H.M GOODMeat by Resn in H.M SeaShepherd-Nofishingnet by makemepulse andBrandStation in SOTM AIRSHIFUMI-DesktopgameranbyAIfeaturedby3DandwebGLInWebGL EstéeLauder-TheANRcade by makemepulse in H.M UmamiLand by Media.Monks in H.M Sgrappa-ScrollwithdeptheffectInWebGL Opportunitiesforouravatars-SmoothWebGLTransitionsInTransitions Neondoor-ImmersiveliteraryexhibitionInWebGL NikePLAYlab-OnlinekidschallengeInWebGL MagicalReflections-CulturalWebXRimmersiveexperienceInWebGL TheGameAwards-3DlivestreamInWebGL Photon-WebGLexperienceInWebGL WetransferIdeasReport-ScrollforinsightsInWebGL TheUnconventionalGallery-InteractiveandimmersiveWebGLgalleryexhibitionInWebGL Blueyard-OrbitsystemsgalaxyinspirationInTheBestofNavigation 20YearsofXboxMuseum-3DenvironmentsmicroverseInWebGL Thefutureinmind-InteractivewebGLexperienceInWebGL Dala-WebGLscrolltransitionInWebGL DeBijenkorfMagicalForest-ABrandedcommerceexperienceInSoundDesign Dola-Digitalwalletand1-clickcheckoutbuyingInParallax Gemini-AWebGLcardemoexperimentInWebGL TotemCryptocurrency-3DscrollexperienceclickanddragtorotateInWebGL RelatedArticles Collect WinaFreeCopyofOurBookHotRightNowVol.3 Addedto WebDesign May25,2020 Collect DesignforCode-FreeAwwwardsAcademyLessonfromNiccolòMiranda Addedto WebDesign January19,2021 Recommended AdvancedPrototyping:Fromearlyideastorichinteractions ByDiegoBlanco|Hanzo $100 $65 BuyCourse