WebGPU

Welcome

Dorothy Najda - CEO of PXD

New deadline : 10/15

WebGPU

Utilizes the device's graphics processing unit (GPU)

Carry out high-performance computations

Draw complex images

Modern graphic features

Low-Level API

And many more ....

https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API

Browser Compatibility

Linux :

Firefox Nightly (recommended)

Does not require any flags

Mac and Windows :

WebGPU works out of the box
Chrome

Edge

https://caniuse.com/webgpu

https://webgpu.github.io/webgpu-samples/?sample=rotatingCube

Hello Rectangle !!

WebGL

1. Initialize WebGL

2. Shaders

3. Create Geometry

4. Connect Shader with Geometry

5. Draw!

WebGL

1. Initialize WebGL

2. Shaders

3. Create Geometry

4. Connect Shader with Geometry

5. Draw!

WebGPU

WebGL

1. Initialize WebGL

2. Shaders

3. Create Geometry

4. Connect Shader with Geometry

5. Draw!

WebGPU

1. Initialize WebGPU

WebGL

1. Initialize WebGL

2. Shaders

3. Create Geometry

4. Connect Shader with Geometry

5. Draw!

WebGPU

1. Initialize WebGPU

2. Shaders

WebGL

1. Initialize WebGL

2. Shaders

3. Create Geometry

4. Connect Shader with Geometry

5. Draw!

WebGPU

1. Initialize WebGPU

2. Shaders

3. Create Geometry

WebGL

1. Initialize WebGL

2. Shaders

3. Create Geometry

4. Connect Shader with Geometry

5. Draw!

WebGPU

1. Initialize WebGPU

2. Shaders

3. Create Geometry

4. Create Rendering Pipeline

WebGL

1. Initialize WebGL

2. Shaders

3. Create Geometry

4. Connect Shader with Geometry

5. Draw!

WebGPU

1. Initialize WebGPU

2. Shaders

3. Create Geometry

4. Create Rendering Pipeline

5. Draw!

1. Initialize WebGPU

setup canvas

request GPU adapter and Device

setup GPU context

1. Initialize WebGPU

setup canvas

request GPU adapter and Device

setup GPU context

canvas = document.getElementById('c'); // setup canvas

1. Initialize WebGPU

setup canvas

request GPU adapter and Device

setup GPU context

canvas = document.getElementById('c'); // setup canvas

adapter = await navigator.gpu.requestAdapter(); // request GPU
device = await adapter.requestDevice(); // request device

1. Initialize WebGPU

setup canvas

request GPU adapter and Device

setup GPU context

canvas = document.getElementById('c'); // setup canvas

adapter = await navigator.gpu.requestAdapter(); // request GPU
device = await adapter.requestDevice(); // request device

context = canvas.getContext('webgpu'); // setup GPU context
format = navigator.gpu.getPreferredCanvasFormat();
context.configure({
  device: device,
  format: format,
  alphaMode: 'opaque'
});

2. Shaders

define shaders
create shaders module

2. Shaders

define shaders
create shaders module

<script id="vertexshader" type="wgsl">  // vertex shader
    @vertex
    fn main(@location(0) position: vec3<f32>) -> @builtin(position) vec4<f32> {
      return vec4(position, 1.0);
    }
</script>
<script id="fragmentshader" type="wgsl"> // fragment shader
    @fragment
    fn main() -> @location(0) vec4<f32> {
      return vec4(1.0, 1.0, 1.0, 1.0); // White color
    }
</script>

2. Shaders

define shaders
create shaders module

<script id="vertexshader" type="wgsl">  // vertex shader
    @vertex
    fn main(@location(0) position: vec3<f32>) -> @builtin(position) vec4<f32> {
      return vec4(position, 1.0);
    }
</script>
<script id="fragmentshader" type="wgsl"> // fragment shader
    @fragment
    fn main() -> @location(0) vec4<f32> {
      return vec4(1.0, 1.0, 1.0, 1.0); // White color
    }
</script>

v_shader = device.createShaderModule({   // vertex module
	code: document.getElementById('vertexshader').innerText
});
f_shader = device.createShaderModule({  // fragment module
	code: document.getElementById('fragmentshader').innerText
});

3. Create Geometry

create vertices

create buffer

map buffer

unmap buffer

3. Create Geometry

create vertices

create buffer

map buffer

unmap buffer

vertices = new Float32Array( [ // create vertices
  -0.5,  0.5, 0.0, // V0
  -0.5, -0.5, 0.0, // V1
   0.5,  0.5, 0.0, // V2
              
   0.5,  0.5, 0.0, // V3
  -0.5, -0.5, 0.0, // V4
   0.5, -0.5, 0.0  // V5
] );

