October 2016 Meeting: OES_EGL_image_external_r3.html

File OES_EGL_image_external_r3.html, 5.2 KB (added by sun.shin@webkit.org, 3 years ago)
Line 
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]
26interface 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>