Normals

Normals are a vital concept in computer graphics - essentially the direction the surface is facing. It's used for culling and lighting.

Single triangle provides a point of references for our camera - as we move around we see the triangle moving.

Functions Used: setVertexBuffer(), setIndexBuffer(), drawIndexed(), createBuffer(), getMappedRange(), getContext(), requestAdapter(), getPreferredCanvasFormat(), createCommandEncoder(), beginRenderPass(), setPipeline(), draw(), end(), submit(), getCurrentTexture(), createView(), createShaderModule()

To visualize the normal we draw a line on the triangle surface - the line is in its own function object called 'lines'.

<?php
lines = function()
{

this.create = function(device,presentationFormat)
{
    const vertWGSL = `
    struct Transforms {
        model      : mat4x4<f32>,
        view       : mat4x4<f32>,
        projection : mat4x4<f32>,
    };
    @group(0) @binding(0) var<uniform> transforms : Transforms;

    struct VSOut {
        @builtin(position) Position: vec4<f32>,
        @location(0)       color   : vec3<f32>,
    };

    @vertex
    fn main(@location(0) inPos  : vec3<f32>,
            @location(1) inColor: vec3<f32>) -> VSOut 
    {
        var mvp = transforms.projection * transforms.view * transforms.model;

        var vsOut: VSOut;
        vsOut.Position = mvp * vec4<f32>(inPos, 1.0);
        vsOut.color    = inColor;
        return vsOut;
    }
    `;

    const fragWGSL = `
    @fragment
    fn main(@location(0) inColor: vec3<f32>) -> @location(0) vec4<f32> 
    {
        return vec4<f32>(inColor, 1.0);
    }
    `;

    const positions = new Float32Array([0.0, 0.0,  1.0,   // Position Vertex Buffer Data
                                        0.0, 0.0, -1.0 ]);
    const colors    = new Float32Array([ 1.0, 0.0, 0.0,    // Color Vertex Buffer Data
                                         0.0, 1.0, 0.0 ]);
    const indices   = new Uint16Array( [ 0, 1 ]);       // Index Buffer Data

    const createBuffer = (arrData, usage) => {
      const buffer = device.createBuffer({ size            : ((arrData.byteLength + 3) & ~3),
                                           usage           : usage,
                                           mappedAtCreation: true  });
      if ( arrData instanceof Float32Array ) 
      { (new Float32Array(buffer.getMappedRange())).set(arrData) }
      else 
      { (new Uint16Array (buffer.getMappedRange())).set(arrData) }
      buffer.unmap();
      return buffer;
    }

    // Declare buffer handles (GPUBuffer)
    this.positionBuffer = createBuffer(positions, GPUBufferUsage.VERTEX);
    this.colorBuffer    = createBuffer(colors,    GPUBufferUsage.VERTEX);
    this.indexBuffer    = createBuffer(indices,   GPUBufferUsage.INDEX);

    // ----------------------------------------------------------------

    this.mvpUniformBuffer = device.createBuffer({
      size: 64*3,
      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
    });

    // ----------------------------------------------------------------

    this.sceneUniformBindGroupLayout = device.createBindGroupLayout({
      entries: [  { binding: 0, visibility: GPUShaderStage.VERTEX,   buffer:  { type: "uniform"  }   } 
               ]
    });

    this.uniformBindGroup = device.createBindGroup({
      layout:   this.sceneUniformBindGroupLayout,
      entries: [  { binding : 0, resource: { buffer: this.mvpUniformBuffer        } }
               ],
    });

    // ----------------------------------------------------------------

    this.pipeline = device.createRenderPipeline({
      layout: device.createPipelineLayout({bindGroupLayouts: [this.sceneUniformBindGroupLayout]}),
      vertex:    { module     : device.createShaderModule({code   : vertWGSL }),
                   entryPoint : 'main',
                   buffers    : [ { arrayStride: 12, attributes: [{ shaderLocation: 0,format: "float32x3",offset: 0  }]         },
                                  { arrayStride: 12, attributes: [{ shaderLocation: 1,format: "float32x3",offset: 0  }]         }
        ]
      },
      fragment:  { module     : device.createShaderModule({ code  : fragWGSL }),
                   entryPoint : 'main',
                   targets    : [ {format: presentationFormat } ],
      },
      primitive: {
        topology: "line-list",
        frontFace: "cw",
        cullMode: 'none'
      },
      depthStencil: {
        format: "depth24plus",
        depthWriteEnabled: true,
        depthCompare: "less"
      }
    });
}
// -----------------------------------------------------

this.draw = function( device, context, depthTexture, modelMatrix, viewMatrix, projectionMatrix) 
{
    device.queue.writeBuffer(this.mvpUniformBuffer,      0,      modelMatrix);
    device.queue.writeBuffer(this.mvpUniformBuffer,      64,     viewMatrix);
    device.queue.writeBuffer(this.mvpUniformBuffer,      128,    projectionMatrix);
    
    const renderPassDescription = {
      colorAttachments: [{
        view: context.getCurrentTexture().createView(),
        loadOp: 'load', // (k==0 ? "clear":"load"), 
        clearValue: [0, 0.5, 0.5, 1], // clear screen to color
        storeOp: 'store'
      }],
      depthStencilAttachment: {
        view: depthTexture.createView(),
        depthLoadOp: 'load', // (k==0 ? "clear":"load"), 
        depthClearValue: 1,
        depthStoreOp: "store",
      }
    };
    
    renderPassDescription.colorAttachments[0].view = context.getCurrentTexture().createView();
  	const commandEncoder = device.createCommandEncoder();
  	const renderPass = commandEncoder.beginRenderPass(renderPassDescription);
    
    renderPass.setBindGroup(0, this.uniformBindGroup);
    renderPass.setPipeline(this.pipeline);
    renderPass.setVertexBuffer(0, this.positionBuffer);
    renderPass.setVertexBuffer(1, this.colorBuffer);
    renderPass.setIndexBuffer(this.indexBuffer, 'uint16');
    renderPass.drawIndexed(2,1);
    renderPass.end();
    device.queue.submit([commandEncoder.finish()]);
} 
  
  
}// end lines

