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

<head>
    <title>Ground-Truth Ambient Occlusion</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>Incorporating XeGTAO in Hazel Engine</h2>
        <p>
            The integration of Intel's XeGTAO into the Hazel engine marked a significant milestone in the project. At
            the
            time of integration, Hazel did not have support for HLSL shaders. Recognizing the superiority <i>(in my
                opinion)</i> and
            flexibility of HLSL over the engine's main, GLSL. At the time, Cherno had opened my eyes on such an idea. So
            I took the initiative to implement the support for it. This was a
            significant undertaking that required a deep understanding of both the Hazel engine and the Vulkan API which
            I lacked at the time. Now,
            even though Hazel only supports Vulkan, the shaders are mostly written in HLSL. This has greatly improved
            the flexibility of the engine where it's much easier to integrate more stuff in it. Furthermore, the
            integration of XeGTAO was facilitated by the
            prior implementation of Screen Space Reflections (SSR), as both require a Hierarchical Depth Buffer. Thus,
            the path was paved for XeGTAO, making its integration much smoother and more efficient.
        </p>

        <h2>Technical Overview</h2>
        <p>
            XeGTAO, also known as Ground Truth Ambient Occlusion, is a state-of-the-art screen space algorithm. It was
            given to me by Cherno, and its name alone was enough to pique my interest. What sets XeGTAO apart is its
            basis on the Monte Carlo algorithm, which makes it particularly effective when denoised properly since
            ambient occlusion is also a
            low-frequency signal. This feature is what makes XeGTAO one of the best in its class. You can learn more
            about XeGTAO and its implementation from the <a href="https://github.com/GameTechDev/XeGTAO">
                official
                repository
            </a>.
        </p>

        <h2>Results and Impact</h2>
        <p>
            The results of incorporating XeGTAO were nothing short of impressive. When compared to <a
                href="https://github.com/nvpro-samples/gl_ssao" target="_blank" rel="noopener noreferrer"> NVIDIA's old
                HBAO</a>, which I
            had incorporated in my early work with Hazel, XeGTAO outperformed it by a significant margin, with almost a
            little performance decrease. The difference
            was like night and day, with XeGTAO providing a level of realism and flexibility that was simply unmatched
            by HBAO.
        </p>

        <h2>Future Work</h2>
        <p>
            Temporal Anti-Aliasing (TAA) works well with XeGTAO, and it's an area where performance can be improved
            without sacrificing too much quality. I also plan to implement Ray Tracing Ambient Occlusion (RTAO), and
            perhaps even a hybrid of both RTAO and XeGTAO. These enhancements will continue to push the boundaries of
            what's possible with the Beyond engine.
        </p>

        <h2>Conclusion</h2>
        <p>
            In conclusion, the integration of XeGTAO into the Hazel engine has been a resounding success. It has not
            only
            improved the realism and flexibility of the engine but has also paved the way for future enhancements. The
            experience and knowledge gained from this project have been invaluable and will undoubtedly be beneficial in
            my future endeavors. As I continue to explore and implement new features, I am excited about the potential
            of the Hazel engine and look forward to seeing where this journey takes me.
        </p>

        <h2>Images</h2>
        <p>
            Here are some images that demonstrate the results of XeGTAO.<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/GTAO/';

                // Create an array of image file names
                var images = ['2.gif', '3.gif', '4.gif', '5.gif', '6.gif', '7.gif', '8.gif', '9.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/GTAO.html')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('visits').innerText = data.value;
                });
        </script>
    </div>
</body>

</html>