DEV Community: yubin yang

Software Rendering Pipeline with Backface Culling

yubin yang — Sun, 31 May 2026 11:48:00 +0000

1. Overview

In this project, I implemented a simple software renderer using Python and Pygame.
The renderer follows the fundamental stages of a 3D rendering pipeline.

Local Space
↓
World Space
↓
View Space
↓
Clip Space
↓
Screen Space

Model Transformation (Local Space → World Space)
View Transformation (World Space → View Space)
Perspective Projection (View Space → Clip Space)
Viewport Transformation (Clip Space → Screen Space)
Backface Culling
Painter's Algorithm for depth sorting

2. Rendering Pipeline Implementation

- The original code is too long, so I only posted the important parts.
-Please check GitHub.

Transforming World Space into View Space using the View Matrix

def GetViewMatrix(CamPos, TargetPos, Up):
    ViewZ = TargetPos - CamPos
    ViewZ = ViewZ / np.linalg.norm(ViewZ)

    ViewX = np.cross(Up, ViewZ)
    ViewX = ViewX / np.linalg.norm(ViewX)

    ViewY = np.cross(ViewZ, ViewX)

    CamInv = np.array([
        [ViewX[0], ViewX[1], ViewX[2], -np.dot(ViewX, CamPos)],
        [ViewY[0], ViewY[1], ViewY[2], -np.dot(ViewY, CamPos)],
        [ViewZ[0], ViewZ[1], ViewZ[2], -np.dot(ViewZ, CamPos)],
        [0, 0, 0, 1]
    ])

    FlipY = np.array([
        [-1, 0, 0, 0],
        [0, 1, 0, 0],
        [0, 0, -1, 0],
        [0, 0, 0, 1]
    ])

    return np.matmul(FlipY, CamInv)

GetViewMatrix() creates a View Matrix that transforms objects from World Space into View Space.
The camera position, target position, and up vector are used to calculate the camera's local coordinate system. Once the View Matrix is applied, all objects are transformed into coordinates relative to the camera.

Transforming View Space into Clip Space using the Projection Matrix

def GetProjectionMatrix(FovDeg, Width, Height, Near=0.1, Far=1000):
    Fov = math.radians(FovDeg)
    Aspect = Width / Height
    Distance = 1 / math.tan(Fov / 2)

    return np.array([
        [Distance / Aspect, 0, 0, 0],
        [0, Distance, 0, 0],
        [0, 0, (Near + Far) / (Near - Far), (2 * Near * Far) / (Near - Far)],
        [0, 0, -1, 0]
    ])

GetProjectionMatrix() creates a Perspective Projection Matrix.
This matrix applies perspective to the scene, making distant objects appear smaller and nearby objects appear larger. It transforms coordinates from View Space into Clip Space.

Transforming Normalized Coordinates into Screen Coordinates using the Viewport Matrix

def GetViewportMatrix(Width, Height):
    return np.array([
        [Width / 2, 0, 0, Width / 2],
        [0, -Height / 2, 0, Height / 2],
        [0, 0, 0.5, 0.5],
        [0, 0, 0, 1]
    ])

GetViewportMatrix() converts normalized device coordinates (NDC) into actual screen coordinates.
After projection, coordinates exist in a normalized range of -1 to 1. This matrix maps those coordinates into the screen resolution so that they can be rendered.

Determining Visible Faces using Backface Culling

def IsFrontFace(V0, V1, V2):
    Edge1 = V1[:3] - V0[:3]
    Edge2 = V2[:3] - V0[:3]

    Normal = np.cross(Edge1, Edge2)

    Center = (V0[:3] + V1[:3] + V2[:3]) / 3

    # Camera is placed at the origin in view space
    ViewDirection = -Center

    # Visible when the face normal points toward the camera
    return np.dot(Normal, ViewDirection) > 0

IsFrontFace() determines whether a triangle is facing the camera.
The function calculates the face normal using a cross product and compares it with the camera direction using a dot product. If the triangle is facing away from the camera, it is discarded before rendering.
This process is known as Backface Culling and helps reduce unnecessary rendering work.