lines = function()
{

this.create = function(device,presentationFormat)
{
    const vertWGSL = `
    struct Transforms {
        model      : mat4x4<f32>,
        view       : mat4x4<f32>,
        projection : mat4x4<f32>,
    };
    @group(0) @binding(0) var<uniform> transforms : Transforms;

    struct VSOut {
        @builtin(position) Position: vec4<f32>,
        @location(0)       color   : vec3<f32>,
    };

    @vertex
    fn main(@location(0) inPos  : vec3<f32>,
            @location(1) inColor: vec3<f32>) -> VSOut
    {
        var mvp = transforms.projection * transforms.view * transforms.model;

        var vsOut: VSOut;
        vsOut.Position = mvp * vec4<f32>(inPos, 1.0);
        vsOut.color    = inColor;
        return vsOut;
    }
    `;

    const fragWGSL = `
    @fragment
    fn main(@location(0) inColor: vec3<f32>) -> @location(0) vec4<f32>
    {
        return vec4<f32>(inColor, 1.0);
    }
    `;

    const positions = new Float32Array([0.0, 0.0,  1.0,   // Position Vertex Buffer Data
                                        0.0, 0.0, -1.0 ]);
    const colors    = new Float32Array([ 1.0, 0.0, 0.0,    // Color Vertex Buffer Data
                                         0.0, 1.0, 0.0 ]);
    const indices   = new Uint16Array( [ 0, 1 ]);       // Index Buffer Data

    const createBuffer = (arrData, usage) => {
      const buffer = device.createBuffer({ size            : ((arrData.byteLength + 3) & ~3),
                                           usage           : usage,
                                           mappedAtCreation: true  });
      if ( arrData instanceof Float32Array )
      { (new Float32Array(buffer.getMappedRange())).set(arrData) }
      else
      { (new Uint16Array (buffer.getMappedRange())).set(arrData) }
      buffer.unmap();
      return buffer;
    }

    // Declare buffer handles (GPUBuffer)
    this.positionBuffer = createBuffer(positions, GPUBufferUsage.VERTEX);
    this.colorBuffer    = createBuffer(colors,    GPUBufferUsage.VERTEX);
    this.indexBuffer    = createBuffer(indices,   GPUBufferUsage.INDEX);

    // ----------------------------------------------------------------

    this.mvpUniformBuffer = device.createBuffer({
      size: 64*3,
      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
    });

    // ----------------------------------------------------------------

    this.sceneUniformBindGroupLayout = device.createBindGroupLayout({
      entries: [  { binding: 0, visibility: GPUShaderStage.VERTEX,   buffer:  { type: "uniform"  }   }
               ]
    });

    this.uniformBindGroup = device.createBindGroup({
      layout:   this.sceneUniformBindGroupLayout,
      entries: [  { binding : 0, resource: { buffer: this.mvpUniformBuffer        } }
               ],
    });

    // ----------------------------------------------------------------

    this.pipeline = device.createRenderPipeline({
      layout: device.createPipelineLayout({bindGroupLayouts: [this.sceneUniformBindGroupLayout]}),
      vertex:    { module     : device.createShaderModule({code   : vertWGSL }),
                   entryPoint : 'main',
                   buffers    : [ { arrayStride: 12, attributes: [{ shaderLocation: 0,format: "float32x3",offset: 0  }]         },
                                  { arrayStride: 12, attributes: [{ shaderLocation: 1,format: "float32x3",offset: 0  }]         }
        ]
      },
      fragment:  { module     : device.createShaderModule({ code  : fragWGSL }),
                   entryPoint : 'main',
                   targets    : [ {format: presentationFormat } ],
      },
      primitive: {
        topology: "line-list",
        frontFace: "cw",
        cullMode: 'none'
      },
      depthStencil: {
        format: "depth24plus",
        depthWriteEnabled: true,
        depthCompare: "less"
      }
    });
}
// -----------------------------------------------------

this.draw = function( device, context, depthTexture, modelMatrix, viewMatrix, projectionMatrix)
{
    device.queue.writeBuffer(this.mvpUniformBuffer,      0,      modelMatrix);
    device.queue.writeBuffer(this.mvpUniformBuffer,      64,     viewMatrix);
    device.queue.writeBuffer(this.mvpUniformBuffer,      128,    projectionMatrix);

    const renderPassDescription = {
      colorAttachments: [{
        view: context.getCurrentTexture().createView(),
        loadOp: 'load', // (k==0 ? "clear":"load"),
        clearValue: [0, 0.5, 0.5, 1], // clear screen to color
        storeOp: 'store'
      }],
      depthStencilAttachment: {
        view: depthTexture.createView(),
        depthLoadOp: 'load', // (k==0 ? "clear":"load"),
        depthClearValue: 1,
        depthStoreOp: "store",
      }
    };

    renderPassDescription.colorAttachments[0].view = context.getCurrentTexture().createView();
      const commandEncoder = device.createCommandEncoder();
      const renderPass = commandEncoder.beginRenderPass(renderPassDescription);

    renderPass.setBindGroup(0, this.uniformBindGroup);
    renderPass.setPipeline(this.pipeline);
    renderPass.setVertexBuffer(0, this.positionBuffer);
    renderPass.setVertexBuffer(1, this.colorBuffer);
    renderPass.setIndexBuffer(this.indexBuffer, 'uint16');
    renderPass.drawIndexed(2,1);
    renderPass.end();
    device.queue.submit([commandEncoder.finish()]);
}


}// end lines

