Frictional Game Wiki

<h3>Rendering</h3> <div class="level3"> </div> <h4>Environment Particles</h4> <div class="level4"> </div> <h5>Overview</h5> <div class="level5"> <p> Environment particles is a way of adding a uniform volume of particles that cover an entire world in the engine. It is useful for things like rain, snow and water particles. They way it works is the engine keeps track of a single volume that is then tiled across the entire map. Think of this volume just like a texture that tiles across a large 2D plane. When each particle is reaches the edge of the tiled volume, it wraps a around, thus forming a seamless pattern of particles across the world. When rendered the engine only renders a volume-sized (in our texture analogy, the size a single texture takes up on the plane) at a certain distance from the player. </p> <p> <a href="/lib/exe/fetch.php?media=hpl3:engine:envparticles.jpg" class="media" title="hpl3:engine:envparticles.jpg"><img src="/lib/exe/fetch.php?media=hpl3:engine:envparticles.jpg" class="mediacenter" alt="" /></a> </p> <p> This volume is a chunk of the entire tiled volume so as the camera moves around in the environment. This chunk can then be rendered several times, each time with a randomized offset to positions and rotations, in order to create a dense collection of particles. All this is done on the GPU and is really fast. There is no problem with having the basic volume filled with 1000 particles, and then have 10 iterations, giving a total of 10k particles. The main bottle neck is probably overdraw, so the feature is best suited for smaller particles that do not cover much of the screen (and seldom cover each other). </p> </div> <h5>Settings</h5> <div class="level5"> <p> <b>ParticleNum</b><br/> The number of particles in side the volume. </p> <p> <b>BoxSize</b><br/> The sized of the tiled volume containing the particles. </p> <p> <b>SubDivUV</b><br/> The number of sub textures inside the texture for the particles. 2×2 means a that 4 sub textures are randomized between all particles. </p> <p> <b>ParticleSize</b><br/> The size of the particles. Remember not to make them too large if many are required. </p> <p> <b>AffectedByLight</b><br/> If the particles should be affected by light in the scene. The way this works is that 3 light probes (one close to the camera, 2 further away) gather light-amount from lights that intersect with them. These three values are then interpolated between for each light. It is not perfect, but does a decent job. </p> <p> <b>BoxDistance</b><br/> The distance from the player at which the volume is rendered. </p> <p> <b>FadeInStart</b>, <b>FadeInEnd</b>, <b>FadeOutStart</b>, <b>FadeOutEnd</b><br/> Parameters for how the particles in the rendered volume fade in out. All distant are measured as z-distance from camera. </p> <p> <b>IterationNum</b><br/> The number of particles that If it has a fraction (eg 13.45), the fractional part (eg 0.45) determines the alpha of the last iteration. (to allows fading iterations) </p> <p> <b>Color</b><br/> The color the particles are modulated by. </p> <p> <b>GravityVelocity</b>, <b>WindVelocity</b><br/> Two different velocity values for each of the particles. </p> <p> <b>RotateVelocity</b><br/> The speed at which the particles rotate around the center of the volume. </p> <p> <b>GravitySpeedRandomAmount</b>, <b>WindSpeedRandomAmount</b>, <b>WindDirectionRandomAmount</b>,<b>RotateSpeedRandomAmount</b><br/> The random variations are added to any iterations after the first! Valid values for all amounts are 0 - 1 (can be others, but not recommended).<br/> What it does it that any subsequent iterations will have the vector updated like: vector + vector*random amount. So if the vector is (0,1,0.1) and if the random amount is 0.1, then any subsequent iterations will have values between (0, 0.9, 0.09) - (0, 1.1, 0.11). Wind direction random is a bit different, what is does is that it rotates the vector (around all axes) by around amount. Wind random amount of 1 means, it can rotate into any direction of a sphere, 0.5 means half a sphere, 0.25, quarter of a sphere and so on.<br/> Also note that the random values are psuedo-random, this means that they do not change depending on play through, but they are always they same. So if it looks like something in the editor, the random distribution will look exactly the same when you view it later in the game. </p> <p> <b>RotateSpeedRandomBothDirs</b><br/> If the rotations can go the opposite direction too. </p> </div> <h4>Lens Flares</h4> <div class="level4"> </div> <h5>Overview</h5> <div class="level5"> <p> Lens flares are a bright spot that appear at the center of a strong light source.<br/> Lens flares are created by light entering through a camera objective and reflecting multiple times off the surface of the numerous lenses inside it, creating several recognizable artifacts. </p> {{vimeo>12744935?medium}} </div> <h5>Flare Types</h5> <div class="level5"> <p> <a href="/lib/exe/detail.php?id=hpl3%3Aengine%3Arendering&media=hpl3:engine:lens_flares.png" class="media" title="hpl3:engine:lens_flares.png"><img src="/lib/exe/fetch.php?media=hpl3:engine:lens_flares.png" class="media" alt="" /></a><br/> Each lens flare consists of a few different kind of flare types that can be active at the same time. </p> <p> <b>Flare</b><br/> A normal flare that rotates slightly depending on its position on the screen.<br/> </p> <p> <b>Anamorphic flare</b><br/> A flare that stretches in either horizontal or vertical direction. The anamorphic flare stretches out more the closer it gets to the edge of the screen.<br/> <b>Multi Iris</b><br/> A line of small iris shaped artifacts stretching toward and away from center of the screen. The brightness/size/sub-texture of each individual iris is randomly determined by the seed of the flare. </p> </div> <h5>Flare Type Settings</h5> <div class="level5"> <p> <b>Material</b><br/> The material of the flare type. Additive blend and depth test disabled are recommended for best result.<br/> <b>Color</b><br/> <b>Size</b><br/> The size of the flare type. A value of 1.0 means that it covers the whole screen. </p> </div> <h5>General Settings</h5> <div class="level5"> <p> <b>Outer Field of View</b><br/> The angle in degrees of which the flare should be visible. The brightness fades from 0-100% between Outer and Inner Field of View.<br/> <b>Inner Field of View</b><br/> The angle in degrees of which the flare should have full brightness.<br/> <b>Min Range</b><br/> The minimum range for when the lens flare is visible. A value of -1 means that the camera can never be to close.<br/> <b>Max Range</b><br/> The maximum range for when the lens flare is visible. A value of -1 means that the lens flare has an unlimited range.<br/> <b>Size change based on distance</b><br/> A real value between 0-1 that determines how much the screen size of the lens flare should change the further away it gets. A value of 0 means that the flare always has same size on the screen.<br/> </p> </div> <h5>Glare Settings</h5> <div class="level5"> <p> Lens flares can be used to blind the camera. Either if the camera is looking directly at the lens flare or if the lens flare is pointed toward the camera.<br/> </p> <p> <b>Glare Brightness</b><br/> How much the camera will be blinded.<br/> <b>Glare Stare At</b><br/> How blinded the camera will be by looking directly at the lens flare.<br/> <b>Glare Field of View</b><br/> The angle in degrees of which the lens flare should blind the camera. The camera will be more blinded the more the lens flare pointed at the camera.<br/> <b>Glare Range</b><br/> How close the lens flare has to be to blind the camera. The glare brightness fades out between the minimum and maximum value. A value of -1 means unlimited range.<br/> </p> </div> <h5>Multi Iris Settings</h5> <div class="level5"> <p> <b>Mul MultiIris with Glare</b><br/> Toggles whether the strength of the Multi Iris line should be affected by the glare amount.<br/> <b>MultiIris Count</b><br/> The number of irises in the Multi Iris line.<br/> <b>MultiIris texture atlas grid</b><br/> The material for the Multi Iris line can be a texture atlas with many small sub-textures on it. The texture grid selects how many sub-textures there are and how they are divided on the texture atlas. A texture with the size 128×128 and a sub-texture size of 64×64 would have a value of (2,2).<br/> <a href="/lib/exe/detail.php?id=hpl3%3Aengine%3Arendering&media=hpl3:engine:multi_iris.png" class="media" title="hpl3:engine:multi_iris.png"><img src="/lib/exe/fetch.php?media=hpl3:engine:multi_iris.png" class="media" alt="" /></a> </p> </div> <h5>Occlusion Settings</h5> <div class="level5"> <p> <b>Shrink when Occluded</b><br/> Toggles whether the lens flare should shrink or fade out when it gets occluded.<br/> <b>Source Size</b><br/> 3D Vector storing the size of the occluder for the lens flare. Will be displayed as a green wireframe box.<br/> <b>Use parent mesh for occlusion</b><br/> Uses the mesh of the parent instead of the Source Size box as an occluder. </p> </div> <h4>Gamma Correction</h4> <div class="level4"> </div> <h5>Overview</h5> <div class="level5"> <p> There are two types of gamma correction. The first one makes sure that the image is displayed correctly on a computer screen. The luminance of a computer monitor is not linear, to compensate this gamma correction is applied to each pixel. This is done by adjusting the curve of the image to make all the pixels brighter, the shadows get affected the most and the highlights the least. When the image gets displayed on the monitor the inverse curve is applied and all the pixels are displayed at their original luminance. This is something that is done automatically by digital cameras and applications like Photoshop. <br/> <a href="/lib/exe/detail.php?id=hpl3%3Aengine%3Arendering&media=hpl3:engine:gammalines-small.png" class="media" title="hpl3:engine:gammalines-small.png"><img src="/lib/exe/fetch.php?w=200&tok=06553d&media=hpl3:engine:gammalines-small.png" class="media" alt="" width="200" /></a> </p> <p> The second type of gamma correction makes sure that all light calculations are perform in linear-space. Since textures created in Photoshop are saved in gamma space they need to be converted to linear-space before lighting is applied to them. This is done by applying the inverse curve that the monitor uses and then multiplying it with the color and brightness of the light source. <br/> </p> </div> <h5>Links</h5> <div class="level5"> <p> <a href="http://filmicgames.com/archives/32" class="urlextern" title="http://filmicgames.com/archives/32" rel="nofollow">What is Gamma?</a> <a href="http://filmicgames.com/archives/299" class="urlextern" title="http://filmicgames.com/archives/299" rel="nofollow">Linear-Space Lighting</a> <a href="http://filmicgames.com/archives/581" class="urlextern" title="http://filmicgames.com/archives/581" rel="nofollow">Gamma Correction and Gamma Correction</a> </p> </div> <h4>HDR Rendering</h4> <div class="level4"> </div> <h5>Overview</h5> <div class="level5"> <p> A normal computer monitor can display display colors in the range of (0-255) per color channel. This adds up to around 16.77 million unique colors.<br/> With HDR Rendering the number of colors per channel is increased to 65565. This is increases the precision and quality of dark/grey tones and it also gives the ability to have colors that are brighter than the monitor can display.<br/> Having colors that are brighter then what the monitor can display would be a waste. A technique called Tone Mapping is applied to the high precision color to covert it to a range between (0-255) so that the monitor can display it.<br/> </p> <p> All light have a brightness setting so that they can be brighter then 1. The overall range of the brightness of a level should be around (0-10) for best result. Before HDR was implemented it was a in the range of (0-1). You can think of light brightness as light bulb energy. A brightness of 6 = 60 W, 4 = 40W. </p> </div> <h5>Tone Mapping</h5> <div class="level5"> <p> Tone Mapping is a technique to convert colors from high precsion to colors visible on the monitor. The algorithm starts by scaling the luminance of the image by the exposure of the camera, making the whole image darker or brighter. It then uses a function to map data in the domain of (0-Unlimited) to values between (0-1). The function used in the engine is called called Uncharted Tone Mapping, from the game Uncharted 2. It increases the contrast of the image by making the dark colors darker and smoothing out the highlights. After that all colors are scaled by a white point, clamping all colors above the white point to 1. </p> </div> <h5>Variables</h5> <div class="level5"> <p> <b>MiddleGrey</b> | A real value that sets what should be considered the middle grey value.<br/> <b>Exposure</b> | The total light that is allowed through the camera, increasing this value makes the image brighter. In the range of -10 to +10.<br/> <b>WhitePoint</b> | A real value that sets which value that should be considered the brightest.<br/> </p> </div> <h4>Exposure Area</h4> <div class="level4"> </div> <h5>Overview</h5> <div class="level5"> <p> A area that changes the tone mapping parameters when entered. Used to simulate automatic correction of exposure that occurs when eyes get used to bright/dim lit environments. </p> </div> <h5>Variables</h5> <div class="level5"> <p> <b>Position</b> | The world position of the trigger area.<br/> <b>Size</b> | The size of the area that triggers the change.<br/> <b>Exposure</b> | The total light that is allowed through the camera, increasing this value makes the image brighter. In the range of -10 to +10.<br/> <b>WhitePoint</b> | A real value that sets which value that should be considered the brightest.<br/> <b>TransitionTime</b> | The time it takes for the new exposure to apply. <br/> </p> </div> <h4>Color Grading</h4> <div class="level4"> </div> <h5>Overview</h5> <div class="level5"> <p> Color grading is a way to map the color of a pixel to another color. This can be used to change the brightness, contrast, hue, saturation, … of a whole image.<br/> It is possible to smoothly fade between two different grading templates.<br/> It uses a small 3D texture with a color as input and another color as output.<br/> <a href="/lib/exe/detail.php?id=hpl3%3Aengine%3Arendering&media=hpl3:engine:grading.jpg" class="media" title="hpl3:engine:grading.jpg"><img src="/lib/exe/fetch.php?media=hpl3:engine:grading.jpg" class="mediacenter" alt="" /></a> </p> </div> <h5>Creation Guide</h5> <div class="level5"> <p> <b>Requirements</b> </p> <ul> <li class="level1"> Photoshop</li> <li class="level1"> <a href="http://developer.nvidia.com/nvidia-texture-tools-adobe-photoshop" class="urlextern" title="http://developer.nvidia.com/nvidia-texture-tools-adobe-photoshop" rel="nofollow">NVIDIA Texture Tooels for Adobe Photoshop</a></li> </ul> <p> <b>Setup</b> </p> <ol> <li class="level1"> Take a screenshot of the game with color grading disabled</li> <li class="level1"> Open the screenshot in Photoshop</li> <li class="level1"> Drag and drop the default grading texture on the canvas (redist/core/textures/grading_default.dds) or (<a href="/lib/exe/fetch.php?media=hpl3:engine:grading_default.zip" class="media mediafile mf_zip" title="hpl3:engine:grading_default.zip (6.9 KB)">Default Grading Texture</a>)</li> <li class="level1"> Place the color strip anywhere in the image</li> <li class="level1"> Flatten the image to merge all the layers</li> <li class="level1"> Select "Image > Mode > 16 Bits/Channel" in the top menu</li> </ol> <p> <b>Adjustments</b> </p> <ul> <li class="level1"> Use any of the options in "Image > Adjustments"</li> <li class="level1"> These can be used to change the brightness, saturation, contrast and so on</li> <li class="level1"> Any changes you see on the image in Photoshop will carry over to the game</li> </ul> <p> <a href="/lib/exe/detail.php?id=hpl3%3Aengine%3Arendering&media=hpl3:engine:adjustments.jpg" class="media" title="hpl3:engine:adjustments.jpg"><img src="/lib/exe/fetch.php?w=200&tok=dc9075&media=hpl3:engine:adjustments.jpg" class="media" alt="" width="200" /></a> </p> <p> <b>Layers</b> </p> <ul> <li class="level1"> It is also possible to use the any of the layer blend modes</li> <li class="level1"> There are two kinds of layers allowed:</li> </ul> <ol> <li class="level1"> Solid color</li> <li class="level1"> Dupilcate of the first layer</li> </ol> <ul> <li class="level1"> It is possible to duplicate the first layer and make adjustments to it and then blend it</li> <li class="level1"> The use of Layer Masks is allowed as long as they are generated from the image and not hand painted</li> </ul> <p> <a href="/lib/exe/detail.php?id=hpl3%3Aengine%3Arendering&media=hpl3:engine:layers.jpg" class="media" title="hpl3:engine:layers.jpg"><img src="/lib/exe/fetch.php?w=200&tok=9067a1&media=hpl3:engine:layers.jpg" class="media" alt="" width="200" /></a> </p> <p> <b>Saving</b> </p> <ol> <li class="level1"> Crop the color strip from the canvas, make sure the resulting image is 256×16 px</li> <li class="level1"> Select "Save As…" and set the format as "D3D/DDS"/".dds" and save it in the folder "redist/textures/colorgrading/"</li> <li class="level1"> In the DDS format settings select "8.8.8 RGB 24 bit | unsigned", "Volume Texture", "No MIP maps"</li> </ol> <p> <a href="/lib/exe/detail.php?id=hpl3%3Aengine%3Arendering&media=hpl3:engine:dds_format.jpg" class="media" title="hpl3:engine:dds_format.jpg"><img src="/lib/exe/fetch.php?media=hpl3:engine:dds_format.jpg" class="media" title="dds_format.jpg" alt="dds_format.jpg" /></a> <br/> <a href="/lib/exe/detail.php?id=hpl3%3Aengine%3Arendering&media=hpl3:engine:crop.jpg" class="media" title="hpl3:engine:crop.jpg"><img src="/lib/exe/fetch.php?w=400&tok=035310&media=hpl3:engine:crop.jpg" class="media" alt="" width="400" /></a> </p> </div> <h4>Billboard Group</h4> <div class="level4"> </div> <h5>Overview</h5> <div class="level5"> <p> A group with multiple billboards. Batching them together and rendering them at the same time.<br/> All the billboards in a group must have the same material, but all other parameters can be different.<br/> Alpha sorting is performed internally within the group. But alpha sorting with external billboards and billboard groups is performed as usual. Because of this the billboards in agroup should not be to spread out, a maximum radius of 5-10m is recommended.<br/> When selected the Billboard Group will show the combinded bounding volume of all the billboards. </p> </div> <h5>Settings</h5> <div class="level5"> <p> <b>Material</b> | The material which will be used to render all the billboards in the group.<br/> </p> </div> <h4>Liquid Trickle</h4> <div class="level4"> </div> <h5>Overview</h5> <div class="level5"> <p> A shader effect to simulate liquid spreading out over an object. The amount of liquid is controlled by a texture and a variable called LiquidAmount. The variable can be set via scripting or be updated automatically over time. The texture is used to mask out where the liquid can spread and in which order it spreads, it is also used to determine how the liquid fades away. </p> </div> <h5>Texture</h5> <div class="level5"> <p> To create a liquid texture map two color channels must be used. The red channel is a gradient mask that controls where the liquid spreads and the order of the spread. The brighter the pixel is the earlier it is covered in liquid. If the pixel is set to (0,0,0) the liquid will be completely masked. The green channel is used to determine in which order the liquid will fade out. Fading out can be turned off in the material editor. </p> <p> <a href="/lib/exe/detail.php?id=hpl3%3Aengine%3Arendering&media=hpl3:engine:fade_in_out.jpg" class="media" title="hpl3:engine:fade_in_out.jpg"><img src="/lib/exe/fetch.php?media=hpl3:engine:fade_in_out.jpg" class="mediacenter" alt="" /></a> </p> <p> When saving the texture it should be exported as a compressed 3dc dds. If the quality for the texture is not good enough then the texture can be saved as a tga, for this to work the red channel has to be copied in to the alpha channel and the green channel to the blue channel. </p> </div> <h5>Scripting</h5> <div class="level5"> <p> For some effects the liquid amount can be controlled automatically by the time. But scripting can be used to create some other interesting effects. One effect could be to set the LiquidAmount variable to correspond to how much of an object is below the water surface and then slowly lower the LiquidAmount to simulate it drying. Scripting can also be used for showing blood when a character is hurt or if oil starts leaking when triggering a trap. <br/> When a material should work with scripting it is a good idea to set the LiquidTrickleFadeIn parameter to 1 so that the LiquidAmount variable works as percentage instead of time. </p> </div>