1 | <!DOCTYPE html> |
---|
2 | <!--AUTOGENERATED FILE - DO NOT EDIT - SEE Makefile--> |
---|
3 | <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 |
---|
4 | 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/> |
---|
5 | Revision: 3</p><h2 class="no-toc">Number</h2><p> WebGL extension #k </p><h2 class="no-toc">Dependencies</h2> |
---|
6 | <p> Written against the <a href="http://www.khronos.org/registry/webgl/specs/1.0/">WebGL API 1.0</a> specification. </p> |
---|
7 | <h2 class="no-toc">Overview</h2> |
---|
8 | <!-- use mirrors if this extension wraps another --> |
---|
9 | |
---|
10 | <p> This extension exposes the |
---|
11 | <a href="https://www.khronos.org/registry/gles/extensions/OES/OES_EGL_image_external.txt">OES_EGL_image_external</a> functionality to WebGL. |
---|
12 | </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> |
---|
13 | Consult the above extension for documentation, issues and new functions and enumerants. |
---|
14 | </p> |
---|
15 | |
---|
16 | <p> When this extension is enabled: </p><ul><li>Add support for <code>OES_EGL_image_external</code> texture |
---|
17 | 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. |
---|
18 | </li><li><code>vec4 texture2D(samplerExternalOES sampler, vec2 coord)</code> is a built-in |
---|
19 | function. |
---|
20 | </li></ul></li><li> |
---|
21 | The GLSL macro <code>OES_EGL_image_external</code> |
---|
22 | is defined as <code>1</code>. |
---|
23 | </li></ul> |
---|
24 | <h2 class="no-toc">IDL</h2><pre class="idl"> |
---|
25 | [NoInterfaceObject] |
---|
26 | interface OESEGLImageExternal { |
---|
27 | const GLenum TEXTURE_EXTERNAL_OES = 0x8D65; |
---|
28 | const GLenum SAMPLER_EXTERNAL_OES = 0x8D66; |
---|
29 | const GLenum TEXTURE_BINDING_EXTERNAL_OES = 0x8D67; |
---|
30 | const GLenum REQUIRED_TEXTURE_IMAGE_UNITS_OES = 0x8D68; |
---|
31 | |
---|
32 | [RaisesException] void EGLImageTargetTexture2DOES( |
---|
33 | GLenum target, HTMLVideoElement video); |
---|
34 | }; |
---|
35 | </pre><h2 class="no-toc">Sample Code</h2> |
---|
36 | |
---|
37 | <p> This a fragment shader that samples a video texture.</p> |
---|
38 | <pre> |
---|
39 | #extension GL_OES_EGL_image_external : require |
---|
40 | precision mediump float; |
---|
41 | varying vec2 v_texCoord; |
---|
42 | |
---|
43 | //uniform sampler2D uSampler; |
---|
44 | uniform samplerExternalOES uSampler; |
---|
45 | |
---|
46 | void main(void) { |
---|
47 | gl_FragColor = texture2D(uSampler, v_texCoord); |
---|
48 | } |
---|
49 | </pre> |
---|
50 | |
---|
51 | <p> This shows application that renders video using proposed extension. </p> |
---|
52 | <pre> |
---|
53 | var videoElement = document.getElementById("video"); |
---|
54 | var videoTexture = gl.createTexture(); |
---|
55 | |
---|
56 | function update() { |
---|
57 | var ext = gl.getExtension('OES_EGL_image_external'); |
---|
58 | if(ext !=== null){ |
---|
59 | gl.bindTexture(ext.TEXTURE_EXTERNAL_OES, videoTexture); |
---|
60 | ext.EGLImageTargetTexture2DOES(ext.TEXTURE_EXTERNAL_OES, videoElement); |
---|
61 | gl.bindTexture(ext.TEXTURE_EXTERNAL_OES, null); |
---|
62 | } |
---|
63 | } |
---|
64 | |
---|
65 | function render() { |
---|
66 | gl.clearColor(0.0, 0.0, 1.0, 1.0); |
---|
67 | gl.clear(gl.COLOR_BUFFER_BIT); |
---|
68 | |
---|
69 | gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer); |
---|
70 | gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0); |
---|
71 | |
---|
72 | gl.activeTexture(gl.TEXTURE0); |
---|
73 | gl.bindTexture(ext.TEXTURE_EXTERNAL_OES, videoTexture); |
---|
74 | gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0); |
---|
75 | |
---|
76 | gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); |
---|
77 | } |
---|
78 | </pre> |
---|
79 | |
---|
80 | <p> Application renders each video frames into WebGL canvas based on game-loop pattern. </p> |
---|
81 | <pre> |
---|
82 | update(); |
---|
83 | |
---|
84 | while (true) { |
---|
85 | processInput(); |
---|
86 | render(); |
---|
87 | } |
---|
88 | </pre> |
---|
89 | |
---|
90 | <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> |
---|