Performance Optimization, User Experience, and a Significant Achievement.

I have always been into computer graphics, rendering engines, and GPU accelerations. However, I never imagined that I would develop an In-House graphics engine myself as part of the UI for a complex medical system.

Architecture Layers

First of all, thanks to the managers and team leaders who supported my initiative in developing the engine (of course, after I already had a basic, integrated demo with the improvements and capabilities the engine brings in).

Where does the GFX Engine utilized in the product?

As part of a medical system for SPECT/CT scans, the engine plays a critical role in areas such as:

Data Quality Control

Bladder & Kidneys Examination

Cardiac Preview Scan

Main Challenge

"how to maintain UI responsiveness and reduce latency while loading and rendering data?"

On the old infrastructure all of the workload was done on the Main Thread, and because the UI is already busy, it's clear that we will experience freezes, slowness, and sometimes even crashes.

What's The Solution?

Rendering Technique

First of all, I wrote a new framework that creates a rendering context in a separate thread with its own Command Queue.

The rendering for each view operates independently, it receives commands through its queue and executes them on its own thread - thus, we have effectively offload the work from the Main Thread and better utilize the CPU.

In the second stage, I moved most of the intensive work from the CPU to the GPU using glsl shaders.

An example for a simple shader applying a Color Map on an image:

#version 410 core

in vec2 TexCoord;
out vec4 FragColor;  

uniform sampler2D image;
uniform sampler1D colorMap;

uniform float minValue;
uniform float maxValue;

const float epsilon = 1e-5f;

float normalize(float x, float min, float max)
{    
    if(abs(max - min) <= epsilon)
    {
        return 0.0f;
    }

    return (x - min) / (max - min);
}

void main()
{            
    vec4 index = texture(image, TexCoord);
    FragColor = texture(colorMap,
                normalize(index.r, minValue, maxValue));
}

Since then, a Components Entity System (ECS) and Ray Casting for Mouse Picking has been implemented and much more adorable features.

Hope you enjoyed!