碳学长
碳学长

五、WebGPU Vertex Buffers 顶点缓冲区

五、WebGPU Vertex Buffers 顶点缓冲区

在上一篇文章中，我们将顶点数据放入存储缓冲区中，并使用内置的vertex_index对其进行索引。虽然这种技术越来越受欢迎，但向顶点着色器提供顶点数据的传统方式是通过顶点缓冲和属性。

顶点缓冲区就像任何其他WebGPU缓冲区一样。它们保存着数据。不同之处在于我们不直接从顶点着色器访问它们。相反，我们告诉WebGPU缓冲区中有什么类型的数据，以及它在哪里以及它是如何组织的。然后它将数据从缓冲区中取出并提供给我们。

让我们以上一篇文章中的最后一个示例为例，将其从使用存储缓冲区更改为使用顶点缓冲区。

首先要做的是改变着色器，从顶点缓冲区中获取顶点数据。

struct OurStruct {
  color: vec4f,
  offset: vec2f,
};
 
struct OtherStruct {
  scale: vec2f,
};
 
struct Vertex {
  @location(0) position: vec2f,
};
 
struct VSOutput {
  @builtin(position) position: vec4f,
  @location(0) color: vec4f,
};
 
@group(0) @binding(0) var ourStructs: array;
@group(0) @binding(1) var otherStructs: array;
 
@vertex fn vs(
  vert: Vertex,
  @builtin(instance_index) instanceIndex: u32
) -> VSOutput {
  let otherStruct = otherStructs[instanceIndex];
  let ourStruct = ourStructs[instanceIndex];
 
  var vsOut: VSOutput;
  vsOut.position = vec4f(
      vert.position * otherStruct.scale + ourStruct.offset, 0.0, 1.0);
  vsOut.color = ourStruct.color;
  return vsOut;
}
 
...

正如你所看到的，这是一个很小的变化。我们声明了一个结构体Vertex来定义顶点的数据。重要的部分是用@location(0)声明位置字段，然后，当我们创建渲染管道时，我们必须告诉WebGPU如何获取@location(0)的数据。

然后，当我们创建渲染管道时，我们必须告诉WebGPU如何获取@location(0)的数据。

  const pipeline = device.createRenderPipeline({
    label: 'vertex buffer pipeline',
    layout: 'auto',
    vertex: {
      module,
      entryPoint: 'vs',
      buffers: [
        {
          arrayStride: 2 * 4, // 2 floats, 4 bytes each
          attributes: [
            {shaderLocation: 0, offset: 0, format: 'float32x2'},  // position
          ],
        },
      ],
    },
    fragment: {
      module,
      entryPoint: 'fs',
      targets: [{ format: presentationFormat }],
    },
  });

对于pipeline descriptor 的 vertex entry，我们添加了一个缓冲区数组，用于描述如何从一个或多个顶点缓冲区中提取数据。对于第一个也是唯一一个缓冲区，我们以字节数为单位设置arrayStride。在这种情况下，步长是指从缓冲区中一个顶点的数据到缓冲区中的下一个顶点的字节数。

五、WebGPU Vertex Buffers 顶点缓冲区_第1张图片

因为我们的数据是vec2f，这是两个float32数字，所以我们将arrayStride设置为8。

接下来我们定义一个属性数组。我们只有一个。shaderLocation: 0对应于我们顶点结构中的location(0)。offset: 0表示此属性的数据从顶点缓冲区中的第0字节开始。最后format:'float32x2’表示我们希望WebGPU将数据从缓冲区中取出为两个32位浮点数。

我们需要将保存顶点数据的缓冲区的用法从STORAGE更改为vertex，并将其从绑定组中删除。

  const vertexBuffer = device.createBuffer({
    label: 'vertex buffer vertices',
    size: vertexData.byteLength,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
  });
  device.queue.writeBuffer(vertexBuffer, 0, vertexData);
 
  const bindGroup = device.createBindGroup({
    label: 'bind group for objects',
    layout: pipeline.getBindGroupLayout(0),
    entries: [
      { binding: 0, resource: { buffer: staticStorageBuffer }},
      { binding: 1, resource: { buffer: changingStorageBuffer }},
    ],
  });

然后在绘制时，我们需要告诉webgpu使用哪个顶点缓冲区。

 pass.setPipeline(pipeline);
    pass.setVertexBuffer(0, vertexBuffer);

这里的0对应于我们上面指定的渲染管道缓冲区数组的第一个元素。

这样我们就从顶点存储缓冲区切换到了顶点缓冲区。

以下为完整代码及运行结果：

HTML：


DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>001hello-triangletitle>
    <style>
        html,
        body {
            margin: 0;
            width: 100%;
            height: 100%;
            background: #000;
            color: #fff;
            display: flex;
            text-align: center;
            flex-direction: column;
            justify-content: center;
        }

        div,
        canvas {
            height: 100%;
            width: 100%;
        }
    style>
head>

<body>
    <div id="007vertex-srandom-circle">
        <canvas id="gpucanvas">canvas>
    div>
    <script type="module" src="./007vertex-srandom-circle.ts">script>

body>

html>

TS:

/*
 * @Description:
 * @Author: tianyw
 * @Date: 2023-04-08 20:03:35
 * @LastEditTime: 2023-09-19 22:12:42
 * @LastEditors: tianyw
 */
export type SampleInit = (params: {
  canvas: HTMLCanvasElement;
}) => void | Promise<void>;

import shaderWGSL from "./shaders/shader.wgsl?raw";

const rand = (
  min: undefined | number = undefined,
  max: undefined | number = undefined
) => {
  if (min === undefined) {
    min = 0;
    max = 1;
  } else if (max === undefined) {
    max = min;
    min = 0;
  }
  return min + Math.random() * (max - min);
};

function createCircleVertices({
  radius = 1,
  numSubdivisions = 24,
  innerRadius = 0,
  startAngle = 0,
  endAngle = Math.PI * 2
} = {}) {
  // 2 triangles per subdivision, 3 verts per tri, 2 values(xy) each
  const numVertices = numSubdivisions * 3 * 2;
  const vertexData = new Float32Array(numSubdivisions * 2 * 3 * 2);

  let offset = 0;
  const addVertex = (x: number, y: number) => {
    vertexData[offset++] = x;
    vertexData[offset++] = y;
  };

  // 2 vertices per subdivision
  for (let i = 0; i < numSubdivisions; ++i) {
    const angle1 =
      startAngle + ((i + 0) * (endAngle - startAngle)) / numSubdivisions;
    const angle2 =
      startAngle + ((i + 1) * (endAngle - startAngle)) / numSubdivisions;

    const c1 = Math.cos(angle1);
    const s1 = Math.sin(angle1);
    const c2 = Math.cos(angle2);
    const s2 = Math.sin(angle2);

    // first angle
    addVertex(c1 * radius, s1 * radius);
    addVertex(c2 * radius, s2 * radius);
    addVertex(c1 * innerRadius, s1 * innerRadius);

    // second triangle
    addVertex(c1 * innerRadius, s1 * innerRadius);
    addVertex(c2 * radius, s2 * radius);
    addVertex(c2 * innerRadius, s2 * innerRadius);
  }

  return {
    vertexData,
    numVertices
  };
}

const init: SampleInit = async ({ canvas }) => {
  const adapter = await navigator.gpu?.requestAdapter();
  if (!adapter) return;
  const device = await adapter?.requestDevice();
  if (!device) {
    console.error("need a browser that supports WebGPU");
    return;
  }
  const context = canvas.getContext("webgpu");
  if (!context) return;
  const devicePixelRatio = window.devicePixelRatio || 1;
  canvas.width = canvas.clientWidth * devicePixelRatio;
  canvas.height = canvas.clientHeight * devicePixelRatio;
  const presentationFormat = navigator.gpu.getPreferredCanvasFormat();

  context.configure({
    device,
    format: presentationFormat,
    alphaMode: "premultiplied"
  });

  const shaderModule = device.createShaderModule({
    label: "our hardcoded rgb triangle shaders",
    code: shaderWGSL
  });
  const renderPipeline = device.createRenderPipeline({
    label: "hardcoded rgb triangle pipeline",
    layout: "auto",
    vertex: {
      module: shaderModule,
      entryPoint: "vs",
      buffers: [
        {
          arrayStride: 2 * 4, // 2 floats, 4 bytes each
          attributes: [
            {
              shaderLocation: 0, offset: 0,format: "float32x2"
            } // position
          ]
        }
      ]
    },
    fragment: {
      module: shaderModule,
      entryPoint: "fs",
      targets: [
        {
          format: presentationFormat
        }
      ]
    },
    primitive: {
      // topology: "line-list"
      // topology: "line-strip"
      //  topology: "point-list"
      topology: "triangle-list"
      // topology: "triangle-strip"
    }
  });

  const kNumObjects = 100;

  const staticStorageUnitSize =
    4 * 4 + // color is 4 32bit floats (4bytes each)
    2 * 4 + // scale is 2 32bit floats (4bytes each)
    2 * 4; // padding
  const storageUnitSzie = 2 * 4; // scale is 2 32 bit floats

  const staticStorageBufferSize = staticStorageUnitSize * kNumObjects;
  const storageBufferSize = storageUnitSzie * kNumObjects;

  const staticStorageBuffer = device.createBuffer({
    label: "static storage for objects",
    size: staticStorageBufferSize,
    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
  });

  const storageBuffer = device.createBuffer({
    label: "changing storage for objects",
    size: storageBufferSize,
    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
  });

  const staticStorageValues = new Float32Array(staticStorageBufferSize / 4);
  const storageValues = new Float32Array(storageBufferSize / 4);

  const kColorOffset = 0;
  const kOffsetOffset = 4;

  const kScaleOffset = 0;

  const objectInfos: {
    scale: number;
  }[] = [];
  for (let i = 0; i < kNumObjects; ++i) {
    const staticOffset = i * (staticStorageUnitSize / 4);

    staticStorageValues.set(
      [rand(), rand(), rand(), 1],
      staticOffset + kColorOffset
    );
    staticStorageValues.set(
      [rand(-0.9, 0.9), rand(-0.9, 0.9)],
      staticOffset + kOffsetOffset
    );

    objectInfos.push({
      scale: rand(0.2, 0.5)
    });
  }
  device.queue.writeBuffer(staticStorageBuffer, 0, staticStorageValues);

  const { vertexData, numVertices } = createCircleVertices({
    radius: 0.5,
    innerRadius: 0.25
  });
  const vertexBuffer = device.createBuffer({
    label: "vertex buffer vertices",
    size: vertexData.byteLength,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
  });
  device.queue.writeBuffer(vertexBuffer, 0, vertexData);

  const bindGroup = device.createBindGroup({
    label: "bind group for objects",
    layout: renderPipeline.getBindGroupLayout(0),
    entries: [
      { binding: 0, resource: { buffer: staticStorageBuffer } },
      { binding: 1, resource: { buffer: storageBuffer } }
    ]
  });

  function frame() {
    const aspect = canvas.width / canvas.height;

    const renderCommandEncoder = device.createCommandEncoder({
      label: "render vert frag"
    });
    if (!context) return;

    const textureView = context.getCurrentTexture().createView();
    const renderPassDescriptor: GPURenderPassDescriptor = {
      label: "our basic canvas renderPass",
      colorAttachments: [
        {
          view: textureView,
          clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
          loadOp: "clear",
          storeOp: "store"
        }
      ]
    };
    const renderPass =
      renderCommandEncoder.beginRenderPass(renderPassDescriptor);
    renderPass.setPipeline(renderPipeline);
    renderPass.setVertexBuffer(0,vertexBuffer);
    objectInfos.forEach(({ scale }, ndx) => {
      const offset = ndx * (storageUnitSzie / 4);
      storageValues.set([scale / aspect, scale], offset + kScaleOffset); // set the scale
    });
    device.queue.writeBuffer(storageBuffer, 0, storageValues);
    renderPass.setBindGroup(0, bindGroup);
    renderPass.draw(numVertices, kNumObjects);
    renderPass.end();
    const renderBuffer = renderCommandEncoder.finish();
    device.queue.submit([renderBuffer]);

    requestAnimationFrame(frame);
  }

  requestAnimationFrame(frame);
};

const canvas = document.getElementById("gpucanvas") as HTMLCanvasElement;
init({ canvas: canvas });

Shaders:

shader:

struct OurStruct {
    color: vec4f,
    offset: vec2f
};

struct OtherStruct {
    scale: vec2f
};

struct Vertex {
   @location(0) position: vec2f
}

struct VSOutput {
    @builtin(position) position: vec4f,
    @location(0) color: vec4f
};

