Naloga 3 WIP

vaja_1/main.js

@@ -15,6 +15,35 @@ const depthTexture = device.createTexture({
     format: 'depth24plus',
 });
 
+// Prepare color texture
+// 1. fetch the texture from the server
+const imageBitmap = await fetch('base.png')
+    .then((response) => response.blob())
+    .then((blob) => createImageBitmap(blob));
+
+// 2. create a texture
+const colorTexture = device.createTexture({
+    size: [imageBitmap.width, imageBitmap.height],
+    usage:
+        GPUTextureUsage.TEXTURE_BINDING |
+        GPUTextureUsage.RENDER_ATTACHMENT |
+        GPUTextureUsage.COPY_DST,
+    format: 'rgba8unorm',
+    mipLevelCount: 2,
+});
+
+// 3. transfer data
+device.queue.copyExternalImageToTexture(
+    { source: imageBitmap },
+    { texture: colorTexture },
+    [imageBitmap.width, imageBitmap.height],
+);
+
+// 4. create sampler
+const colorSampler = device.createSampler({
+    mipmapFilter: 'linear',
+});
+
 // Create vertex buffer
 // prettier-ignore
 const vertices = new Float32Array([
@@ -24,7 +53,7 @@ const vertices = new Float32Array([
     -1,  1, -1,  1,   0, 0, 1, 1,
      1,  1, -1,  1,   1, 1, 0, 1,
 
-    -1,  1,  1,  1,   1, 0, 0, 1,
+    -1, -1,  1,  1,   1, 0, 0, 1,
      1, -1,  1,  1,   0, 1, 0, 1,
     -1,  1,  1,  1,   0, 0, 1, 1,
      1,  1,  1,  1,   1, 1, 0, 1,
@@ -62,12 +91,12 @@ const module = device.createShaderModule({ code });
 // Create the pipeline
 /** @type {GPUVertexBufferLayout} */
 const vertexBufferLayout = {
-    arrayStride: 24,
+    arrayStride: 32,
     attributes: [
         {
             shaderLocation: 0,
             offset: 0,
-            format: 'float32x2',
+            format: 'float32x4',
         },
         {
             shaderLocation: 1,
@@ -103,7 +132,11 @@ const uniformBuffer = device.createBuffer({
 // Create the bind group
 const bindGroup = device.createBindGroup({
     layout: pipeline.getBindGroupLayout(0),
-    entries: [{ binding: 0, resource: { buffer: uniformBuffer } }],
+    entries: [
+        { binding: 0, resource: { buffer: uniformBuffer } },
+        { binding: 1, resource: colorTexture.createView() },
+        { binding: 2, resource: colorSampler },
+    ],
 });
 
 function update() {

vaja_1/shader.wgsl

@@ -1,38 +1,21 @@
-struct VertexInput {
-    @location(0) position: vec4f,
-    @location(1) color: vec4f,
-}
-
 struct VertexOutput {
     @builtin(position) position: vec4f,
     @location(0) color: vec4f,
 }
 
-struct FragmentInput {
-    @location(0) color: vec4f,
-}
-
-struct FragmentOutput {
-    @location(0) color: vec4f,
-}
-
 @group(0) @binding(0) var<uniform> mtrx: mat4x4f;
+@group(0) @binding(1) var colorTexture: texture_2d<f32>;
+@group(0) @binding(2) var colorSampler: sampler;
 
 @vertex
-fn vertex(input: VertexInput) -> VertexOutput {
+fn vertex(@location(0) position: vec4f, @location(1) color: vec4f) -> VertexOutput {
     var output: VertexOutput;
-
-    output.position = mtrx * input.position;
-    output.color = input.color;
-
+    output.position = mtrx * position;
+    output.color = color;
     return output;
 }
 
 @fragment
-fn fragment(input: FragmentInput) -> FragmentOutput {
-    var output: FragmentOutput;
-
-    output.color = input.color;
-
-    return output;
+fn fragment(@location(0) color: vec4f) -> @location(0) vec4f {
+    return textureSample(colorTexture, colorSampler, color.xy);
 }