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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.WebGLEngine = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _gWebgpuCore = require("@antv/g-webgpu-core");
var _regl = _interopRequireDefault(require("regl"));
var _ReglAttribute = _interopRequireDefault(require("./ReglAttribute"));
var _ReglBuffer = _interopRequireDefault(require("./ReglBuffer"));
var _ReglComputeModel = _interopRequireDefault(require("./ReglComputeModel"));
var _ReglElements = _interopRequireDefault(require("./ReglElements"));
var _ReglFramebuffer = _interopRequireDefault(require("./ReglFramebuffer"));
var _ReglModel = _interopRequireDefault(require("./ReglModel"));
var _ReglTexture2D = _interopRequireDefault(require("./ReglTexture2D"));
/**
 * render w/ regl
 * @see https://github.com/regl-project/regl/blob/gh-pages/API.md
 */
/**
 * regl renderer
 */
var WebGLEngine = /*#__PURE__*/function () {
  function WebGLEngine() {
    var _this = this;
    (0, _classCallCheck2.default)(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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(options) {
        return _regenerator.default.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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(name) {
                    var texture;
                    return _regenerator.default.wrap(function _callee$(_context) {
                      while (1) {
                        switch (_context.prev = _context.next) {
                          case 0:
                            if (!(options.uniforms[name] &&
                            // @ts-ignore
                            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.default(_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.default(_this.gl, options);
    };
    this.createBuffer = function (options) {
      return new _ReglBuffer.default(_this.gl, options);
    };
    this.createElements = function (options) {
      return new _ReglElements.default(_this.gl, options);
    };
    this.createTexture2D = function (options) {
      return new _ReglTexture2D.default(_this.gl, options);
    };
    this.createFramebuffer = function (options) {
      return new _ReglFramebuffer.default(_this.gl, options);
    };
    this.useFramebuffer = function (framebuffer, drawCommands) {
      _this.gl({
        framebuffer: framebuffer ? framebuffer.get() : null
      })(drawCommands);
    };
    this.createComputeModel = /*#__PURE__*/function () {
      var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(context) {
        return _regenerator.default.wrap(function _callee3$(_context3) {
          while (1) {
            switch (_context3.prev = _context3.next) {
              case 0:
                return _context3.abrupt("return", new _ReglComputeModel.default(_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(_gWebgpuCore.gl.SCISSOR_TEST);
          _this.gl._gl.scissor(scissor.box.x, scissor.box.y, scissor.box.width, scissor.box.height);
        } else {
          _this.gl._gl.disable(_gWebgpuCore.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;
      }
    };
  }
  (0, _createClass2.default)(WebGLEngine, [{
    key: "init",
    value: function () {
      var _init = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(cfg) {
        return _regenerator.default.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) {
                  (0, _regl.default)({
                    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;
}();
exports.WebGLEngine = WebGLEngine;
//# sourceMappingURL=index.js.map