Multi-Texturing

@group(0) @binding(1) var mySampler: sampler; @group(0) @binding(2) var myTexture0: texture_2d<f32>; @group(0) @binding(3) var<uniform> myTimer : f32; @group(0) @binding(4) var myTexture1: texture_2d<f32>; @fragment fn psmain(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> { var texCol0 = textureSample(myTexture0, mySampler, uv ).xyz; var texCol1 = textureSample(myTexture1, mySampler, uv ).xyz; var col = texCol0 * clamp(texCol1.r*1.5, 0.0, 1.0); return vec4<f32>( col, 1.0 ); // set alpha to 1.0 so there isn't any transparncy }
// Load matrix library on dynamically (on-the-fly)
let matprom = await fetch( 'https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.6.0/gl-matrix-min.js' );
let mattex  = await matprom.text();
var script   = document.createElement('script');
script.type  = 'text/javascript';
script.innerHTML = mattex;
document.head.appendChild(script); 

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

const context = canvas.getContext('webgpu');
const adapter = await navigator.gpu.requestAdapter();
const device  = await adapter.requestDevice();
const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); 
context.configure({ device: device, format: presentationFormat  });

async function loadTexture( fileName = "https://webgpulab.xbdev.net/var/images/test512.png" )
{
  console.log('loading image:', fileName );
  // Load image 
  const img = document.createElement("img");
  img.src = fileName;

  await Promise.all([
    img.decode()
  ]);

  let imgWidth  = img.width;
  let imgHeight = img.height;

  const imageCanvas = document.createElement('canvas');
  imageCanvas.width =  imgWidth;
  imageCanvas.height = imgHeight;
  const imageCanvasContext = imageCanvas.getContext('2d');
  imageCanvasContext.drawImage(img, 0, 0, imgWidth, imgHeight);
  const imageData = imageCanvasContext.getImageData(0, 0, imgWidth, imgHeight);
  let textureData= imageData.data;
  console.log('textureData.byteLength:', textureData.byteLength );

  // Create a texture and a sampler using WebGPU
  const sampler = device.createSampler({
    minFilter: "linear",
    magFilter: "linear"  
  });

  const basicTexture = device.createTexture({
    size: [imgWidth, imgHeight, 1],
    format: "rgba8unorm",
    usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING
  });

  await
  device.queue.writeTexture(
      { texture:basicTexture },
      textureData,
      { bytesPerRow: imgWidth * 4 },
      [ imgWidth, imgHeight, 1 ]
  );
  return { w:imgWidth, h:imgHeight, s:sampler, t:basicTexture };
}// end loadTexture(..)

function createTexturedSquare( device )
{
  let positionVertex = new Float32Array([
     1.0,    1.0,   0.0,
    -1.0,    1.0,   0.0,
     1.0,   -1.0,   0.0,
    -1.0,   -1.0,   0.0
  ]);
  const vBuffer = device.createBuffer({ size:  positionVertex.byteLength,
                                        usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST });
  device.queue.writeBuffer(vBuffer, 0, positionVertex);
  
  let uvVertex = new Float32Array([
     1.0,   0.0,
     0.0,   0.0,
     1.0,   1.0,
     0.0,   1.0,
  ]);
  const uvBuffer = device.createBuffer({ size:  uvVertex.byteLength,
                                        usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST });
  device.queue.writeBuffer(uvBuffer, 0, uvVertex);
  
  // return the vertex and texture buffers
  return { v:vBuffer, t:uvBuffer };
}

function createMatrixUniform( )
{
  // Create the matrix in Javascript (using matrix library)
  const projectionMatrix     = mat4.create();
  const viewMatrix           = mat4.create();
  const viewProjectionMatrix = mat4.create();
  
  mat4.perspective(projectionMatrix, Math.PI / 2, canvas.width / canvas.height, 0.001, 500.0)
  mat4.lookAt(viewMatrix, [0, 0, 1.5],  [0, 0, 0], [0, 1, 0]);
  mat4.multiply(viewProjectionMatrix, projectionMatrix, viewMatrix);
  
  // Create a buffer using WebGPU API (copy matrix into it)
  const matrixUniformBuffer = device.createBuffer({
     size: viewProjectionMatrix.byteLength ,
     usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
  });
  device.queue.writeBuffer(matrixUniformBuffer, 0, viewProjectionMatrix );

  return matrixUniformBuffer;
}

// Create a timer for the shader - pass timer
let myTimer = new Float32Array( [0.0] );
const timerBuffer = device.createBuffer({size: myTimer.byteLength, 
                                                 usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });


let shaderWGSL = `
@group(0) @binding(0) var<uniform> viewProjectionmMatrix : mat4x4<f32>;

struct vsout {
    @builtin(position) Position: vec4<f32>,
    @location(0)       uvs     : vec2<f32>
};

@vertex 
fn vsmain(@location(0) pos : vec3<f32>,
          @location(1) uvs : vec2<f32>) -> vsout
{ 
    var r:vsout;
    r.Position = viewProjectionmMatrix * vec4<f32>(pos, 1.0);
    r.uvs      = uvs;
    return r;
}

@group(0) @binding(1) var mySampler: sampler;
@group(0) @binding(2) var myTexture0: texture_2d<f32>;
@group(0) @binding(3) var<uniform> myTimer  : f32;
@group(0) @binding(4) var myTexture1: texture_2d<f32>;

@fragment 
fn psmain(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> 
{    

    var texCol0 = textureSample(myTexture0, mySampler, uv ).xyz;
    
    var texCol1 = textureSample(myTexture1, mySampler, uv ).xyz;
    
    var col = texCol0 * clamp(texCol1.r*1.5, 0.0, 1.0);
    
    return vec4<f32>( col, 1.0 ); // set alpha to 1.0 so there isn't any transparncy

}`;

const texture0         = await loadTexture( 'https://webgpulab.xbdev.net/var/images/test512.png' );
const texture1         = await loadTexture( 'https://webgpulab.xbdev.net/var/images/cracks.jpg');

const squareBuffer        = createTexturedSquare( device );
const matrixUniformBuffer = createMatrixUniform();
const shaderModule        = device.createShaderModule({ code : shaderWGSL });

// Define the layout information for the shader (uniforms)
const sceneUniformBindGroupLayout = device.createBindGroupLayout({
  entries: [{ binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: "uniform" }      },
            { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering"  } },
            { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float", viewDimension: "2d"} },
            { binding: 3, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" }      },
            { binding: 4, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float", viewDimension: "2d"} },
           ]
});

const sceneUniformBindGroup = device.createBindGroup({
  layout: sceneUniformBindGroupLayout,
  entries: [{ binding:  0, resource: { buffer: matrixUniformBuffer }    },
            { binding : 1, resource: texture0.s                  },
            { binding : 2, resource: texture0.t.createView()     },
            { binding:  3, resource: { buffer: timerBuffer  }    },
            { binding : 4, resource: texture1.t.createView()     },
           ]
});

const pipeline = device.createRenderPipeline({
  layout: device.createPipelineLayout({bindGroupLayouts: [sceneUniformBindGroupLayout]}),
  vertex:      {   module: shaderModule, entryPoint: 'vsmain', 
                   buffers: [
                            { arrayStride: 4*3,attributes: [ {shaderLocation: 0, offset: 0, format: 'float32x3' } ] },
                            { arrayStride: 4*2,attributes: [ {shaderLocation: 1, offset: 0, format: 'float32x2' } ] }
                            ]
               },
  fragment:    {   module: shaderModule, entryPoint: 'psmain',
                   targets: [ { format: presentationFormat } ]
               }, 
  primitive:   {   topology: 'triangle-strip' },
});

function draw() 
{
  myTimer[0] = myTimer[0] + 0.1;
  device.queue.writeBuffer(timerBuffer, 0, myTimer );
  
  const commandEncoder = device.createCommandEncoder();
  const renderPassDescriptor =                                       { // GPURenderPassDescriptor 
             colorAttachments: [ { view       : context.getCurrentTexture().createView(),
                                   loadOp     : "clear", 
                                   clearValue: [0.8, 0.8, 0.8, 1], // clear screen to color/rgba
                                   storeOp   : 'store' } ]           };
  const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
  passEncoder.setViewport(0.0,  0.0,                   // x, y
                          canvas.width, canvas.height, // width, height
                          0, 1 );                      // minDepth, maxDepth                  
  passEncoder.setPipeline(pipeline);
  passEncoder.setVertexBuffer(0, squareBuffer.v);
  passEncoder.setVertexBuffer(1, squareBuffer.t);
  passEncoder.setBindGroup(0, sceneUniformBindGroup);
  passEncoder.draw(4, 1, 0, 0);
  passEncoder.end();
  device.queue.submit([commandEncoder.finish()]);
  requestAnimationFrame(draw);
}
draw();
console.log('done...');
Things to Try

Resources and Links