The body of the code that draws the rotating triangle:

<?php
let promise      = await fetch('https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.6.0/gl-matrix-min.js');
let text         = await promise.text();
let script       = document.createElement('script');
script.type      = 'text/javascript';
script.async     = false;
script.innerHTML = text;
document.body.appendChild(script); 

let canvas = document.createElement('canvas');
document.body.appendChild( canvas );
canvas.width  = canvas.height = 512;

const adapter = await navigator.gpu.requestAdapter();
const device  = await adapter.requestDevice();
const context = canvas.getContext('webgpu');

const presentationSize   = [ canvas.width,   
                             canvas.height ] 

const presentationFormat = navigator.gpu.getPreferredCanvasFormat();

context.configure({ device : device, compositingAlphaMode: "opaque", compositingAlphaMode: "opaque", 
                    format : presentationFormat,
                    size   : presentationSize });
const vertWGSL = `
struct Transforms {
    model      : mat4x4<f32>,
    view       : mat4x4<f32>,
    projection : mat4x4<f32>,
};
@group(0) @binding(0) var<uniform> transforms : Transforms;

struct VSOut {
    @builtin(position) Position: vec4<f32>,
    @location(0)       color   : vec3<f32>,
};

@vertex
fn main(@location(0) inPos  : vec3<f32>,
        @location(1) inColor: vec3<f32>) -> VSOut 
{
	var mvp = transforms.projection * transforms.view * transforms.model;
    
    var vsOut: VSOut;
    vsOut.Position = mvp * vec4<f32>(inPos, 1.0);
    vsOut.color    = inColor;
    return vsOut;
}
`;

