@rings-webgpu/core 1.0.0 → 1.0.2

package/dist/src/gfx/generate/convert/TextureCubeStdCreator.js

@@ -0,0 +1,117 @@
+import { webGPUContext } from "../../graphics/webGpu/Context3D";
+import { GPUContext } from "../../renderJob/GPUContext";
+export class TextureCubeStdCreator {
+    static { this.createCube = `
+        struct SettingUniform {
+            faceIndex: i32,
+            srcHeight: i32,
+            dstWidth: i32,
+            dstHeight: i32
+        };
+
+        @group(0) @binding(0) var<uniform> settingUniform: SettingUniform;
+        @group(0) @binding(1) var inputTex: texture_2d<f32>;
+        @group(0) @binding(2) var outTex: texture_storage_2d<rgba8unorm, write>;
+
+        @compute @workgroup_size(8, 8, 1)
+        fn main(@builtin(global_invocation_id) GlobalInvocationID: vec3<u32>) {
+            let coord = vec2<i32>(GlobalInvocationID.xy);
+            let outTexSize = textureDimensions(outTex).xy;
+            let outTexel = 1.0 / vec2<f32>(outTexSize - 1);
+            let uv_0 = vec2<f32>(coord) * outTexel;
+            var oc = samplePixel(settingUniform.faceIndex, uv_0);
+            textureStore(outTex, coord, oc);
+        }
+
+        fn getOffsetIndex(face: i32) -> vec2<i32> {
+            const offsetTable: array<vec2<i32>, 6> = array<vec2<i32>, 6>(
+                vec2<i32>(2, 1), // 0
+                vec2<i32>(0, 1), // 1
+                vec2<i32>(1, 0), // 2
+                vec2<i32>(1, 2), // 3
+                vec2<i32>(1, 1), // 4
+                vec2<i32>(3, 1)  // 5
+            );
+            return offsetTable[clamp(face, 0, 5)];
+        }
+
+        fn samplePixel(face: i32, uv01: vec2<f32>) -> vec4<f32> {
+            const textureSize = vec2<f32>(textureDimensions(inputTex).xy);
+            const rectangle = vec2<i32>(round(textureSize * vec2<f32>(0.25, 0.33333)));
+            
+            const offsetTable: array<vec2<i32>, 6> = array<vec2<i32>, 6>(
+                vec2<i32>(2, 1), // face 0
+                vec2<i32>(0, 1), // face 1
+                vec2<i32>(1, 0), // face 2
+                vec2<i32>(1, 2), // face 3
+                vec2<i32>(1, 1), // face 4
+                vec2<i32>(3, 1)  // face 5
+            );
+            
+            let offsetIndex = offsetTable[clamp(face, 0, 5)];
+            let coordOffset = rectangle * offsetIndex;
+            let coordIndex = vec2<i32>((rectangle - vec2<i32>(1)) * uv01);
+            
+            return textureLoad(inputTex, coordOffset + coordIndex, 0);
+        }
+    `; }
+    static { this.configBuffer = null; }
+    static { this.blurSettingBuffer = null; }
+    static createFace(index, size, inTex, outTex) {
+        const device = webGPUContext.device;
+        if (this.pipeline == null) {
+            this.pipeline = device.createComputePipeline({
+                layout: `auto`,
+                compute: {
+                    module: device.createShaderModule({
+                        code: TextureCubeStdCreator.createCube,
+                    }),
+                    entryPoint: "main",
+                },
+            });
+        }
+        const computePipeline = this.pipeline;
+        const configStride = 4 * 4; //4 float
+        this.configBuffer ||= device.createBuffer({
+            size: configStride,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        device.queue.writeBuffer(this.configBuffer, 0, new Uint32Array([index, 0, 0, 0]));
+        const quaternionSize = 4 * 6;
+        //roughness
+        this.blurSettingBuffer ||= device.createBuffer({
+            size: configStride,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        device.queue.writeBuffer(this.blurSettingBuffer, 0, new Float32Array([0, 0, 0, 0]));
+        //image
+        let entries0 = [
+            {
+                binding: 0,
+                resource: {
+                    buffer: this.configBuffer,
+                    size: 4 * 4,
+                },
+            },
+            {
+                binding: 1,
+                resource: inTex.getGPUView(),
+            },
+            {
+                binding: 2,
+                resource: outTex.getGPUView(),
+            },
+        ];
+        const computeBindGroup0 = device.createBindGroup({
+            layout: computePipeline.getBindGroupLayout(0),
+            entries: entries0,
+        });
+        const commandEncoder = GPUContext.beginCommandEncoder();
+        const computePass = commandEncoder.beginComputePass();
+        computePass.setPipeline(computePipeline);
+        computePass.setBindGroup(0, computeBindGroup0);
+        computePass.dispatchWorkgroups(size / 8, size / 8);
+        computePass.end();
+        GPUContext.endCommandEncoder(commandEncoder);
+    }
+}

package/dist/src/gfx/generate/convert/TextureCubeUtils.d.ts

@@ -0,0 +1,12 @@
+import { Quaternion } from "../../../math/Quaternion";
+export declare enum CubeMapFaceEnum {
+    Left = 0,
+    Right = 1,
+    Bottom = 2,
+    Top = 3,
+    Back = 4,
+    Front = 5
+}
+export declare class TextureCubeUtils {
+    static getRotationToFace(face: number): Quaternion;
+}

package/dist/src/gfx/generate/convert/TextureCubeUtils.js

@@ -0,0 +1,47 @@
+import { Matrix4 } from "../../../math/Matrix4";
+import { Quaternion } from "../../../math/Quaternion";
+import { Vector3 } from "../../../math/Vector3";
+export var CubeMapFaceEnum;
+(function (CubeMapFaceEnum) {
+    CubeMapFaceEnum[CubeMapFaceEnum["Left"] = 0] = "Left";
+    CubeMapFaceEnum[CubeMapFaceEnum["Right"] = 1] = "Right";
+    CubeMapFaceEnum[CubeMapFaceEnum["Bottom"] = 2] = "Bottom";
+    CubeMapFaceEnum[CubeMapFaceEnum["Top"] = 3] = "Top";
+    CubeMapFaceEnum[CubeMapFaceEnum["Back"] = 4] = "Back";
+    CubeMapFaceEnum[CubeMapFaceEnum["Front"] = 5] = "Front";
+})(CubeMapFaceEnum || (CubeMapFaceEnum = {}));
+export class TextureCubeUtils {
+    static getRotationToFace(face) {
+        let quaternion = Quaternion.identity().clone();
+        let target = new Vector3();
+        let matrix = new Matrix4().identity();
+        let up = new Vector3();
+        switch (face) {
+            case CubeMapFaceEnum.Top:
+                target.set(0, -1, 0);
+                up.set(0, 0, -1);
+                break;
+            case CubeMapFaceEnum.Bottom:
+                target.set(0, 1, 0);
+                up.set(0, 0, 1);
+                break;
+            case CubeMapFaceEnum.Right:
+                target.set(1, 0, 0);
+                up.set(0, 1, 0);
+                break;
+            case CubeMapFaceEnum.Left:
+                target.set(-1, 0, 0);
+                up.set(0, 1, 0);
+                break;
+            case CubeMapFaceEnum.Back:
+                target.set(0, 0, -1);
+                up.set(0, 1, 0);
+                break;
+            case CubeMapFaceEnum.Front:
+                return Quaternion.identity();
+        }
+        matrix.lookAt(new Vector3(), target, up);
+        quaternion.setFromRotationMatrix(matrix);
+        return quaternion;
+    }
+}

package/dist/src/gfx/generate/convert/TextureScaleCompute.d.ts

@@ -0,0 +1,6 @@
+import { ComputeShader } from "../../..";
+import { Texture } from "../../graphics/webGpu/core/texture/Texture";
+export declare class TextureScaleCompute {
+    computeShader: ComputeShader;
+    setInputes(colorMap: Texture, inputs: Texture[], outputs: Texture[]): void;
+}

package/dist/src/gfx/generate/convert/TextureScaleCompute.js

@@ -0,0 +1,18 @@
+import { ComputeShader, textureCompress } from "../../..";
+export class TextureScaleCompute {
+    setInputes(colorMap, inputs, outputs) {
+        this.computeShader = new ComputeShader(textureCompress(colorMap, inputs, outputs, 8, 8, 1));
+        for (let i = 0; i < inputs.length; i++) {
+            this.computeShader.setSamplerTexture(`source${i}Map`, inputs[i]);
+        }
+        for (let i = 0; i < outputs.length; i++) {
+            this.computeShader.setStorageTexture(`dest${i}Map`, outputs[i]);
+        }
+        if (colorMap) {
+            this.computeShader.setSamplerTexture(`colorMap`, colorMap);
+        }
+        this.computeShader.workerSizeX = outputs[0].width / 8;
+        this.computeShader.workerSizeY = outputs[0].height / 8;
+        this.computeShader.workerSizeZ = 1;
+    }
+}

package/dist/src/gfx/graphics/webGpu/CanvasConfig.d.ts

@@ -0,0 +1,7 @@
+export type CanvasConfig = {
+    canvas?: HTMLCanvasElement;
+    alpha?: boolean;
+    zIndex?: number;
+    devicePixelRatio?: number;
+    backgroundImage?: string;
+};

package/dist/src/gfx/graphics/webGpu/CanvasConfig.js

@@ -0,0 +1 @@
+export {};

package/dist/src/gfx/graphics/webGpu/Context3D.d.ts

@@ -0,0 +1,20 @@
+import { CEventDispatcher } from "../../../event/CEventDispatcher";
+import { CanvasConfig } from "./CanvasConfig";
+export declare class Context3D extends CEventDispatcher {
+    adapter: GPUAdapter | null;
+    device: GPUDevice;
+    context: GPUCanvasContext;
+    aspect: number;
+    presentationSize: number[];
+    presentationFormat: GPUTextureFormat;
+    canvas: HTMLCanvasElement;
+    windowWidth: number;
+    windowHeight: number;
+    canvasConfig: CanvasConfig;
+    private _pixelRatio;
+    private _resizeEvent;
+    get pixelRatio(): number;
+    init(canvasConfig?: CanvasConfig): Promise<boolean>;
+    updateSize(): void;
+}
+export declare let webGPUContext: Context3D;

package/dist/src/gfx/graphics/webGpu/Context3D.js

@@ -0,0 +1,112 @@
+import { Texture } from "../../..";
+import { CEventDispatcher } from "../../../event/CEventDispatcher";
+import { CResizeEvent } from "../../../event/CResizeEvent";
+export class Context3D extends CEventDispatcher {
+    constructor() {
+        super(...arguments);
+        this.presentationSize = [0, 0];
+        this._pixelRatio = 1.0;
+    }
+    get pixelRatio() {
+        return this._pixelRatio;
+    }
+    async init(canvasConfig) {
+        this.canvasConfig = canvasConfig;
+        if (canvasConfig && canvasConfig.canvas) {
+            this.canvas = canvasConfig.canvas;
+            if (this.canvas === null) {
+                throw new Error("no Canvas");
+            }
+            if (!this.canvas.style.width)
+                this.canvas.style.width = this.canvas.width + "px";
+            if (!this.canvas.style.height)
+                this.canvas.style.height = this.canvas.height + "px";
+        }
+        else {
+            this.canvas = document.createElement("canvas");
+            this.canvas.style.position = `absolute`;
+            this.canvas.style.top = "0px";
+            this.canvas.style.left = "0px";
+            this.canvas.style.width = "100%";
+            this.canvas.style.height = "100%";
+            this.canvas.style.zIndex = canvasConfig?.zIndex
+                ? canvasConfig.zIndex.toString()
+                : "0";
+            document.body.appendChild(this.canvas);
+        }
+        if (canvasConfig && canvasConfig.backgroundImage) {
+            this.canvas.style.background = `url(${canvasConfig.backgroundImage})`;
+            this.canvas.style["background-size"] = "cover";
+            this.canvas.style["background-position"] = "center";
+        }
+        else {
+            this.canvas.style.background = "transparent";
+        }
+        this.canvas.style["touch-action"] = "none";
+        this.canvas.style["object-fit"] = "cover";
+        if (navigator.gpu === undefined) {
+            throw new Error("Your browser does not support WebGPU!");
+        }
+        this.adapter = await navigator.gpu.requestAdapter({
+            powerPreference: "high-performance", // 或 low-power
+        });
+        if (this.adapter == null) {
+            throw new Error("Your browser does not support WebGPU!");
+        }
+        this.device = await this.adapter.requestDevice({
+            requiredFeatures: [
+                "bgra8unorm-storage",
+                "depth-clip-control",
+                "depth32float-stencil8",
+                "indirect-first-instance",
+                "rg11b10ufloat-renderable",
+            ],
+            requiredLimits: {
+                minUniformBufferOffsetAlignment: 256,
+                maxStorageBufferBindingSize: this.adapter.limits.maxStorageBufferBindingSize,
+            },
+        });
+        if (this.device == null) {
+            throw new Error("Your browser does not support WebGPU!");
+        }
+        this._pixelRatio =
+            this.canvasConfig?.devicePixelRatio || window.devicePixelRatio || 1;
+        this._pixelRatio = Math.min(this._pixelRatio, 2.0);
+        this.device.label = "device";
+        this.presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+        this.context = this.canvas.getContext("webgpu");
+        this.context.configure({
+            device: this.device,
+            format: this.presentationFormat,
+            usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+            alphaMode: "premultiplied",
+            colorSpace: `srgb`,
+        });
+        this._resizeEvent = new CResizeEvent(CResizeEvent.RESIZE, {
+            width: this.windowWidth,
+            height: this.windowHeight,
+        });
+        const resizeObserver = new ResizeObserver(() => {
+            this.updateSize();
+            Texture.destroyTexture();
+        });
+        resizeObserver.observe(this.canvas);
+        this.updateSize();
+        return true;
+    }
+    updateSize() {
+        let w = Math.floor(this.canvas.clientWidth * this.pixelRatio);
+        let h = Math.floor(this.canvas.clientHeight * this.pixelRatio);
+        if (w != this.windowWidth || h != this.windowHeight) {
+            this.canvas.width = this.windowWidth = w;
+            this.canvas.height = this.windowHeight = h;
+            this.presentationSize[0] = this.windowWidth;
+            this.presentationSize[1] = this.windowHeight;
+            this.aspect = this.windowWidth / this.windowHeight;
+            this._resizeEvent.data.width = this.windowWidth;
+            this._resizeEvent.data.height = this.windowHeight;
+            this.dispatchEvent(this._resizeEvent);
+        }
+    }
+}
+export let webGPUContext = new Context3D();

package/dist/src/gfx/graphics/webGpu/PipelinePool.d.ts

@@ -0,0 +1,5 @@
+export declare class PipelinePool {
+    private static pipelineMap;
+    static getSharePipeline(shaderVariant: string): GPURenderPipeline;
+    static setSharePipeline(shaderVariant: string, pipeline: GPURenderPipeline): void;
+}

package/dist/src/gfx/graphics/webGpu/PipelinePool.js

@@ -0,0 +1,15 @@
+export class PipelinePool {
+    static { this.pipelineMap = new Map(); }
+    static getSharePipeline(shaderVariant) {
+        let pipeline = this.pipelineMap.get(shaderVariant);
+        if (pipeline) {
+            return pipeline;
+        }
+        else {
+            return null;
+        }
+    }
+    static setSharePipeline(shaderVariant, pipeline) {
+        this.pipelineMap.set(shaderVariant, pipeline);
+    }
+}

package/dist/src/gfx/graphics/webGpu/WebGPUConst.d.ts

@@ -0,0 +1,154 @@
+export declare let GPUAddressMode: {
+    clamp_to_edge: GPUAddressMode;
+    repeat: GPUAddressMode;
+    mirror_repeat: GPUAddressMode;
+};
+export declare let GPUBlendFactor: {
+    zero: GPUBlendFactor;
+    one: GPUBlendFactor;
+    src: GPUBlendFactor;
+    one_minus_src: GPUBlendFactor;
+    src_alpha: GPUBlendFactor;
+    one_minus_src_alpha: GPUBlendFactor;
+    dst: GPUBlendFactor;
+    one_minus_dst: GPUBlendFactor;
+    dst_alpha: GPUBlendFactor;
+    one_minus_dst_alpha: GPUBlendFactor;
+    src_alpha_saturated: GPUBlendFactor;
+    constant: GPUBlendFactor;
+    one_minus_constant: GPUBlendFactor;
+};
+export declare const blendComponent: {
+    srcFactor: string;
+    dstFactor: string;
+    operation: string;
+};
+export declare const stencilStateFace: {
+    compare: string;
+    failOp: string;
+    depthFailOp: string;
+    passOp: string;
+};
+export declare let GPUCompareFunction: {
+    never: GPUCompareFunction;
+    less: GPUCompareFunction;
+    equal: GPUCompareFunction;
+    less_equal: GPUCompareFunction;
+    greater: GPUCompareFunction;
+    not_equal: GPUCompareFunction;
+    greater_equal: GPUCompareFunction;
+    always: GPUCompareFunction;
+};
+export declare let GPUCullMode: {
+    none: GPUCullMode;
+    front: GPUCullMode;
+    back: GPUCullMode;
+};
+export type GPUFeatureName = "depth-clamping" | "depth24unorm-stencil8" | "depth32float-stencil8" | "pipeline-statistics-query" | "texture-compression-bc" | "timestamp-query";
+export declare let GPUFilterMode: {
+    nearest: GPUFilterMode;
+    linear: GPUFilterMode;
+};
+export type GPUFrontFace = "ccw" | "cw";
+export declare let GPUPrimitiveTopology: {
+    point_list: GPUPrimitiveTopology;
+    line_list: GPUPrimitiveTopology;
+    line_strip: GPUPrimitiveTopology;
+    triangle_list: GPUPrimitiveTopology;
+    triangle_strip: GPUPrimitiveTopology;
+};
+export declare let GPUTextureFormat: {
+    r8unorm: GPUTextureFormat;
+    r8snorm: GPUTextureFormat;
+    r8uint: GPUTextureFormat;
+    r8sint: GPUTextureFormat;
+    r16uint: GPUTextureFormat;
+    r16sint: GPUTextureFormat;
+    r16float: GPUTextureFormat;
+    rg8unorm: GPUTextureFormat;
+    rg8snorm: GPUTextureFormat;
+    rg8uint: GPUTextureFormat;
+    rg8sint: GPUTextureFormat;
+    r32uint: GPUTextureFormat;
+    r32sint: GPUTextureFormat;
+    r32float: GPUTextureFormat;
+    rg16uint: GPUTextureFormat;
+    rg16sint: GPUTextureFormat;
+    rg16float: GPUTextureFormat;
+    rgba8unorm: GPUTextureFormat;
+    rgba8unorm_srgb: GPUTextureFormat;
+    rgba8snorm: GPUTextureFormat;
+    rgba8uint: GPUTextureFormat;
+    rgba8sint: GPUTextureFormat;
+    bgra8unorm: GPUTextureFormat;
+    bgra8unorm_srgb: GPUTextureFormat;
+    rgb9e5ufloat: GPUTextureFormat;
+    rgb10a2unorm: GPUTextureFormat;
+    rg11b10ufloat: GPUTextureFormat;
+    rg32uint: GPUTextureFormat;
+    rg32sint: GPUTextureFormat;
+    rg32float: GPUTextureFormat;
+    rgba16uint: GPUTextureFormat;
+    rgba16sint: GPUTextureFormat;
+    rgba16float: GPUTextureFormat;
+    rgba32uint: GPUTextureFormat;
+    rgba32sint: GPUTextureFormat;
+    rgba32float: GPUTextureFormat;
+    stencil8: GPUTextureFormat;
+    depth16unorm: GPUTextureFormat;
+    depth24plus: GPUTextureFormat;
+    depth24plus_stencil8: GPUTextureFormat;
+    depth32float: GPUTextureFormat;
+    bc1_rgba_unorm: GPUTextureFormat;
+    bc1_rgba_unorm_srgb: GPUTextureFormat;
+    bc2_rgba_unorm: GPUTextureFormat;
+    bc2_rgba_unorm_srgb: GPUTextureFormat;
+    bc3_rgba_unorm: GPUTextureFormat;
+    bc3_rgba_unorm_srgb: GPUTextureFormat;
+    bc4_r_unorm: GPUTextureFormat;
+    bc4_r_snorm: GPUTextureFormat;
+    bc5_rg_unorm: GPUTextureFormat;
+    bc5_rg_snorm: GPUTextureFormat;
+    bc6h_rgb_ufloat: GPUTextureFormat;
+    bc6h_rgb_float: GPUTextureFormat;
+    bc7_rgba_unorm: GPUTextureFormat;
+    bc7_rgba_unorm_srgb: GPUTextureFormat;
+    depth24unorm_stencil8: GPUTextureFormat;
+    depth32float_stencil8: GPUTextureFormat;
+};
+export declare let GPUVertexFormat: {
+    uint8x2: GPUVertexFormat;
+    uint8x4: GPUVertexFormat;
+    sint8x2: GPUVertexFormat;
+    sint8x4: GPUVertexFormat;
+    unorm8x2: GPUVertexFormat;
+    unorm8x4: GPUVertexFormat;
+    snorm8x2: GPUVertexFormat;
+    snorm8x4: GPUVertexFormat;
+    uint16x2: GPUVertexFormat;
+    uint16x4: GPUVertexFormat;
+    sint16x2: GPUVertexFormat;
+    sint16x4: GPUVertexFormat;
+    unorm16x2: GPUVertexFormat;
+    unorm16x4: GPUVertexFormat;
+    snorm16x2: GPUVertexFormat;
+    snorm16x4: GPUVertexFormat;
+    float16x2: GPUVertexFormat;
+    float16x4: GPUVertexFormat;
+    float32: GPUVertexFormat;
+    float32x2: GPUVertexFormat;
+    float32x3: GPUVertexFormat;
+    float32x4: GPUVertexFormat;
+    uint32: GPUVertexFormat;
+    uint32x2: GPUVertexFormat;
+    uint32x3: GPUVertexFormat;
+    uint32x4: GPUVertexFormat;
+    sint32: GPUVertexFormat;
+    sint32x2: GPUVertexFormat;
+    sint32x3: GPUVertexFormat;
+    sint32x4: GPUVertexFormat;
+};
+export declare let GPUVertexStepMode: {
+    vertex: GPUVertexStepMode;
+    instance: GPUVertexStepMode;
+};

package/dist/src/gfx/graphics/webGpu/WebGPUConst.js

@@ -0,0 +1,154 @@
+export let GPUAddressMode = {
+    clamp_to_edge: "clamp-to-edge",
+    repeat: "repeat",
+    mirror_repeat: "mirror-repeat",
+};
+// 混合操作权重
+export let GPUBlendFactor = {
+    zero: "zero",
+    one: "one",
+    src: "src",
+    one_minus_src: "one-minus-src",
+    src_alpha: "src-alpha",
+    one_minus_src_alpha: "one-minus-src-alpha",
+    dst: "dst",
+    one_minus_dst: "one-minus-dst",
+    dst_alpha: "dst-alpha",
+    one_minus_dst_alpha: "one-minus-dst-alpha",
+    src_alpha_saturated: "src-alpha-saturated",
+    constant: "constant",
+    one_minus_constant: "one-minus-constant",
+};
+export const blendComponent = {
+    srcFactor: "one",
+    dstFactor: "zero",
+    operation: "add",
+};
+export const stencilStateFace = {
+    compare: "always",
+    failOp: "keep",
+    depthFailOp: "keep",
+    passOp: "keep",
+};
+export let GPUCompareFunction = {
+    never: "never",
+    less: "less",
+    equal: "equal",
+    less_equal: "less-equal",
+    greater: "greater",
+    not_equal: "not-equal",
+    greater_equal: "greater-equal",
+    always: "always",
+};
+export let GPUCullMode = {
+    none: "none",
+    front: "front",
+    back: "back",
+};
+export let GPUFilterMode = {
+    nearest: "nearest",
+    linear: "linear",
+};
+export let GPUPrimitiveTopology = {
+    point_list: "point-list",
+    line_list: "line-list",
+    line_strip: "line-strip",
+    triangle_list: "triangle-list",
+    triangle_strip: "triangle-strip",
+};
+export let GPUTextureFormat = {
+    r8unorm: "r8unorm",
+    r8snorm: "r8snorm",
+    r8uint: "r8uint",
+    r8sint: "r8sint",
+    r16uint: "r16uint",
+    r16sint: "r16sint",
+    r16float: "r16float",
+    rg8unorm: "rg8unorm",
+    rg8snorm: "rg8snorm",
+    rg8uint: "rg8uint",
+    rg8sint: "rg8sint",
+    r32uint: "r32uint",
+    r32sint: "r32sint",
+    r32float: "r32float",
+    rg16uint: "rg16uint",
+    rg16sint: "rg16sint",
+    rg16float: "rg16float",
+    rgba8unorm: "rgba8unorm",
+    rgba8unorm_srgb: "rgba8unorm-srgb",
+    rgba8snorm: "rgba8snorm",
+    rgba8uint: "rgba8uint",
+    rgba8sint: "rgba8sint",
+    bgra8unorm: "bgra8unorm",
+    bgra8unorm_srgb: "bgra8unorm-srgb",
+    rgb9e5ufloat: "rgb9e5ufloat",
+    rgb10a2unorm: "rgb10a2unorm",
+    rg11b10ufloat: "rg11b10ufloat",
+    rg32uint: "rg32uint",
+    rg32sint: "rg32sint",
+    rg32float: "rg32float",
+    rgba16uint: "rgba16uint",
+    rgba16sint: "rgba16sint",
+    rgba16float: "rgba16float",
+    rgba32uint: "rgba32uint",
+    rgba32sint: "rgba32sint",
+    rgba32float: "rgba32float",
+    stencil8: "stencil8",
+    depth16unorm: "depth16unorm",
+    depth24plus: "depth24plus",
+    depth24plus_stencil8: "depth24plus-stencil8",
+    depth32float: "depth32float",
+    bc1_rgba_unorm: "bc1-rgba-unorm",
+    bc1_rgba_unorm_srgb: "bc1-rgba-unorm-srgb",
+    bc2_rgba_unorm: "bc2-rgba-unorm",
+    bc2_rgba_unorm_srgb: "bc2-rgba-unorm-srgb",
+    bc3_rgba_unorm: "bc3-rgba-unorm",
+    bc3_rgba_unorm_srgb: "bc3-rgba-unorm-srgb",
+    bc4_r_unorm: "bc4-r-unorm",
+    bc4_r_snorm: "bc4-r-snorm",
+    bc5_rg_unorm: "bc5-rg-unorm",
+    bc5_rg_snorm: "bc5-rg-snorm",
+    bc6h_rgb_ufloat: "bc6h-rgb-ufloat",
+    bc6h_rgb_float: "bc6h-rgb-float",
+    bc7_rgba_unorm: "bc7-rgba-unorm",
+    bc7_rgba_unorm_srgb: "bc7-rgba-unorm-srgb",
+    depth24unorm_stencil8: "depth24unorm-stencil8",
+    depth32float_stencil8: "depth32float-stencil8",
+};
+export let GPUVertexFormat = {
+    uint8x2: "uint8x2",
+    uint8x4: "uint8x4",
+    sint8x2: "sint8x2",
+    sint8x4: "sint8x4",
+    unorm8x2: "unorm8x2",
+    unorm8x4: "unorm8x4",
+    snorm8x2: "snorm8x2",
+    snorm8x4: "snorm8x4",
+    uint16x2: "uint16x2",
+    uint16x4: "uint16x4",
+    sint16x2: "sint16x2",
+    sint16x4: "sint16x4",
+    unorm16x2: "unorm16x2",
+    unorm16x4: "unorm16x4",
+    snorm16x2: "snorm16x2",
+    snorm16x4: "snorm16x4",
+    float16x2: "float16x2",
+    float16x4: "float16x4",
+    float32: "float32",
+    float32x2: "float32x2",
+    float32x3: "float32x3",
+    float32x4: "float32x4",
+    uint32: "uint32",
+    uint32x2: "uint32x2",
+    uint32x3: "uint32x3",
+    uint32x4: "uint32x4",
+    sint32: "sint32",
+    sint32x2: "sint32x2",
+    sint32x3: "sint32x3",
+    sint32x4: "sint32x4",
+};
+// 顶点缓冲区数据如何被顶点着色器读取：vertex 逐顶点读取，instance 每个实例读取一次顶点缓冲区数据
+export let GPUVertexStepMode = {
+    vertex: "vertex",
+    instance: "instance",
+};