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, 9 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>