@antv/g-webgpu-engine/es/webgl/index.js

import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";

var _dec, _class, _temp;

/**
 * render w/ regl
 * @see https://github.com/regl-project/regl/blob/gh-pages/API.md
 */
import { gl } from '@antv/g-webgpu-core';
import { injectable } from 'inversify';
import regl from 'regl';
import ReglAttribute from './ReglAttribute';
import ReglBuffer from './ReglBuffer';
import ReglComputeModel from './ReglComputeModel';
import ReglElements from './ReglElements';
import ReglFramebuffer from './ReglFramebuffer';
import ReglModel from './ReglModel';
import ReglTexture2D from './ReglTexture2D';
/**
 * regl renderer
 */

export var WebGLEngine = (_dec = injectable(), _dec(_class = (_temp = /*#__PURE__*/function () {
  function WebGLEngine() {
    var _this = this;

    _classCallCheck(this, WebGLEngine);

    this.supportWebGPU = false;
    this.useWGSL = false;
    this.$canvas = void 0;
    this.gl = void 0;
    this.inited = void 0;

    this.createModel = /*#__PURE__*/function () {
      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(options) {
        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                if (!options.uniforms) {
                  _context2.next = 3;
                  break;
                }

                _context2.next = 3;
                return Promise.all(Object.keys(options.uniforms).map( /*#__PURE__*/function () {
                  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(name) {
                    var texture;
                    return _regeneratorRuntime.wrap(function _callee$(_context) {
                      while (1) {
                        switch (_context.prev = _context.next) {
                          case 0:
                            if (!(options.uniforms[name] && options.uniforms[name].load !== undefined)) {
                              _context.next = 5;
                              break;
                            }

                            _context.next = 3;
                            return options.uniforms[name].load();

                          case 3:
                            texture = _context.sent;
                            // @ts-ignore
                            options.uniforms[name] = texture;

                          case 5:
                          case "end":
                            return _context.stop();
                        }
                      }
                    }, _callee);
                  }));

                  return function (_x2) {
                    return _ref2.apply(this, arguments);
                  };
                }()));

              case 3:
                return _context2.abrupt("return", new ReglModel(_this.gl, options));

              case 4:
              case "end":
                return _context2.stop();
            }
          }
        }, _callee2);
      }));

      return function (_x) {
        return _ref.apply(this, arguments);
      };
    }();

    this.createAttribute = function (options) {
      return new ReglAttribute(_this.gl, options);
    };

    this.createBuffer = function (options) {
      return new ReglBuffer(_this.gl, options);
    };

    this.createElements = function (options) {
      return new ReglElements(_this.gl, options);
    };

    this.createTexture2D = function (options) {
      return new ReglTexture2D(_this.gl, options);
    };

    this.createFramebuffer = function (options) {
      return new ReglFramebuffer(_this.gl, options);
    };

    this.useFramebuffer = function (framebuffer, drawCommands) {
      _this.gl({
        framebuffer: framebuffer ? framebuffer.get() : null
      })(drawCommands);
    };

    this.createComputeModel = /*#__PURE__*/function () {
      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(context) {
        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
          while (1) {
            switch (_context3.prev = _context3.next) {
              case 0:
                return _context3.abrupt("return", new ReglComputeModel(_this.gl, context));

              case 1:
              case "end":
                return _context3.stop();
            }
          }
        }, _callee3);
      }));

      return function (_x3) {
        return _ref3.apply(this, arguments);
      };
    }();

    this.clear = function (options) {
      // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#clear-the-draw-buffer
      var color = options.color,
          depth = options.depth,
          stencil = options.stencil,
          _options$framebuffer = options.framebuffer,
          framebuffer = _options$framebuffer === void 0 ? null : _options$framebuffer;
      var reglClearOptions = {
        color: color,
        depth: depth,
        stencil: stencil
      };
      reglClearOptions.framebuffer = framebuffer === null ? framebuffer : framebuffer.get();

      _this.gl.clear(reglClearOptions);
    };

    this.setScissor = function (scissor) {
      if (_this.gl && _this.gl._gl) {
        // https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/scissor
        if (scissor.enable && scissor.box) {
          // console.log(scissor.box);
          _this.gl._gl.enable(gl.SCISSOR_TEST);

          _this.gl._gl.scissor(scissor.box.x, scissor.box.y, scissor.box.width, scissor.box.height);
        } else {
          _this.gl._gl.disable(gl.SCISSOR_TEST);
        }

        _this.gl._refresh();
      }
    };

    this.viewport = function (_ref4) {
      var x = _ref4.x,
          y = _ref4.y,
          width = _ref4.width,
          height = _ref4.height;

      if (_this.gl && _this.gl._gl) {
        // use WebGL context directly
        // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#unsafe-escape-hatch
        _this.gl._gl.viewport(x, y, width, height);

        _this.gl._refresh();
      }
    };

    this.readPixels = function (options) {
      var framebuffer = options.framebuffer,
          x = options.x,
          y = options.y,
          width = options.width,
          height = options.height;
      var readPixelsOptions = {
        x: x,
        y: y,
        width: width,
        height: height
      };

      if (framebuffer) {
        readPixelsOptions.framebuffer = framebuffer.get();
      }

      return _this.gl.read(readPixelsOptions);
    };

    this.getCanvas = function () {
      return _this.$canvas;
    };

    this.getGLContext = function () {
      return _this.gl._gl;
    };

    this.destroy = function () {
      if (_this.gl) {
        // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#clean-up
        _this.gl.destroy();

        _this.inited = false;
      }
    };
  }

  _createClass(WebGLEngine, [{
    key: "init",
    value: function () {
      var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(cfg) {
        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
          while (1) {
            switch (_context4.prev = _context4.next) {
              case 0:
                if (!this.inited) {
                  _context4.next = 2;
                  break;
                }

                return _context4.abrupt("return");

              case 2:
                this.$canvas = cfg.canvas; // tslint:disable-next-line:typedef

                _context4.next = 5;
                return new Promise(function (resolve, reject) {
                  regl({
                    canvas: cfg.canvas,
                    attributes: {
                      alpha: true,
                      // use TAA instead of MSAA
                      // @see https://www.khronos.org/registry/webgl/specs/1.0/#5.2.1
                      antialias: cfg.antialias,
                      premultipliedAlpha: true // preserveDrawingBuffer: false,

                    },
                    pixelRatio: 1,
                    // TODO: use extensions
                    extensions: ['OES_element_index_uint', 'OES_texture_float', 'OES_standard_derivatives', // wireframe
                    'angle_instanced_arrays' // VSM shadow map
                    ],
                    optionalExtensions: ['EXT_texture_filter_anisotropic', 'EXT_blend_minmax', 'WEBGL_depth_texture'],
                    profile: true,
                    onDone: function onDone(err, r) {
                      if (err || !r) {
                        reject(err);
                      } // @ts-ignore


                      resolve(r);
                    }
                  });
                });

              case 5:
                this.gl = _context4.sent;
                this.inited = true;

              case 7:
              case "end":
                return _context4.stop();
            }
          }
        }, _callee4, this);
      }));

      function init(_x4) {
        return _init.apply(this, arguments);
      }

      return init;
    }()
  }, {
    key: "isFloatSupported",
    value: function isFloatSupported() {
      // @see https://github.com/antvis/GWebGPUEngine/issues/26
      // @ts-ignore
      return this.gl.limits.readFloat;
    }
  }, {
    key: "beginFrame",
    value: function beginFrame() {//
    }
  }, {
    key: "endFrame",
    value: function endFrame() {//
    }
  }]);

  return WebGLEngine;
}(), _temp)) || _class);
//# sourceMappingURL=index.js.map