@group(0) @binding(0) var ourStructs: array;
@group(0) @binding(1) var otherStructs: array;
@vertex 
fn vs(vert: Vertex, @builtin(instance_index) instanceIndex: u32) -> VSOutput {
    let otherStruct = otherStructs[instanceIndex];
    let ourStruct = ourStructs[instanceIndex];

    var vsOut: VSOutput;
    vsOut.position = vec4f(vert.position * otherStruct.scale + ourStruct.offset, 0.0, 1.0);
    vsOut.color = ourStruct.color;
    return vsOut;
}

@fragment
fn fs(vsOut: VSOutput) -> @location(0) vec4f {
    return vsOut.color;
}

五、WebGPU Vertex Buffers 顶点缓冲区_第2张图片

五、WebGPU Vertex Buffers 顶点缓冲区_第3张图片

执行draw命令时的状态如下所示:

五、WebGPU Vertex Buffers 顶点缓冲区_第4张图片

属性格式字段可以是这些类型之一:

Vertex format Data type Components Byte size Example WGSL type
"uint8x2" unsigned int 2 2 vec2, vec2u
"uint8x4" unsigned int 4 4 vec4, vec4u
"sint8x2" signed int 2 2 vec2, vec2i
"sint8x4" signed int 4 4 vec4, vec4i
"unorm8x2" unsigned normalized 2 2 vec2, vec2f
"unorm8x4" unsigned normalized 4 4 vec4, vec4f
"snorm8x2" signed normalized 2 2 vec2, vec2f
"snorm8x4" signed normalized 4 4 vec4, vec4f
"uint16x2" unsigned int 2 4 vec2, vec2u
"uint16x4" unsigned int 4 8 vec4, vec4u
"sint16x2" signed int 2 4 vec2, vec2i
"sint16x4" signed int 4 8 vec4, vec4i
"unorm16x2" unsigned normalized 2 4 vec2, vec2f
"unorm16x4" unsigned normalized 4 8 vec4, vec4f
"snorm16x2" signed normalized 2 4 vec2, vec2f
"snorm16x4" signed normalized 4 8 vec4, vec4f
"float16x2" float 2 4 vec2, vec2h
"float16x4" float 4 8 vec4, vec4h
"float32" float 1 4 f32
"float32x2" float 2 8 vec2, vec2f
"float32x3" float 3 12 vec3, vec3f
"float32x4" float 4 16 vec4, vec4f
"uint32" unsigned int 1 4 u32
"uint32x2" unsigned int 2 8 vec2, vec2u
"uint32x3" unsigned int 3 12 vec3, vec3u
"uint32x4" unsigned int 4 16 vec4, vec4u
"sint32" signed int 1 4 i32
"sint32x2" signed int 2 8 vec2, vec2i
"sint32x3" signed int 3 12 vec3, vec3i
"sint32x4" signed int 4 16 vec4, vec4i

实例化顶点缓冲区

属性可以按顶点或实例推进。在每个实例中推进它们实际上是我们在索引otherStructs[instanceIndex]和ourStructs[instanceIndex]时所做的相同的事情，其中instanceIndex从@builtin(instance_index)获得其值。

让我们去掉存储缓冲区，使用顶点缓冲区来完成同样的事情。首先让我们改变着色器使用顶点属性而不是存储缓冲区。

struct Vertex {
  @location(0) position: vec2f,
  @location(1) color: vec4f,
  @location(2) offset: vec2f,
  @location(3) scale: vec2f,
};
 
struct VSOutput {
  @builtin(position) position: vec4f,
  @location(0) color: vec4f,
};
 
@group(0) @binding(0) var ourStructs: array;
@group(0) @binding(1) var otherStructs: array;
 
@vertex fn vs(
  vert: Vertex,
) -> VSOutput {
 
  var vsOut: VSOutput;
  vsOut.position = vec4f(
      vert.position * vert.scale + vert.offset, 0.0, 1.0);
  vsOut.color = vert.color;
  return vsOut;
}
 
@fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f {
  return vsOut.color;
}

现在我们需要更新渲染管道，告诉它我们希望如何向这些属性提供数据。为了保持最小的变化，我们将使用我们为存储缓冲区创建的数据。我们将使用两个缓冲区，一个缓冲区将保存每个实例的颜色和偏移量，另一个将保存比例。

  const pipeline = device.createRenderPipeline({
    label: 'flat colors',
    layout: 'auto',
    vertex: {
      module,
      entryPoint: 'vs',
      buffers: [
        {
          arrayStride: 2 * 4, // 2 floats, 4 bytes each
          attributes: [
            {shaderLocation: 0, offset: 0, format: 'float32x2'},  // position
          ],
        },
        {
          arrayStride: 6 * 4, // 6 floats, 4 bytes each
          stepMode: 'instance',
          attributes: [
            {shaderLocation: 1, offset:  0, format: 'float32x4'},  // color
            {shaderLocation: 2, offset: 16, format: 'float32x2'},  // offset
          ],
        },
        {
          arrayStride: 2 * 4, // 2 floats, 4 bytes each
          stepMode: 'instance',
          attributes: [
            {shaderLocation: 3, offset: 0, format: 'float32x2'},   // scale
          ],
        },
      ],
    },
    fragment: {
      module,
      entryPoint: 'fs',
      targets: [{ format: presentationFormat }],
    },
  });

上面我们在流水线描述中向buffers数组中添加了2个条目，所以现在有3个缓冲区条目，这意味着我们告诉WebGPU我们将在3个缓冲区中提供数据。

对于我们的两个新实体，我们将stepMode设置为instance。这意味着该属性在每个实例中只前进到下一个值一次。默认是stepMode: ‘vertex’，每个顶点前进一次(每个实例重新开始)。

我们有2个缓冲区。保持比例的那个很简单。就像我们第一个保存位置的缓冲区一样，每个顶点有2*32个浮点数。

另一个缓冲区保存颜色和偏移量它们将像这样在数据中交错:

五、WebGPU Vertex Buffers 顶点缓冲区_第5张图片

所以上面我们说从一组数据到下一组数据的arrayStride是6 * 4,6个32位浮点数，每4字节(总共24字节)。颜色从偏移量0开始，但偏移量从16字节开始。

接下来，我们可以更改设置缓冲区的代码。

  // create 2 storage buffers
  const staticUnitSize =
    4 * 4 + // color is 4 32bit floats (4bytes each)
    2 * 4;  // offset is 2 32bit floats (4bytes each)
 
  const changingUnitSize =
    2 * 4;  // scale is 2 32bit floats (4bytes each)
  const staticVertexBufferSize = staticUnitSize * kNumObjects;
  const changingVertexBufferSize = changingUnitSize * kNumObjects;
 
  const staticVertexBuffer = device.createBuffer({
    label: 'static vertex for objects',
    size: staticVertexBufferSize,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
  });
 
  const changingVertexBuffer = device.createBuffer({
    label: 'changing vertex for objects',
    size: changingVertexBufferSize,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
  });

顶点属性与存储缓冲区中的结构没有相同的填充限制，所以我们不再需要填充。否则，我们所做的就是将用法从STORAGE更改为VERTEX(我们将所有变量从“STORAGE”重命名为“VERTEX”)。

由于我们不再使用存储缓冲区，因此不再需要bindGroup。

最后，我们不需要设置bindGroup但我们需要设置顶点缓冲区：

 const encoder = device.createCommandEncoder();
    const pass = encoder.beginRenderPass(renderPassDescriptor);
    pass.setPipeline(pipeline);
    pass.setVertexBuffer(0, vertexBuffer);
    pass.setVertexBuffer(1, staticVertexBuffer);
    pass.setVertexBuffer(2, changingVertexBuffer);
 
    ...
    pass.draw(numVertices, kNumObjects);
 
    pass.end();

在这里，setVertexBuffer的第一个参数对应于我们上面创建的管道中的buffers数组的元素。

这和我们之前做的是一样的但是我们用的都是顶点缓冲区，没有存储缓冲区。

以下为完整代码及运行结果：

HTML：


DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>001hello-triangletitle>
    <style>
        html,
        body {
            margin: 0;
            width: 100%;
            height: 100%;
            background: #000;
            color: #fff;
            display: flex;
            text-align: center;
            flex-direction: column;
            justify-content: center;
        }

        div,
        canvas {
            height: 100%;
            width: 100%;
        }
    style>
head>

<body>
    <div id="007vertex-srandom-circle">
        <canvas id="gpucanvas">canvas>
    div>
    <script type="module" src="./007vertex-srandom-circle2.ts">script>

body>

html>

TS：

/*
 * @Description:
 * @Author: tianyw
 * @Date: 2023-04-08 20:03:35
 * @LastEditTime: 2023-10-08 22:47:31
 * @LastEditors: tianyw
 */
export type SampleInit = (params: {
  canvas: HTMLCanvasElement;
}) => void | Promise<void>;

import shaderWGSL from "./shaders/shader.wgsl?raw";

const rand = (
  min: undefined | number = undefined,
  max: undefined | number = undefined
) => {
  if (min === undefined) {
    min = 0;
    max = 1;
  } else if (max === undefined) {
    max = min;
    min = 0;
  }
  return min + Math.random() * (max - min);
};

function createCircleVertices({
  radius = 1,
  numSubdivisions = 24,
  innerRadius = 0,
  startAngle = 0,
  endAngle = Math.PI * 2
} = {}) {
  // 2 triangles per subdivision, 3 verts per tri, 2 values(xy) each
  const numVertices = numSubdivisions * 3 * 2;
  const vertexData = new Float32Array(numSubdivisions * 2 * 3 * 2);

  let offset = 0;
  const addVertex = (x: number, y: number) => {
    vertexData[offset++] = x;
    vertexData[offset++] = y;
  };

  // 2 vertices per subdivision
  for (let i = 0; i < numSubdivisions; ++i) {
    const angle1 =
      startAngle + ((i + 0) * (endAngle - startAngle)) / numSubdivisions;
    const angle2 =
      startAngle + ((i + 1) * (endAngle - startAngle)) / numSubdivisions;

    const c1 = Math.cos(angle1);
    const s1 = Math.sin(angle1);
    const c2 = Math.cos(angle2);
    const s2 = Math.sin(angle2);

    // first angle
    addVertex(c1 * radius, s1 * radius);
    addVertex(c2 * radius, s2 * radius);
    addVertex(c1 * innerRadius, s1 * innerRadius);

    // second triangle
    addVertex(c1 * innerRadius, s1 * innerRadius);
    addVertex(c2 * radius, s2 * radius);
    addVertex(c2 * innerRadius, s2 * innerRadius);
  }

  return {
    vertexData,
    numVertices
  };
}