3. Create Geometry

create vertices

create buffer

map buffer

unmap buffer

vertices = new Float32Array( [ // create vertices
  -0.5,  0.5, 0.0, // V0
  -0.5, -0.5, 0.0, // V1
   0.5,  0.5, 0.0, // V2
              
   0.5,  0.5, 0.0, // V3
  -0.5, -0.5, 0.0, // V4
   0.5, -0.5, 0.0  // V5
] );

v_buffer = device.createBuffer({
  size: vertices.byteLength,
  usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
  mappedAtCreation: true
});

3. Create Geometry

create vertices

create buffer

map buffer

unmap buffer

vertices = new Float32Array( [ // create vertices
  -0.5,  0.5, 0.0, // V0
  -0.5, -0.5, 0.0, // V1
   0.5,  0.5, 0.0, // V2
              
   0.5,  0.5, 0.0, // V3
  -0.5, -0.5, 0.0, // V4
   0.5, -0.5, 0.0  // V5
] );

v_buffer = device.createBuffer({
  size: vertices.byteLength,
  usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
  mappedAtCreation: true
});

new Float32Array(v_buffer.getMappedRange()).set(vertices);

3. Create Geometry

create vertices

create buffer

map buffer

unmap buffer

vertices = new Float32Array( [ // create vertices
  -0.5,  0.5, 0.0, // V0
  -0.5, -0.5, 0.0, // V1
   0.5,  0.5, 0.0, // V2
              
   0.5,  0.5, 0.0, // V3
  -0.5, -0.5, 0.0, // V4
   0.5, -0.5, 0.0  // V5
] );

v_buffer = device.createBuffer({
  size: vertices.byteLength,
  usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
  mappedAtCreation: true
});

new Float32Array(v_buffer.getMappedRange()).set(vertices);

v_buffer.unmap();

4. Create Rendering Pipeline

create pipeline

setup vertex and fragment modules

4. Create Rendering Pipeline

create pipeline

setup vertex and fragment modules

pipeline = device.createRenderPipeline({
  layout: 'auto',
  vertex: {
    module: v_shader,
    buffers: [{
      arrayStride: 3 * 4, // 3 components * 4 bytes per component (float32)
      attributes: [{
        shaderLocation: 0,
        offset: 0,
        format: 'float32x3'
      }]
    }]
  },
  fragment: {
    module: f_shader,
    targets: [{
      format: format
    }]
  },
  primitive: {
    topology: 'triangle-list'
  }
});

5. Draw

create command encoder

begin render pass

end render pass

submit to GPU

5. Draw

create command encoder

begin render pass

end render pass

submit to GPU

commandEncoder = device.createCommandEncoder();

5. Draw

create command encoder

begin render pass

end render pass

submit to GPU

commandEncoder = device.createCommandEncoder();

passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
.....

5. Draw

create command encoder

begin render pass

end render pass

submit to GPU

commandEncoder = device.createCommandEncoder();

passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
.....

renderPassDescriptor = {
  colorAttachments: [{
    view: textureView,
    clearValue: [0, 0, 0, 0],
    loadOp: 'clear',
    storeOp: 'store'
  }]
};

passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
passEncoder.setPipeline(pipeline);
passEncoder.setVertexBuffer(0, v_buffer);
passEncoder.draw(6); // Drawing 6 vertices (2 triangles)

5. Draw

create command encoder

begin render pass

end render pass

submit to GPU

commandEncoder = device.createCommandEncoder();

passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
.....

passEncoder.end();

5. Draw

create command encoder

begin render pass

end render pass

submit to GPU

commandEncoder = device.createCommandEncoder();

passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
.....

passEncoder.end();

device.queue.submit([commandEncoder.finish()]);

