bytev-charts/lib/plugin/three.js/examples/jsm/renderers/webgpu/WebGPURenderPipelines.js

基于echarts和JavaScript及ES6封装的一个可以直接调用的图表组件库，内置主题设计，简单快捷，且支持用户自定义配置； npm 安装方式: npm install bytev-charts 若启动提示还需额外install插件,则运行 npm install @babel/runtime-corejs2 即可;

import _Symbol$replace from "@babel/runtime-corejs2/core-js/symbol/replace";
import _Object$keys from "@babel/runtime-corejs2/core-js/object/keys";
import _Object$create from "@babel/runtime-corejs2/core-js/object/create";
import "core-js/modules/es.regexp.constructor.js";
import "core-js/modules/es.regexp.to-string.js";
import "core-js/modules/es.string.replace.js";
import "core-js/modules/es.array.slice.js";
import "core-js/modules/es.array.reduce.js";
import "core-js/modules/es.object.to-string.js";
import _typeof from "@babel/runtime-corejs2/helpers/typeof";
import _inherits from "@babel/runtime-corejs2/helpers/inherits";
import _setPrototypeOf from "@babel/runtime-corejs2/helpers/setPrototypeOf";
import _classCallCheck from "@babel/runtime-corejs2/helpers/classCallCheck";
import _createClass from "@babel/runtime-corejs2/helpers/createClass";
import "core-js/modules/es.regexp.exec.js";
import "core-js/modules/es.function.name.js";

function _wrapRegExp() { _wrapRegExp = function _wrapRegExp(re, groups) { return new BabelRegExp(re, undefined, groups); }; var _super = RegExp.prototype; var _groups = new _WeakMap(); function BabelRegExp(re, flags, groups) { var _this = new RegExp(re, flags); _groups.set(_this, groups || _groups.get(re)); return _setPrototypeOf(_this, BabelRegExp.prototype); } _inherits(BabelRegExp, RegExp); BabelRegExp.prototype.exec = function (str) { var result = _super.exec.call(this, str); if (result) result.groups = buildGroups(result, this); return result; }; BabelRegExp.prototype[_Symbol$replace] = function (str, substitution) { if (typeof substitution === "string") { var groups = _groups.get(this); return _super[_Symbol$replace].call(this, str, substitution.replace(/\$<([^>]+)>/g, function (_, name) { return "$" + groups[name]; })); } else if (typeof substitution === "function") { var _this = this; return _super[_Symbol$replace].call(this, str, function () { var args = arguments; if (_typeof(args[args.length - 1]) !== "object") { args = [].slice.call(args); args.push(buildGroups(args, _this)); } return substitution.apply(this, args); }); } else { return _super[_Symbol$replace].call(this, str, substitution); } }; function buildGroups(result, re) { var g = _groups.get(re); return _Object$keys(g).reduce(function (groups, name) { groups[name] = result[g[name]]; return groups; }, _Object$create(null)); } return _wrapRegExp.apply(this, arguments); }

import _WeakMap from "@babel/runtime-corejs2/core-js/weak-map";
import _parseInt from "@babel/runtime-corejs2/core-js/parse-int";
import { GPUPrimitiveTopology, GPUIndexFormat, GPUTextureFormat, GPUCompareFunction, GPUFrontFace, GPUCullMode, GPUVertexFormat, GPUBlendFactor, GPUBlendOperation, BlendColorFactor, OneMinusBlendColorFactor } from './constants.js';
import { FrontSide, BackSide, DoubleSide, NeverDepth, AlwaysDepth, LessDepth, LessEqualDepth, EqualDepth, GreaterEqualDepth, GreaterDepth, NotEqualDepth, AddEquation, SubtractEquation, ReverseSubtractEquation, MinEquation, MaxEquation, ZeroFactor, OneFactor, SrcColorFactor, OneMinusSrcColorFactor, SrcAlphaFactor, OneMinusSrcAlphaFactor, DstAlphaFactor, OneMinusDstAlphaFactor, DstColorFactor, OneMinusDstColorFactor, SrcAlphaSaturateFactor } from '../../../../build/three.module.js';

