SuperRender_20.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. "use strict";
  2. var vertexYUVShader = ["#version 300 es", "layout(location = 0) in vec4 vertexPos;", "layout(location = 1) in vec2 texturePos;", "out vec2 textureCoord;", "void main()", "{", "gl_Position = vertexPos;", "textureCoord = texturePos;", "}"].join("\n");
  3. var fragmentYUVShader = ["#version 300 es", "precision highp float;", "in vec2 textureCoord;", "out vec4 fragColor;", "uniform sampler2D ySampler;", "uniform sampler2D uSampler;", "uniform sampler2D vSampler;", "const mat4 YUV2RGB = mat4", "(", "1.1643828125, 0, 1.59602734375, -.87078515625,", "1.1643828125, -.39176171875, -.81296875, .52959375,", "1.1643828125, 2.017234375, 0, -1.081390625,", "0, 0, 0, 1", ");", "void main(void) {", "float y = texture(ySampler, textureCoord).r;", "float u = texture(uSampler, textureCoord).r;", "float v = texture(vSampler, textureCoord).r;", "fragColor = vec4(y, u, v, 1) * YUV2RGB;", "}"].join("\n");
  4. (function(e, r) {
  5. e.SuperRender2 = r()
  6. }
  7. )(this, function() {
  8. function e(e) {
  9. this.canvasElement = document.getElementById(e);
  10. this.initContextGL();
  11. if (this.contextGL) {
  12. this.YUVProgram = this.initProgram(vertexYUVShader, fragmentYUVShader);
  13. this.initBuffers();
  14. this.initTextures()
  15. }
  16. }
  17. e.prototype.initContextGL = function() {
  18. var e = this.canvasElement;
  19. var r = null;
  20. try {
  21. r = e.getContext("webgl2")
  22. } catch (e) {
  23. r = null
  24. }
  25. if (!r || typeof r.getParameter !== "function") {
  26. r = null
  27. }
  28. this.contextGL = r;
  29. if(null == r) {
  30. console.error("WebGL2.0 init failed!");
  31. }
  32. };
  33. e.prototype.initProgram = function(e, r) {
  34. var t = this.contextGL;
  35. var a = t.createShader(t.VERTEX_SHADER);
  36. t.shaderSource(a, e);
  37. t.compileShader(a);
  38. if (!t.getShaderParameter(a, t.COMPILE_STATUS)) {
  39. console.error("Vertex shader failed to compile: " + t.getShaderInfoLog(a))
  40. }
  41. var i = t.createShader(t.FRAGMENT_SHADER);
  42. t.shaderSource(i, r);
  43. t.compileShader(i);
  44. if (!t.getShaderParameter(i, t.COMPILE_STATUS)) {
  45. console.error("Fragment shader failed to compile: " + t.getShaderInfoLog(i))
  46. }
  47. var o = t.createProgram();
  48. t.attachShader(o, a);
  49. t.attachShader(o, i);
  50. t.linkProgram(o);
  51. if (!t.getProgramParameter(o, t.LINK_STATUS)) {
  52. console.error("Program failed to compile: " + t.getProgramInfoLog(o))
  53. }
  54. t.deleteShader(a);
  55. t.deleteShader(i);
  56. return o
  57. };
  58. e.prototype.initBuffers = function() {
  59. var e = this.contextGL;
  60. var r = e.createBuffer();
  61. e.bindBuffer(e.ARRAY_BUFFER, r);
  62. e.bufferData(e.ARRAY_BUFFER, new Float32Array([1, 1, -1, 1, 1, -1, -1, -1]), e.STATIC_DRAW);
  63. e.bindBuffer(e.ARRAY_BUFFER, null);
  64. var t = e.createBuffer();
  65. e.bindBuffer(e.ARRAY_BUFFER, t);
  66. e.bufferData(e.ARRAY_BUFFER, new Float32Array([1, 0, 0, 0, 1, 1, 0, 1]), e.DYNAMIC_DRAW);
  67. e.bindBuffer(e.ARRAY_BUFFER, null);
  68. this.vertexPosBuffer = r;
  69. this.texturePosBuffer = t;
  70. };
  71. e.prototype.initTextures = function() {
  72. var e = this.contextGL;
  73. var r = this.YUVProgram;
  74. e.useProgram(r);
  75. var t = this.initTexture();
  76. var a = e.getUniformLocation(r, "ySampler");
  77. e.uniform1i(a, 0);
  78. this.yTextureRef = t;
  79. var i = this.initTexture();
  80. var o = e.getUniformLocation(r, "uSampler");
  81. e.uniform1i(o, 1);
  82. this.uTextureRef = i;
  83. var n = this.initTexture();
  84. var f = e.getUniformLocation(r, "vSampler");
  85. e.uniform1i(f, 2);
  86. this.vTextureRef = n;
  87. e.useProgram(null)
  88. };
  89. e.prototype.initTexture = function() {
  90. var e = this.contextGL;
  91. var r = e.createTexture();
  92. e.bindTexture(e.TEXTURE_2D, r);
  93. e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.LINEAR);
  94. e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.LINEAR);
  95. e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE);
  96. e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE);
  97. e.bindTexture(e.TEXTURE_2D, null);
  98. return r
  99. };
  100. e.prototype.SR_DisplayFrameData = function(width, height, Ydata, Udata, Vdata) {
  101. if (width <= 0 || height <= 0) {
  102. return
  103. }
  104. var glCtx = this.contextGL;
  105. if (null == Ydata) {
  106. glCtx.clearColor(0, 0, 0, 0);
  107. glCtx.clear(glCtx.COLOR_BUFFER_BIT | glCtx.DEPTH_BUFFER_BIT);
  108. return
  109. }
  110. glCtx.clearColor(0.8, 0.8, 1, 1);
  111. glCtx.clear(glCtx.COLOR_BUFFER_BIT | glCtx.DEPTH_BUFFER_BIT);
  112. glCtx.viewport(0, 0, this.canvasElement.width, this.canvasElement.height);
  113. glCtx.activeTexture(glCtx.TEXTURE0);
  114. glCtx.bindTexture(glCtx.TEXTURE_2D, this.yTextureRef);
  115. glCtx.texImage2D(glCtx.TEXTURE_2D, 0, glCtx.LUMINANCE, width, height, 0, glCtx.LUMINANCE, glCtx.UNSIGNED_BYTE, Ydata);
  116. glCtx.activeTexture(glCtx.TEXTURE1);
  117. glCtx.bindTexture(glCtx.TEXTURE_2D, this.uTextureRef);
  118. glCtx.texImage2D(glCtx.TEXTURE_2D, 0, glCtx.LUMINANCE, width / 2, height / 2, 0, glCtx.LUMINANCE, glCtx.UNSIGNED_BYTE, Udata);
  119. glCtx.activeTexture(glCtx.TEXTURE2);
  120. glCtx.bindTexture(glCtx.TEXTURE_2D, this.vTextureRef);
  121. glCtx.texImage2D(glCtx.TEXTURE_2D, 0, glCtx.LUMINANCE, width / 2, height / 2, 0, glCtx.LUMINANCE, glCtx.UNSIGNED_BYTE, Vdata);
  122. var f = this.YUVProgram;
  123. glCtx.useProgram(f);
  124. var u = this.vertexPosBuffer;
  125. glCtx.bindBuffer(glCtx.ARRAY_BUFFER, u);
  126. var s = glCtx.getAttribLocation(f, "vertexPos");
  127. glCtx.enableVertexAttribArray(s);
  128. glCtx.vertexAttribPointer(s, 2, glCtx.FLOAT, false, 0, 0);
  129. glCtx.bindBuffer(glCtx.ARRAY_BUFFER, null);
  130. var v = this.texturePosBuffer;
  131. glCtx.bindBuffer(glCtx.ARRAY_BUFFER, v);
  132. var l = glCtx.getAttribLocation(f, "texturePos");
  133. glCtx.enableVertexAttribArray(l);
  134. glCtx.vertexAttribPointer(l, 2, glCtx.FLOAT, false, 0, 0);
  135. glCtx.bindBuffer(glCtx.ARRAY_BUFFER, null);
  136. glCtx.drawArrays(glCtx.TRIANGLE_STRIP, 0, 4);
  137. glCtx.disableVertexAttribArray(s);
  138. glCtx.disableVertexAttribArray(l);
  139. glCtx.useProgram(null)
  140. };
  141. e.prototype.SR_Destroy = function() {
  142. var e = this.contextGL;
  143. var r = this.YUVProgram;
  144. e.deleteProgram(r);
  145. var a = this.vertexPosBuffer;
  146. var i = this.texturePosBuffer;
  147. e.deleteBuffer(a);
  148. e.deleteBuffer(i);
  149. var n = this.yTextureRef;
  150. var f = this.uTextureRef;
  151. var u = this.vTextureRef;
  152. e.deleteTexture(n);
  153. e.deleteTexture(f);
  154. e.deleteTexture(u)
  155. };
  156. return e
  157. });