<html>
<head>
  <title>WebGPU!</title>
  <style>
    html, body {
      background-color:#000;
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden !important;
    }
    #c {
      width: 100%;
      height: 100%;
    }
  </style>
  <script id="vertexshader" type="wgsl">
    @vertex
    fn main(@location(0) position: vec3<f32>) -> @builtin(position) vec4<f32> {
      return vec4(position, 1.0);
    }
  </script>
  <script id="fragmentshader" type="wgsl">
    @fragment
    fn main() -> @location(0) vec4<f32> {
      return vec4(1.0, 1.0, 1.0, 1.0); // White color
    }
  </script>
  <script>
    window.onload = async function() {

      //************************************************************//
      //
      // INITIALIZE WEBGPU
      //
      canvas = document.getElementById('c');
      adapter = await navigator.gpu.requestAdapter();
      device = await adapter.requestDevice();
      context = canvas.getContext('webgpu');


      format = navigator.gpu.getPreferredCanvasFormat();
      context.configure({
        device: device,
        format: format,
        alphaMode: 'opaque'
      });


      //************************************************************//
      //
      // SHADERS
      //
      v_shader = device.createShaderModule({
        code: document.getElementById('vertexshader').innerText
      });
      f_shader = device.createShaderModule({
        code: document.getElementById('fragmentshader').innerText
      });


      //************************************************************//
      //
      // CREATE GEOMETRY
      //
      vertices = new Float32Array( [
        -0.5,  0.5, 0.0, // V0
        -0.5, -0.5, 0.0, // V1
        0.5,  0.5, 0.0, // V2

        0.5,  0.5, 0.0, // V3
        -0.5, -0.5, 0.0, // V4
        0.5, -0.5, 0.0  // V5
      ] );
      v_buffer = device.createBuffer({
        size: vertices.byteLength,
        usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
        mappedAtCreation: true
      });
      new Float32Array(v_buffer.getMappedRange()).set(vertices);
      v_buffer.unmap();

      //************************************************************//
      //
      // SETUP RENDERING PIPELINE
      //
      pipeline = device.createRenderPipeline({
        layout: 'auto',
        vertex: {
          module: v_shader,
          buffers: [{
            arrayStride: 3 * 4, // 3 components * 4 bytes per component (float32)
            attributes: [{
              shaderLocation: 0,
              offset: 0,
              format: 'float32x3'
            }]
          }]
        },
        fragment: {
          module: f_shader,
          targets: [{
            format: format
          }]
        },
        primitive: {
          topology: 'triangle-list'
        }
      });

      //************************************************************//
      //
      // DRAW!
      //
      commandEncoder = device.createCommandEncoder();
      textureView = context.getCurrentTexture().createView();

      renderPassDescriptor = {
        colorAttachments: [{
          view: textureView,
          clearValue: [0, 0, 0, 0],
          loadOp: 'clear',
          storeOp: 'store'
        }]
      };

      passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
      passEncoder.setPipeline(pipeline);
      passEncoder.setVertexBuffer(0, v_buffer);
      passEncoder.draw(6); // Drawing 6 vertices (2 triangles)
      passEncoder.end();

      device.queue.submit([commandEncoder.finish()]);

    }
  </script>
</head>
<body>
<canvas id="c"></canvas>
</body>
</html>

