WebGL
Khronos
 

WebGL WEBGL_video_texture Extension Proposed Specification

DO NOT IMPLEMENT!!!

Name

WEBGL_video_texture

Contact

WebGL working group (public_webgl 'at' khronos.org)

Contributors

Byungseon Shin (sun.shin 'at' lge.com)

Andrey Volykhin (andrey.volykhin 'at' lge.com)

Members of the WebGL working group

Version

Last modified date: August 03, 2017
Revision: 3

Number

WebGL extension #NN

Dependencies

Written against the WebGL API 1.0 specification.

Overview

This extension exposes the OES_EGL_image_external functionality to WebGL.

The following WebGL-specific behavioral changes apply:

Consult the above extension for documentation, issues and new functions and enumerants.

When this extension is enabled:

IDL

[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);
};
  

Sample Code

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();
    }
    

Conformance Tests

Issues

Revision History

Revision 1, 2016/11/05

Revision 2, 2017/01/10

Revision 3, 2017/08/03