Hello Triangle¶

This is the most basic KDGpu rendering example: a single rotating triangle on the screen. It demonstrates the fundamental graphics flow - initializing graphics resources, setting up a graphics pipeline, and submitting draw commands each frame. This example is the best starting point for understanding how to render with KDGpu.

This example makes use of the KDGpuExample helper API which simplifies example creation by hiding repetitive and common patterns such as Instance and Device initialize and Swapchain creation.

To see what it's like to use KDGpu without the KDGpuExample API, check out the Hello Triangle Native API example.

Overview¶

What this example demonstrates:

Creating a KDGpu graphics application with window
Setting up vertex and index buffers with geometry data
Creating a graphics pipeline with shaders
Binding pipeline state and buffers
Recording and submitting draw commands each frame
Rotating geometry using uniform buffers and matrix transforms

Key concepts for beginners:

Vertex Buffer: GPU memory containing vertex positions and attributes
Index Buffer: GPU memory telling GPU which vertices form triangles
Uniform Buffer: GPU memory for data that changes per-frame (like transforms)
Graphics Pipeline: GPU state including shaders, vertex layout, and rendering modes
Command Recording: Building a list of GPU commands to execute
Draw Command: GPU command to render vertices using current pipeline/buffers

Vulkan concepts:

VkBuffer: GPU-accessible memory for vertices, indices, uniforms
VkPipeline: Shader programs + GPU state (rasterization, depth testing, etc.)
VkCommandBuffer: Recording draw and compute commands
VkSwapchain: Queue of images for displaying to screen

See VkSwapchainKHR specs and Graphics Pipelines for technical details.

Let's start with your first KDGpu application entrypoint!

Initialization¶

Let's take a look at the initialization process that was necessary to get to the rendering stage. Starting at the top of initializeScene:

Vertex Data:

    struct Vertex {
        glm::vec3 position;
        glm::vec3 color;
    };

    // Create a buffer to hold triangle vertex data
    {
        const float r = 0.8f;
        const std::array<Vertex, 3> vertexData = {
            Vertex{ // Bottom-left, red
                    .position = { r * cosf(7.0f * M_PI / 6.0f), -r * sinf(7.0f * M_PI / 6.0f), 0.0f },
                    .color = { 1.0f, 0.0f, 0.0f } },
            Vertex{ // Bottom-right, green
                    .position = { r * cosf(11.0f * M_PI / 6.0f), -r * sinf(11.0f * M_PI / 6.0f), 0.0f },
                    .color = { 0.0f, 1.0f, 0.0f } },
            Vertex{ // Top, blue
                    .position = { 0.0f, -r, 0.0f },
                    .color = { 0.0f, 0.0f, 1.0f } }
        };

        const DeviceSize dataByteSize = vertexData.size() * sizeof(Vertex);
        const BufferOptions bufferOptions = {
            .label = "Vertex Buffer",
            .size = dataByteSize,
            .usage = BufferUsageFlagBits::VertexBufferBit | BufferUsageFlagBits::TransferDstBit,
            .memoryUsage = MemoryUsage::GpuOnly
        };

        m_buffer = m_device.createBuffer(bufferOptions);
        const BufferUploadOptions uploadOptions = {
            .destinationBuffer = m_buffer,
            .dstStages = PipelineStageFlagBit::VertexAttributeInputBit,
            .dstMask = AccessFlagBit::VertexAttributeReadBit,
            .data = vertexData.data(),
            .byteSize = dataByteSize
        };
        uploadBufferData(uploadOptions);
    }