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

<head>
    <title>LTC Area Lights</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>Integration into Tensor</h2>
        <p>
            The journey to integrate Linearly Transformed Cosines (LTC) Area Lights into the Tensor engine, an
            OpenGL-based proprietary engine, was both challenging and rewarding. The main challenge was shadows. After
            implementing LTC Area Lights, I ended up using an option from point and spot light soft shadows, similar to
            Unreal Engine.
            The other challenge allowing textured are lights. It was not easy to allow the use of textures because they
            have to be
            mip-mapped correctly for such a use case.
        </p>

        <h2>Technical Overview</h2>
        <p>
            LTC based lighting is analytical and fast. It allows lighting from different shapes like disks, planes, and
            lines, which are the shapes we have as area lights. This is unique because there's no
            technique that I know of that allows lighting from these shapes without ray tracing or fancy stuff like
            Unreal Engine's Lumen. LTC Area Lights work by transforming a simple distribution (like a clamped cosine)
            into a more
            complex one that can represent a wide variety of shapes. This makes them particularly suitable for
            real-time rendering where performance is critical.
        </p>

        <h2>Results and Impact</h2>
        <p>
            With the implementation of Linearly Transformed Cosines (LTC) for area lights, our rendering capabilities
            were significantly enhanced. A new level of flexibility was introduced, enabling the creation of more
            complex and realistic lighting effects. The addition of textured area lights has expanded the possibilities
            for the user's designs.
        </p>

        <h2>Future Work</h2>
        <p>
            Looking ahead, there are several potential improvements and features to consider. One such feature would be
            to re-implement that in Beyond, with ray traced shadows. It would be easy to implement better shadows than
            point
            light shadows. Also, combining that with path tracing would reduce the noise that is inherent from path
            tracing.
        </p>

        <h2>Conclusion</h2>
        <p>
            In conclusion, the integration of LTC Area Lights into the Tensor 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 Tensor 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 my area lights implementation.<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/Area Lights/';

                // Create an array of image file names
                let images = ['1.gif', '2.gif', '4.gif', '5.png', '6.png', '7.png', '8.png', '9.png'];
                // Define the number of images per row
                const 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/AreaLights.html')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('visits').innerText = data.value;
                });
        </script>
    </div>
</body>

</html>