const fragWGSL = `
@fragment
fn main(@location(0) inColor: vec3<f32>) -> @location(0) vec4<f32> 
{
    return vec4<f32>(inColor, 1.0);
}
`;

const positions = new Float32Array([-1.0, -1.0, 0.0,   // Position Vertex Buffer Data
                                     1.0, -1.0, 0.0,
                                     0.0,  1.0, 0.0 ]);
const colors    = new Float32Array([ 1.0, 0.0, 0.0,    // Color Vertex Buffer Data
                                     0.0, 1.0, 0.0, 
                                     0.0, 0.0, 1.0  ]);
const indices   = new Uint16Array( [ 0, 1, 2 ]);       // Index Buffer Data

const createBuffer = (arrData, usage) => {
  const buffer = device.createBuffer({ size            : ((arrData.byteLength + 3) & ~3),
                                       usage           : usage,
                                       mappedAtCreation: true  });
  if ( arrData instanceof Float32Array ) 
  { (new Float32Array(buffer.getMappedRange())).set(arrData) }
  else 
  { (new Uint16Array (buffer.getMappedRange())).set(arrData) }
  buffer.unmap();
  return buffer;
}

// Declare buffer handles (GPUBuffer)
var positionBuffer = createBuffer(positions, GPUBufferUsage.VERTEX);
var colorBuffer    = createBuffer(colors,    GPUBufferUsage.VERTEX);
var indexBuffer    = createBuffer(indices,   GPUBufferUsage.INDEX);

// ----------------------------------------------------------------

function buildMatrix( p, r, s ) // position, rotation, scale
{
    // if not set fall back to default values
    if (!s) s = {x:1, y:1, z:1};
    if (!r) r = {x:0, y:0, z:0};
    if (!p) p = {x:0, y:0, z:0};
  
    // Create the matrix in Javascript (using matrix library)
    const modelMatrix          = mat4.create();

    // create the model transform with a rotation and translation
    let translateMat = mat4.create();   mat4.fromTranslation( translateMat, Object.values(p) );
    let rotateXMat   = mat4.create();   mat4.fromXRotation(rotateXMat, r.x);
    let rotateYMat   = mat4.create();   mat4.fromYRotation(rotateYMat, r.y);
    let rotateZMat   = mat4.create();   mat4.fromZRotation(rotateZMat, r.z);
    let scaleMat     = mat4.create();   mat4.fromScaling(scaleMat, Object.values(s) );

    mat4.multiply(modelMatrix, modelMatrix,   translateMat);
    mat4.multiply(modelMatrix, modelMatrix,   rotateXMat);
    mat4.multiply(modelMatrix, modelMatrix,   rotateYMat);
    mat4.multiply(modelMatrix, modelMatrix,   rotateZMat);
    mat4.multiply(modelMatrix, modelMatrix,   scaleMat);
	return modelMatrix;
}

// build a model matrix (scale, rotate and position it wherever we want)
let modelMatrix = buildMatrix();
   
// setup the projection
let projectionMatrix = mat4.create(); 
mat4.perspective(projectionMatrix, Math.PI / 2, canvas.width / canvas.height, 0.001, 5000.0);

// default camera `lookat` - camera is at -4 units down the z-axis looking at '0,0,0'
let viewMatrix = mat4.create();
mat4.lookAt(viewMatrix, [0,0,-4],  [0,0,0], [0, 1, 0]);


let mvpUniformBuffer = device.createBuffer({
  size: 64*3,
  usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
});

device.queue.writeBuffer(mvpUniformBuffer,      0,      modelMatrix);
device.queue.writeBuffer(mvpUniformBuffer,      64,     viewMatrix);
device.queue.writeBuffer(mvpUniformBuffer,      128,    projectionMatrix);

