karimsayedre.github.io/PathTracing.html at master · karimsayedre/karimsayedre.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<head>
    <title>Path Tracing</title>
    <meta charset="UTF-8">

    <!-- General Meta -->
    <meta name="description" content="A showcase of my projects and portfolio.">
    <link rel="icon" href="icons/Beyond.png">

    <!-- Open Graph Meta (for Facebook, LinkedIn, etc.) -->
    <meta property="og:title" content="Karim Sayed - Rendering Engineer">
    <meta property="og:description" content="A showcase of my projects and portfolio.">
    <meta property="og:image" content="https://karimsayedre.github.io/images/Pathtracing/0.jpg">
    <meta property="og:url" content="https://karimsayedre.github.io/">
    <meta property="og:type" content="website">

    <!-- Twitter Card Meta -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Karim Sayed - Rendering Engineer">
    <meta name="twitter:description" content="A showcase of my projects and portfolio.">
    <meta name="twitter:image" content="https://karimsayedre.github.io/images/Pathtracing/0.jpg">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <link rel="stylesheet" href="style/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
        crossorigin="anonymous"></script>

    <script src="scripts/images.js"></script>
    <script src="scripts/behaviour.js"></script>
    <script src="scripts/bars.js"></script>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
        rel="stylesheet">
</head>

<body>
    <script>
        navbar();
    </script>
    <div class="container">

        <h2>Implementing Vulkan Path Tracing in Beyond Engine</h2>
        <p>Path tracing, a powerful rendering technique, offers simplicity with its almost implicit features like soft
            shadows, global illumination, reflections and refractions. Unlike rasterization, which naturally lacks
            global illumination, path
            tracing
            creates more realistic and
            visually pleasing images by simulating the way light bounces around in a scene.</p>
        <p>Integrating Vulkan path tracing into the Beyond Engine was a challenging task that took me over three
            months to complete. I had to make major structural changes in the engine, ranging from the shaders to
            mesh loading and rendering, because the Beyond Engine was not initially designed with ray tracing in
            mind.</p>
        <p>
            Here's a rant for you, one of the challenges I faced during the implementation was the incomplete state of
            the Vulkan ray
            tracing validation layers. For instance, I encountered and reported an <a
                href="https://github.com/KhronosGroup/Vulkan-ValidationLayers/issues/6779" target="_blank"
                rel="noopener noreferrer">issue on the
                ValidationLayers
                GitHub repository</a>. From my understanding, the cause of this issue was pure undefined behaviour,
            where the ray tracing stack size was set randomly when it's supposed to be set dynamically but it is not
            <i>(purely my ignorance)</i>. This issue, which was later resolved in SDK 1.3.275, highlighted the need for
            a
            more
            comprehensive validation layer for Vulkan ray tracing. This is far from being the only chanllenge I faced.
            Using bindless resources was also a challange, simply because of the validation layers. I had many bugs that
            caused straight up DEVICE_LOST errors that even with NVIDIA's Nsight Aftermath I couldn't track down easily,
            especially the ones related to acceleration structures. Acceleration structures are not validated well at
            all. Rant over.
        </p>

        <h2>Technical Overview</h2>
        <p>I had to restructure the acceleration structures multple times during the implementation of my ray tracer,
            specifically the
            Bottom Level Acceleration Structures
            (BLAS). Having each mesh owning its BLAS proved
            beneficial, at least structurally, and with that idea in place, it was easier to fill the TLAS with BLASes
            from draw commands originally issued by the scene renderer.</p>

        <h2>Results and Impact</h2>
        <p>
            The primary impact of this implementation is the introduction of global illumination into the Beyond
            Engine. Without indirect lighting, scenes can appear dull and flat. However, with the addition of global
            illumination through path tracing, scenes in the Beyond Engine now have a more realistic and visually
            rich appearance.
        </p>

        <h2>Future Work</h2>
        <p>Looking ahead, I plan to integrate ReSTIR path tracing for high quality rendering at real-time frame rates.
            Additionally, I
            plan to incorporate <a href="https://developer.NVIDIA.com/rtx/ray-tracing/rt-denoisers" target="_blank"
                rel="noopener noreferrer">NVIDIA's real-time
                denoisers</a> to
            further enhance the performance and quality. The ambitious target is to be able to make games using just the
            path tracer.</p>

        <h2>Conclusion</h2>
        <p>The journey of implementing path tracing in the Beyond Engine has been both challenging and rewarding. It
            has not only improved the visual quality of the engine but also provided an intuitive way to enhance my
            mathematical skills. One key takeaway from this experience, as the saying goes, "If it ain't broke, don't
            fix it" I learned this the hard way, after taking month dealing with undefined behaviour just be cause of a
            dynamic state in the ray tracing pipeline.</p>

        <h2>Images</h2>
        <p>
            Here are some images that demonstrate the results of my path tracing implementation.<br>
            Note that these images are <b>not denoised</b> and they are taken after some amount of pixel accumulation.
            <br>
            Click on an image to view it in bigger size.
        </p>
        <div class="row">

            <script>
                // Get the container element where the images and modals will be appended
                var container = document.querySelector('.row');

                let path = 'images/Pathtracing/';

                // Create an array of image file names
                var images = ['0.jpg', '00.jpg', '1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg', '11.jpg', '12.jpg', '13.jpg', '14.jpg', '15.jpg', '16.jpg', '17.jpg',
                    '18.jpg', '19.jpg', '20.jpg', '21.jpg', '22.jpg'];
                // Define the number of images per row
                var imagesPerRow = 4;

                renderImages(path, images, container, imagesPerRow);
            </script>
        </div>
        <section class="section-header">
            <h2>Disscussions</h2>

            <div id="disqus_thread"></div>
            <script>
                /**
                *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
                *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */
                var disqus_config = function () {
                    this.page.url = window.location.href;
                    this.page.identifier = window.location.pathname;
                };

                (function () { // DON'T EDIT BELOW THIS LINE
                    var d = document, s = d.createElement('script');
                    s.src = 'https://https-karimsayedre-github-io.disqus.com/embed.js';
                    s.setAttribute('data-timestamp', +new Date());
                    (d.head || d.body).appendChild(s);
                })();
            </script>
            <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments
                    powered
                    by
                    Disqus.</a></noscript>
        </section>
    </div>
    <!-- Add more images here -->
    <script>
        footer();
        addBehaviour();
    </script>
    <div class="text-center">
        <div>Visitor Count: <span id="visits">Loading...</span></div>
        <script>
            fetch('https://abacus.jasoncameron.dev/hit/karimsayedre.github.io/PathTracing.html')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('visits').innerText = data.value;
                });
        </script>
    </div>
</body>

</html>