Next step: The results

Author: ign3u5

readme.md

@@ -2,7 +2,7 @@
 I am following [sotrh's learn-wgpu tutorial](https://sotrh.github.io/learn-wgpu/).
 
 ## Status
-I am just about to start: [A change to the VERTICES](https://sotrh.github.io/learn-wgpu/beginner/tutorial5-textures/#a-change-to-the-vertices).
+I am just about to start: [The results](https://sotrh.github.io/learn-wgpu/beginner/tutorial5-textures/#the-results).
 
 ## Glossary
 Word | Definition

src/main.rs

@@ -62,7 +62,7 @@ fn main() {
 #[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]
 struct Vertex {
     position: [f32; 3],
-    color: [f32; 3],
+    tex_coords: [f32; 2],
 }
 
 impl Vertex {
@@ -79,21 +79,22 @@ impl Vertex {
                 wgpu::VertexAttribute {
                     offset: std::mem::size_of::<[f32; 3]>() as wgpu::BufferAddress,
                     shader_location: 1,
-                    format: wgpu::VertexFormat::Float32x3,
+                    format: wgpu::VertexFormat::Float32x2,
                 }
             ]
         }
     }
 }
 
 const VERTICES: &[Vertex] = &[
-    Vertex { position: [-0.0868241, 0.49240386, 0.0], color: [0.5, 0.0, 0.5] }, // A
-    Vertex { position: [-0.49513406, 0.06958647, 0.0], color: [0.5, 0.0, 0.5] }, // B
-    Vertex { position: [-0.21918549, -0.44939706, 0.0], color: [0.5, 0.0, 0.5] }, // C
-    Vertex { position: [0.35966998, -0.3473291, 0.0], color: [0.5, 0.0, 0.5] }, // D
-    Vertex { position: [0.44147372, 0.2347359, 0.0], color: [0.5, 0.0, 0.5] }, // E
+    Vertex { position: [-0.0868241, 0.49240386, 0.0], tex_coords: [0.4131759, 0.99240386], }, // A
+    Vertex { position: [-0.49513406, 0.06958647, 0.0], tex_coords: [0.0048659444, 0.56958646], }, // B
+    Vertex { position: [-0.21918549, -0.44939706, 0.0], tex_coords: [0.28081453, 0.050602943], }, // C
+    Vertex { position: [0.35966998, -0.3473291, 0.0], tex_coords: [0.85967, 0.15267089], }, // D
+    Vertex { position: [0.44147372, 0.2347359, 0.0], tex_coords: [0.9414737, 0.7347359], }, // E
 ];
 
+
 const INDICES: &[u16] = &[
     0, 1, 4,
     1, 2, 4,
@@ -153,7 +154,7 @@ impl State {
 
         let diffuse_bytes = include_bytes!("happy-tree.png");
         let diffuse_image = image::load_from_memory(diffuse_bytes).unwrap();
-        let diffuse_rgba = diffuse_image.as_bgra8().unwrap();
+        let diffuse_rgba = diffuse_image.as_rgba8().unwrap();
 
         use image::GenericImageView;
         let dimensions = diffuse_image.dimensions();

src/shader.wgsl

@@ -1,25 +1,29 @@
 //Vertex shader
 struct VertexInput {
     [[location(0)]] position: vec3<f32>;
-    [[location(1)]] color: vec3<f32>;
+    [[location(1)]] tex_coords: vec2<f32>;
 };
 
 struct VertexOutput {
     [[builtin(position)]] clip_position: vec4<f32>;
-    [[location(0)]] color: vec3<f32>;
+    [[location(0)]] tex_coords: vec2<f32>;
 };
 
 [[stage(vertex)]]
 fn main(model: VertexInput) -> VertexOutput {
     var out: VertexOutput;
-    out.color = model.color;
+    out.tex_coords = model.tex_coords;
     out.clip_position = vec4<f32>(model.position, 1.0);
     return out;
 }
 
 //Fragment shader
+[[group(0), binding(0)]] //group corresponds to the first parameter in set_bind_group()
+var t_diffuse: texture_2d<f32>;
+[[group(0), binding(1)]] //binding relates to the binding specified when creating BindGroup/Layout
+var s_diffuse: sampler;
 
 [[stage(fragment)]]
 fn main(in: VertexOutput) -> [[location(0)]] vec4<f32> {
-    return vec4<f32>(in.color, 1.0);
+    return textureSample(t_diffuse, s_diffuse, in.tex_coords);
 }