const init: SampleInit = async ({ canvas }) => {
  const adapter = await navigator.gpu?.requestAdapter();
  if (!adapter) return;
  const device = await adapter?.requestDevice();
  if (!device) {
    console.error("need a browser that supports WebGPU");
    return;
  }
  const context = canvas.getContext("webgpu");
  if (!context) return;
  const devicePixelRatio = window.devicePixelRatio || 1;
  canvas.width = canvas.clientWidth * devicePixelRatio;
  canvas.height = canvas.clientHeight * devicePixelRatio;
  const presentationFormat = navigator.gpu.getPreferredCanvasFormat();

  context.configure({
    device,
    format: presentationFormat,
    alphaMode: "premultiplied"
  });

  const shaderModule = device.createShaderModule({
    label: "our hardcoded rgb triangle shaders",
    code: shaderWGSL
  });
  const renderPipeline = device.createRenderPipeline({
    label: "flat colors",
    layout: "auto",
    vertex: {
      module: shaderModule,
      entryPoint: "vs",
      buffers: [
        {
          arrayStride: 2 * 4, // 2 floats, 4 bytes each
          attributes: [
            {
              shaderLocation: 0,
              offset: 0,
              format: "float32x2"
            } // position
          ]
        },
        {
          arrayStride: 6 * 4, // 6 floats, 4 bytes each
          stepMode: "instance",
          attributes: [
            {
              shaderLocation: 1,
              offset: 0,
              format: "float32x4" // color
            },
            {
              shaderLocation: 2,
              offset: 16,
              format: "float32x2" // offset
            }
          ]
        },
        {
          arrayStride: 2 * 4, // 2 floats, 4 bytes each
          stepMode: "instance",
          attributes: [
            {
              shaderLocation: 3,
              offset: 0,
              format: "float32x2"
            } // scale
          ]
        }
      ]
    },
    fragment: {
      module: shaderModule,
      entryPoint: "fs",
      targets: [
        {
          format: presentationFormat
        }
      ]
    },
    primitive: {
      // topology: "line-list"
      // topology: "line-strip"
      //  topology: "point-list"
      topology: "triangle-list"
      // topology: "triangle-strip"
    }
  });

  const kNumObjects = 100;

  const staticUnitSize =
    4 * 4 + // color is 4 32bit floats (4bytes each)
    2 * 4; // offset is 2 32bit floats (4bytes each)
  const changingUnitSize = 2 * 4; // scale is 2 32 bit floats

  const staticVertexBufferSize = staticUnitSize * kNumObjects;
  const changingVertexBufferSize = changingUnitSize * kNumObjects;

  const staticVertexBuffer = device.createBuffer({
    label: "static storage for objects",
    size: staticVertexBufferSize,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
  });

  const changingVertexBuffer = device.createBuffer({
    label: "changing storage for objects",
    size: changingVertexBufferSize,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
  });

  const staticVertexValues = new Float32Array(staticVertexBufferSize / 4);
  const changingVertexValues = new Float32Array(
    changingVertexBufferSize / 4
  );

  const kColorOffset = 0;
  const kOffsetOffset = 4;

  const kScaleOffset = 0;

  const objectInfos: {
    scale: number;
  }[] = [];
  for (let i = 0; i < kNumObjects; ++i) {
    const staticOffset = i * (staticUnitSize / 4);

    staticVertexValues.set(
      [rand(), rand(), rand(), 1],
      staticOffset + kColorOffset
    );
    staticVertexValues.set(
      [rand(-0.9, 0.9), rand(-0.9, 0.9)],
      staticOffset + kOffsetOffset
    );

    objectInfos.push({
      scale: rand(0.2, 0.5)
    });
  }
  device.queue.writeBuffer(staticVertexBuffer, 0, staticVertexValues);

  const { vertexData, numVertices } = createCircleVertices({
    radius: 0.5,
    innerRadius: 0.25
  });
  const vertexBuffer = device.createBuffer({
    label: "vertex buffer vertices",
    size: vertexData.byteLength,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
  });
  device.queue.writeBuffer(vertexBuffer, 0, vertexData);

  function frame() {
    const aspect = canvas.width / canvas.height;

    const renderCommandEncoder = device.createCommandEncoder({
      label: "render vert frag"
    });
    if (!context) return;

    const textureView = context.getCurrentTexture().createView();
    const renderPassDescriptor: GPURenderPassDescriptor = {
      label: "our basic canvas renderPass",
      colorAttachments: [
        {
          view: textureView,
          clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
          loadOp: "clear",
          storeOp: "store"
        }
      ]
    };
    const renderPass =
      renderCommandEncoder.beginRenderPass(renderPassDescriptor);
    renderPass.setPipeline(renderPipeline);
    renderPass.setVertexBuffer(0, vertexBuffer);
    objectInfos.forEach(({ scale }, ndx) => {
      const offset = ndx * (changingUnitSize / 4);
      changingVertexValues.set([scale / aspect, scale], offset + kScaleOffset); // set the scale
    });
    device.queue.writeBuffer(changingVertexBuffer, 0, changingVertexValues);
    renderPass.setVertexBuffer(1, staticVertexBuffer);
    renderPass.setVertexBuffer(2, changingVertexBuffer);
    renderPass.draw(numVertices, kNumObjects);
    renderPass.end();
    const renderBuffer = renderCommandEncoder.finish();
    device.queue.submit([renderBuffer]);

    requestAnimationFrame(frame);
  }

  requestAnimationFrame(frame);
};

const canvas = document.getElementById("gpucanvas") as HTMLCanvasElement;
init({ canvas: canvas });

Shaders:

shader.wgsl:


struct Vertex {
   @location(0) position: vec2f,
   @location(1) color: vec4f,
   @location(2) offset: vec2f,
   @location(3) scale: vec2f,
};

struct VSOutput {
    @builtin(position) position: vec4f,
    @location(0) color: vec4f
};


@vertex 
fn vs(vert: Vertex) -> VSOutput {
    var vsOut: VSOutput;
    vsOut.position = vec4f(vert.position * vert.scale + vert.offset, 0.0, 1.0);
    vsOut.color = vert.color;
    return vsOut;
}

@fragment
fn fs(vsOut: VSOutput) -> @location(0) vec4f {
    return vsOut.color;
}

五、WebGPU Vertex Buffers 顶点缓冲区_第6张图片

五、WebGPU Vertex Buffers 顶点缓冲区_第7张图片

为了好玩，让我们添加第二个让我们为每个顶点的颜色添加另一个属性。首先改变着色器。

struct Vertex {
  @location(0) position: vec2f,
  @location(1) color: vec4f,
  @location(2) offset: vec2f,
  @location(3) scale: vec2f,
  @location(4) perVertexColor: vec3f,
};
 
struct VSOutput {
  @builtin(position) position: vec4f,
  @location(0) color: vec4f,
};
 
@vertex fn vs(
  vert: Vertex,
) -> VSOutput {
  var vsOut: VSOutput;
  vsOut.position = vec4f(
      vert.position * vert.scale + vert.offset, 0.0, 1.0);
  vsOut.color = vert.color * vec4f(vert.perVertexColor, 1);
  return vsOut;
}
 
@fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f {
  return vsOut.color;
}

然后我们需要更新管道以描述我们将如何提供数据。我们将像这样将perVertexColor数据与位置交织起来：

五、WebGPU Vertex Buffers 顶点缓冲区_第8张图片

因此，需要更改arrayStride以覆盖我们的新数据，我们需要添加新属性。它从两个32位浮点数开始，所以它在缓冲区中的偏移量是8字节。

  const pipeline = device.createRenderPipeline({
    label: 'per vertex color',
    layout: 'auto',
    vertex: {
      module,
      entryPoint: 'vs',
      buffers: [
        {
          arrayStride: 5 * 4, // 5 floats, 4 bytes each
          attributes: [
            {shaderLocation: 0, offset: 0, format: 'float32x2'},  // position
            {shaderLocation: 4, offset: 8, format: 'float32x3'},  // perVertexColor
          ],
        },
        {
          arrayStride: 6 * 4, // 6 floats, 4 bytes each
          stepMode: 'instance',
          attributes: [
            {shaderLocation: 1, offset:  0, format: 'float32x4'},  // color
            {shaderLocation: 2, offset: 16, format: 'float32x2'},  // offset
          ],
        },
        {
          arrayStride: 2 * 4, // 2 floats, 4 bytes each
          stepMode: 'instance',
          attributes: [
            {shaderLocation: 3, offset: 0, format: 'float32x2'},   // scale
          ],
        },
      ],
    },
    fragment: {
      module,
      entryPoint: 'fs',
      targets: [{ format: presentationFormat }],
    },
  });

我们将更新圆顶点的生成代码，为圆外缘的顶点提供深色，为内顶点提供浅色。

function createCircleVertices({
  radius = 1,
  numSubdivisions = 24,
  innerRadius = 0,
  startAngle = 0,
  endAngle = Math.PI * 2,
} = {}) {
  // 2 triangles per subdivision, 3 verts per tri, 5 values (xyrgb) each.
  const numVertices = numSubdivisions * 3 * 2;
  const vertexData = new Float32Array(numVertices * (2 + 3) * 3 * 2);
 
  let offset = 0;
  const addVertex = (x, y, r, g, b) => {
    vertexData[offset++] = x;
    vertexData[offset++] = y;
    vertexData[offset++] = r;
    vertexData[offset++] = g;
    vertexData[offset++] = b;
  };
 
  const innerColor = [1, 1, 1];
  const outerColor = [0.1, 0.1, 0.1];
 
  // 2 vertices per subdivision
  //
  // 0--1 4
  // | / /|
  // |/ / |
  // 2 3--5
  for (let i = 0; i < numSubdivisions; ++i) {
    const angle1 = startAngle + (i + 0) * (endAngle - startAngle) / numSubdivisions;
    const angle2 = startAngle + (i + 1) * (endAngle - startAngle) / numSubdivisions;
 
    const c1 = Math.cos(angle1);
    const s1 = Math.sin(angle1);
    const c2 = Math.cos(angle2);
    const s2 = Math.sin(angle2);
 
    // first triangle
    addVertex(c1 * radius, s1 * radius, ...outerColor);
    addVertex(c2 * radius, s2 * radius, ...outerColor);
    addVertex(c1 * innerRadius, s1 * innerRadius, ...innerColor);
    addVertex(c1 * innerRadius, s1 * innerRadius, ...innerColor);
    addVertex(c2 * radius, s2 * radius, ...outerColor);
    addVertex(c2 * innerRadius, s2 * innerRadius, ...innerColor);
  }
 
  return {
    vertexData,
    numVertices,
  };
}

这样我们就得到了阴影圈。

以下为完整代码及运行效果：

HTML：


DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>001hello-triangletitle>
    <style>
        html,
        body {
            margin: 0;
            width: 100%;
            height: 100%;
            background: #000;
            color: #fff;
            display: flex;
            text-align: center;
            flex-direction: column;
            justify-content: center;
        }

        div,
        canvas {
            height: 100%;
            width: 100%;
        }
    style>
head>

<body>
    <div id="007vertex-srandom-circle3">
        <canvas id="gpucanvas">canvas>
    div>
    <script type="module" src="./007vertex-srandom-circle3.ts">script>

body>

html>

TS:

/*
 * @Description:
 * @Author: tianyw
 * @Date: 2023-04-08 20:03:35
 * @LastEditTime: 2023-10-09 00:00:17
 * @LastEditors: tianyw
 */
export type SampleInit = (params: {
  canvas: HTMLCanvasElement;
}) => void | Promise<void>;

import shaderWGSL from "./shaders/shader.wgsl?raw";

const rand = (
  min: undefined | number = undefined,
  max: undefined | number = undefined
) => {
  if (min === undefined) {
    min = 0;
    max = 1;
  } else if (max === undefined) {
    max = min;
    min = 0;
  }
  return min + Math.random() * (max - min);
};

function createCircleVertices({
  radius = 1,
  numSubdivisions = 24,
  innerRadius = 0,
  startAngle = 0,
  endAngle = Math.PI * 2
} = {}) {
  // 2 triangles per subdivision, 3 verts per tri, 5 values(xyrgb) each
  const numVertices = numSubdivisions * 3 * 2;
  const vertexData = new Float32Array(numSubdivisions * (2 + 3) * 3 * 2);

  let offset = 0;
  const addVertex = (x: number, y: number, r: number, g: number, b: number) => {
    vertexData[offset++] = x;
    vertexData[offset++] = y;
    vertexData[offset++] = r;
    vertexData[offset++] = g;
    vertexData[offset++] = b;
  };
  const innerColor = [1, 1, 1];
  const outerColor = [0.1, 0.1, 0.1];
  // 2 vertices per subdivision
  //
  // 0--1 4
  // | / /|
  // |/ / |
  // 2 3--5
  for (let i = 0; i < numSubdivisions; ++i) {
    const angle1 =
      startAngle + ((i + 0) * (endAngle - startAngle)) / numSubdivisions;
    const angle2 =
      startAngle + ((i + 1) * (endAngle - startAngle)) / numSubdivisions;

    const c1 = Math.cos(angle1);
    const s1 = Math.sin(angle1);
    const c2 = Math.cos(angle2);
    const s2 = Math.sin(angle2);

    // first angle
    addVertex(
      c1 * radius,
      s1 * radius,
      outerColor[0],
      outerColor[1],
      outerColor[2]
    );
    addVertex(
      c2 * radius,
      s2 * radius,
      outerColor[0],
      outerColor[1],
      outerColor[2]
    );
    addVertex(
      c1 * innerRadius,
      s1 * innerRadius,
      innerColor[0],
      innerColor[1],
      innerColor[2]
    );

    // second triangle
    addVertex(
      c1 * innerRadius,
      s1 * innerRadius,
      innerColor[0],
      innerColor[1],
      innerColor[2]
    );
    addVertex(
      c2 * radius,
      s2 * radius,
      outerColor[0],
      outerColor[1],
      outerColor[2]
    );
    addVertex(
      c2 * innerRadius,
      s2 * innerRadius,
      innerColor[0],
      innerColor[1],
      innerColor[2]
    );
  }

  return {
    vertexData,
    numVertices
  };
}

