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

<head>
    <title>Texture Compression</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 support to Beyond Engine</h2>
        <p>
            In the process of enhancing the Beyond engine, I expanded the support for a variety of texture formats in
            the
            Vulkan code. This was a significant undertaking that involved a deep understanding of both the Beyond engine
            and the Vulkan API. I experimented with multiple technologies, including nvtt and KTX, but ultimately, I
            decided to
            use Compressonator. This decision was based on several factors, including the performance, compatibility,
            and the robustness of the Compressonator.
        </p>
        <h2>Technical Overview</h2>
        <p>
            The BCn texture compression method was employed in this project. This method is known for its ability to
            provide high-quality texture compression, which is crucial for rendering detailed and realistic graphics.
            One of the main reasons for choosing this method was its ability to cache compressed textures, which
            significantly optimizes the rendering process. To facilitate this, I utilized the CLI version of
            Compressonator, which allowed for easier parallelization. This was a key factor in improving the efficiency
            of the texture loading process. Furthermore, the DDS textures, which store all the texture mips, are loaded
            directly into the engine, eliminating the need for additional processing on reloading.
        </p>

        <h2>Results and Impact</h2>
        <p>
            The impact of integrating BCn texture compression into the Beyond engine was quite significant. For
            instance,
            scenes that were previously impossible to render properly due to the sheer number of
            4k textures, such as the new Intel Sponza scene, could now be loaded and rendered efficiently. This was a
            major
            achievement, as it demonstrated the engine's ability to handle more complex and detailed scenes, as it
            demonstrated the engine's ability to handle complex and detailed scenes.
            Additionally, the loading times were noticeably improved due to the reduced file sizes and the elimination
            of the need to recreate the mip. This not only makes the engine more efficient but also provides a smoother
            and more responsive user experience.
        </p>

        <h2>Future Work</h2>
        <p>
            Looking ahead, there are several potential improvements and features to consider. One such feature would be
            to allow users to select the formats upon loading a mesh. This would provide greater flexibility and
            customization options for the users. Additionally, I am considering the integration of other features that
            could further enhance the performance and capabilities of the Beyond engine. These could include additional
            texture formats and improved mipmapping techniques.
        </p>

        <h2>Conclusion</h2>
        <p>
            In conclusion, the integration of BCn texture compression into the Beyond engine has proven to be a
            significant enhancement. It has not only improved the engine's ability to handle complex scenes but has also
            optimized the loading times. This project has demonstrated the potential of texture compression technologies
            in improving the performance and capabilities of rendering engines. As I continue to explore and implement
            new features and techniques, I am excited to see what the future holds. The experience and knowledge
            gained from this project will undoubtedly be valuable in my future endeavors.
        </p>

        <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/Compression.html')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('visits').innerText = data.value;
                });
        </script>
    </div>
</body>

</html>