Transforming Cube Vertices and Rendering Visible Triangles

    ViewVertices = []
    ProjectedVertices = []

    for Vertex in Vertices:
        # Local space -> World space
        WorldVertex = np.matmul(Translate, Vertex)

        # World space -> View space
        ViewVertex = np.matmul(ViewMatrix, WorldVertex)
        ViewVertices.append(ViewVertex)

        # View space -> Clip space
        ClipVertex = np.matmul(ProjectionMatrix, ViewVertex)

        # Perspective divide
        if ClipVertex[3] != 0:
            NdcVertex = ClipVertex / ClipVertex[3]
        else:
            NdcVertex = ClipVertex

        # NDC -> Screen space
        ScreenVertex = np.matmul(ViewportMatrix, NdcVertex)
        ProjectedVertices.append((int(ScreenVertex[0]), int(ScreenVertex[1]), ScreenVertex[2]))

    FaceDepths = []

    for Face in Faces:
        V0 = ViewVertices[Face[0]]
        V1 = ViewVertices[Face[1]]
        V2 = ViewVertices[Face[2]]

        # Skip triangles facing away from the camera
        if not IsFrontFace(V0, V1, V2):
            continue

        AvgDepth = sum(ProjectedVertices[Index][2] for Index in Face) / 3
        FaceDepths.append((AvgDepth, Face))

        FaceDepths.sort(key=lambda Item: Item[0], reverse=True)

        for _, Face in FaceDepths:
            Points = [
                (ProjectedVertices[Index][0],
                ProjectedVertices[Index][1])
                for Index in Face
            ]

            pygame.draw.polygon(Screen, Color, Points)
            pygame.draw.polygon(Screen, (0, 0, 0), Points, 2)

            # Update screen immediately
            pygame.display.flip()

DrawCube() contains the main software rendering pipeline.
The cube vertices are first created in Local Space and then transformed through multiple coordinate spaces.

Local Space
→ World Space
→ View Space
→ Clip Space
→ NDC
→ Screen Space

After the transformations, Backface Culling is applied to remove invisible faces.
The remaining triangles are depth-sorted using Painter's Algorithm and finally rendered.

Results

The final renderer displays multiple cubes in the 3D scene by applying perspective projection and back culling.

Although simple compared to modern pipelines, manually implementing these steps allowed me to gain a much deeper understanding of how the rendering system works internally.

Through this project, I was able to learn various knowledge necessary for rendering, such as computer graphics mathematics, matrix transformations, coordinate space, and visibility.

Preview gif

Full Video

YouTube Video

Github Repository

Github - Graphics

Unreal Engine 5 Skill System Architecture using GAS and GameplayTags

yubin yang — Mon, 25 May 2026 09:31:45 +0000

1. Overview

When developing the game, the most important thing I considered was implementing a structure that is expandable and reusable.
So, for this project, I designed a common SkillBase structure + GameplayTag based status effect system based on Unreal Engine 5's GAS (Gameplay Ability System).
All skills operate based on a common SkillBase, and each skill receives data through SkillData and GameplayTag.
Status effects are also processed based on GameplayTag, and each effect is managed as an independent Effect Object.

2. Core Architecture

Combat System Architecture

Designed the combat system using Unreal Engine’s Gameplay Ability System(GAS). TurnManager controls turn flow, while GameplayAbilities handle skill execution.
AbilitySystemComponent and AttributeSet manage damage calculations and gameplay states.

SkillBase Skill Architecture

Integrated all runtime skill execution data into FCBSkillContext and designed UCBGA_SkillBase to handle common skill execution flow.
Blueprint handles montage, camera, and combo flow control, while core functionality is implemented in C++.

Skill Execution Flow

SkillDataAsset → GameplayEvent → SkillContextBuilder → FCBSkillContext → UCBGA_SkillBase → ApplyTagToTarget

GameplayTag-Based Status Effect System

Designed a data-driven status effect system using GameplayTags and GameplayEffects.
SkillTagContainer manages active effects, while each effect inherits from UCBTagEffectBase.

Status Effect Flow

OnApplied() → OnTurnTick() → OnRemoved()