const init: SampleInit = async ({ canvas }) => {
  const adapter = await navigator.gpu?.requestAdapter();
  if (!adapter) return;
  const device = await adapter?.requestDevice();
  if (!device) {
    console.error("need a browser that supports WebGPU");
    return;
  }
  const context = canvas.getContext("webgpu");
  if (!context) return;
  const devicePixelRatio = window.devicePixelRatio || 1;
  canvas.width = canvas.clientWidth * devicePixelRatio;
  canvas.height = canvas.clientHeight * devicePixelRatio;
  const presentationFormat = navigator.gpu.getPreferredCanvasFormat();

  context.configure({
    device,
    format: presentationFormat,
    alphaMode: "premultiplied"
  });

  const shaderModule = device.createShaderModule({
    label: "our hardcoded rgb triangle shaders",
    code: shaderWGSL
  });
  const renderPipeline = device.createRenderPipeline({
    label: "per vertex color",
    layout: "auto",
    vertex: {
      module: shaderModule,
      entryPoint: "vs",
      buffers: [
        {
          arrayStride: 5 * 4, // 5 floats, 4 bytes each
          attributes: [
            {
              shaderLocation: 0,
              offset: 0,
              format: "float32x2"
            }, // position
            {
              shaderLocation: 4,
              offset: 8,
              format: "float32x3"
            } // position
          ]
        },
        {
          arrayStride: 6 * 4, // 6 floats, 4 bytes each
          stepMode: "instance",
          attributes: [
            {
              shaderLocation: 1,
              offset: 0,
              format: "float32x4" // color
            },
            {
              shaderLocation: 2,
              offset: 16,
              format: "float32x2" // offset
            }
          ]
        },
        {
          arrayStride: 2 * 4, // 2 floats, 4 bytes each
          stepMode: "instance",
          attributes: [
            {
              shaderLocation: 3,
              offset: 0,
              format: "float32x2"
            } // scale
          ]
        }
      ]
    },
    fragment: {
      module: shaderModule,
      entryPoint: "fs",
      targets: [
        {
          format: presentationFormat
        }
      ]
    },
    primitive: {
      // topology: "line-list"
      // topology: "line-strip"
      //  topology: "point-list"
      topology: "triangle-list"
      // topology: "triangle-strip"
    }
  });

  const kNumObjects = 100;

  const staticUnitSize =
    4 * 4 + // color is 4 32bit floats (4bytes each)
    2 * 4; // offset is 2 32bit floats (4bytes each)
  const changingUnitSize = 2 * 4; // scale is 2 32 bit floats

  const staticVertexBufferSize = staticUnitSize * kNumObjects;
  const changingVertexBufferSize = changingUnitSize * kNumObjects;

  const staticVertexBuffer = device.createBuffer({
    label: "static vertex for objects",
    size: staticVertexBufferSize,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
  });

  const changingVertexBuffer = device.createBuffer({
    label: "changing vertex for objects",
    size: changingVertexBufferSize,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
  });

  const staticVertexValues = new Float32Array(staticVertexBufferSize / 4);
  const changingVertexValues = new Float32Array(changingVertexBufferSize / 4);

  const kColorOffset = 0;
  const kOffsetOffset = 4;

  const kScaleOffset = 0;

  const objectInfos: {
    scale: number;
  }[] = [];
  for (let i = 0; i < kNumObjects; ++i) {
    const staticOffset = i * (staticUnitSize / 4);

    staticVertexValues.set(
      [rand(), rand(), rand(), 1],
      staticOffset + kColorOffset
    );
    staticVertexValues.set(
      [rand(-0.9, 0.9), rand(-0.9, 0.9)],
      staticOffset + kOffsetOffset
    );

    objectInfos.push({
      scale: rand(0.2, 0.5)
    });
  }
  device.queue.writeBuffer(staticVertexBuffer, 0, staticVertexValues);

  const { vertexData, numVertices } = createCircleVertices({
    radius: 0.5,
    innerRadius: 0.25
  });
  const vertexBuffer = device.createBuffer({
    label: "vertex buffer vertices",
    size: vertexData.byteLength,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
  });
  device.queue.writeBuffer(vertexBuffer, 0, vertexData);

  function frame() {
    const aspect = canvas.width / canvas.height;

    const renderCommandEncoder = device.createCommandEncoder({
      label: "render vert frag"
    });
    if (!context) return;

    const textureView = context.getCurrentTexture().createView();
    const renderPassDescriptor: GPURenderPassDescriptor = {
      label: "our basic canvas renderPass",
      colorAttachments: [
        {
          view: textureView,
          clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
          loadOp: "clear",
          storeOp: "store"
        }
      ]
    };
    const renderPass =
      renderCommandEncoder.beginRenderPass(renderPassDescriptor);
    renderPass.setPipeline(renderPipeline);
    renderPass.setVertexBuffer(0, vertexBuffer);
    objectInfos.forEach(({ scale }, ndx) => {
      const offset = ndx * (changingUnitSize / 4);
      changingVertexValues.set([scale / aspect, scale], offset + kScaleOffset); // set the scale
    });
    device.queue.writeBuffer(changingVertexBuffer, 0, changingVertexValues);
    renderPass.setVertexBuffer(1, staticVertexBuffer);
    renderPass.setVertexBuffer(2, changingVertexBuffer);

    renderPass.draw(numVertices, kNumObjects);
    renderPass.end();
    const renderBuffer = renderCommandEncoder.finish();
    device.queue.submit([renderBuffer]);

    requestAnimationFrame(frame);
  }

  requestAnimationFrame(frame);
};

const canvas = document.getElementById("gpucanvas") as HTMLCanvasElement;
init({ canvas: canvas });

Shaders:

shader.wgsl:


struct Vertex {
   @location(0) position: vec2f,
   @location(1) color: vec4f,
   @location(2) offset: vec2f,
   @location(3) scale: vec2f,
   @location(4) perVertexColor: vec3f,
};

struct VSOutput {
    @builtin(position) position: vec4f,
    @location(0) color: vec4f
};


@vertex 
fn vs(vert: Vertex) -> VSOutput {
    var vsOut: VSOutput;
    vsOut.position = vec4f(vert.position * vert.scale + vert.offset, 0.0, 1.0);
    vsOut.color = vert.color * vec4f(vert.perVertexColor, 1);
    return vsOut;
}

@fragment
fn fs(vsOut: VSOutput) -> @location(0) vec4f {
    return vsOut.color;
}

五、WebGPU Vertex Buffers 顶点缓冲区_第9张图片

WGSL中的属性不必与JavaScript中的属性匹配

在上面的WGSL中，我们将perVertexColor属性声明为vec3f，如下所示

struct Vertex {
  @location(0) position: vec2f,
  @location(1) color: vec4f,
  @location(2) offset: vec2f,
  @location(3) scale: vec2f,
  @location(4) perVertexColor: vec3f,
};

像这样使用它

@vertex fn vs(
  vert: Vertex,
) -> VSOutput {
  var vsOut: VSOutput;
  vsOut.position = vec4f(
      vert.position * vert.scale + vert.offset, 0.0, 1.0);
  vsOut.color = vert.color * vec4f(vert.perVertexColor, 1);
  return vsOut;
}

我们也可以将它声明为vec4f，然后像这样使用它

struct Vertex {
  @location(0) position: vec2f,
  @location(1) color: vec4f,
  @location(2) offset: vec2f,
  @location(3) scale: vec2f,
  @location(4) perVertexColor: vec4f,
};
 
...
 
@vertex fn vs(
  vert: Vertex,
) -> VSOutput {
  var vsOut: VSOutput;
  vsOut.position = vec4f(
      vert.position * vert.scale + vert.offset, 0.0, 1.0);
  vsOut.color = vert.color * vert.perVertexColor;
  return vsOut;
}

不会改变任何其他东西。在JavaScript中，我们仍然只提供每个顶点3个浮点数的数据。

    {
      arrayStride: 5 * 4, // 5 floats, 4 bytes each
      attributes: [
        {shaderLocation: 0, offset: 0, format: 'float32x2'},  // position
        {shaderLocation: 4, offset: 8, format: 'float32x3'},  // perVertexColor
      ],
    },

这是可行的，因为在着色器中属性总是有4个值。它们默认为0,0,0,1，所以我们不提供的任何值都会得到默认值。

使用规范化的值来节省空间

我们使用32位浮点数表示颜色。每个perVertexColor有3个值，每个顶点每种颜色总共有12字节。每种颜色有4个值，每种颜色每个实例总共16字节。

我们可以优化一下，使用8位的值，并告诉WebGPU它们应该从0↔255到0.0↔1.0进行规范化

查看有效的属性格式列表，没有3值8bit格式，但有unorm8x4，所以让我们使用它。

首先，让我们更改生成顶点的代码，将颜色存储为8bit值并进行归一化