var WebGPURenderPipelines = /*#__PURE__*/function () {
  function WebGPURenderPipelines(device, glslang, bindings, sampleCount) {
    _classCallCheck(this, WebGPURenderPipelines);

    this.device = device;
    this.glslang = glslang;
    this.bindings = bindings;
    this.sampleCount = sampleCount;
    this.pipelines = new _WeakMap();
    this.shaderAttributes = new _WeakMap();
    this.shaderModules = {
      vertex: new _WeakMap(),
      fragment: new _WeakMap()
    };
  }

  _createClass(WebGPURenderPipelines, [{
    key: "get",
    value: function get(object) {
      var pipeline = this.pipelines.get(object);

      if (pipeline === undefined) {
        var device = this.device;
        var material = object.material; // shader source

        var shader;

        if (material.isMeshBasicMaterial) {
          shader = ShaderLib.mesh_basic;
        } else if (material.isPointsMaterial) {
          shader = ShaderLib.points_basic;
        } else if (material.isLineBasicMaterial) {
          shader = ShaderLib.line_basic;
        } else {
          console.error('THREE.WebGPURenderer: Unknwon shader type.');
        } // shader modules


        var glslang = this.glslang;
        var moduleVertex = this.shaderModules.vertex.get(shader);

        if (moduleVertex === undefined) {
          var byteCodeVertex = glslang.compileGLSL(shader.vertexShader, 'vertex');
          moduleVertex = {
            module: device.createShaderModule({
              code: byteCodeVertex
            }),
            entryPoint: 'main'
          };
          this.shaderModules.vertex.set(shader, moduleVertex);
        }

        var moduleFragment = this.shaderModules.fragment.get(shader);

        if (moduleFragment === undefined) {
          var byteCodeFragment = glslang.compileGLSL(shader.fragmentShader, 'fragment');
          moduleFragment = {
            module: device.createShaderModule({
              code: byteCodeFragment
            }),
            entryPoint: 'main'
          };
          this.shaderModules.fragment.set(shader, moduleFragment);
        } // layout


        var bindLayout = this.bindings.get(object).layout;
        var layout = device.createPipelineLayout({
          bindGroupLayouts: [bindLayout]
        }); // vertex buffers

        var vertexBuffers = [];
        var shaderAttributes = []; // find "layout (location = num) in type name" in vertex shader

        var regex = /*#__PURE__*/_wrapRegExp(/^[\t-\r \xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]*layout[\t-\r \xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]*\([\t-\r \xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]*location[\t-\r \xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]*=[\t-\r \xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]*([0-9]+)[\t-\r \xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]*\)[\t-\r \xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]*in[\t-\r \xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]+([0-9A-Z_a-z]+)[\t-\r \xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]+([0-9A-Z_a-z]+)[\t-\r \xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]*;/gmi, {
          location: 1,
          type: 2,
          name: 3
        });

        var shaderAttribute = null;

        while (shaderAttribute = regex.exec(shader.vertexShader)) {
          var shaderLocation = _parseInt(shaderAttribute.groups.location);

          var arrayStride = this._getArrayStride(shaderAttribute.groups.type);

          var vertexFormat = this._getVertexFormat(shaderAttribute.groups.type);

          shaderAttributes.push({
            name: shaderAttribute.groups.name,
            slot: shaderLocation
          });
          vertexBuffers.push({
            arrayStride: arrayStride,
            attributes: [{
              shaderLocation: shaderLocation,
              offset: 0,
              format: vertexFormat
            }]
          });
        }

        var geometry = object.geometry;
        var indexFormat;

        if (object.isLine) {
          var count = geometry.index ? geometry.index.count : geometry.attributes.position.count;
          indexFormat = count > 65535 ? GPUIndexFormat.Uint32 : GPUIndexFormat.Uint16; // define data type for primitive restart value
        }

        var colorBlend;

        if (material.transparent === true) {
          // @TODO: Add support for blending modes (etc. NormalBlending, AdditiveBlending)
          colorBlend = this._getColorBlend(material);
        } // pipeline


        var primitiveTopology = this._getPrimitiveTopology(object);

        var rasterizationState = this._getRasterizationStateDescriptor(object);

        var depthCompare = this._getDepthCompare(material);

        pipeline = device.createRenderPipeline({
          layout: layout,
          vertexStage: moduleVertex,
          fragmentStage: moduleFragment,
          primitiveTopology: primitiveTopology,
          rasterizationState: rasterizationState,
          colorStates: [{
            format: GPUTextureFormat.BRGA8Unorm,
            colorBlend: colorBlend
          }],
          depthStencilState: {
            depthWriteEnabled: material.depthWrite,
            depthCompare: depthCompare,
            format: GPUTextureFormat.Depth24PlusStencil8
          },
          vertexState: {
            indexFormat: indexFormat,
            vertexBuffers: vertexBuffers
          },
          sampleCount: this.sampleCount
        });
        this.pipelines.set(object, pipeline);
        this.shaderAttributes.set(pipeline, shaderAttributes);
      }

      return pipeline;
    }
  }, {
    key: "getShaderAttributes",
    value: function getShaderAttributes(pipeline) {
      return this.shaderAttributes.get(pipeline);
    }
  }, {
    key: "dispose",
    value: function dispose() {
      this.pipelines = new _WeakMap();
      this.shaderAttributes = new _WeakMap();
      this.shaderModules = {
        vertex: new _WeakMap(),
        fragment: new _WeakMap()
      };
    }
  }, {
    key: "_getArrayStride",
    value: function _getArrayStride(type) {
      // @TODO: This code is GLSL specific. We need to update when we switch to WGSL.
      if (type === 'float') return 4;
      if (type === 'vec2') return 8;
      if (type === 'vec3') return 12;
      if (type === 'vec4') return 16;
      if (type === 'int') return 4;
      if (type === 'ivec2') return 8;
      if (type === 'ivec3') return 12;
      if (type === 'ivec4') return 16;
      if (type === 'uint') return 4;
      if (type === 'uvec2') return 8;
      if (type === 'uvec3') return 12;
      if (type === 'uvec4') return 16;
      console.error('THREE.WebGPURenderer: Shader variable type not supported yet.', type);
    }
  }, {
    key: "_getColorBlend",
    value: function _getColorBlend(material) {
      var colorBlend = {
        srcFactor: this._getBlendFactor(material.blendSrc),
        dstFactor: this._getBlendFactor(material.blendDst),
        operation: this._getBlendOperation(material.blendEquation)
      };
      return colorBlend;
    }
  }, {
    key: "_getBlendFactor",
    value: function _getBlendFactor(blend) {
      var blendFactor;

      switch (blend) {
        case ZeroFactor:
          blendFactor = GPUBlendFactor.Zero;
          break;

        case OneFactor:
          blendFactor = GPUBlendFactor.One;
          break;

        case SrcColorFactor:
          blendFactor = GPUBlendFactor.SrcColor;
          break;

        case OneMinusSrcColorFactor:
          blendFactor = GPUBlendFactor.OneMinusSrcColor;
          break;

        case SrcAlphaFactor:
          blendFactor = GPUBlendFactor.SrcAlpha;
          break;

        case OneMinusSrcAlphaFactor:
          blendFactor = GPUBlendFactor.OneMinusSrcAlpha;
          break;

        case DstColorFactor:
          blendFactor = GPUBlendFactor.DstColor;
          break;

        case OneMinusDstColorFactor:
          blendFactor = GPUBlendFactor.OneMinusDstColor;
          break;

        case DstAlphaFactor:
          blendFactor = GPUBlendFactor.DstAlpha;
          break;

        case OneMinusDstAlphaFactor:
          blendFactor = GPUBlendFactor.OneMinusDstAlpha;
          break;

        case SrcAlphaSaturateFactor:
          blendFactor = GPUBlendFactor.SrcAlphaSaturated;
          break;

        case BlendColorFactor:
          blendFactor = GPUBlendFactor.BlendColor;
          break;

        case OneMinusBlendColorFactor:
          blendFactor = GPUBlendFactor.OneMinusBlendColor;
          break;

        default:
          console.error('THREE.WebGPURenderer: Blend factor not supported.', blend);
      }

      return blendFactor;
    }
  }, {
    key: "_getBlendOperation",
    value: function _getBlendOperation(blendEquation) {
      var blendOperation;

      switch (blendEquation) {
        case AddEquation:
          blendOperation = GPUBlendOperation.Add;
          break;

        case SubtractEquation:
          blendOperation = GPUBlendOperation.Subtract;
          break;

        case ReverseSubtractEquation:
          blendOperation = GPUBlendOperation.ReverseSubtract;
          break;

        case MinEquation:
          blendOperation = GPUBlendOperation.Min;
          break;

        case MaxEquation:
          blendOperation = GPUBlendOperation.Max;
          break;

        default:
          console.error('THREE.WebGPURenderer: Blend equation not supported.', blendEquation);
      }

      return blendOperation;
    }
  }, {
    key: "_getDepthCompare",
    value: function _getDepthCompare(material) {
      var depthCompare;

      if (material.depthTest === false) {
        depthCompare = GPUCompareFunction.Always;
      } else {
        var depthFunc = material.depthFunc;

        switch (depthFunc) {
          case NeverDepth:
            depthCompare = GPUCompareFunction.Never;
            break;

          case AlwaysDepth:
            depthCompare = GPUCompareFunction.Always;
            break;

          case LessDepth:
            depthCompare = GPUCompareFunction.Less;
            break;

          case LessEqualDepth:
            depthCompare = GPUCompareFunction.LessEqual;
            break;

          case EqualDepth:
            depthCompare = GPUCompareFunction.Equal;
            break;

          case GreaterEqualDepth:
            depthCompare = GPUCompareFunction.GreaterEqual;
            break;

          case GreaterDepth:
            depthCompare = GPUCompareFunction.Greater;
            break;

          case NotEqualDepth:
            depthCompare = GPUCompareFunction.NotEqual;
            break;

          default:
            console.error('THREE.WebGPURenderer: Invalid depth function.', depthFunc);
        }
      }

      return depthCompare;
    }
  }, {
    key: "_getPrimitiveTopology",
    value: function _getPrimitiveTopology(object) {
      if (object.isMesh) return GPUPrimitiveTopology.TriangleList;else if (object.isPoints) return GPUPrimitiveTopology.PointList;else if (object.isLine) return GPUPrimitiveTopology.LineStrip;else if (object.isLineSegments) return GPUPrimitiveTopology.LineList;
    }
  }, {
    key: "_getRasterizationStateDescriptor",
    value: function _getRasterizationStateDescriptor(object) {
      var descriptor = {};
      var material = object.material;

      switch (material.side) {
        case FrontSide:
          descriptor.frontFace = GPUFrontFace.CCW;
          descriptor.cullMode = GPUCullMode.Back;
          break;

        case BackSide:
          descriptor.frontFace = GPUFrontFace.CW;
          descriptor.cullMode = GPUCullMode.Back;
          break;

        case DoubleSide:
          descriptor.frontFace = GPUFrontFace.CCW;
          descriptor.cullMode = GPUCullMode.None;
          break;

        default:
          console.error('THREE.WebGPURenderer: Unknown Material.side value.', material.side);
          break;
      }

      return descriptor;
    }
  }, {
    key: "_getVertexFormat",
    value: function _getVertexFormat(type) {
      // @TODO: This code is GLSL specific. We need to update when we switch to WGSL.
      if (type === 'float') return GPUVertexFormat.Float;
      if (type === 'vec2') return GPUVertexFormat.Float2;
      if (type === 'vec3') return GPUVertexFormat.Float3;
      if (type === 'vec4') return GPUVertexFormat.Float4;
      if (type === 'int') return GPUVertexFormat.Int;
      if (type === 'ivec2') return GPUVertexFormat.Int2;
      if (type === 'ivec3') return GPUVertexFormat.Int3;
      if (type === 'ivec4') return GPUVertexFormat.Int4;
      if (type === 'uint') return GPUVertexFormat.UInt;
      if (type === 'uvec2') return GPUVertexFormat.UInt2;
      if (type === 'uvec3') return GPUVertexFormat.UInt3;
      if (type === 'uvec4') return GPUVertexFormat.UInt4;
      console.error('THREE.WebGPURenderer: Shader variable type not supported yet.', type);
    }
  }]);

  return WebGPURenderPipelines;
}();

