textures

shaders/shader.glsl

@@ -1,25 +1,24 @@
 @vs vs
-uniform vs_params {
-    float rotation;
-};
-
 in vec4 position;
-in vec4 color0;
+in vec2 texcoord0;
 
-out vec4 color;
+out vec2 uv;
 
 void main() {
-    gl_Position = position * vec4(rotation, 1, 1, 1);
-    color = color0;
+    gl_Position = position;
+    uv = texcoord0;
 }
 @end
 
 @fs fs
-in vec4 color;
+uniform texture2D tex;
+uniform sampler smp;
+
+in vec2 uv;
 out vec4 frag_color;
 
 void main() {
-    frag_color = color;
+    frag_color = texture(sampler2D(tex, smp), uv);
 }
 @end
 

src/main.c

@@ -10,29 +10,61 @@ static struct {
     sg_pipeline pip;
     sg_bindings bind;
     sg_pass_action pass_action;
-    vs_params_t vs_params;
-    int index;
 } state;
 
+typedef struct {
+    float x, y, z;
+    int16_t u, v;
+} vertex_t;
+
 static void init(void) {
     sg_setup(&(sg_desc){
         .environment = sglue_environment(),
         .logger.func = slog_func,
     });
 
-    state.vs_params.rotation = 0.0f;
-    state.index = 0;
-
-    float vertices[] = {
-         0.0f,  0.5f, 0.5f,     1.0f, 0.0f, 0.0f, 1.0f,
-        -0.5f, -0.5f, 0.5f,     0.0f, 1.0f, 0.0f, 1.0f,
-         0.5f, -0.5f, 0.5f,     0.0f, 0.0f, 1.0f, 1.0f,
+    vertex_t vertices[] = {
+        {  0.5f,  0.5f, 0.0f, 1.0f * 32767, 1.0f * 32767 },   // top right
+        {  0.5f, -0.5f, 0.0f, 1.0f * 32767, 0.0f * 32767 },  // bottom right
+        { -0.5f, -0.5f, 0.0f, 0.0f * 32767, 0.0f * 32767 },  // bottom left
+        { -0.5f,  0.5f, 0.0f, 0.0f * 32767, 1.0f * 32767 }  // top left 
     };
+
+    unsigned int indices[] = {  // note that we start from 0!
+        0, 1, 3,   // first triangle
+        1, 2, 3    // second triangle
+    };
+
     state.bind.vertex_buffers[0] = sg_make_buffer(&(sg_buffer_desc){
         .data = SG_RANGE(vertices),
         .label = "triangle-vertices"
     });
 
+    state.bind.index_buffer = sg_make_buffer(&(sg_buffer_desc){
+        .type = SG_BUFFERTYPE_INDEXBUFFER,
+        .data = SG_RANGE(indices),
+        .label = "triangle-indices"
+    });
+
+     uint32_t pixels[4*4] = {
+        0xFF000000, 0xFFFF00FF, 0xFF000000, 0xFFFF00FF,
+        0xFFFF00FF, 0xFF000000, 0xFFFF00FF, 0xFF000000,
+        0xFF000000, 0xFFFF00FF, 0xFF000000, 0xFFFF00FF,
+        0xFFFF00FF, 0xFF000000, 0xFFFF00FF, 0xFF000000,
+    };
+
+    state.bind.fs.images[SLOT_tex] = sg_make_image(&(sg_image_desc){
+        .width = 4,
+        .height = 4,
+        .data.subimage[0][0] = SG_RANGE(pixels),
+        .label = "triangle-texture",
+        .pixel_format = SG_PIXELFORMAT_RGBA8,
+    });
+
+    state.bind.fs.samplers[SLOT_smp] = sg_make_sampler(&(sg_sampler_desc){
+        .label = "triangle-sampler"
+    });
+
     sg_shader shd = sg_make_shader(triangle_shader_desc(sg_query_backend()));
 
     state.pip = sg_make_pipeline(&(sg_pipeline_desc){
@@ -40,17 +72,17 @@ static void init(void) {
         .layout = {
             .attrs = {
                 [ATTR_vs_position].format = SG_VERTEXFORMAT_FLOAT3,
-                [ATTR_vs_color0].format = SG_VERTEXFORMAT_FLOAT4
+                [ATTR_vs_texcoord0].format = SG_VERTEXFORMAT_SHORT2N,
             }
         },
         .label = "triangle-pipeline",
+        .index_type = SG_INDEXTYPE_UINT32,
         .cull_mode = SG_CULLMODE_BACK,
-        .face_winding = SG_FACEWINDING_CCW,
         .sample_count = 1,
     });
 
     state.pass_action = (sg_pass_action) {
-        .colors[0] = { .load_action=SG_LOADACTION_CLEAR, .clear_value={0.0f, 0.0f, 0.0f, 1.0f } }
+        .colors[0] = { .load_action=SG_LOADACTION_CLEAR, .clear_value={0.2f, 0.4f, 0.3f, 1.0f } }
     };
 }
 
@@ -58,9 +90,7 @@ void frame(void) {
     sg_begin_pass(&(sg_pass){ .action = state.pass_action, .swapchain = sglue_swapchain() });
     sg_apply_pipeline(state.pip);
     sg_apply_bindings(&state.bind);
-    state.vs_params.rotation = sin(++state.index * 0.05);
-    sg_apply_uniforms(SG_SHADERSTAGE_VS, 0, &SG_RANGE(state.vs_params));
-    sg_draw(0, 3, 1);
+    sg_draw(0, 6, 1);
     sg_end_pass();
     sg_commit();
 }