function createCircleVertices({
  radius = 1,
  numSubdivisions = 24,
  innerRadius = 0,
  startAngle = 0,
  endAngle = Math.PI * 2,
} = {}) {
  // 2 triangles per subdivision, 3 verts per tri
  const numVertices = numSubdivisions * 3 * 2;
  // 2 32-bit values for position (xy) and 1 32-bit value for color (rgb_)
  // The 32-bit color value will be written/read as 4 8-bit values
  const vertexData = new Float32Array(numVertices * (2 + 1));
  const colorData = new Uint8Array(vertexData.buffer);
 
  let offset = 0;
  let colorOffset = 8;
  const addVertex = (x, y, r, g, b) => {
    vertexData[offset++] = x;
    vertexData[offset++] = y;
    offset += 1;  // skip the color
    colorData[colorOffset++] = r * 255;
    colorData[colorOffset++] = g * 255;
    colorData[colorOffset++] = b * 255;
    colorOffset += 9;  // skip extra byte and the position
  };

上面我们创建了colorData，它是一个Uint8Array视图，与vertexData相同的数据

然后使用colorData来插入颜色，从0↔1扩展到0↔255

这些数据的内存布局如下所示

五、WebGPU Vertex Buffers 顶点缓冲区_第10张图片

然后我们需要修改管道，将数据提取为8位无符号值，并将它们归一化回0↔1，更新偏移量，并将步长更新为新的大小。

  const pipeline = device.createRenderPipeline({
    label: 'per vertex color',
    layout: 'auto',
    vertex: {
      module,
      entryPoint: 'vs',
      buffers: [
        {
          arrayStride: 2 * 4 + 4, // 2 floats, 4 bytes each + 4 bytes
          attributes: [
            {shaderLocation: 0, offset: 0, format: 'float32x2'},  // position
            {shaderLocation: 4, offset: 8, format: 'unorm8x4'},   // perVertexColor
          ],
        },
        {
          arrayStride: 4 + 2 * 4, // 4 bytes + 2 floats, 4 bytes each
          stepMode: 'instance',
          attributes: [
            {shaderLocation: 1, offset: 0, format: 'unorm8x4'},   // color
            {shaderLocation: 2, offset: 4, format: 'float32x2'},  // offset
          ],
        },
        {
          arrayStride: 2 * 4, // 2 floats, 4 bytes each
          stepMode: 'instance',
          attributes: [
            {shaderLocation: 3, offset: 0, format: 'float32x2'},   // scale
          ],
        },
      ],
    },
    fragment: {
      module,
      entryPoint: 'fs',
      targets: [{ format: presentationFormat }],
    },
  });

这样就节省了一点空间。我们以前每个顶点使用20字节，现在我们使用12字节，节省了40%。我们在每个实例中使用24字节，现在我们使用12字节，节省了50%。

以下为完整代码及其运行效果：

HTML：


DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>001hello-triangletitle>
    <style>
        html,
        body {
            margin: 0;
            width: 100%;
            height: 100%;
            background: #000;
            color: #fff;
            display: flex;
            text-align: center;
            flex-direction: column;
            justify-content: center;
        }

        div,
        canvas {
            height: 100%;
            width: 100%;
        }
    style>
head>

<body>
    <div id="007vertex-srandom-circle4">
        <canvas id="gpucanvas">canvas>
    div>
    <script type="module" src="./007vertex-srandom-circle4.ts">script>

body>

html>

TS:

/*
 * @Description:
 * @Author: tianyw
 * @Date: 2023-04-08 20:03:35
 * @LastEditTime: 2023-10-09 21:13:36
 * @LastEditors: tianyw
 */
export type SampleInit = (params: {
  canvas: HTMLCanvasElement;
}) => void | Promise<void>;

import shaderWGSL from "./shaders/shader.wgsl?raw";

const rand = (
  min: undefined | number = undefined,
  max: undefined | number = undefined
) => {
  if (min === undefined) {
    min = 0;
    max = 1;
  } else if (max === undefined) {
    max = min;
    min = 0;
  }
  return min + Math.random() * (max - min);
};

function createCircleVertices({
  radius = 1,
  numSubdivisions = 24,
  innerRadius = 0,
  startAngle = 0,
  endAngle = Math.PI * 2
} = {}) {
  // 2 triangles per subdivision, 3 verts per tri
  const numVertices = numSubdivisions * 3 * 2;
  // 2 32-bit values for position(xy) and 1 32-bit value for color(rgb_)
  // the 32-bit color value will be written/read as 4 8-bit values
  const vertexData = new Float32Array(numVertices * (2 + 1));
  const colorData = new Uint8Array(vertexData.buffer);
  let offset = 0;
  let colorOffset = 8;
  const addVertex = (x: number, y: number, r: number, g: number, b: number) => {
    vertexData[offset++] = x;
    vertexData[offset++] = y;
    offset += 1; // skip the color
    colorData[colorOffset++] = r * 255;
    colorData[colorOffset++] = g * 255;
    colorData[colorOffset++] = b * 255;
    colorOffset += 9; // skip extra byte and the position
  };
  const innerColor = [1, 1, 1];
  const outerColor = [0.1, 0.1, 0.1];
  // 2 vertices per subdivision
  //
  // 0--1 4
  // | / /|
  // |/ / |
  // 2 3--5
  for (let i = 0; i < numSubdivisions; ++i) {
    const angle1 =
      startAngle + ((i + 0) * (endAngle - startAngle)) / numSubdivisions;
    const angle2 =
      startAngle + ((i + 1) * (endAngle - startAngle)) / numSubdivisions;

    const c1 = Math.cos(angle1);
    const s1 = Math.sin(angle1);
    const c2 = Math.cos(angle2);
    const s2 = Math.sin(angle2);

    // first angle
    addVertex(
      c1 * radius,
      s1 * radius,
      outerColor[0],
      outerColor[1],
      outerColor[2]
    );
    addVertex(
      c2 * radius,
      s2 * radius,
      outerColor[0],
      outerColor[1],
      outerColor[2]
    );
    addVertex(
      c1 * innerRadius,
      s1 * innerRadius,
      innerColor[0],
      innerColor[1],
      innerColor[2]
    );

    // second triangle
    addVertex(
      c1 * innerRadius,
      s1 * innerRadius,
      innerColor[0],
      innerColor[1],
      innerColor[2]
    );
    addVertex(
      c2 * radius,
      s2 * radius,
      outerColor[0],
      outerColor[1],
      outerColor[2]
    );
    addVertex(
      c2 * innerRadius,
      s2 * innerRadius,
      innerColor[0],
      innerColor[1],
      innerColor[2]
    );
  }

  return {
    vertexData,
    numVertices
  };
}

const init: SampleInit = async ({ canvas }) => {
  const adapter = await navigator.gpu?.requestAdapter();
  if (!adapter) return;
  const device = await adapter?.requestDevice();
  if (!device) {
    console.error("need a browser that supports WebGPU");
    return;
  }
  const context = canvas.getContext("webgpu");
  if (!context) return;
  const devicePixelRatio = window.devicePixelRatio || 1;
  canvas.width = canvas.clientWidth * devicePixelRatio;
  canvas.height = canvas.clientHeight * devicePixelRatio;
  const presentationFormat = navigator.gpu.getPreferredCanvasFormat();

  context.configure({
    device,
    format: presentationFormat,
    alphaMode: "premultiplied"
  });

  const shaderModule = device.createShaderModule({
    label: "our hardcoded rgb triangle shaders",
    code: shaderWGSL
  });
  const renderPipeline = device.createRenderPipeline({
    label: "per vertex color",
    layout: "auto",
    vertex: {
      module: shaderModule,
      entryPoint: "vs",
      buffers: [
        {
          arrayStride: 2 * 4 + 4, // 2 floats, 4 bytes each + 4 bytes
          attributes: [
            {
              shaderLocation: 0,
              offset: 0,
              format: "float32x2"
            }, // position
            {
              shaderLocation: 4,
              offset: 8,
              format: "unorm8x4"
            } // position
          ]
        },
        {
          arrayStride: 4 + 2 * 4, // 4 bytes + 2 floats,4 bytes each
          stepMode: "instance",
          attributes: [
            {
              shaderLocation: 1,
              offset: 0,
              format: "unorm8x4" // color
            },
            {
              shaderLocation: 2,
              offset: 4,
              format: "float32x2" // offset
            }
          ]
        },
        {
          arrayStride: 2 * 4, // 2 floats, 4 bytes each
          stepMode: "instance",
          attributes: [
            {
              shaderLocation: 3,
              offset: 0,
              format: "float32x2"
            } // scale
          ]
        }
      ]
    },
    fragment: {
      module: shaderModule,
      entryPoint: "fs",
      targets: [
        {
          format: presentationFormat
        }
      ]
    },
    primitive: {
      // topology: "line-list"
      // topology: "line-strip"
      //  topology: "point-list"
      topology: "triangle-list"
      // topology: "triangle-strip"
    }
  });

  const kNumObjects = 100;

  const staticUnitSize =
    4 + // color is 4 bytes
    2 * 4; // offset is 2 32bit floats (4bytes each)
  const changingUnitSize = 2 * 4; // scale is 2 32 bit floats

  const staticVertexBufferSize = staticUnitSize * kNumObjects;
  const changingVertexBufferSize = changingUnitSize * kNumObjects;

  const staticVertexBuffer = device.createBuffer({
    label: "static vertex for objects",
    size: staticVertexBufferSize,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
  });

  const changingVertexBuffer = device.createBuffer({
    label: "changing vertex for objects",
    size: changingVertexBufferSize,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
  });

  const staticVertexValuesU8 = new Uint8Array(staticVertexBufferSize);
  const staticVertexValuesF32 = new Float32Array(staticVertexValuesU8.buffer);

  const changingVertexValues = new Float32Array(changingVertexBufferSize / 4);

  const kColorOffset = 0;
  const kOffsetOffset = 1;

  const kScaleOffset = 0;

  const objectInfos: {
    scale: number;
  }[] = [];
  for (let i = 0; i < kNumObjects; ++i) {
    const staticOffsetU8 = i * staticUnitSize;
    const staticOffsetF32 = staticOffsetU8 / 4;

    staticVertexValuesU8.set(
      [rand() * 255, rand() * 255, rand() * 255, 255],
      staticOffsetU8 + kColorOffset
    );
    staticVertexValuesF32.set(
      [rand(-0.9, 0.9), rand(-0.9, 0.9)],
      staticOffsetF32 + kOffsetOffset
    );

    objectInfos.push({
      scale: rand(0.2, 0.5)
    });
  }
  device.queue.writeBuffer(staticVertexBuffer, 0, staticVertexValuesF32);

  const { vertexData, numVertices } = createCircleVertices({
    radius: 0.5,
    innerRadius: 0.25
  });
  const vertexBuffer = device.createBuffer({
    label: "vertex buffer vertices",
    size: vertexData.byteLength,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
  });
  device.queue.writeBuffer(vertexBuffer, 0, vertexData);

  function frame() {
    const aspect = canvas.width / canvas.height;

    const renderCommandEncoder = device.createCommandEncoder({
      label: "render vert frag"
    });
    if (!context) return;

    const textureView = context.getCurrentTexture().createView();
    const renderPassDescriptor: GPURenderPassDescriptor = {
      label: "our basic canvas renderPass",
      colorAttachments: [
        {
          view: textureView,
          clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
          loadOp: "clear",
          storeOp: "store"
        }
      ]
    };
    const renderPass =
      renderCommandEncoder.beginRenderPass(renderPassDescriptor);
    renderPass.setPipeline(renderPipeline);
    renderPass.setVertexBuffer(0, vertexBuffer);
    objectInfos.forEach(({ scale }, ndx) => {
      const offset = ndx * (changingUnitSize / 4);
      changingVertexValues.set([scale / aspect, scale], offset + kScaleOffset); // set the scale
    });
    device.queue.writeBuffer(changingVertexBuffer, 0, changingVertexValues);
    renderPass.setVertexBuffer(1, staticVertexBuffer);
    renderPass.setVertexBuffer(2, changingVertexBuffer);

    renderPass.draw(numVertices, kNumObjects);
    renderPass.end();
    const renderBuffer = renderCommandEncoder.finish();
    device.queue.submit([renderBuffer]);

    requestAnimationFrame(frame);
  }

  requestAnimationFrame(frame);
};

const canvas = document.getElementById("gpucanvas") as HTMLCanvasElement;
init({ canvas: canvas });

Shaders:

shader.wgsl:


struct Vertex {
   @location(0) position: vec2f,
   @location(1) color: vec4f,
   @location(2) offset: vec2f,
   @location(3) scale: vec2f,
   @location(4) perVertexColor: vec3f,
};

struct VSOutput {
    @builtin(position) position: vec4f,
    @location(0) color: vec4f
};


@vertex 
fn vs(vert: Vertex) -> VSOutput {
    var vsOut: VSOutput;
    vsOut.position = vec4f(vert.position * vert.scale + vert.offset, 0.0, 1.0);
    vsOut.color = vert.color * vec4f(vert.perVertexColor, 1);
    return vsOut;
}

@fragment
fn fs(vsOut: VSOutput) -> @location(0) vec4f {
    return vsOut.color;
}

五、WebGPU Vertex Buffers 顶点缓冲区_第11张图片

索引缓冲区

这里要介绍的最后一件事是索引缓冲区。索引缓冲区描述了处理和使用顶点的顺序。

你可以把绘制看成是按顺序遍历顶点

0, 1, 2, 3, 4, 5, .....

通过索引缓冲区，我们可以改变这个顺序。

我们为每个圆的细分创建了6个顶点，尽管其中2个是相同的。

五、WebGPU Vertex Buffers 顶点缓冲区_第12张图片

现在，我们只创建4个顶点，然后通过告诉WebGPU按此顺序绘制索引，使用索引来使用这4个顶点6次

0, 1, 2, 2, 1, 3, ...

五、WebGPU Vertex Buffers 顶点缓冲区_第13张图片

function createCircleVertices({
  radius = 1,
  numSubdivisions = 24,
  innerRadius = 0,
  startAngle = 0,
  endAngle = Math.PI * 2,
} = {}) {
  // 2 vertices at each subdivision, + 1 to wrap around the circle.
  const numVertices = (numSubdivisions + 1) * 2;
  // 2 32-bit values for position (xy) and 1 32-bit value for color (rgb)
  // The 32-bit color value will be written/read as 4 8-bit values
  const vertexData = new Float32Array(numVertices * (2 + 1));
  const colorData = new Uint8Array(vertexData.buffer);
 
  let offset = 0;
  let colorOffset = 8;
  const addVertex = (x, y, r, g, b) => {
    vertexData[offset++] = x;
    vertexData[offset++] = y;
    offset += 1;  // skip the color
    colorData[colorOffset++] = r * 255;
    colorData[colorOffset++] = g * 255;
    colorData[colorOffset++] = b * 255;
    colorOffset += 9;  // skip extra byte and the position
  };
  const innerColor = [1, 1, 1];
  const outerColor = [0.1, 0.1, 0.1];
 
  // 2 vertices per subdivision
  //
  // 0  2  4  6  8 ...
  //
  // 1  3  5  7  9 ...
  for (let i = 0; i <= numSubdivisions; ++i) {
    const angle = startAngle + (i + 0) * (endAngle - startAngle) / numSubdivisions;
 
    const c1 = Math.cos(angle);
    const s1 = Math.sin(angle);
 
    addVertex(c1 * radius, s1 * radius, ...outerColor);
    addVertex(c1 * innerRadius, s1 * innerRadius, ...innerColor);
  }
 
  const indexData = new Uint32Array(numSubdivisions * 6);
  let ndx = 0;
 
  // 0---2---4---...
  // | //| //|
  // |// |// |//
  // 1---3-- 5---...
  for (let i = 0; i < numSubdivisions; ++i) {
    const ndxOffset = i * 2;
 
    // first triangle
    indexData[ndx++] = ndxOffset;
    indexData[ndx++] = ndxOffset + 1;
    indexData[ndx++] = ndxOffset + 2;
 
    // second triangle
    indexData[ndx++] = ndxOffset + 2;
    indexData[ndx++] = ndxOffset + 1;
    indexData[ndx++] = ndxOffset + 3;
  }
 
  return {
    positionData,
    colorData,
    indexData,
    numVertices: indexData.length,
  };
}

然后我们需要创建一个索引缓冲区

  const { vertexData, indexData, numVertices } = createCircleVertices({
    radius: 0.5,
    innerRadius: 0.25,
  });
  const vertexBuffer = device.createBuffer({
    label: 'vertex buffer',
    size: vertexData.byteLength,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
  });
  device.queue.writeBuffer(vertexBuffer, 0, vertexData);
  const indexBuffer = device.createBuffer({
    label: 'index buffer',
    size: indexData.byteLength,
    usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
  });
  device.queue.writeBuffer(indexBuffer, 0, indexData);

注意，我们将用法设置为INDEX。

最后，在绘制时，我们需要指定索引缓冲区

    pass.setPipeline(pipeline);
    pass.setVertexBuffer(0, vertexBuffer);
    pass.setVertexBuffer(1, staticVertexBuffer);
    pass.setVertexBuffer(2, changingVertexBuffer);
    pass.setIndexBuffer(indexBuffer, 'uint32');

因为我们的缓冲区包含32位无符号整数索引，我们需要在这里传递uint32。我们也可以使用16位无符号索引，在这种情况下，我们需要传入uint16。

我们需要调用drawindex而不是draw

    pass.drawIndexed(numVertices, kNumObjects);

这样，我们节省了一些空间(33%)，并且在顶点着色器中计算顶点时的潜在处理量类似，因为GPU可以重用它已经计算过的顶点。

以下为完整代码及运行结果：

HTML：


DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>001hello-triangletitle>
    <style>
        html,
        body {
            margin: 0;
            width: 100%;
            height: 100%;
            background: #000;
            color: #fff;
            display: flex;
            text-align: center;
            flex-direction: column;
            justify-content: center;
        }

        div,
        canvas {
            height: 100%;
            width: 100%;
        }
    style>
head>

<body>
    <div id="007vertex-srandom-circle5">
        <canvas id="gpucanvas">canvas>
    div>
    <script type="module" src="./007vertex-srandom-circle5.ts">script>

body>

html>

TS：

/*
 * @Description:
 * @Author: tianyw
 * @Date: 2023-04-08 20:03:35
 * @LastEditTime: 2023-10-09 21:53:07
 * @LastEditors: tianyw
 */
export type SampleInit = (params: {
  canvas: HTMLCanvasElement;
}) => void | Promise<void>;

import shaderWGSL from "./shaders/shader.wgsl?raw";

const rand = (
  min: undefined | number = undefined,
  max: undefined | number = undefined
) => {
  if (min === undefined) {
    min = 0;
    max = 1;
  } else if (max === undefined) {
    max = min;
    min = 0;
  }
  return min + Math.random() * (max - min);
};

function createCircleVertices({
  radius = 1,
  numSubdivisions = 24,
  innerRadius = 0,
  startAngle = 0,
  endAngle = Math.PI * 2
} = {}) {
  // 2 triangles per subdivision, 3 verts per tri
  const numVertices = (numSubdivisions + 1) * 2;
  // 2 32-bit values for position(xy) and 1 32-bit value for color(rgb_)
  // the 32-bit color value will be written/read as 4 8-bit values
  const vertexData = new Float32Array(numVertices * (2 + 1));
  const colorData = new Uint8Array(vertexData.buffer);
  let offset = 0;
  let colorOffset = 8;
  const addVertex = (x: number, y: number, r: number, g: number, b: number) => {
    vertexData[offset++] = x;
    vertexData[offset++] = y;
    offset += 1; // skip the color
    colorData[colorOffset++] = r * 255;
    colorData[colorOffset++] = g * 255;
    colorData[colorOffset++] = b * 255;
    colorOffset += 9; // skip extra byte and the position
  };
  const innerColor = [1, 1, 1];
  const outerColor = [0.1, 0.1, 0.1];
  // 2 vertices per subdivision
  //
  // 0 2 4 6 8 ...
  // 1 3 5 7 9 ...
  for (let i = 0; i <= numSubdivisions; ++i) {
    const angle =
      startAngle + ((i + 0) * (endAngle - startAngle)) / numSubdivisions;

    const c1 = Math.cos(angle);
    const s1 = Math.sin(angle);

    addVertex(
      c1 * radius,
      s1 * radius,
      outerColor[0],
      outerColor[1],
      outerColor[2]
    );
    addVertex(
      c1 * innerRadius,
      s1 * innerRadius,
      innerColor[0],
      innerColor[1],
      innerColor[2]
    );
  }

  const indexData = new Uint32Array(numSubdivisions * 6);
  let ndx = 0;
  // 0---2---4---...
  // | //| //|
  // |// |// |//
  // 1---3-- 5---...
  for (let i = 0; i < numSubdivisions; ++i) {
    const ndxOffset = i * 2;

    // first triangle
    indexData[ndx++] = ndxOffset;
    indexData[ndx++] = ndxOffset + 1;
    indexData[ndx++] = ndxOffset + 2;

    // second triangle
    indexData[ndx++] = ndxOffset + 2;
    indexData[ndx++] = ndxOffset + 1;
    indexData[ndx++] = ndxOffset + 3;
  }

  return {
    vertexData,
    indexData,
    numVertices: indexData.length
  };
}

const init: SampleInit = async ({ canvas }) => {
  const adapter = await navigator.gpu?.requestAdapter();
  if (!adapter) return;
  const device = await adapter?.requestDevice();
  if (!device) {
    console.error("need a browser that supports WebGPU");
    return;
  }
  const context = canvas.getContext("webgpu");
  if (!context) return;
  const devicePixelRatio = window.devicePixelRatio || 1;
  canvas.width = canvas.clientWidth * devicePixelRatio;
  canvas.height = canvas.clientHeight * devicePixelRatio;
  const presentationFormat = navigator.gpu.getPreferredCanvasFormat();

  context.configure({
    device,
    format: presentationFormat,
    alphaMode: "premultiplied"
  });

  const shaderModule = device.createShaderModule({
    label: "our hardcoded rgb triangle shaders",
    code: shaderWGSL
  });
  const renderPipeline = device.createRenderPipeline({
    label: "per vertex color",
    layout: "auto",
    vertex: {
      module: shaderModule,
      entryPoint: "vs",
      buffers: [
        {
          arrayStride: 2 * 4 + 4, // 2 floats, 4 bytes each + 4 bytes
          attributes: [
            {
              shaderLocation: 0,
              offset: 0,
              format: "float32x2"
            }, // position
            {
              shaderLocation: 4,
              offset: 8,
              format: "unorm8x4"
            } // position
          ]
        },
        {
          arrayStride: 4 + 2 * 4, // 4 bytes + 2 floats,4 bytes each
          stepMode: "instance",
          attributes: [
            {
              shaderLocation: 1,
              offset: 0,
              format: "unorm8x4" // color
            },
            {
              shaderLocation: 2,
              offset: 4,
              format: "float32x2" // offset
            }
          ]
        },
        {
          arrayStride: 2 * 4, // 2 floats, 4 bytes each
          stepMode: "instance",
          attributes: [
            {
              shaderLocation: 3,
              offset: 0,
              format: "float32x2"
            } // scale
          ]
        }
      ]
    },
    fragment: {
      module: shaderModule,
      entryPoint: "fs",
      targets: [
        {
          format: presentationFormat
        }
      ]
    },
    primitive: {
      // topology: "line-list"
      // topology: "line-strip"
      //  topology: "point-list"
      topology: "triangle-list"
      // topology: "triangle-strip"
    }
  });

  const kNumObjects = 100;

  const staticUnitSize =
    4 + // color is 4 bytes
    2 * 4; // offset is 2 32bit floats (4bytes each)
  const changingUnitSize = 2 * 4; // scale is 2 32 bit floats

  const staticVertexBufferSize = staticUnitSize * kNumObjects;
  const changingVertexBufferSize = changingUnitSize * kNumObjects;

  const staticVertexBuffer = device.createBuffer({
    label: "static vertex for objects",
    size: staticVertexBufferSize,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
  });

  const changingVertexBuffer = device.createBuffer({
    label: "changing vertex for objects",
    size: changingVertexBufferSize,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
  });

  const staticVertexValuesU8 = new Uint8Array(staticVertexBufferSize);
  const staticVertexValuesF32 = new Float32Array(staticVertexValuesU8.buffer);

  const changingVertexValues = new Float32Array(changingVertexBufferSize / 4);

  const kColorOffset = 0;
  const kOffsetOffset = 1;

  const kScaleOffset = 0;

  const objectInfos: {
    scale: number;
  }[] = [];
  for (let i = 0; i < kNumObjects; ++i) {
    const staticOffsetU8 = i * staticUnitSize;
    const staticOffsetF32 = staticOffsetU8 / 4;

    staticVertexValuesU8.set(
      [rand() * 255, rand() * 255, rand() * 255, 255],
      staticOffsetU8 + kColorOffset
    );
    staticVertexValuesF32.set(
      [rand(-0.9, 0.9), rand(-0.9, 0.9)],
      staticOffsetF32 + kOffsetOffset
    );

    objectInfos.push({
      scale: rand(0.2, 0.5)
    });
  }
  device.queue.writeBuffer(staticVertexBuffer, 0, staticVertexValuesF32);

  const { vertexData, indexData, numVertices } = createCircleVertices({
    radius: 0.5,
    innerRadius: 0.25
  });
  const vertexBuffer = device.createBuffer({
    label: "vertex buffer vertices",
    size: vertexData.byteLength,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
  });
  device.queue.writeBuffer(vertexBuffer, 0, vertexData);

  const indexBuffer = device.createBuffer({
    label: "index buffer",
    size: indexData.byteLength,
    usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST
  });

  device.queue.writeBuffer(indexBuffer, 0, indexData);

  function frame() {
    const aspect = canvas.width / canvas.height;

    const renderCommandEncoder = device.createCommandEncoder({
      label: "render vert frag"
    });
    if (!context) return;

    const textureView = context.getCurrentTexture().createView();
    const renderPassDescriptor: GPURenderPassDescriptor = {
      label: "our basic canvas renderPass",
      colorAttachments: [
        {
          view: textureView,
          clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
          loadOp: "clear",
          storeOp: "store"
        }
      ]
    };
    const renderPass =
      renderCommandEncoder.beginRenderPass(renderPassDescriptor);
    renderPass.setPipeline(renderPipeline);
    renderPass.setVertexBuffer(0, vertexBuffer);
    objectInfos.forEach(({ scale }, ndx) => {
      const offset = ndx * (changingUnitSize / 4);
      changingVertexValues.set([scale / aspect, scale], offset + kScaleOffset); // set the scale
    });
    device.queue.writeBuffer(changingVertexBuffer, 0, changingVertexValues);
    renderPass.setVertexBuffer(1, staticVertexBuffer);
    renderPass.setVertexBuffer(2, changingVertexBuffer);
    renderPass.setIndexBuffer(indexBuffer, "uint32");

    renderPass.drawIndexed(numVertices, kNumObjects);
    renderPass.end();
    const renderBuffer = renderCommandEncoder.finish();
    device.queue.submit([renderBuffer]);

    requestAnimationFrame(frame);
  }

  requestAnimationFrame(frame);
};

const canvas = document.getElementById("gpucanvas") as HTMLCanvasElement;
init({ canvas: canvas });

Shaders:

shader.wgsl:


struct Vertex {
   @location(0) position: vec2f,
   @location(1) color: vec4f,
   @location(2) offset: vec2f,
   @location(3) scale: vec2f,
   @location(4) perVertexColor: vec3f,
};

struct VSOutput {
    @builtin(position) position: vec4f,
    @location(0) color: vec4f
};


@vertex 
fn vs(vert: Vertex) -> VSOutput {
    var vsOut: VSOutput;
    vsOut.position = vec4f(vert.position * vert.scale + vert.offset, 0.0, 1.0);
    vsOut.color = vert.color * vec4f(vert.perVertexColor, 1);
    return vsOut;
}

@fragment
fn fs(vsOut: VSOutput) -> @location(0) vec4f {
    return vsOut.color;
}

五、WebGPU Vertex Buffers 顶点缓冲区_第14张图片

请注意，我们还可以将索引缓冲区与上一篇文章中的存储缓冲区示例一起使用。在这种情况下，传入的@builtin(vertex_index)的值与索引缓冲区中的索引匹配。

接下来我们将介绍纹理。

你可能感兴趣的:(3d,图形渲染,前端)

  • 计算机毕业设计JAVA房屋租赁系统mybatis 煦洋cxsj985 mybatisjava开发语言
    计算机毕业设计JAVA房屋租赁系统mybatis计算机毕业设计JAVA房屋租赁系统mybatis+源码+调试部署+系统+数据库+lw本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址：https://pan
  • 数据库查询优化：提升性能的关键实践 qcidyu 文章归档DBA最佳实践性能调优查询执行计划索引SQL数据库性能查询优化
    title:数据库查询优化：提升性能的关键实践date:2025/1/30updated:2025/1/30author:cmdragonexcerpt:在当今数据驱动的商业环境中，数据库的性能直接影响着应用程序的响应速度和用户体验。查询优化是性能调优的重要组成部分，通过对SQL查询的分析与改进，减少查询执行时间和资源消耗，从而提升整体系统效率。categories:前端开发tags:查询优化数据
  • Go语言学习笔记——gin实现验证码 PPPsych Go精进学习gin
    文章目录Golang验证码知识结构下载包导包配置session创建中间件生成图片生成验证码验证前端页面测试Golang验证码知识结构ginsession中间件表单处理路由下载包gogetgithub.com/dchest/captcha导包import("bytes""net/http""time""github.com/dchest/captcha""github.com/gin-contrib
  • 工作流编写教程 weixin_34363171 前端phpViewUI
    介绍ONES中使用了flowchart.js作为前端展示，并且扩展了flowchart.js的流程描述语言。flowchart.js参见：https://github.com/adrai/flowchart.js描述语言分为三部分，使用\n\n(空一行)作为分割，分别是节点定义、执行流程描述、节点权限描述节点定义eg:make_stockout=>operation:生成出库单:>m:Sale/O
  • directx12 3d游戏开发 了解函数名和类名规律，提高开发效率 云缘若仙 directx123d算法
    类常用：形式为XM+“✳✳✳✳✳✳”XMVECTOR：XM+VECTOR向量类XMMATRIX:XMMATRIX矩阵类前加F：FXMVECTORF+XM+VECTOR前3个XMVECTOR参数前加C：CXMVECTORC+XM+VECTOR其余的XMVECTOR参数其他类定义在：DirectXMath库结构函数常用：形式为XM+“✳✳✳✳✳✳”+“✳✳✳✳✳✳”+“✳✳✳✳✳✳”XMVectorA
  • Model Import Settings UniMark unityeditormanualunity
    前言在可视化3D世界中，模型是3D世界的核心，你可以没有贴图，可以没有特效，甚至可以没有用户交互界面，但必须得有模型来描述世界的基本样貌。在3D世界中，由点线面构成了模型的轮廓；由UV和纹理，共同描述模型的样貌；由骨骼和蒙皮信息描述模型的运动姿态；再由骨骼的运动轨迹描述模型在某个时间段内的肢体动作。MODELPAGEMODEL功能描述ScaleFactor调整导入模型的全局缩放比例。如果模型的比例
  • 全面解析：HTML页面的加载全过程(六）--浏览器渲染之分层 - Layer huazi99于老师 html前端
    分层原因在生成布局树之后，渲染进程会将一些复杂的3D动画、滚动条、高z-index的元素生成图层，并生成图层树交给GPU加速渲染。页面设计复杂，并且交互效果多。如不分层，用户的一个简单交互将导致整个页面的重新渲染，效率低下。分层好处‌通过分层，浏览器可以将复杂的页面元素分离成不同的图层，每个图层可以独立地进行渲染和更新，从而减少重排和重绘的次数。例如，当用户滚动页面时，只有可视区域的内容会被重新绘
  • python学习专栏 zhousenshan python新赛道python
    推荐学习资料《15分钟轻松学Python》教程目录-CSDN博客每天40分玩转Django教程目录-CSDN博客Pycharm社区版搭建Django环境及Django简单项目、操控mysql数据库-CSDN博客这个开源有关于事务方面高级内容介绍：django-vue-lyadmin:django-vue-lyadmin前端采用vue3+elementplus,后端采用PythonDjangoDRF
  • springboot中DTO、VO、Entity相互转换 会说法语的猪 后端springbootjavaspringboot后端java
    在我们平时开发中，dto、vo、entity之间的相互转换是很频繁的操作，这篇就简单记录一下我在平时开发中转换的方法。在这之前先简单描述一下dto、vo、entityDTO：一般我们在开发中会定义数据传输对象（DataTransferObject,DTO）来接收前端传递的参数是最常见的。VO：平时开发中，一般会定义VO（viewobject）来封装返回给前端的数据Entity：在我们开发中，Ent
  • 前端经典样式参考 momomo_mocs 前端javascript开发语言
    左边导航栏；右边展示区组件间通信方式使用-根目录{{idx+1}}.{{navigateItem.title}}import{reactive}from'vue'letnavigaters=reactive([{title:"PropsLearn",linkPath:"/props"},{title:"CustomEvent",linkPath:"/props"},{title:"Provide-
  • 深入探讨：服务器如何响应前端请求及后端如何查看前端提交的数据 我的青春不太冷 服务器前端运维
    深入探讨：服务器如何响应前端请求及后端如何查看前端提交的数据一、服务器如何响应前端请求前端与后端的交互主要通过HTTP协议实现。以下是详细步骤：1.前端发起HTTP请求GET请求：用于从服务器获取数据。POST请求：用于向服务器提交数据。例如，使用JavaScript的fetchAPI发送POST请求：fetch('https://example.com/api/data',{method:'PO
  • 深入理解 Axios 拦截器的执行链机制 不做超级小白 项目开发web前端前端功能通关秘籍javascript前端开发语言
    深入理解Axios拦截器的执行链机制在现代前端开发中，Axios是最流行的HTTP请求库之一，而拦截器（Interceptor）功能是其核心特性之一。通过拦截器，我们可以在请求发送前或响应返回后进行灵活的预处理或后处理。然而，很多人并不了解拦截器在Axios内部是如何构建和执行的。本文将深入剖析Axios拦截器的执行链机制，帮助更多开发者掌握这一重要知识。1.Axios拦截器的结构拦截器分为两类：
  • Liunx上安装nginx详细步骤以及nginx配置前端页面 a754782427 nginx前端服务器
    1.安装依赖包安装wgetyuminstallwgetyum-yinstallgcczlibzlib-develpcre-developensslopenssl-devel2.下载并解压安装包//创建一个文件夹cd/usr/localmkdirnginxcdnginx//下载tar包wgethttp://nginx.org/download/nginx-1.13.7.tar.gztar-xvfng
  • 【零散技术】MAC 安装多版本node Odoo穆尘 前端macos
    时间是我们最宝贵的财富,珍惜手上的每个时分不同前端项目运行的node版本不一致，会导致无法运行，就像Odoo也需要依据版本使用对应的python环境。python可以用conda随时切换版本，那么Node可以吗？答案是肯定的。1、安装n（类似于conda的工具，单一字符还是很特别）npminstall-gn2、安装nodesudo-En14.21.3版本参照表Node.jsVersionRelea
  • 第23节课：前端调试技巧—掌握浏览器开发者工具与性能优化 学问小小谢 HTML学习前端性能优化交互html5安全学习
    目录浏览器开发者工具常见的浏览器开发者工具浏览器开发者工具的基本使用打开开发者工具开发者工具的面板使用开发者工具进行调试Elements面板检查和编辑HTML检查和编辑CSSConsole面板输出日志和调试信息执行JavaScript代码Network面板监控网络请求分析请求和响应Performance面板记录和分析性能优化性能Application面板检查和管理资源调试存储性能优化与调试性能优化
  • 第22节课：前端测试与调试—确保代码质量和性能的关键 学问小小谢 HTML学习前端学习服务器运维网络
    目录前端测试的重要性测试类型：单元测试与集成测试单元测试单元测试的优点单元测试的实践集成测试集成测试的优点集成测试的实践测试框架：Jest与MochaJestJest的特点Jest的安装与使用MochaMocha的特点Mocha的安装与使用实践：使用Jest和Mocha进行前端测试示例：使用Jest进行单元测试示例：使用Mocha进行集成测试结语在现代软件开发中，测试和调试是确保代码质量和性能的关
  • 使用 Nginx 实现动态图片加水印：技术探索与实践指南20250122 Narutolxy 前端技术干货分享nginx运维
    使用Nginx实现动态图片加水印：技术探索与实践指南引言图片水印是一种广泛应用于保护图片隐私、防止盗用的重要手段。传统方式通常通过前端或后端实现水印处理，但两者各有局限性。本文探讨了一种基于Nginx的折中方案：通过Nginx代理拦截图片请求，动态添加水印并返回给前端。这种方法不仅安全高效，还能减轻后端压力，为开发者提供了一种灵活的实践思路。背景与问题分析在图片加水印的场景中，常见的实现方式包括：
  • CVPR‘24开源 | ADA-Track：端到端3D多目标跟踪最新SOTA！ 计算机视觉工坊 3D视觉从入门到精通3d目标跟踪人工智能
    编辑：计算机视觉工坊添加小助理：dddvision，备注：方向+学校/公司+昵称，拉你入群。文末附行业细分群扫描下方二维码，加入3D视觉知识星球，星球内凝聚了众多3D视觉实战问题，以及各个模块的学习资料：近20门视频课程（星球成员免费学习）、最新顶会论文、3DGS系列、计算机视觉书籍、优质3D视觉算法源码等。想要入门3D视觉、做项目、搞科研，欢迎扫码加入！
  • 所有指标全面领先！图像-点云配准最新SOTA！CoFiI2P详细介绍！ 3Ｄ视觉工坊 3D视觉从入门到精通SLAM自动驾驶3D视觉
    作者：大森林|来源：3D视觉工坊在公众号「3D视觉工坊」后台，回复「原论文」可获取论文pdf。添加微信：dddvisiona，备注：3D点云，拉你入群。文末附行业细分群。1.笔者总结本文介绍了CoFiI2P，这是一种新颖的图像到点云（I2P）配准网络。传统的I2P配准方法通常在点到像素级别估计对应关系，但忽略了全局关系，这往往导致陷入局部最优解。为了解决这个问题，CoFiI2P采用分层的方式提取对
  • 用SpringBoot+mysql+html实现ATM 系统总结与扩展 SAFE20242034 #一SpringBootspringbootmysqlhtml
    这里写目录标题ATM系统总结与扩展项目概述主要功能模块1.用户注册2.用户登录3.账户查询4.存款与取款5.转账6.修改密码7.销户系统改进建议功能扩展技术优化完整代码实现数据库表设计后端代码（SpringBoot示例）1.Account实体类2.AccountRepository接口3.AccountController类前端代码（HTML+JavaScript示例）实际开发与部署步骤**1.开
  • unity3d tilemap hewei+ unity3d
    2019的unity3d需要进入packageManager添加tilemap。不然找不到tilepalette瓦片碰撞器compositecollider2d是将多个碰撞器融合提高性能的。自动添加的刚体改成static，勾选tilemapcollider2d的usedBycomposite不添加碰撞器的瓦片设置为none;图片有间隙。改为能被图片像素除断的值，也不能太小
  • 前端el-table导出pdf 努力奋进的前端小菜鸟 javascript前端vue.js
    1、首先来看下效果图2、使用技术：html2Canvas、JsPDF插件，mode_modules下载两个插件npm i html2Canvas JsPDF其中，html2Canvas负责把html转为图片，JsPDF负责把图片转为pdf文件3、点击按钮触发打印事件//点击按钮触发打印事件button@click='htmlToPdf(节点ID',文件名')'>print//传入打印节点，文件名,
  • vue项目html页面生成PDF预览、下载及生成页面水印 我是槑槑 Vuehtml5vue.jsjavascriptcanvas
    html2canvas官方文档jspdf官方文档目录概述原理过程中遇到的问题生成的PDF截图代码示例加水印版代码示例现存问题概述因为生成的PDF内还有富文本，后端不好生成PDF，故由前端完成。原理html2canva生成截图，jsPDF利用图片生成PDF。过程中遇到的问题1、生成大于30多页时，容易造成生成页面黑屏问题。原因：canvas生成图片时，对内容高度有一定的限制，超过这个高度，canva
  • react学习 guhy fighting reactreact.js学习前端
    react框架的选择低代码、BI前瞻性bs架构，网页客户端去使用react就是用来代替DOM的，dom操作，构建前端界面的react-native直接开发ios，安卓，原生应用虚拟dom，操作react，影响dom，中间人现在的dom和当前的dom做比较看哪个发生了变化，做最小的修改1、虚拟dom2、兼容性3、性能好，避免做一些多余的操作声明式编程：结果为导向命令式编程：过程为导向基于组件开发，组
  • 从CV工程师到CtrlCV架构师：PromptCoder如何让前端搬砖变成乐高拼装 正宗咸豆花 前端人工智能AIGCai个人开发
    《从CV工程师到CtrlCV架构师：PromptCoder如何让前端搬砖变成乐高拼装》各位在座的代码艺术家、CSS炼金术师、React吟游诗人，今天我们要聊一个能让原型图自动「现出原形」的黑魔法——是的，我说的不是Figma切图插件，而是能让你的Ctrl+C/V进化成量子纠缠的PromptCoder。官网：PromptCoder当截图遇见AI：前端复刻的「降维打击」还记得那些年我们对着设计图手动敲
  • ThreeJS入门（233）：THREE.DirectionalLightHelper 知识详解，示例代码 还是大剑师兰特 #ThreeJS中文API全解大剑师threejs入门threejs教程threejs示例
    作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第233篇入门文章文章目录特性构造函数方法`update()`使用示例注意事项
  • ModelNet40-C 项目使用教程 薛烈珑Una
    ModelNet40-C项目使用教程ModelNet40-CRepofor"BenchmarkingRobustnessof3DPointCloudRecognitionagainstCommonCorruptions"https://arxiv.org/abs/2201.12296项目地址:https://gitcode.com/gh_mirrors/mo/ModelNet40-C1.项目介绍M
  • 设计项目实例26-基于物联网的智能开关电源（BUCK电路、电压电流监测、阿里云、DHT11、继电器） 凡人电子工作室 物联网阿里云嵌入式硬件stm32
    设计项目实例26-基于物联网的智能开关电源（BUCK电路、电压电流监测、阿里云、DHT11、继电器）前提说明需知项目设计要求项目提供资料main.c代码测试视频项目3D图前提说明电子开发合作请私信联系，商业/非商业项目均可洽谈，价格友好，负责可靠。目前已开发项目三百余单，不限时售后，直到项目完结。需知对此项目有需求请私信联系我，备注对应项目名称号（非免费，伸手党勿扰，价格公道，售后负责）所有项目均
  • Mybatis 通过数组的下标进行取值 絮落锦乡 java后台javamybatis
    1、前端传参样例2、mybaits写法1）、判空0">2）、错误写法0">andT.create_timebetween#{times[0]}and#{times[1]}报错信息2021-08-2414:19:20.537ERROR45552---[nio-8086-exec-7]o.a.c.c.C.[.[.[/].[dispatcherServlet]:Servlet.service()fors
  • mybatis（134/134）完结 一缕叶 mybatismybatisspringjava
    一级缓存（默认情况下开启）同一个sqlsession中执行相同的查询语句走一级缓存二级缓存：同一个sqlsessionfactory，sqlsession关闭了才会将一级缓存提交到二级缓存中外部编写的缓存PageHelper插件：方便进行分页，同时前端可以容易拿到对于分页相关的所有数据调用getXXX方法12天最终完结mybatis，后续找机会手敲一下源码加深了解。
  • 集合框架 天子之骄 java数据结构集合框架
       集合框架 集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。 从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。   简单介绍：   Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi
  • Table Driven（表驱动）方法实例 bijian1013 javaenumTable Driven表驱动
    实例一： /** * 驾驶人年龄段 * 保险行业，会对驾驶人的年龄做年龄段的区分判断 * 驾驶人年龄段：01-[18,25);02-[25,30);03-[30-35);04-[35,40);05-[40,45);06-[45,50);07-[50-55);08-[55,+∞) */ public class AgePeriodTest { //if...el
  • Jquery 总结 cuishikuan javajqueryAjaxWebjquery方法
    1.$.trim方法用于移除字符串头部和尾部多余的空格。如：$.trim('   Hello   ') // Hello2.$.contains方法返回一个布尔值，表示某个DOM元素（第二个参数）是否为另一个DOM元素（第一个参数）的下级元素。如：$.contains(document.documentElement, document.body); 3.$
  • 面向对象概念的提出 麦田的设计者 java面向对象面向过程
            面向对象中，一切都是由对象展开的，组织代码，封装数据。   在台湾面向对象被翻译为了面向物件编程，这充分说明了，这种编程强调实体。       下面就结合编程语言的发展史，聊一聊面向过程和面向对象。      c语言由贝尔实
  • linux网口绑定 被触发 linux
    刚在一台IBM Xserver服务器上装了RedHat Linux Enterprise AS 4，为了提高网络的可靠性配置双网卡绑定。 一、环境描述 我的RedHat Linux Enterprise AS 4安装双口的Intel千兆网卡，通过ifconfig -a命令看到eth0和eth1两张网卡。 二、双网卡绑定步骤： 2.1 修改/etc/sysconfig/network
  • XML基础语法 肆无忌惮_ xml
    一、什么是XML？ XML全称是Extensible Markup Language，可扩展标记语言。很类似HTML。XML的目的是传输数据而非显示数据。XML的标签没有被预定义，你需要自行定义标签。XML被设计为具有自我描述性。是W3C的推荐标准。   二、为什么学习XML？ 用来解决程序间数据传输的格式问题 做配置文件 充当小型数据库   三、XML与HTM
  • 为网页添加自己喜欢的字体 知了ing 字体 秒表 css
    @font-face { font-family: miaobiao;//定义字体名字 font-style: normal; font-weight: 400; src: url('font/DS-DIGI-e.eot');//字体文件 } 使用： <label style="font-size:18px;font-famil
  • redis范围查询应用-查找IP所在城市 矮蛋蛋 redis
    原文地址： http://www.tuicool.com/articles/BrURbqV 需求 根据IP找到对应的城市 原来的解决方案 oracle表（ip_country）： 查询IP对应的城市： 1.把a.b.c.d这样格式的IP转为一个数字，例如为把210.21.224.34转为3524648994 2. select city from ip_
  • 输入两个整数， 计算百分比 alleni123 java
    public static String getPercent(int x, int total){ double result=(x*1.0)/(total*1.0); System.out.println(result); DecimalFormat df1=new DecimalFormat("0.0000%");
  • 百合——————>怎么学习计算机语言 百合不是茶 java 移动开发
        对于一个从没有接触过计算机语言的人来说，一上来就学面向对象，就算是心里上面接受的了，灵魂我觉得也应该是跟不上的，学不好是很正常的现象，计算机语言老师讲的再多，你在课堂上面跟着老师听的再多，我觉得你应该还是学不会的，最主要的原因是你根本没有想过该怎么来学习计算机编程语言，记得大一的时候金山网络公司在湖大招聘我们学校一个才来大学几天的被金山网络录取，一个刚到大学的就能够去和
  • linux下tomcat开机自启动 bijian1013 tomcat
    方法一： 修改Tomcat/bin/startup.sh 为: export JAVA_HOME=/home/java1.6.0_27 export CLASSPATH=$CLASSPATH:$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:. export PATH=$JAVA_HOME/bin:$PATH export CATALINA_H
  • spring aop实例 bijian1013 javaspringAOP
    1.AdviceMethods.java package com.bijian.study.spring.aop.schema; public class AdviceMethods { public void preGreeting() { System.out.println("--how are you!--"); } } 2.beans.x
  • [Gson八]GsonBuilder序列化和反序列化选项enableComplexMapKeySerialization bit1129 serialization
    enableComplexMapKeySerialization配置项的含义  Gson在序列化Map时，默认情况下，是调用Key的toString方法得到它的JSON字符串的Key，对于简单类型和字符串类型，这没有问题，但是对于复杂数据对象，如果对象没有覆写toString方法，那么默认的toString方法将得到这个对象的Hash地址。   GsonBuilder用于
  • 【Spark九十一】Spark Streaming整合Kafka一些值得关注的问题 bit1129 Stream
    包括Spark Streaming在内的实时计算数据可靠性指的是三种级别： 1. At most once，数据最多只能接受一次，有可能接收不到 2. At least once, 数据至少接受一次，有可能重复接收 3. Exactly once  数据保证被处理并且只被处理一次，   具体的多读几遍http://spark.apache.org/docs/lates
  • shell脚本批量检测端口是否被占用脚本 ronin47
    #!/bin/bash cat ports |while read line do#nc -z -w 10 $line nc -z -w 2 $line 58422>/dev/null2>&1if[ $?-eq 0]then echo $line:ok else echo $line:fail fi done 这里的ports 既可以是文件
  • java-2.设计包含min函数的栈 bylijinnan java
    具体思路参见：http://zhedahht.blog.163.com/blog/static/25411174200712895228171/ import java.util.ArrayList; import java.util.List; public class MinStack { //maybe we can use origin array rathe
  • Netty源码学习-ChannelHandler bylijinnan javanetty
    一般来说，“有状态”的ChannelHandler不应该是“共享”的，“无状态”的ChannelHandler则可“共享” 例如ObjectEncoder是“共享”的, 但 ObjectDecoder 不是 因为每一次调用decode方法时，可能数据未接收完全（incomplete）， 它与上一次decode时接收到的数据“累计”起来才有可能是完整的数据，是“有状态”的 p
  • java生成随机数 cngolon java
    方法一： /** * 生成随机数 * @author [email protected] * @return */ public synchronized static String getChargeSequenceNum(String pre){ StringBuffer sequenceNum = new StringBuffer(); Date dateTime = new D
  • POI读写海量数据 ctrain 海量数据
    import java.io.FileOutputStream; import java.io.OutputStream; import org.apache.poi.xssf.streaming.SXSSFRow; import org.apache.poi.xssf.streaming.SXSSFSheet; import org.apache.poi.xssf.streaming
  • mysql 日期格式化date_format详细使用 daizj mysqldate_format日期格式转换日期格式化
    日期转换函数的详细使用说明  DATE_FORMAT(date,format) Formats the date value according to the format string. The following specifiers may be used in the format string. The&n
  • 一个程序员分享8年的开发经验 dcj3sjt126com 程序员
      在中国有很多人都认为IT行为是吃青春饭的，如果过了30岁就很难有机会再发展下去!其实现实并不是这样子的，在下从事.NET及JAVA方面的开发的也有8年的时间了，在这里在下想凭借自己的亲身经历，与大家一起探讨一下。 明确入行的目的 很多人干IT这一行都冲着“收入高”这一点的，因为只要学会一点HTML, DIV+CSS，要做一个页面开发人员并不是一件难事，而且做一个页面开发人员更容
  • android欢迎界面淡入淡出效果 dcj3sjt126com android
    很多Android应用一开始都会有一个欢迎界面，淡入淡出效果也是用得非常多的，下面来实现一下。 主要代码如下： package com.myaibang.activity; import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.os.CountDown
  • linux 复习笔记之常见压缩命令 eksliang tar解压linux系统常见压缩命令linux压缩命令tar压缩
    转载请出自出处:http://eksliang.iteye.com/blog/2109693 linux中常见压缩文件的拓展名 *.gz gzip程序压缩的文件 *.bz2 bzip程序压缩的文件 *.tar tar程序打包的数据，没有经过压缩 *.tar.gz tar程序打包后，并经过gzip程序压缩 *.tar.bz2 tar程序打包后，并经过bzip程序压缩 *.zi
  • Android 应用程序发送shell命令 gqdy365 android
    项目中需要直接在APP中通过发送shell指令来控制lcd灯，其实按理说应该是方案公司在调好lcd灯驱动之后直接通过service送接口上来给APP，APP调用就可以控制了，这是正规流程，但我们项目的方案商用的mtk方案，方案公司又没人会改，只调好了驱动，让应用程序自己实现灯的控制，这不蛋疼嘛！！！！ 发就发吧！ 一、关于shell指令： 我们知道，shell指令是Linux里面带的
  • java 无损读取文本文件 hw1287789687 读取文件无损读取读取文本文件charset
    java 如何无损读取文本文件呢？ 以下是有损的 @Deprecated public static String getFullContent(File file, String charset) { BufferedReader reader = null; if (!file.exists()) { System.out.println("getFull
  • Firebase 相关文章索引 justjavac firebase
    Awesome Firebase 最近谷歌收购Firebase的新闻又将Firebase拉入了人们的视野，于是我做了这个 github 项目。 Firebase 是一个数据同步的云服务，不同于 Dropbox 的「文件」，Firebase 同步的是「数据」，服务对象是网站开发者，帮助他们开发具有「实时」（Real-Time）特性的应用。 开发者只需引用一个 API 库文件就可以使用标准 RE
  • C++学习重点 lx.asymmetric C++笔记
    1.c++面向对象的三个特性：封装性，继承性以及多态性。   2.标识符的命名规则：由字母和下划线开头，同时由字母、数字或下划线组成；不能与系统关键字重名。   3.c++语言常量包括整型常量、浮点型常量、布尔常量、字符型常量和字符串性常量。   4.运算符按其功能开以分为六类：算术运算符、位运算符、关系运算符、逻辑运算符、赋值运算符和条件运算符。 &n
  • java bean和xml相互转换 q821424508 javabeanxmlxml和bean转换java bean和xml转换
    这几天在做微信公众号 做的过程中想找个java bean转xml的工具，找了几个用着不知道是配置不好还是怎么回事，都会有一些问题， 然后脑子一热谢了一个javabean和xml的转换的工具里，自己用着还行，虽然有一些约束吧 ， 还是贴出来记录一下      顺便你提一下下，这个转换工具支持属性为集合、数组和非基本属性的对象。   packag
  • C 语言初级 位运算 1140566087 位运算c
    第十章 位运算   1、位运算对象只能是整形或字符型数据，在VC6.0中int型数据占4个字节   2、位运算符： 运算符 作用 ~ 按位求反 << 左移 >> 右移 & 按位与 ^ 按位异或 | 按位或 他们的优先级从高到低；   3、位运算符的运算功能： a、按位取反： ~01001101 = 101
  • 14点睛Spring4.1-脚本编程 wiselyman spring4
    14.1 Scripting脚本编程 脚本语言和java这类静态的语言的主要区别是:脚本语言无需编译,源码直接可运行; 如果我们经常需要修改的某些代码,每一次我们至少要进行编译,打包,重新部署的操作,步骤相当麻烦; 如果我们的应用不允许重启,这在现实的情况中也是很常见的; 在spring中使用脚本编程给上述的应用场景提供了解决方案,即动态加载bean; spring支持脚本
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他