var ShaderLib = {
  mesh_basic: {
    vertexShader: "#version 450\n\n\t\tlayout(location = 0) in vec3 position;\n\t\tlayout(location = 1) in vec2 uv;\n\n\t\tlayout(location = 0) out vec2 vUv;\n\n\t\tlayout(set = 0, binding = 0) uniform ModelUniforms {\n\t\t\tmat4 modelMatrix;\n\t\t\tmat4 modelViewMatrix;\n\t\t} modelUniforms;\n\n\t\tlayout(set = 0, binding = 1) uniform CameraUniforms {\n\t\t\tmat4 projectionMatrix;\n\t\t\tmat4 viewMatrix;\n\t\t} cameraUniforms;\n\n\t\tvoid main(){\n\t\t\tvUv = uv;\n\t\t\tgl_Position = cameraUniforms.projectionMatrix * modelUniforms.modelViewMatrix * vec4( position, 1.0 );\n\t\t}",
    fragmentShader: "#version 450\n\t\tlayout(set = 0, binding = 2) uniform OpacityUniforms {\n\t\t\tfloat opacity;\n\t\t} opacityUniforms;\n\n\t\tlayout(set = 0, binding = 3) uniform sampler mySampler;\n\t\tlayout(set = 0, binding = 4) uniform texture2D myTexture;\n\n\t\tlayout(location = 0) in vec2 vUv;\n\t\tlayout(location = 0) out vec4 outColor;\n\n\t\tvoid main() {\n\t\t\toutColor = texture( sampler2D( myTexture, mySampler ), vUv );\n\t\t\toutColor.a *= opacityUniforms.opacity;\n\t\t}"
  },
  points_basic: {
    vertexShader: "#version 450\n\n\t\tlayout(location = 0) in vec3 position;\n\n\t\tlayout(set = 0, binding = 0) uniform ModelUniforms {\n\t\t\tmat4 modelMatrix;\n\t\t\tmat4 modelViewMatrix;\n\t\t} modelUniforms;\n\n\t\tlayout(set = 0, binding = 1) uniform CameraUniforms {\n\t\t\tmat4 projectionMatrix;\n\t\t\tmat4 viewMatrix;\n\t\t} cameraUniforms;\n\n\t\tvoid main(){\n\t\t\tgl_Position = cameraUniforms.projectionMatrix * modelUniforms.modelViewMatrix * vec4( position, 1.0 );\n\t\t}",
    fragmentShader: "#version 450\n\n\t\tlayout(location = 0) out vec4 outColor;\n\n\t\tvoid main() {\n\t\t\toutColor = vec4( 1.0, 0.0, 0.0, 1.0 );\n\t\t}"
  },
  line_basic: {
    vertexShader: "#version 450\n\n\t\tlayout(location = 0) in vec3 position;\n\n\t\tlayout(set = 0, binding = 0) uniform ModelUniforms {\n\t\t\tmat4 modelMatrix;\n\t\t\tmat4 modelViewMatrix;\n\t\t} modelUniforms;\n\n\t\tlayout(set = 0, binding = 1) uniform CameraUniforms {\n\t\t\tmat4 projectionMatrix;\n\t\t\tmat4 viewMatrix;\n\t\t} cameraUniforms;\n\n\t\tvoid main(){\n\t\t\tgl_Position = cameraUniforms.projectionMatrix * modelUniforms.modelViewMatrix * vec4( position, 1.0 );\n\t\t}",
    fragmentShader: "#version 450\n\n\t\tlayout(location = 0) out vec4 outColor;\n\n\t\tvoid main() {\n\t\t\toutColor = vec4( 1.0, 0.0, 0.0, 1.0 );\n\t\t}"
  }
};
export default WebGPURenderPipelines;