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

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

import _classCallCheck from "@babel/runtime-corejs2/helpers/classCallCheck";
import _createClass from "@babel/runtime-corejs2/helpers/createClass";
// Copyright 2020 Brandon Jones
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { GPUIndexFormat, GPUFilterMode, GPUPrimitiveTopology } from './constants.js'; // ported from https://github.com/toji/web-texture-tool/blob/master/src/webgpu-mipmap-generator.js

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

    this.device = device;
    var mipmapVertexSource = "#version 450\n\t\t\tconst vec2 pos[4] = vec2[4](vec2(-1.0f, 1.0f), vec2(1.0f, 1.0f), vec2(-1.0f, -1.0f), vec2(1.0f, -1.0f));\n\t\t\tconst vec2 tex[4] = vec2[4](vec2(0.0f, 0.0f), vec2(1.0f, 0.0f), vec2(0.0f, 1.0f), vec2(1.0f, 1.0f));\n\t\t\tlayout(location = 0) out vec2 vTex;\n\t\t\tvoid main() {\n\t\t\t\tvTex = tex[gl_VertexIndex];\n\t\t\t\tgl_Position = vec4(pos[gl_VertexIndex], 0.0, 1.0);\n\t\t\t}\n\t\t";
    var mipmapFragmentSource = "#version 450\n\t\t\tlayout(set = 0, binding = 0) uniform sampler imgSampler;\n\t\t\tlayout(set = 0, binding = 1) uniform texture2D img;\n\t\t\tlayout(location = 0) in vec2 vTex;\n\t\t\tlayout(location = 0) out vec4 outColor;\n\t\t\tvoid main() {\n\t\t\t\toutColor = texture(sampler2D(img, imgSampler), vTex);\n\t\t\t}";
    this.sampler = device.createSampler({
      minFilter: GPUFilterMode.Linear
    }); // We'll need a new pipeline for every texture format used.

    this.pipelines = {};
    this.mipmapVertexShaderModule = device.createShaderModule({
      code: glslang.compileGLSL(mipmapVertexSource, 'vertex')
    });
    this.mipmapFragmentShaderModule = device.createShaderModule({
      code: glslang.compileGLSL(mipmapFragmentSource, 'fragment')
    });
  }

  _createClass(WebGPUTextureUtils, [{
    key: "getMipmapPipeline",
    value: function getMipmapPipeline(format) {
      var pipeline = this.pipelines[format];

      if (pipeline === undefined) {
        pipeline = this.device.createRenderPipeline({
          vertexStage: {
            module: this.mipmapVertexShaderModule,
            entryPoint: 'main'
          },
          fragmentStage: {
            module: this.mipmapFragmentShaderModule,
            entryPoint: 'main'
          },
          primitiveTopology: GPUPrimitiveTopology.TriangleStrip,
          vertexState: {
            indexFormat: GPUIndexFormat.Uint32
          },
          colorStates: [{
            format: format
          }]
        });
        this.pipelines[format] = pipeline;
      }

      return pipeline;
    }
  }, {
    key: "generateMipmappedTexture",
    value: function generateMipmappedTexture(imageBitmap, textureGPU, textureGPUDescriptor) {
      var pipeline = this.getMipmapPipeline(textureGPUDescriptor.format);
      var commandEncoder = this.device.createCommandEncoder({});
      var bindGroupLayout = pipeline.getBindGroupLayout(0); // @TODO: Consider making this static.

      var srcView = textureGPU.createView({
        baseMipLevel: 0,
        mipLevelCount: 1
      });

      for (var i = 1; i < textureGPUDescriptor.mipLevelCount; i++) {
        var dstView = textureGPU.createView({
          baseMipLevel: i,
          mipLevelCount: 1
        });
        var passEncoder = commandEncoder.beginRenderPass({
          colorAttachments: [{
            attachment: dstView,
            loadValue: [0, 0, 0, 0]
          }]
        });
        var bindGroup = this.device.createBindGroup({
          layout: bindGroupLayout,
          entries: [{
            binding: 0,
            resource: this.sampler
          }, {
            binding: 1,
            resource: srcView
          }]
        });
        passEncoder.setPipeline(pipeline);
        passEncoder.setBindGroup(0, bindGroup);
        passEncoder.draw(4, 1, 0, 0);
        passEncoder.endPass();
        srcView = dstView;
      }

      this.device.defaultQueue.submit([commandEncoder.finish()]);
    }
  }]);

  return WebGPUTextureUtils;
}();

export default WebGPUTextureUtils;