karimsayedre.github.io/DLSS.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
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<head>
    <title>NVIDIA DLSS Integration</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>Adding DLSS Support to Beyond Engine</h2>
        <p>
            In my ongoing work on the Beyond Engine, I recently integrated NVIDIA's Deep Learning Super Sampling (DLSS).
            This addition enhances the engine's ability to provide high-quality visuals while maintaining strong
            performance.
            The DLSS integration involved both leveraging the NVIDIA SDK and modifying the rendering pipeline to
            accommodate the new upscaling technology.
        </p>

        <h2>Technical Overview</h2>
        <p>
            Despite how there are many arguments against DLSS and other upscaling techniques, especially about how it's
            not temprally stable,
            it's still a technology that's gaining popularity in the gaming industry. As long as the developers don't
            rely on it too heavily as a primary optimization.
            DLSS uses AI-based upscaling to deliver higher frame rates while rendering at a lower resolution.
            To implement this, I had to add support for DLSS within the Vulkan renderer, configure the necessary
            frame buffer inputs, and ensure the game engine could handle both native and DLSS modes seamlessly.
            The implementation required extensive use of the NVIDIA DLSS SDK, where I created custom passes to handle
            the inputs for DLSS, including motion vectors, depth, color, and more.
        </p>

        <h2>Performance Impact</h2>
        <p>
            After the integration, the engine demonstrated a significant boost in performance, particularly in
            graphically intensive scenes. For example, without compromising too much visual fidelity. This performance
            boost allows the engine to handle higher resolutions and complex visual effects with much smoother frame
            rates.
        </p>

        <h2>Challenges Faced</h2>
        <p>
            One of the major challenges wasintegrating motion vectors from the geometry and camera required fine-tuning
            to ensure that ghosting and artifacts were minimized, this is still an ongoing area of research too.
        </p>

        <h2>Future Improvements</h2>
        <p>
            Moving forward, I plan to experiment with how DLSS may interact with Restir path tracing especially when
            it's denoised. Will this be the magic spell for playable path traced games?
        </p>

        <h2>Conclusion</h2>
        <p>
            The integration of DLSS into the Beyond Engine has significantly improved the overall performance,
            especially
            in demanding scenes. The ability to upscale while maintaining visual fidelity is a game-changer, especially
            for modern GPUs. This successful implementation of DLSS opens the door for more advanced rendering
            techniques in Beyond, keeping it on par with the latest advancements in game engine technology.
        </p>

        <h2>Images</h2>
        <p>
            Here are some images that demonstrate the results of DLSS at <b>MaxQuality</b> mode.<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
                let container = document.querySelector('.row');

                let path = 'images/DLSS/';

                // Create an array of image file names
                let images = ['0.gif', '1.gif', '2.gif', '3.gif'];
                // Define the number of images per row
                let imagesPerRow = 4;

                renderImages(path, images, container, imagesPerRow, true);
            </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>
    <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/DLSS.html')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('visits').innerText = data.value;
                });
        </script>
    </div>
</body>

</html>