TEXTURE_VIDEO_IMAGE
.HTMLVideoElement
stream to video texture targets.HTMLVideoElement
's texture binding.WEBGL_video_texture
binding of HTMLVideoElement.This a fragment shader that samples a video texture.
#extension GL_WEBGL_video_texture : require precision mediump float; varying vec2 v_texCoord; uniform samplerVideoWEBGL uSampler; void main(void) { gl_FragColor = texture2D(uSampler, v_texCoord); }
This shows application that renders video using proposed extension.
var videoElement = document.getElementById("video"); var videoTexture = gl.createTexture(); function update() { var ext = gl.getExtension('WEBGL_video_texture'); if(ext !=== null){ gl.bindTexture(ext.TEXTURE_VIDEO_IMAGE, videoTexture); ext.VideoElementTargetVideoTexture(ext.TEXTURE_VIDEO_IMAGE, videoElement); gl.bindTexture(ext.TEXTURE_VIDEO_IMAGE, null); } } function render() { gl.clearColor(0.0, 0.0, 1.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer); gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(ext.TEXTURE_VIDEO_IMAGE, videoTexture); gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); }
Application renders each video frames into WebGL canvas based on game-loop pattern.
while (true) { update(); processInput(); render(); }