A new version of HLSLexplorer, 1.01 is done and available to download from here (Google Drive). The executable is working on Windows 10 and was built against Windows 10 SDK 10.0.17763.0.
If you would to like to play with source, it's on GitHub.
Let's go briefly through the most important changes:
1) Recent Files List
Quite self-explanatory. I've been wasting too much time because of looking for a particular files so I did recent files list. Saved as recent.dat in HLSLexplorer's main directory. So far there is a limit of 8 files, but you can easily change it in source. There is also a fancy separator and an option to clear recents (no, it doesn't ask you to confirm).
2) Go to Line
I've always liked Go To Line dialog from Visual Studio. Simple and very intuitive. So, I did the same for HLSLexplorer, because why not. It's useful for shaders since compiler usually gives you hints which lines are worth to check for problems. Just click on text window which is of your interest (HLSL or any of three assembly outputs) and Go to Line will know where to look. Of course, Ctrl+G works.
3) D3D12 backend for rendering
HLSLexplorer has just received support for D3D12 renderer backend. Well, finally, one could say.
It doesn't mean that D3D11 is gone. Because what real-time Pixel Shader preview does is just rendering of fullscreen triangle, I came up with simple IRenderer interface which nicely wraps all needed functionality.
Despite D3D12 backend is still really basic, I still found it fun to write because I have started learning D3D12 not so long ago, so that was a good opportunity to learn something new.
The new backend currently works with 2D textures only and is very error-prone. F7 opens PS preview with D3D11, F8 opens one with D3D12.
D3D12 renderer supports pixel shaders for both Shader Model 5.0 and 6.0+. So yeah, you can now visualize wave intrinsics! 😎
4) Minor stuff
I got rid of all DirectXTK stuff since everything I needed was just loading textures.
Luckily, there are a standalone versions of DDSTextureLoader and WICTextureLoader, for both D3D11 and D3D12. You can grab them from DirectXTex github.
Real-Time Pixel Shader Preview informs now which API is used and what is the resolution of backbuffer.
Conclusion
These are the most important changes I introduced in the latest version of HLSLexplorer.
Feedback is always welcome :)
Fog can be implemented in many ways. However, times when we could apply simple distance-based fog and be happy with it are gone forever (probably). Living in a land of programmable shaders opened us doors to new, crazy, but most importantly - physically-correct and visually plausible solutions.
Current trend in fog rendering is probably based on compute shaders (see this presentation by Bartłomiej Wroński for more details).
Despite the mentioned presentation has appeared in 2014 and The Witcher 3 was released in 2015/2016 - fog in the last part of Geralt's adventures is completely screen-based, as typical postprocess.
Before we start our 15th reverse engineering session in this series, I must say that I've been trying to understand the fog in The Witcher 3 at least 5 times in the last year - and each time I failed. The assembly, as you'll see in a mnute is quite complex which makes process of creating readable HLSL fog shader I won't be ashamed of almost impossible.
However, I managed to found in the internet a fog shader which almost immediately caught my attention by similarity to The Witcher 3 in terms of variable names and general instructions order. That shader was not *exactly* the same as in the game so I had to work on it a little bit. My point is, most of HLSL you'll see here is not created/reversed by me with two exceptions. Keep that in mind.
Here is assembly of pixel shader for fog - it's worth noticing it's the same for whole game (2015 base and both DLCs):
This shader is quite long, let's be honest. Probably too long for effective reverse engineering process ;)
Here is an example sunset scene with fog:
Let's take a look at inputs:
In terms of textures, we have depth buffer, Ambient Occlusion and HDR color buffer
Input depth buffer
Input ambient occlusion
Input HDR color buffer
... and the result of fog shader in this scene looks like this:
HDR texture after applying fog
Depth buffer is used to reconstruct world position. This is a common pattern in shaders of The Witcher 3.
Having ambient occlusion data (if enabled) allows us to darken fog. Very smart idea, seems maybe obvious but I've never thinked of it in that way. I'll go back to this aspect later.
The shader begins with determining if pixel is not on sky. In case when pixel lies on sky (depth == 1.0) - shader returns black color. If a pixel is on scene (depth < 1.0), we reconstruct world position using depth buffer (lines 7-11) and process with calculation of fog.
The fog pass takes place shortly after deferred shading process. You can see that some of forward-pass specific elements are missing yet. In this particular scene, deferred light volumes were applied and, after that, we rendered hair/face/eyes of Geralt.
The first thing to know about fog in The Witcher 3 is that it consists of two parts: "fog color" and "aerial color".
For each part, there are 3 colors provided: front, middle and back. So we have in constant buffer data such as "FogColorFront", "FogColorMiddle", "AerialColorBack" etc. See the inputs:
Before calculating final colors, we need to calculate some vectors and dot products. Shader has access to pixel's world position, camera position (cb12[0].xyz) and fog/light direction (cb12[38].xyz). This allows us to calculate dot product between view vector and fog direction.
This code block clearly gives us notion where the heck that 0.002 and -0.300 come from. As you can see, dot product between view and light vectors is responsible for choice between 'front' and 'back' colors. Clever!
Here is a visualization of final gradient (_dd).
Caculating of aerial/fog influence is much more complicated, though. As you can see, we have more parameters than just rgb colors. They include e.g. density of scene. We use ray marching (16 steps, that's why the loop can be unrolled) to determine amount of fog and scale factor:
Having a [camera--->world] vector, we can divide all its components by 16 - this will be our ray marching step. As you can see below, only .z component (height) is considered in caluclations (curr_pos_z_step).
You can read more about raymarched fog, for instance, here.
From what I managed to understand this looks like a double override of fog color and influence:
For most of the time, there is only one override (cb12_v192.x is 0.0) but in this particular case - its value is ~0.22, so we perform second override.
Maybe this scene is not the best example because there is no detail at the distant island. Anyway, let's take a look at constant buffer which is used for adjusting ambient occlusion value:
We start by loading AO from texture, and then we perform max instruction. In this scene cb3_v1.x is really high (0.96888) which pretty makes our AO very, very subtle.
The next portion of code calculates distance between camera and pixels' world position.
I believe the code sometimes speak for itself, so see HLSL which performs most of this adjusting:
The calculated camera-world distance is used for linstep function. We know this function already - it appeared in cirrus clouds shader from The Witcher 3.
As you can see, in constant buffer we have start/end distance values for AO. The output from linstep affects strength of AO (also from cbuffer) - and strength affects output value of AO.
A quick example: A pixel is far away, let's say the distance is equal to 500.
linstep returns 1.0;
aoStrength is equal to aoStrengthEnd;
This results in returning AO which is about 77% (end strength) of input value.
The input AO for this function was previously max-ed.
Combining all this together
Once we have color and influence for both fog color and aerial color, it's time for final combine.
We start by attenuation of influence using adjusted AO:
...
FogResult fog = CalculateFog( worldPos, CameraPosition, fogStart, ao, false );
// Apply AO to influence
fog.paramsFog.w *= ao;
fog.paramsAerial.w *= ao;
// Mix fog with scene color
outColor = ApplyFog(fog, colorHDR);
Okay, the whole magic happens in ApplyFog function:
The last step is combining the intermediate result with fog color:
And that's all :)
Some debug screenshots:
Aerial influence
Aerial color
Fog influence
Fog color
Final scene without fog at all
Final scene with aerial fog only
Final scene - main fog only
Final scene with all fog - again, but for easier comparison
Summary
I believe you can get the most out of it if you take a look at the shader - it's here
I'm happy to say that this shader is exactly the same as original one - which makes me really happy :)
In general, final result strongly depends of values passed to shade This is not a "magic" solution which gives perfect color output but rather requires a lot of iterations and tweaking by artists to make the final result look decent. I think this can be long process, but once you do it, the final result is really convincing - just like this sunset scene. Sky shader from The Witcher 3 also uses these fog calculations in order to make smooth color transition around horizon. However, for sky shader a different set of density coefficients is provided.
As a reminder - most of the shader (except of adjusting AO and overriding) was not created/reversed by me. All kudos and praises go to CD PROJEKT RED. Please support them, they are doing great job.
When it comes to being outdoor, sky is one of these aspects which decide if the world in a game is believable. Think about that for a while - sky literally takes, let's say, 40-50% of whole screen for most of the time. Sky is a lot more than just nice gradient. We have stars, the Sun, the Moon and, finally, clouds.
While the current trend apparently is rendering clouds in volumetric way using raymarching (see this one), clouds in The Witcher 3 are completely textures-based. I have been looking at them since some time already but, obviously, things are more complicated than I initially expected. If you have been following the series you know that there are differences between "Blood and Wine" addon and the rest. And guess what - there are some changes in terms of clouds in B&W too.
There are a few layers of clouds in The Witcher 3. Depending of current weather, we can have only cirrus clouds, altocumulus, maybe a few from stratus family (during storm, for instance). Or, what the heck, we can have nothing at all.
Some layers vary in terms of input textures and shaders used to render them. This affects their complexity and length of pixel shader assembly (obviously).
Despite all this diversity, there are some common patterns we can observe in clouds rendering of The Witcher 3. First of all, they are all rendered in forward pass which is absolutely the right choice. All of them use blending (see below). This way it's much easier to control how particular layer covers sky - alpha value from pixel shader affects it.
What's more interesting, some layers are rendered twice with the same settings.
After an evaluation I picked up the shortest shader I could find - in order to (1) have the largest probability of completely reverse engineering of it, (2) to be able to understand all aspect of it.
I'll take a closer look at cirrus clouds from The Witcher 3: Blood and Wine.
Here is an example frame:
Before rendering
After first rendering pass
After second rendering pass
In this particular frame cirrus clouds are the first layer being rendered. As you can see, it's rendered twice which increases its intensity.
Geometry and vertex shader
Before pixel shader part, a short paragraph about geometry and vertex shader used. The mesh for clouds representation is something similar to typical skydome:
All vertices are contained in [0-1] range, so in order to make the mesh centered around (0,0,0) point, scale+bias is used before worldViewProj transform (we already know this pattern from previous parts of this series). For clouds the mesh is largely stretched along XY plane (Z is up) to cover more than view frustum, the result is as follows:
Apart from that, the mesh has normals and tangents vectors. The vertex shader calculates also bitangent vector by cross product - all three are outputted in normalized form. Moreover, there is per-vertex fog calculation (color and intensity).
In terms of input, there are two tiled textures. One of them contains normal map (xyz channels) and cloud shape (a channel). The second one is noise for shape perturbations.
Normal map (c) CD Projekt Red
Cloud shape (c) CD Projekt Red
Noise texture (c) CD Projekt Red
The main constant buffer with clouds parameters is cb4. For this frame their values are:
Apart from that, there are other values used from other cbuffers. Don't worry, we'll get through these ones as well.
Z-Inverted sunlight direction
The first thing which happens in the shader is calculation of normalized, Z-inverted direction of sunlight:
As I mentioned earlier, Z is up-axis while cb0[9] is sunlight direction. This vector goes into the Sun - this is important! You can check this by writing simple compute shader which performs simple NdotL and inject it to deferred shading pass :)
Sampling the clouds texture
The next step is to calculate texcoords to sample "clouds" texture, sample it, unpack normal vector and normalize it.
Let's go through this slowly.
In order to have a motion of clouds, we need elapsed time in seconds ( cb[0].x ) multipiled by speed factor which affects how fast clouds are moving on the sky ( cb4[5].xy ).
UVs are stretched on skydome geoometry I was talking before, we also need texture scaling coefficients which affect size of clouds ( cb4[4].xy ).
Final formula is: samplingUV = Input.TextureUV * textureScale + time * speedMultiplier;
After sampling of all 4 channels we have normal map (rgb channels) and cloud shape (a channel).
To unpack normal map from [0; 1] to [-1; 1] range, we use the following formula:
unpackedNormal = (packedNormal - 0.5) * 2.0;
We could also use this one: unpackedNormal = packedNormal * 2.0 - 1.0;
And finally we normalize the unpacked normal vector.
Normal mapping
Having normal, tangent and bitangent vectors from vertex shader and normal vector from normal map we perform normal mapping the usual way.
Here is the visualization of NdotL in considered frame:
This (saturated) dot product is used to interpolate between minIntensity and maxIntensity:
This way parts of clouds which are more exposed to sunlight will be brighter.
// Calculate cosine between normal and up-inv lightdir
float NdotL = saturate( dot(invertedSunlightDir, finalNormal) );
// Param 1, line 19, r0.x
float intensity1 = lerp( param1Min, param1Max, NdotL );
Highlight intensity (2)
There is one more factor which affects the intensity of clouds.
Clouds which exist on the section of sky where Sun in present should be more highlighted. To do that, we calculate a gradient based on XY plane.
This gradient is used to lerp between min/max values, similar fashion as in (1) part.
So in theory we could request darkening clouds which are on opposite side of the Sun but in this particular frame it does not happen because param2Min and param2Max ( cb4[0].x and cb4[1].x, respectively) are both set to 1.0f.
At the very end we multiply both intensities and raise it to power of 2.2.
Clouds color
Calculating color of clouds starts by having two values from constant buffer which indicate color of clouds near the Sun and clouds on the opposite side of the Sky. They are lerped with highlightedSkySection.
Then, the result is multiplied by finalIntensity.
And at the end, the result is mixed with fog (it was calculated in the vertex shader for sake of performance).
Woah, what we have here??
cb[7].x and cb[8].x have values of 2000.0 and 7000.0, respectively.
It turns out this is use of a function called linstep.
It takes three parameters: min/max which are range, and v which is value.
So the way it works is if v is within [min-max] range it returns a linear interpolation between [0.0 - 1.0]. On the other hand, if v is out of bounds, linstep returns 0.0 or 1.0.
So it's quite similar to smoothstep from HLSL except in this case a linear interpolation is performed instead of Hermite one.
Linstep is not present in HLSL, but it's very useful. Really worth to have it in your toolbox.
// linstep:
//
// Returns a linear interpolation between 0 and 1 if t is in the range [min, max]
// if "v" is <= min, the output is 0
// if "v" i >= max, the output is 1
float linstep( float min, float max, float v )
{
return saturate( (v - min) / (max - min) );
}
Returning to The Witcher 3:
Once we have deducted this factor which indicates how far the particular piece of the sky is from Geralt we use it to attenuate clouds intensity:
cloudShape is .a channel from the first texture while closeCloudsHidingFactor is a value from constant buffer which controls how visible are clouds above Geralt's head. In every frame I tested this was set to 0.0 which is equal to no clouds. With distanceAttenuation getting closer to 1.0 (distance from camera to skydome increases) clouds are more and more visible.
Sampling noise texture
For a noise texture calculating of sampling coordinates is the same as for the clouds texture except there is other set of textureScale and speedMultiplier for it.
Of course to sample all these texture a sampler withwrap addressing mode is used.
48: mul r1.xy, cb0[0].xxxx, cb4[11].xyxx
49: mad r1.xy, v1.xyxx, cb4[10].xyxx, r1.xyxx
50: sample_indexable(texture2d)(float,float,float,float) r1.x, r1.xyxx, t1.xyzw, s0
// Calc sampling coords for noise
float2 noiseTextureUV = Texcoords * textureScaleNoise + elapsedTime * speedFactorsNoise;
// Sample texture and get data from it
float noiseTextureValue = texture1.Sample( sampler0, noiseTextureUV ).x;
Getting all this together
Once we have a noise value, we have to combine it with cloudShape.
I had some problems with understanding these lines with "param2.w" (which is always 1.0) and noiseMult (was set to 5.0, it's from cbuffer).
Anyway, what's important here is the final value generalCloudsVisibility which affects how clouds are visible.
Take a look at final noise value as well. Output color is cloudsColor multiplied by the final noise which is also output at alpha channel.
51: mad r1.x, r1.x, cb4[12].x, -cb4[12].x
52: mad_sat r1.x, cb4[12].x, v2.w, r1.x
53: mul r0.w, r0.w, r1.x
54: mul_sat r0.w, r0.w, cb4[6].x
55: mul o0.xyz, r0.wwww, r0.xyzx
56: mov o0.w, r0.w
57: ret
// Sample noise texture and get data from it
float noiseTextureValue = texture1.Sample( sampler0, noiseTextureUV ).x;
noiseTextureValue = noiseTextureValue * noiseMult - noiseMult;
float noiseValue = saturate( noiseMult * Input.param2.w + noiseTextureValue);
noiseValue *= cloudShape;
float finalNoise = saturate( noiseValue * generalCloudsVisibility);
return float4( cloudsColor*finalNoise, finalNoise );
Summary
So here we are at the end. The final result looks really convincing.
Time for a comparison. My shader - left, original one - right:
This is the last part of reverse engineering witcher senses effect from The Witcher 3: Wild Hunt.
Quick look on what we have now: in the first part full-screen intensity map was generated which tells how visible effect will be depending on distance. In the second part I investigated "outline map" in more detail which is responsible for outline and "moving" look of the final effect.
We have arrived to the last stop. We need to combine this all together! The last pass is fullscreen quad. Inputs are: color buffer, outline map and intensity map.
Before:
After:
And a video (once again) to show how the effect is applied:
As you can see, besides applying outline to objects which Geralt can see/hear, a fisheye effect is applied to whole screen and whole screen (corners espiecially) is getting greyish to feel like real monster hunter in action.
// *** Inputs
// * Zoom amount, always 1
float zoomAmount = cb3_v1.x;
// Another value which affect fisheye effect
// but always set to float2(1.0, 1.0).
float2 amount = cb0_v2.zw;
// Elapsed time in seconds
float time = cb0_v0.x;
// Colors of witcher senses
float3 colorInteresting = cb3_v5.rgb;
float3 colorTraces = cb3_v4.rgb;
// Was always set to float2(0.0, 0.0).
// Setting this to higher values
// makes "grey corners" effect weaker.
float2 offset = cb3_v2.xy;
// Dimensions of fullscreen
float2 texSize = cb0_v2.xy;
float2 invTexSize = cb0_v1.zw;
// Main value which causes fisheye effect [0-1]
const float fisheyeAmount = saturate( cb3_v6.x );
The main value responsible for amount of the effect is fisheyeAmount. I guess it rises gradually from 0.0 to 1.0 once Geralt is starting to use his senses. Rest of values are rather constant but I guess some of them are different if user disables fisheye effect in gameplay options (I haven't checked it).
The first thing which happens in the shader is calculating mask responsible for grey corners:
Then dot product is calculated as dot(uv4, uv4), which yields a mask:
which is used to multiply with aforementioned texcoords:
Important: In upper left corner (black pixels) values are negative. The reason why they are represented as black (0.0) is limited precision of R11G11B10_FLOAT format. There is no sign bit there so we cannot store negative values.
Later an attenuation factor is calculated (As I mentioned before, fisheyeAmount changes from 0.0 to 1.0).
Later we have a clamp (max/min) and one multiplication.
This way an offset was calculated. To calculate final uv which will be used to sample color texture we just subtract:
float2 colorUV = mainUv - offset;
Sampling with colorUV input color texture, we get distorted image around corners:
Outlines
The next step is to sample outline map to find outlines. This is quite easy, at first we find texcoords to sample interesting objects' outline, then the same for traces:
It's worth to notice that we only sample .x channel from outline map and only upper squares of it are considered.
Movement
To make a movement of traces with time quite a similar trick is used as it was with drunk effect. A unit circle is introduced and we sample 8 times both outline map for interesting objects and traces as well as color texture.
Note that we divided found outlines by 8.0 just a moment ago.
Because we are in texture coordinates space [0-1]2 having circle radius = 1 to circle around particular pixel would give us unacceptable artifacts:
So, before going further let's find out how the radius is calculated. To do that, we have to go back to missed assembly lines 15-21. A small problem with calculation of this radius is that its calculation is scattered within shader (probably clever shader compiler optimizations or so). So, there is one part (15-21) and second one (41-42):
As you can see we consider only texels from [0.00 - 0.03] near every surface, sum their values up, multiply by 20 and saturate. Here is how it looks just after lines 15-21:
And just after line 41:
Then at line 42 we multiply above by 0.03, which is circle radius for whole screen. As you can see, the radius is getting smaller near the edges of screen.
Having that, we can take a look at assembly resposible for movement:
Let's take a moment to stop here. At line 40 we have time factor - simply elapsedTime * 0.1. At line 43 we have buffer for color texture fetched inside loop.
r0.x (lines 41-42) is radius of circle as we know it now. r4.x (line 44) is outline of interesting objects, r4.y (line 45) - outline of traces (divided previously by 8!) and r4.z (line 46) - loop counter.
As one can expect, loop has 8 iterations. We start by calculating angle in radians with i * PI_4 which gives 2*PI - full cycle. Angle is perturbed with time.
Using sincos we determine point of sampling (unit circle) and we adjust the radius using multiplication (line 54).
After that we circle around a pixel and sample outlines and color. After the loop we will have average values (thanks to dividing by 8) of outlines and color.
float timeParam = time * 0.1;
// adjust circle radius
circle_radius = 1.0 - circle_radius;
circle_radius *= 0.03;
float3 color_circle_main = float3(0.0, 0.0, 0.0);
[loop]
for (int i=0; 8 > i; i++)
{
// full 2*PI = 360 angles cycle
const float angleRadians = (float) i * PI_4 - timeParam;
// unit circle
float2 unitCircle;
sincos(angleRadians, unitCircle.y, unitCircle.x); // unitCircle.x = cos, unitCircle.y = sin
// adjust radius
unitCircle *= circle_radius;
// * base texcoords (circle) - note we also scale radius here by 8
// * probably because of dimensions of outline map.
// line 55
float2 uv_outline_base = colorUV + unitCircle / 8.0;
// * interesting objects (circle)
float2 uv_outline_interesting_circle = uv_outline_base * 0.5;
float outline_interesting_circle = texture2.Sample( sampler2, uv_outline_interesting_circle ).x;
outlineInteresting += outline_interesting_circle / 8.0;
// * traces (circle)
float2 uv_outline_traces_circle = uv_outline_base * 0.5 + float2(0.5, 0.0);
float outline_traces_circle = texture2.Sample( sampler2, uv_outline_traces_circle ).x;
outlineTraces += outline_traces_circle / 8.0;
// * sample color texture (zooming effect) with perturbationfloat2 uv_color_circle = colorUV + unitCircle * offsetUV;
float3 color_circle = texture0.Sample( sampler0, uv_color_circle ).rgb;
color_circle_main += color_circle / 8.0;
}
Sampling of color is quite similar, but to base colorUV we add offset multiplied by "unit" circle.
Intensities
After the loop we sample intensity map and adjust final intensities (because intensity map has no idea about outlines):
Then we have two interpolations. The first one combines gray color with "circled one" using the first mask I described - so the corners are grey. Additionally there is 0.6 factor which desaturates final image:
The second one combines the first color with the above one using fisheyeAmount. That means, the screen is getting progressively darker (thanks to 0.6 multiplication above) and more gray around corner! Genius.
HLSL:
// * Determine main color.
// (1) At first, combine "circled" color with gray one.
// Now we have have greyish corners here.
float3 mainColor = lerp( color_greyish, color_circle_main, mask_gray_corners ) * 0.6;
// (2) Then mix "regular" color with the above.
// Please note this operation makes corners gradually gray (because fisheyeAmount rises from 0 to 1)
// and gradually darker (because of 0.6 multiplier).
mainColor = lerp( color, mainColor, fisheyeAmount );
Now we can move to outlining objects.
Colors (red and yellow) are taken from constant buffer.
The full shader is available here.
Comparison of my (left) and original (right) shaders:
If you have come this far, congratulations. Feel free to comment.
I hope you enjoyed this mini-series! In "witcher senses" mechanics there is a lot of brilliant ideas and final result is really convincing.
Thank you very much for reading!
PS. A decent part of this mini-series was done with HighContrast in background :)