<html>
<head>
  <title>WebGPU!</title>
  <style>
    html, body {
      background-color: #000;
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden !important;
    }
    #c {
      width: 100%;
      height: 100%;
    }
  </style>
  <script id="vertexshader" type="wgsl">
    struct VertexInput {
        @location(0) position: vec3<f32>,
        @location(1) offset: vec3<f32>,
        @location(2) color: vec4<f32>, // Color for the instance
    };

    struct VertexOutput {
        @builtin(position) position: vec4<f32>,
        @location(0) color: vec4<f32>, // Pass color to fragment shader
    };

    @vertex
    fn main(input: VertexInput) -> VertexOutput {
        var output: VertexOutput;
        output.position = vec4(input.position + input.offset, 1.0); // Add offset
        output.color = input.color; // Pass color to fragment shader
        return output;
    }
  </script>
  <script id="fragmentshader" type="wgsl">
    @fragment
    fn main(@location(0) color: vec4<f32>) -> @location(0) vec4<f32> {
        return color; // Use the color passed from the vertex shader
    }
  </script>
  <script>
    window.onload = async function() {
      //************************************************************//
      //
      // INITIALIZE WEBGPU
      //
      const canvas = document.getElementById('c');
      const adapter = await navigator.gpu.requestAdapter();
      const device = await adapter.requestDevice();
      const context = canvas.getContext('webgpu');

      const format = navigator.gpu.getPreferredCanvasFormat();
      context.configure({
        device: device,
        format: format,
        alphaMode: 'opaque'
      });

      //************************************************************//
      //
      // SHADERS
      //
      const v_shader = device.createShaderModule({
        code: document.getElementById('vertexshader').innerText
      });
      const f_shader = device.createShaderModule({
        code: document.getElementById('fragmentshader').innerText
      });

      //************************************************************//
      //
      // CREATE GEOMETRY
      //
      // Define a single rectangle using triangles
      const vertices = new Float32Array([
        -0.5,  0.5, 0.0,  // V0
        -0.5, -0.5, 0.0,  // V1
        0.5,  0.5, 0.0,   // V2
        0.5,  0.5, 0.0,   // V3
        -0.5, -0.5, 0.0,  // V4
        0.5, -0.5, 0.0    // V5
      ]);

      const v_buffer = device.createBuffer({
        size: vertices.byteLength,
        usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
        mappedAtCreation: true
      });
      new Float32Array(v_buffer.getMappedRange()).set(vertices);
      v_buffer.unmap();

      //************************************************************//
      //
      // INSTANCE DATA
      //
      // Define the initial offsets for 3 rectangles
      const instanceOffsets = new Float32Array([
        -0.4,  -0.4, 0.0,  // Rectangle 1
        0.0,   0.0, 0.0,  // Rectangle 2
        0.4,   0.4, 0.0,  // Rectangle 3
      ]);

      const i_buffer = device.createBuffer({
        size: instanceOffsets.byteLength,
        usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
        mappedAtCreation: true
      });
      new Float32Array(i_buffer.getMappedRange()).set(instanceOffsets);
      i_buffer.unmap();


      // Define colors for 3 rectangles
      const instanceColors = new Float32Array([
        1.0, 0.0, 0.0, 1.0, // Red for Rectangle 1
        0.0, 1.0, 0.0, 1.0, // Green for Rectangle 2
        0.0, 0.0, 1.0, 1.0, // Blue for Rectangle 3
      ]);

      const c_buffer = device.createBuffer({
        size: instanceColors.byteLength,
        usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
        mappedAtCreation: true
      });
      new Float32Array(c_buffer.getMappedRange()).set(instanceColors);
      c_buffer.unmap();

      //************************************************************//
      //
      // SETUP RENDERING PIPELINE
      //
      const pipeline = device.createRenderPipeline({
        layout: 'auto',
        vertex: {
          module: v_shader,
          buffers: [
            {
              arrayStride: 3 * 4, // Vertex size
              attributes: [{
                shaderLocation: 0,
                offset: 0,
                format: 'float32x3'
              }]
            },
            {
              arrayStride: 3 * 4, // Instance size
              attributes: [{
                shaderLocation: 1,
                offset: 0,
                format: 'float32x3'
              }],
              stepMode: 'instance' // Instance data
            },
            {
              arrayStride: 4 * 4, // Color size
              attributes: [{
                shaderLocation: 2,
                offset: 0,
                format: 'float32x4'
              }],
              stepMode: 'instance' // Color data for each instance
            }
          ]
        },
        fragment: {
          module: f_shader,
          targets: [{
            format: format
          }]
        },
        primitive: {
          topology: 'triangle-list'
        }
      });

      //************************************************************//
      //
      // ANIMATION VARIABLES
      //
      let offsetSpeed = 0.005; // Speed of movement
      let offsetDirection = 1; // 1 for right, -1 for left

      //************************************************************//
      //
      // ANIMATION LOOP
      //

      console.log(instanceOffsets.length);
      function animate() {
        // Update instance offsets
        for (let i = 0; i < instanceOffsets.length / 3; i++) {
          instanceOffsets[i * 3] += offsetSpeed * offsetDirection;// Move in x direction
          // Reverse direction when reaching bounds
          if (instanceOffsets[i * 3]  > 1.0 || instanceOffsets[i * 3] < -1.0) {
            offsetDirection *= -1;
          }
        }

        // Update the instance buffer with new offsets
        device.queue.writeBuffer(i_buffer, 0, instanceOffsets);

        // Draw!
        const commandEncoder = device.createCommandEncoder();
        const textureView = context.getCurrentTexture().createView();

        const renderPassDescriptor = {
          colorAttachments: [{
            view: textureView,
            clearValue: [0, 0, 0, 0],
            loadOp: 'clear',
            storeOp: 'store'
          }]
        };

        const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
        passEncoder.setPipeline(pipeline);
        passEncoder.setVertexBuffer(0, v_buffer); // Set vertex buffer
        passEncoder.setVertexBuffer(1, i_buffer); // Set instance buffer for offsets
        passEncoder.setVertexBuffer(2, c_buffer); // Set instance buffer for colors
        passEncoder.draw(6, 3); // Draw 6 vertices (2 triangles) for 3 instances
        passEncoder.end();

        device.queue.submit([commandEncoder.finish()]);

        requestAnimationFrame(animate); // Continue the animation
      }

      animate(); // Start the animation loop
    }
  </script>
</head>
<body>
<canvas id="c"></canvas>
</body>
</html>

CODE !!