WEBGL_video_texture WebGL working group (public_webgl 'at' khronos.org) Byungseon Shin (sun.shin 'at' lge.com) Andrey Volykhin (andrey.volykhin 'at' lge.com) Members of the WebGL working group NN Defines a new texture target TEXTURE_VIDEO_IMAGE. Provides a mechanism for binding HTMLVideoElement stream to video texture targets. Provides time of frame, texture width and height of HTMLVideoElement's texture binding. Add support for WEBGL_video_texture binding of HTMLVideoElement. [NoInterfaceObject] interface WebGLVideoFrameInfo { readonly attribute double currentTime; readonly attribute unsigned long textureWidth; readonly attribute unsigned long textureHeight; }; [NoInterfaceObject] interface WEBGL_video_texture { const GLenum TEXTURE_VIDEO_IMAGE = 0x851D; const GLenum SAMPLER_VIDEO_IMAGE = 0x8B61; [RaisesException] WebGLVideoFrameInfo VideoElementTargetVideoTexture( GLenum target, HTMLVideoElement video); };

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();
    }
    
Initial revision. Change EGLImageTargetTexture2DOES to be called at every WebGL rendering cycle. Add VideoFrameInfo interface. Change EGLImageTargetTexture2DOES to return VideoFrameInfo as a currently mapped frame. Change Extension name to WEBGL_video_texture for abstracion of OES_EGL_image_external extension. Define new sampler and texture type, TEXTURE_VIDEO_IMAGE and SAMPLER_VIDEO_IMAGE. Change EGLImageTargetTexture2DOES to VideoElementTargetVideoTexture.