webgl.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462
  1. /**
  2. * @licstart The following is the entire license notice for the
  3. * Javascript code in this page
  4. *
  5. * Copyright 2020 Mozilla Foundation
  6. *
  7. * Licensed under the Apache License, Version 2.0 (the "License");
  8. * you may not use this file except in compliance with the License.
  9. * You may obtain a copy of the License at
  10. *
  11. * http://www.apache.org/licenses/LICENSE-2.0
  12. *
  13. * Unless required by applicable law or agreed to in writing, software
  14. * distributed under the License is distributed on an "AS IS" BASIS,
  15. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16. * See the License for the specific language governing permissions and
  17. * limitations under the License.
  18. *
  19. * @licend The above is the entire license notice for the
  20. * Javascript code in this page
  21. */
  22. "use strict";
  23. Object.defineProperty(exports, "__esModule", {
  24. value: true
  25. });
  26. exports.WebGLContext = void 0;
  27. var _util = require("../shared/util.js");
  28. class WebGLContext {
  29. constructor({
  30. enable = false
  31. }) {
  32. this._enabled = enable === true;
  33. }
  34. get isEnabled() {
  35. let enabled = this._enabled;
  36. if (enabled) {
  37. enabled = WebGLUtils.tryInitGL();
  38. }
  39. return (0, _util.shadow)(this, "isEnabled", enabled);
  40. }
  41. composeSMask({
  42. layer,
  43. mask,
  44. properties
  45. }) {
  46. return WebGLUtils.composeSMask(layer, mask, properties);
  47. }
  48. drawFigures({
  49. width,
  50. height,
  51. backgroundColor,
  52. figures,
  53. context
  54. }) {
  55. return WebGLUtils.drawFigures(width, height, backgroundColor, figures, context);
  56. }
  57. clear() {
  58. WebGLUtils.cleanup();
  59. }
  60. }
  61. exports.WebGLContext = WebGLContext;
  62. var WebGLUtils = function WebGLUtilsClosure() {
  63. function loadShader(gl, code, shaderType) {
  64. var shader = gl.createShader(shaderType);
  65. gl.shaderSource(shader, code);
  66. gl.compileShader(shader);
  67. var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  68. if (!compiled) {
  69. var errorMsg = gl.getShaderInfoLog(shader);
  70. throw new Error("Error during shader compilation: " + errorMsg);
  71. }
  72. return shader;
  73. }
  74. function createVertexShader(gl, code) {
  75. return loadShader(gl, code, gl.VERTEX_SHADER);
  76. }
  77. function createFragmentShader(gl, code) {
  78. return loadShader(gl, code, gl.FRAGMENT_SHADER);
  79. }
  80. function createProgram(gl, shaders) {
  81. var program = gl.createProgram();
  82. for (var i = 0, ii = shaders.length; i < ii; ++i) {
  83. gl.attachShader(program, shaders[i]);
  84. }
  85. gl.linkProgram(program);
  86. var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
  87. if (!linked) {
  88. var errorMsg = gl.getProgramInfoLog(program);
  89. throw new Error("Error during program linking: " + errorMsg);
  90. }
  91. return program;
  92. }
  93. function createTexture(gl, image, textureId) {
  94. gl.activeTexture(textureId);
  95. var texture = gl.createTexture();
  96. gl.bindTexture(gl.TEXTURE_2D, texture);
  97. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  98. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  99. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  100. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  101. gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
  102. return texture;
  103. }
  104. var currentGL, currentCanvas;
  105. function generateGL() {
  106. if (currentGL) {
  107. return;
  108. }
  109. currentCanvas = document.createElement("canvas");
  110. currentGL = currentCanvas.getContext("webgl", {
  111. premultipliedalpha: false
  112. });
  113. }
  114. var smaskVertexShaderCode = "\
  115. attribute vec2 a_position; \
  116. attribute vec2 a_texCoord; \
  117. \
  118. uniform vec2 u_resolution; \
  119. \
  120. varying vec2 v_texCoord; \
  121. \
  122. void main() { \
  123. vec2 clipSpace = (a_position / u_resolution) * 2.0 - 1.0; \
  124. gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1); \
  125. \
  126. v_texCoord = a_texCoord; \
  127. } ";
  128. var smaskFragmentShaderCode = "\
  129. precision mediump float; \
  130. \
  131. uniform vec4 u_backdrop; \
  132. uniform int u_subtype; \
  133. uniform sampler2D u_image; \
  134. uniform sampler2D u_mask; \
  135. \
  136. varying vec2 v_texCoord; \
  137. \
  138. void main() { \
  139. vec4 imageColor = texture2D(u_image, v_texCoord); \
  140. vec4 maskColor = texture2D(u_mask, v_texCoord); \
  141. if (u_backdrop.a > 0.0) { \
  142. maskColor.rgb = maskColor.rgb * maskColor.a + \
  143. u_backdrop.rgb * (1.0 - maskColor.a); \
  144. } \
  145. float lum; \
  146. if (u_subtype == 0) { \
  147. lum = maskColor.a; \
  148. } else { \
  149. lum = maskColor.r * 0.3 + maskColor.g * 0.59 + \
  150. maskColor.b * 0.11; \
  151. } \
  152. imageColor.a *= lum; \
  153. imageColor.rgb *= imageColor.a; \
  154. gl_FragColor = imageColor; \
  155. } ";
  156. var smaskCache = null;
  157. function initSmaskGL() {
  158. var canvas, gl;
  159. generateGL();
  160. canvas = currentCanvas;
  161. currentCanvas = null;
  162. gl = currentGL;
  163. currentGL = null;
  164. var vertexShader = createVertexShader(gl, smaskVertexShaderCode);
  165. var fragmentShader = createFragmentShader(gl, smaskFragmentShaderCode);
  166. var program = createProgram(gl, [vertexShader, fragmentShader]);
  167. gl.useProgram(program);
  168. var cache = {};
  169. cache.gl = gl;
  170. cache.canvas = canvas;
  171. cache.resolutionLocation = gl.getUniformLocation(program, "u_resolution");
  172. cache.positionLocation = gl.getAttribLocation(program, "a_position");
  173. cache.backdropLocation = gl.getUniformLocation(program, "u_backdrop");
  174. cache.subtypeLocation = gl.getUniformLocation(program, "u_subtype");
  175. var texCoordLocation = gl.getAttribLocation(program, "a_texCoord");
  176. var texLayerLocation = gl.getUniformLocation(program, "u_image");
  177. var texMaskLocation = gl.getUniformLocation(program, "u_mask");
  178. var texCoordBuffer = gl.createBuffer();
  179. gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
  180. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0]), gl.STATIC_DRAW);
  181. gl.enableVertexAttribArray(texCoordLocation);
  182. gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);
  183. gl.uniform1i(texLayerLocation, 0);
  184. gl.uniform1i(texMaskLocation, 1);
  185. smaskCache = cache;
  186. }
  187. function composeSMask(layer, mask, properties) {
  188. var width = layer.width,
  189. height = layer.height;
  190. if (!smaskCache) {
  191. initSmaskGL();
  192. }
  193. var cache = smaskCache,
  194. canvas = cache.canvas,
  195. gl = cache.gl;
  196. canvas.width = width;
  197. canvas.height = height;
  198. gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  199. gl.uniform2f(cache.resolutionLocation, width, height);
  200. if (properties.backdrop) {
  201. gl.uniform4f(cache.resolutionLocation, properties.backdrop[0], properties.backdrop[1], properties.backdrop[2], 1);
  202. } else {
  203. gl.uniform4f(cache.resolutionLocation, 0, 0, 0, 0);
  204. }
  205. gl.uniform1i(cache.subtypeLocation, properties.subtype === "Luminosity" ? 1 : 0);
  206. var texture = createTexture(gl, layer, gl.TEXTURE0);
  207. var maskTexture = createTexture(gl, mask, gl.TEXTURE1);
  208. var buffer = gl.createBuffer();
  209. gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  210. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0, width, 0, 0, height, 0, height, width, 0, width, height]), gl.STATIC_DRAW);
  211. gl.enableVertexAttribArray(cache.positionLocation);
  212. gl.vertexAttribPointer(cache.positionLocation, 2, gl.FLOAT, false, 0, 0);
  213. gl.clearColor(0, 0, 0, 0);
  214. gl.enable(gl.BLEND);
  215. gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
  216. gl.clear(gl.COLOR_BUFFER_BIT);
  217. gl.drawArrays(gl.TRIANGLES, 0, 6);
  218. gl.flush();
  219. gl.deleteTexture(texture);
  220. gl.deleteTexture(maskTexture);
  221. gl.deleteBuffer(buffer);
  222. return canvas;
  223. }
  224. var figuresVertexShaderCode = "\
  225. attribute vec2 a_position; \
  226. attribute vec3 a_color; \
  227. \
  228. uniform vec2 u_resolution; \
  229. uniform vec2 u_scale; \
  230. uniform vec2 u_offset; \
  231. \
  232. varying vec4 v_color; \
  233. \
  234. void main() { \
  235. vec2 position = (a_position + u_offset) * u_scale; \
  236. vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0; \
  237. gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1); \
  238. \
  239. v_color = vec4(a_color / 255.0, 1.0); \
  240. } ";
  241. var figuresFragmentShaderCode = "\
  242. precision mediump float; \
  243. \
  244. varying vec4 v_color; \
  245. \
  246. void main() { \
  247. gl_FragColor = v_color; \
  248. } ";
  249. var figuresCache = null;
  250. function initFiguresGL() {
  251. var canvas, gl;
  252. generateGL();
  253. canvas = currentCanvas;
  254. currentCanvas = null;
  255. gl = currentGL;
  256. currentGL = null;
  257. var vertexShader = createVertexShader(gl, figuresVertexShaderCode);
  258. var fragmentShader = createFragmentShader(gl, figuresFragmentShaderCode);
  259. var program = createProgram(gl, [vertexShader, fragmentShader]);
  260. gl.useProgram(program);
  261. var cache = {};
  262. cache.gl = gl;
  263. cache.canvas = canvas;
  264. cache.resolutionLocation = gl.getUniformLocation(program, "u_resolution");
  265. cache.scaleLocation = gl.getUniformLocation(program, "u_scale");
  266. cache.offsetLocation = gl.getUniformLocation(program, "u_offset");
  267. cache.positionLocation = gl.getAttribLocation(program, "a_position");
  268. cache.colorLocation = gl.getAttribLocation(program, "a_color");
  269. figuresCache = cache;
  270. }
  271. function drawFigures(width, height, backgroundColor, figures, context) {
  272. if (!figuresCache) {
  273. initFiguresGL();
  274. }
  275. var cache = figuresCache,
  276. canvas = cache.canvas,
  277. gl = cache.gl;
  278. canvas.width = width;
  279. canvas.height = height;
  280. gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  281. gl.uniform2f(cache.resolutionLocation, width, height);
  282. var count = 0;
  283. var i, ii, rows;
  284. for (i = 0, ii = figures.length; i < ii; i++) {
  285. switch (figures[i].type) {
  286. case "lattice":
  287. rows = figures[i].coords.length / figures[i].verticesPerRow | 0;
  288. count += (rows - 1) * (figures[i].verticesPerRow - 1) * 6;
  289. break;
  290. case "triangles":
  291. count += figures[i].coords.length;
  292. break;
  293. }
  294. }
  295. var coords = new Float32Array(count * 2);
  296. var colors = new Uint8Array(count * 3);
  297. var coordsMap = context.coords,
  298. colorsMap = context.colors;
  299. var pIndex = 0,
  300. cIndex = 0;
  301. for (i = 0, ii = figures.length; i < ii; i++) {
  302. var figure = figures[i],
  303. ps = figure.coords,
  304. cs = figure.colors;
  305. switch (figure.type) {
  306. case "lattice":
  307. var cols = figure.verticesPerRow;
  308. rows = ps.length / cols | 0;
  309. for (var row = 1; row < rows; row++) {
  310. var offset = row * cols + 1;
  311. for (var col = 1; col < cols; col++, offset++) {
  312. coords[pIndex] = coordsMap[ps[offset - cols - 1]];
  313. coords[pIndex + 1] = coordsMap[ps[offset - cols - 1] + 1];
  314. coords[pIndex + 2] = coordsMap[ps[offset - cols]];
  315. coords[pIndex + 3] = coordsMap[ps[offset - cols] + 1];
  316. coords[pIndex + 4] = coordsMap[ps[offset - 1]];
  317. coords[pIndex + 5] = coordsMap[ps[offset - 1] + 1];
  318. colors[cIndex] = colorsMap[cs[offset - cols - 1]];
  319. colors[cIndex + 1] = colorsMap[cs[offset - cols - 1] + 1];
  320. colors[cIndex + 2] = colorsMap[cs[offset - cols - 1] + 2];
  321. colors[cIndex + 3] = colorsMap[cs[offset - cols]];
  322. colors[cIndex + 4] = colorsMap[cs[offset - cols] + 1];
  323. colors[cIndex + 5] = colorsMap[cs[offset - cols] + 2];
  324. colors[cIndex + 6] = colorsMap[cs[offset - 1]];
  325. colors[cIndex + 7] = colorsMap[cs[offset - 1] + 1];
  326. colors[cIndex + 8] = colorsMap[cs[offset - 1] + 2];
  327. coords[pIndex + 6] = coords[pIndex + 2];
  328. coords[pIndex + 7] = coords[pIndex + 3];
  329. coords[pIndex + 8] = coords[pIndex + 4];
  330. coords[pIndex + 9] = coords[pIndex + 5];
  331. coords[pIndex + 10] = coordsMap[ps[offset]];
  332. coords[pIndex + 11] = coordsMap[ps[offset] + 1];
  333. colors[cIndex + 9] = colors[cIndex + 3];
  334. colors[cIndex + 10] = colors[cIndex + 4];
  335. colors[cIndex + 11] = colors[cIndex + 5];
  336. colors[cIndex + 12] = colors[cIndex + 6];
  337. colors[cIndex + 13] = colors[cIndex + 7];
  338. colors[cIndex + 14] = colors[cIndex + 8];
  339. colors[cIndex + 15] = colorsMap[cs[offset]];
  340. colors[cIndex + 16] = colorsMap[cs[offset] + 1];
  341. colors[cIndex + 17] = colorsMap[cs[offset] + 2];
  342. pIndex += 12;
  343. cIndex += 18;
  344. }
  345. }
  346. break;
  347. case "triangles":
  348. for (var j = 0, jj = ps.length; j < jj; j++) {
  349. coords[pIndex] = coordsMap[ps[j]];
  350. coords[pIndex + 1] = coordsMap[ps[j] + 1];
  351. colors[cIndex] = colorsMap[cs[j]];
  352. colors[cIndex + 1] = colorsMap[cs[j] + 1];
  353. colors[cIndex + 2] = colorsMap[cs[j] + 2];
  354. pIndex += 2;
  355. cIndex += 3;
  356. }
  357. break;
  358. }
  359. }
  360. if (backgroundColor) {
  361. gl.clearColor(backgroundColor[0] / 255, backgroundColor[1] / 255, backgroundColor[2] / 255, 1.0);
  362. } else {
  363. gl.clearColor(0, 0, 0, 0);
  364. }
  365. gl.clear(gl.COLOR_BUFFER_BIT);
  366. var coordsBuffer = gl.createBuffer();
  367. gl.bindBuffer(gl.ARRAY_BUFFER, coordsBuffer);
  368. gl.bufferData(gl.ARRAY_BUFFER, coords, gl.STATIC_DRAW);
  369. gl.enableVertexAttribArray(cache.positionLocation);
  370. gl.vertexAttribPointer(cache.positionLocation, 2, gl.FLOAT, false, 0, 0);
  371. var colorsBuffer = gl.createBuffer();
  372. gl.bindBuffer(gl.ARRAY_BUFFER, colorsBuffer);
  373. gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
  374. gl.enableVertexAttribArray(cache.colorLocation);
  375. gl.vertexAttribPointer(cache.colorLocation, 3, gl.UNSIGNED_BYTE, false, 0, 0);
  376. gl.uniform2f(cache.scaleLocation, context.scaleX, context.scaleY);
  377. gl.uniform2f(cache.offsetLocation, context.offsetX, context.offsetY);
  378. gl.drawArrays(gl.TRIANGLES, 0, count);
  379. gl.flush();
  380. gl.deleteBuffer(coordsBuffer);
  381. gl.deleteBuffer(colorsBuffer);
  382. return canvas;
  383. }
  384. return {
  385. tryInitGL() {
  386. try {
  387. generateGL();
  388. return !!currentGL;
  389. } catch (ex) {}
  390. return false;
  391. },
  392. composeSMask,
  393. drawFigures,
  394. cleanup() {
  395. if (smaskCache && smaskCache.canvas) {
  396. smaskCache.canvas.width = 0;
  397. smaskCache.canvas.height = 0;
  398. }
  399. if (figuresCache && figuresCache.canvas) {
  400. figuresCache.canvas.width = 0;
  401. figuresCache.canvas.height = 0;
  402. }
  403. smaskCache = null;
  404. figuresCache = null;
  405. }
  406. };
  407. }();