OES_EGL_image_external
WebGL working group (public_webgl 'at' khronos.org)
Byungseon Shin(sun.shin@lge.com), LG Electronics
Andrey Volykhin(andrey.volykhin@lge.com), LG Electronics
Last modified date: October 11, 2016
Revision: 3
WebGL extension #k
Written against the WebGL API 1.0 specification.
This extension exposes the OES_EGL_image_external functionality to WebGL.
The following WebGL-specific behavioral changes apply:
TEXTURE_EXTERNAL_OES
.HTMLVideoElement
's EGLImage to external texture targets.Consult the above extension for documentation, issues and new functions and enumerants.
When this extension is enabled:
OES_EGL_image_external
texture
binding of HTMLVideoElement.OES_EGL_image_external
with an #extension
directive:samplerExternalOES
is a built-in type.
vec4 texture2D(samplerExternalOES sampler, vec2 coord)
is a built-in
function.
OES_EGL_image_external
is defined as 1
.
[NoInterfaceObject] interface OESEGLImageExternal { const GLenum TEXTURE_EXTERNAL_OES = 0x8D65; const GLenum SAMPLER_EXTERNAL_OES = 0x8D66; const GLenum TEXTURE_BINDING_EXTERNAL_OES = 0x8D67; const GLenum REQUIRED_TEXTURE_IMAGE_UNITS_OES = 0x8D68; [RaisesException] void EGLImageTargetTexture2DOES( GLenum target, HTMLVideoElement video); };
This a fragment shader that samples a video texture.
#extension GL_OES_EGL_image_external : require precision mediump float; varying vec2 v_texCoord; //uniform sampler2D uSampler; uniform samplerExternalOES 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('OES_EGL_image_external'); if(ext !=== null){ gl.bindTexture(ext.TEXTURE_EXTERNAL_OES, videoTexture); ext.EGLImageTargetTexture2DOES(ext.TEXTURE_EXTERNAL_OES, videoElement); gl.bindTexture(ext.TEXTURE_EXTERNAL_OES, 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_EXTERNAL_OES, 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.
update(); while (true) { processInput(); render(); }
Revision 1, 2016/10/11
Revision 2, 2016/10/11
Revision 3, 2016/10/11