3. Result

I implemented turn-based skill combat using Unreal Engine's GAS.
Learned the importance of object-oriented architecture by separating responsibilities between SkillBase, SkillContext, and TagEffect systems.
Designed a GameplayTag-based status effect framework and understood the strengths of data-driven architecture.
Improved maintainability and collaboration efficiency by refactoring Blueprint-heavy systems into C++.
Used UML diagrams to visualize and share gameplay architecture with teammates.
Gained collaborative workflow experience using Git Fork, including branch strategies and Unreal Asset conflict resolution.

Preview gif

Skill Play YouTube Playlist

YouTubePlaylist

Github Repository

Github - CHronoBreak
- Cannot share because the source code is prohibited from being shared

Rasterization Using Bresenham Algorithm and Scanline Algorithm

yubin yang — Mon, 18 May 2026 04:49:58 +0000

1. Overview

Bresenham algorithm is the fastest algorithm for drawing straight lines on a pixel grid (using only integers).
Scanline Algorithm is commonly used to fill the interior of polygons by drawing horizontal scanlines between edges.
In this project, I implemented basic rasterization techniques in Python using Pygame by applying Bresenham Algorithm and the Scanline Algorithm.
The goal was to manually draw geometric shapes using lines and fill their interiors with color.
I learned how rendering and polygon filling work internally in graphics systems.

2. Development Process

core code

# draw line
def DrawLine(surface, x1, y1, x2, y2, color):
    dx = abs(x2 - x1)
    dy = abs(y2 - y1)

    stepX = 1 if x1 < x2 else -1
    stepY = 1 if y1 < y2 else -1

    error = dx - dy

    x = x1
    y = y1

    while True:
        surface.set_at((x, y), color)

        if x == x2 and y == y2:
            break

        e2 = 2 * error

        if e2 > -dy:
            error -= dy
            x += stepX

        if e2 < dx:
            error += dx
            y += stepY

This is the Bresenham Algorithm function.
Calculates difference between the x axis and the y axis (dx, dy) and uses the error value to determine at what point to move horizontally or vertically.
Efficient line rendering is possible because pixel positions are gradually updated through integer based error correction.

# fill triangle
def FillTriangle(surface, vertices, color):
    # sort vertices by y
    vertices.sort(key=lambda vertex: vertex[1])

    x1 = vertices[0][0]
    y1 = vertices[0][1]
    x2 = vertices[1][0]
    y2 = vertices[1][1]
    x3 = vertices[2][0]
    y3 = vertices[2][1]

    # interpolate x values between two points
    def Interpolate(yStart, xStart, yEnd, xEnd):

        if yStart == yEnd:
            return []

        xValues = []

        deltaX = (xEnd - xStart) / (yEnd - yStart)

        currentX = xStart

        y = yStart

        while y < yEnd:
            xValues.append(currentX)

            currentX += deltaX

            y += 1

        return xValues

    # create edge lists
    xShort = Interpolate(y1, x1, y2, x2)
    xShort += Interpolate(y2, x2, y3, x3)

    xLong = Interpolate(y1, x1, y3, x3)

    # get minimum length
    length = len(xShort)

    if len(xLong) < length:
        length = len(xLong)

    # fill triangle
    i = 0

    while i < length:

        y = y1 + i

        xa = int(xShort[i])
        xb = int(xLong[i])

        if xa > xb:
            temp = xa
            xa = xb
            xb = temp

        # draw horizontal line
        DrawLine(surface, xa, y, xb, y, color)

        # delay to visualization
        pygame.display.update()
        pygame.time.delay(15)

        i += 1

This function is the Scanline Algorithm.
First, align the vertices of the triangle with y axis, then use the Interpolate() function to interpolate the x coordinates of each side.
Afterwards, rendering is performed by calculating the left and right positions for each horizontal scanline and filling in the spaces between them.


# fill rectangle using 2 triangles!
def FillRectangle(surface, vertices, color):
    # 0 = top left
    # 1 = top right
    # 2 = bottom right
    # 3 = bottom left

    triangle1 = [
        vertices[0],
        vertices[1],
        vertices[2]
    ]

    triangle2 = [
        vertices[0],
        vertices[2],
        vertices[3]
    ]

    FillTriangle(surface, triangle1, color)
    FillTriangle(surface, triangle2, color)

