<!DOCTYPE html>
<!--AUTOGENERATED FILE - DO NOT EDIT - SEE Makefile-->
<html><head><meta charset="UTF-8"/><title>WebGL OES_EGL_image_external Extension Specification</title><link rel="alternate" type="text/xml" href="extension.xml"/><link rel="stylesheet" type="text/css" href="http://www.khronos.org/registry/webgl/resources/Khronos-Final.css"/></head><body><!--begin-logo--><div class="left"><a href="http://webgl.org/"><img alt="WebGL" height="72" src="http://www.khronos.org/registry/webgl/resources/WebGL-Logo.png" width="156"/></a></div><div class="right"><a href="http://khronos.org/"><img alt="Khronos" height="60" src="http://www.khronos.org/registry/webgl/resources/KhronosGroup-3D.png" width="220"/></a></div><div style="clear: both;"> </div><br/><!--end-logo--><h1>WebGL OES_EGL_image_external Extension Specification</h1><h2 class="no-toc">Name</h2><p>OES_EGL_image_external</p><h2 class="no-toc">Contact</h2><p> <a href="https://www.khronos.org/webgl/public-mailing-list/">WebGL
working group</a> (public_webgl 'at' khronos.org) </p><h2 class="no-toc">Contributors</h2><p>Byungseon Shin(sun.shin@lge.com), LG Electronics</p><p>Andrey Volykhin(andrey.volykhin@lge.com), LG Electronics</p><h2 class="no-toc">Version</h2><p> Last modified date: October 11, 2016<br/>
Revision: 3</p><h2 class="no-toc">Number</h2><p> WebGL extension #k </p><h2 class="no-toc">Dependencies</h2>
<p> Written against the <a href="http://www.khronos.org/registry/webgl/specs/1.0/">WebGL API 1.0</a> specification. </p>
<h2 class="no-toc">Overview</h2>
<!-- use mirrors if this extension wraps another -->
<p> This extension exposes the
<a href="https://www.khronos.org/registry/gles/extensions/OES/OES_EGL_image_external.txt">OES_EGL_image_external</a> functionality to WebGL.
</p><p>The following WebGL-specific behavioral changes apply:</p><ul><li>Defines a new texture target <code>TEXTURE_EXTERNAL_OES</code>.</li><li>Provides a mechanism for binding <code>HTMLVideoElement</code>'s EGLImage to external texture targets.</li></ul><p>
Consult the above extension for documentation, issues and new functions and enumerants.
</p>
<p> When this extension is enabled: </p><ul><li>Add support for <code>OES_EGL_image_external</code> texture
binding of HTMLVideoElement.</li><li>When a <em>fragment</em> shader enables, requires, or warns <code>OES_EGL_image_external</code> with an <code>#extension</code> directive:<ul><li><code>samplerExternalOES</code> is a built-in type.
</li><li><code>vec4 texture2D(samplerExternalOES sampler, vec2 coord)</code> is a built-in
function.
</li></ul></li><li>
The GLSL macro <code>OES_EGL_image_external</code>
is defined as <code>1</code>.
</li></ul>
<h2 class="no-toc">IDL</h2><pre class="idl">
[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);
};
</pre><h2 class="no-toc">Sample Code</h2>
<p> This a fragment shader that samples a video texture.</p>
<pre>
#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);
}
</pre>
<p> This shows application that renders video using proposed extension. </p>
<pre>
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);
}
</pre>
<p> Application renders each video frames into WebGL canvas based on game-loop pattern. </p>
<pre>
update();
while (true) {
processInput();
render();
}
</pre>
<h2 class="no-toc">Conformance Tests</h2><h2 class="no-toc">Issues</h2><h2 class="no-toc">Revision History</h2><p>Revision 1, 2016/10/11</p><ul><li>Initial revision.</li></ul><p>Revision 2, 2016/10/11</p><ul><li>Refine sample code.</li></ul><p>Revision 3, 2016/10/11</p><ul><li>Remove comment on WebGL API 2.0 dependency</li><li>Refine sample code as an implicit texture updating mode</li></ul></body></html>