// ----------------------------------------------------------------

let sceneUniformBindGroupLayout = device.createBindGroupLayout({
  entries: [
    { binding: 0, visibility: GPUShaderStage.VERTEX,   buffer:  { type: "uniform"  }   } 
  ]
});

let uniformBindGroup = device.createBindGroup({
  layout:   sceneUniformBindGroupLayout,
  entries: [
    { binding : 0, resource: { buffer: mvpUniformBuffer        } }
   ],
});

// ----------------------------------------------------------------

const pipeline = device.createRenderPipeline({
  layout: device.createPipelineLayout({bindGroupLayouts: [sceneUniformBindGroupLayout]}),
  vertex:    { module     : device.createShaderModule({code   : vertWGSL }),
               entryPoint : 'main',
               buffers    : [ { arrayStride: 12, attributes: [{ shaderLocation: 0,
                                                                format: "float32x3",
                                                                offset: 0  }]         },
                              { arrayStride: 12, attributes: [{ shaderLocation: 1,
                                                                format: "float32x3",
                                                                offset: 0  }]         }
    ]
  },
  fragment:  { module     : device.createShaderModule({ code  : fragWGSL }),
               entryPoint : 'main',
               targets    : [ {format: presentationFormat } ],
  },
  primitive: {
    topology: "triangle-list",
    frontFace: "cw",
    cullMode: 'none'
  },
  depthStencil: {
    format: "depth24plus",
    depthWriteEnabled: true,
    depthCompare: "less"
  }
});

const depthTexture = device.createTexture({
  size: [canvas.width, canvas.height, 1],
  format: "depth24plus",
  usage:  GPUTextureUsage.RENDER_ATTACHMENT
})

// ---------------

let line = new lines();
line.create(device,presentationFormat);


let counter = 0.0;

function frame() 
{

  
  // setup a transform for each triangle 
  let tris = [  { p:{x:0,y:0,z:0}, r:{x:0,y:0.0,z:0.0}, s:{x:1.0, y:1.0,z:1.0} } ];
  
  // loop over each triangle and render it
  //tris.forEach( (t,k)=>{
  let t = tris[0];
  let k = 0;
   
    let modelMatrix = buildMatrix(t.p, t.r, t.s);
    // update the local matrix for each triangle draw differently
    device.queue.writeBuffer(mvpUniformBuffer,      0,      modelMatrix);

    // Rotate the camera around the origin in the circle
    let cameraEye = [ Math.cos(counter)*3.0, 0.0, Math.sin(counter)*3.0 ];
	mat4.lookAt(viewMatrix, cameraEye,  [0,0,0], [0, 1, 0]);
    device.queue.writeBuffer(mvpUniformBuffer,      64,     viewMatrix);
    
    // simple counter
    counter += 0.001;
    
    
    const renderPassDescription = {
      colorAttachments: [{
        view: context.getCurrentTexture().createView(),
        loadOp: (k==0 ? "clear":"load"), 
        clearValue: [0, 0.5, 0.5, 1], // clear screen to color
        storeOp: 'store'
      }],
      depthStencilAttachment: {
        view: depthTexture.createView(),
        depthLoadOp: (k==0 ? "clear":"load"), 
        depthClearValue: 1,
        depthStoreOp: "store",
      }
    };
    
    renderPassDescription.colorAttachments[0].view = context.getCurrentTexture().createView();
  	const commandEncoder = device.createCommandEncoder();
  	const renderPass = commandEncoder.beginRenderPass(renderPassDescription);
    
    renderPass.setBindGroup(0, uniformBindGroup);
    renderPass.setPipeline(pipeline);
    renderPass.setVertexBuffer(0, positionBuffer);
    renderPass.setVertexBuffer(1, colorBuffer);
    renderPass.setIndexBuffer(indexBuffer, 'uint16');
    renderPass.drawIndexed(3,1);
    renderPass.end();
    device.queue.submit([commandEncoder.finish()]);
  
  //});
  
  line.draw(device, context, depthTexture, modelMatrix, viewMatrix, projectionMatrix );
  
  // animate - keep updating
  requestAnimationFrame(frame);
} 

frame();


console.log('ready...');

Resources and Links

• WebGPU Lab Example [LINK]

Advert (Support Website)

Visitor: