-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathRendering.html
1 lines (1 loc) · 6.25 KB
/
Rendering.html
1
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"><title>dagmar_website</title><link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Archivo+Black"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Armata"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="assets/css/styles.min.css"></head><body style="color: rgb(33,37,41);"><section class="d-flex d-sm-flex d-md-flex d-lg-flex d-xl-flex justify-content-center justify-content-sm-center justify-content-md-center justify-content-lg-center" style="width: 100%;height: auto;background: #252424;color: rgb(33, 37, 41);padding-bottom: 10px;min-height: 100vh;margin-bottom: 0px;"><div class="d-sm-flex d-md-flex flex-column align-items-sm-center justify-content-md-center justify-content-xl-start detail_page" style="background: rgb(210,208,208);padding-bottom: 0px;"><header class="d-flex d-sm-flex d-xl-flex justify-content-center justify-content-sm-center justify-content-xl-center align-items-xl-center" style="width: 100%;background: rgba(255,255,255,0);height: auto;position: relative;padding-top: 12px;"><h1 class="d-md-flex justify-content-md-center" style="font-size: 62px;">Rendering</h1></header><div class="d-flex d-sm-flex d-md-flex d-xl-flex flex-column align-items-center align-items-sm-center align-items-md-center justify-content-xl-start align-items-xl-center" style="width: 100%;padding-top: 10px;height: auto;padding-bottom: 20px;"><div class="d-sm-flex d-xl-flex flex-column justify-content-sm-center justify-content-xl-center align-items-xl-center" style="width: 90%;height: auto;padding-top: 29px;"><p class="text-justify" style="width: 100%;margin-bottom: 0px;"><strong>Rendering System</strong><br>Our game engine is a modern, very fast and cache-optimized application. The _Rendering System_ is in charge of all the drawing commands sent to the GPU, being a core system in our application. The main API used for rendering is OpenGL 4.5.<br>Our rendering system contains a directed-acyclic render graph structure in which the render-passes are enqueued and ordered based on their dependencies. It is currently implemented linearly and it represents a very useful addition for a possible future integration of latest-gen APIs such as Vulkan, DirectX 12 and Metal 2, being helpful especially for synchronization purposes. However, in our circumstances, the render graph helps us in determining the correct order in which the scene needs to be rendered.<br>Each render-pass has the possibility of en-queuing multiple subcommands dynamically. Our rendering abstraction layer can be extended to incorporate specific commands for newer graphics APIs. <br></p><div><img src="assets/img/ShaderGraph0.png"><img src="assets/img/ShaderGraph1.png"></div><p>Each rendering feature is enabled only when needed and thus, we remove the need to use branching in our main rendering loop.<br><br>For example, when a feature is toggled in the editor, a command will be sent to the rendering system to toggle that specific feature/pass. An example would be if we try to render a bloom post-processing effect. Usually, one might have to do the following: check if the bloom effect is enabled, and if it does, render it, which is generally slow because the condition is evaluated in each render-loop. On the other hand, in our project, we enqueue a render command to draw the required bloom post-processing effect only when that is enabled by the user. In that way, we enqueue a full pass/sub-pass to be executed in the current render loop, so that we do not have to evaluate the condition for each drawn frame.<br><br>As expected, the rendering process became very simple, since the main loop contains only the execution of the render graph's nodes.<br><br><strong>Shader Permutations & Hot Reloading</strong><br>We created a system that allows us to change shaders in real-time, without the need of restarting the engine every-time something happens. This dramatically improves the user experience, allowing the users to see the graphics changes in real-time.<br><br>Moreover, features from such shaders can be changed at runtime via our shader permutation mechanism. We insert specific keywords into the shaders that require multiple features, which can be enabled in real-time from our engine.<br><br><strong>Real-time Rendering Techniques</strong><br>Our team has dedicated their efforts in ensuring that the game engine runs at a highly-interactive speed, such that the user's possibilities are not restrained.<br><br>We have implemented multiple real-time rendering techniques such as: Shadow Mapping, Post-Processing Effects, Illuminance Model, as well as different rendering modes.<br><br>In terms of shadow mapping and lighting techniques, we have added real-time directional lights, spot lights, and point lights. The world around them is affected by their color, intensity and it is shadowed accordingly.<br><br>We have implemented a dynamic post-process stack consisting of the following effects: Fog, Sharpen, Blur, Tone Mapping, Chromatic Aberration, Pixelize, Dilation, Bloom. With performance in mind, we have used simple, yet, fast shaders that allow us to create such effects rapidly. For example, the Bloom effect uses the Dual Filter technique introduced by Arm at Siggraph 2015.<br><br>Our engine is capable of rendering both in forward rendering and in deferred rendering. The latter is sometimes faster when we deal with multiple lights as the number of calculations per pixel is generally lower than in the forward rendering. The well-architected rendering system allows for a fast change between the rendering modes, changeable from the editor as well.<br></p></div></div></div></section><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script></body></html>