This function fills a rectangle.
I implemented it by adapting the triangle filling function without the need for complex code.

3. Result

I implemented line and surface rendering myself.
When I thought about how I implemented the function to fill a rectangle using the function to fill a triangle, I felt like I had written efficient code.

Preview gif

Full Video

YouTube Video

Github Repository

Github - Graphics

How to dynamically generate a maze using Prim's algorithm

yubin yang — Thu, 14 May 2026 00:55:29 +0000

1. Overview

Prim’s Algorithm is traditionally used to construct a Minimum Spanning Tree (MST) in graph theory.
While thinking about how to generate mazes automatically, I came up with the idea of adapting Prim’s Algorithm into a procedural maze generation system by treating grid cells as graph nodes and walls as edges.
Instead of relying on edge weights, the system randomly expands paths through unvisited neighboring cells while still maintaining overall connectivity.
This approach allows the maze to generate a unique layout every time the game starts while preventing isolated sections or unreachable paths.

2. Development Process

core code

// Generate maze using Prim's Algorithm
protected void Prim()
{
    // Open entrance and exit
    OpenEntranceAndExit();

    // Mark entrance as visited
    Cell startCell = gridGenerator.Cells[inCol, inRow];
    startCell.Visit();

    // List of frontier walls
    List<(int fr, int fc, int tr, int tc)> frontier = new();
    frontier.AddRange(GetCandidateWalls(inRow, inCol));

    // Generate maze
    while (frontier.Count > 0)
    {
        // Select a random wall
        int index = Random.Range(0, frontier.Count);
        var edge = frontier[index];
        frontier.RemoveAt(index);

        Cell fromCell = gridGenerator.Cells[edge.fr, edge.fc];
        Cell toCell = gridGenerator.Cells[edge.tr, edge.tc];

        if (toCell.visited) continue;

        // Remove wall between cells
        RemoveWallBetween(fromCell, toCell);

        // Mark cell as visited
        toCell.Visit();

        // Add candidate walls from the newly visited cell
        frontier.AddRange(GetCandidateWalls(toCell.r, toCell.c));
    }
}

The maze generation system was implemented in Unity using a grid-based structure.
Each cell was treated as a node, and neighboring cells were connected by removing walls during the generation process.
To preserve the core structure of Prim’s Algorithm while making the maze feel less predictable, I modified the expansion logic to randomly select neighboring paths instead of using weighted edges.
The generation process continues until every reachable cell becomes connected, ensuring that the maze always remains fully traversable.
This project became a meaningful experience in creatively applying graph algorithms to actual gameplay systems and procedural generation.

3.Result

The maze is generated dynamically at runtime, creating a completely different layout every time the game starts.

This system successfully produced randomized yet fully connected maze structures without isolated sections.

DEV Community: yubin yang

Software Rendering Pipeline with Backface Culling

1. Overview

2. Rendering Pipeline Implementation

Transforming World Space into View Space using the View Matrix

Transforming View Space into Clip Space using the Projection Matrix

Transforming Normalized Coordinates into Screen Coordinates using the Viewport Matrix

Determining Visible Faces using Backface Culling

Transforming Cube Vertices and Rendering Visible Triangles

Results

Preview gif

Full Video

Github Repository

Unreal Engine 5 Skill System Architecture using GAS and GameplayTags

1. Overview

2. Core Architecture

Combat System Architecture

SkillBase Skill Architecture

Skill Execution Flow

GameplayTag-Based Status Effect System

Status Effect Flow

3. Result

Preview gif

Skill Play YouTube Playlist

Github Repository

Rasterization Using Bresenham Algorithm and Scanline Algorithm

1. Overview

2. Development Process

core code

3. Result

Preview gif

Full Video

Github Repository

How to dynamically generate a maze using Prim's algorithm

1. Overview

2. Development Process

core code

3.Result

Play gif

Demo Video

GitHub Repository