Animating textures in WebGL - Web APIs - MDN

In this demonstration, we build upon the previous example by replacing our static textures with the frames of an mp4 video file that's ... SkiptomaincontentSkiptosearchSkiptoselectlanguageReferencesWebAPIsWebGL:2Dand3DgraphicsforthewebWebGLtutorialAnimatingtexturesinWebGLArticleActionsEnglish(US)GettingaccesstothevideoUsingthevideoframesasatextureSeealsoRelatedTopics WebGLAPI WebGLtutorial GettingstartedwithWebGL Adding2DcontenttoaWebGLcontext UsingshaderstoapplycolorinWebGL AnimatingobjectswithWebGL Creating3DobjectsusingWebGL UsingtexturesinWebGL LightinginWebGL AnimatingtexturesinWebGL Examplesandarticles Matrixmathfortheweb WebGLmodelviewprojection WebGLbestpractices UsingWebGLextensions Abasic2DWebGLanimationexample WebGLbyexample Interfaces WebGLRenderingContext WebGL2RenderingContext WebGLActiveInfo WebGLBuffer WebGLContextEvent WebGLFramebuffer WebGLProgram WebGLQuery WebGLRenderbuffer WebGLSampler WebGLShader WebGLShaderPrecisionFormat WebGLSync WebGLTexture WebGLTransformFeedback WebGLUniformLocation WebGLVertexArrayObject Documentation: Contribute TheMDNproject GettingaccesstothevideoUsingthevideoframesasatextureSeealsoAnimatingtexturesinWebGL «Previous Inthisdemonstration,webuilduponthepreviousexamplebyreplacingourstatictextureswiththeframesofanmp4videofilethat'splaying.Thisisactuallyprettyeasytodoandfuntowatch,solet'sgetstarted.Youcanusesimilarcodetouseanysortofdata(suchasa)asthesourceforyourtextures. Note:ThisexampleusestheglMatrixlibrarytoperformitsmatrixandvertexmath.You'llneedtoincludeitifyoucreateyourownprojectbasedonthiscode.OursampleloadsacopyfromaCDNinourHTML's. GettingaccesstothevideoThefirststepistocreatethe