Things I've been doing these days...

Theses days I parked Unreal Engine 4 just a while to confront another freaking matter. Maybe this is not really related to videogames but last week I setted up a Linux Server on Digital Ocean.

As I mentioned on a post last month, I obtained my GitHub student pack which includes several goodies for developpers, including 100$ in Digital Ocean which allows you to run SSD server in the cloud.

So...usually I play role game on Sunday, and one thing that was brought into the table was to do organize a game on a Neverwinter Nights server.

Actually, you can host a game on your own computer, but I had some issues opening ports on my router, so I decided that I had to host the game elsewhere...and that's where it came the idea.

I consider myself pretty awkward when tampering with the Linux command prompt, but I managed in the end to set things up.

SSH connect to a server through PuTTY

Best thing of all, Digital Ocean does have an option to make Snapshots. This allows you to save the current status of your server and then restore it, or raise another server from it.
Since Digital Ocean charges you per hour and this server is going to be used for occasional games, this will allow me to only pay for the time I keep my games up.

Now I have decided that a TeamSpeak server would be great so...I think I'm going to spend some time banging keys and doing some SSH.

---

Now, back to the game development theme in Unreal Engine, I recently started working on a pretty basic and simple level which is based on a screenshot I took when I was playing Tales of Graces F on my PS3.

The amarcians ruins in Tales of Graces F (PS3)

Observing the screenshot, the illumination is pretty dull, I will probably work toward another result.

So. right now I started what we call the "Blockout" which is in fact a level made with placeholder and BSP meshes.

In this phase you don't want to work on any detail, and you look to do something which is somehow functional and playable from a game design view. Also this helps to keep things done according to the gametype, which in this case will be a third person game with an isometric like camera.

As seen, I also started to work the lightning. I can tell right now that this scene is going to have many modular meshes.

If the result of this is good enough at the end, I'll showcase it on my portfolio...if not..well..I will simply drop it in the trash bin.

And that's it. Keep your feet warm in these rainy days!

Read More

Jack'O Lanterns

Can you feel it? It's Halloween and is coming! Today I am feeling in the mood to write a themed post on pumpkin carving...but in 3D of course.

So,first off we will need to do a pumpkin model. The good thing about pumpkins is that are pretty easy to model and even if the shape is not perfect, it won't really matter since in reality pumpkins have many shapes. Don't forget to make the small stem on the top.

Pumpkins are just deformed spheres

Because we are working on a very organic 3d piece, I decided to do some workaround on a high res version on Zbrush. Once again, you are free to deform your pumpkin to your liking. There are no written rules on how a pumpkin must be.

My pumpkin after some Zrbrushing. 

After sculpting on Zbrush, you should review the low poly version in Maya and make it its UVs. If you messed the topology with Dynamesh, then you will probably have to do some retopo.
So, now we should be ready to bake our normal map. Nothing weird, I did this on xNormal.
Then as usually, I tweaked my texture on Photoshop.

Because the carvings I'll be doing in this pumpkin are going to be pretty detailed, I decided to do it through texture. You can actually carve the geometry of the mesh using booleans or the split polygon tool in Maya if the carved faced is pretty basic but I wouldn't do it at all if you are planing something complex.

Anyway, I picked 3 random jack'o lanterns images from Google and made 3 masks out of them in Photoshop which, as usually, were merged on a single texture. Place them so they match your UVs.

For the color texture I did something pretty basic. I'm not very good at drawing and painting after all. I did however, include the AO bake on the alpha channel for material shading purposes.

Having finished theses 3 textures and my low poly model, I just imported them on Unreal and worked on my magic material. This is how it looks my network.

Pumpkins do have some light transmission effect just like wax or human flesh, so I decided to make use of the Subsurface Effect (although I didn't test the new subsuface profile option in 4.5).
Also yoy may notice I made use of the NormalFromHeightmap node to do the matching relief for the carving which saved me from making 3 different texture for my normals.
This is the result.

Needless to say that jack'o lanterns are meant do be used in the dark and in conjunction of point lights.

And there is also another option involving the use of a masked material and a two sided material. As you see in image below, the shadow cast by the inner light is pretty awesome and can achieve some cool effect, though have in mind that the inside of the mesh will be visible and a physical light source as a candle should be added. For this one, I decided the SSS was counter-productive

And this is the network for the masked material. Be sure that you checked the "two sided" option or you won't see the inside of your pumpkin!

And this is it. Have a creepy Halloween!

Read More

UV adjusting in materials

Usually, UV's should be fine once they are imported in your engine but sometimes, you realise that UVs are inverted, and sometimes, you can't just go back to Maya/3D Max and fix them.

So..why not adjusting UV's right in your material? That's something you can do replicating this network.

This way you should have almost total control over your UVs in your material instances, though it's always better to have everything well set and done from your 3D program.

And that's it! I just wanted to share this :P

Read More

Cracked wall material

Yesterday, I spent the whole day tampering with some of my assets from my Divinity's Reach Demo on Unreal Engine 4, and I made a very nice material which involves vertex painting and even generating a procedural normal map.
Today, I'm very short on time so I'll explain things quite briefly (Anyway, you may ask me anything on the comments if you ever have any doubt).

First off, this material was aimed to be used on walls of the houses. The problem was that my houses was pretty low poly, that could be good from a performance view, but I was planing to use vertex color and to use that technique you need a mesh well tessellated... So I went to Maya and I rearranged the topology in order to have more vertex. (From 292 tris to 861... I think some of my teachers would kill me for that polycount).
If you want to give it a try, you may u any tessellated mesh (A cube or a plane will do the job).

Once I've got my mesh and textures imported into Unreal, I started tampering with the material... the beginning was just a basic master material like this one.

Though it seem pretty scary and complex at first glance, it is truly very basic network. These are in fact, 2 materials merged in a single one. We are lerping the input for every channel using the red color from the vertex. Also, as an extra and because this is aimed for painting houses, I added a parameter to control the color of the plaster material. This is how it actually looks like.

Right now our material is not bad, in fact, the material I made for my demo in UDK was pretty similar, but if you keep an eye on real world, cracked wall don't have that smooth blend.
So, I launched photoshop and I made 3 difference clouds textures, packed them in a single texture...anyway, I've could have used the mask I made for the sea material but I dind't remember I already made one.

The noise mask texture I've used for blending

Now, after tampering a while with nodes, I managed to create a nice alpha for blending.

Use this as your alpha for every mixing lerp

And this is how my material looked like at this point.

As you see, the blending is way better, but I missed something more and, usually, you would expect that plaster cast some little shadow on the brick (after all, plaster is pretty thick and paint over the bricks).

First I tried to fake the shadow by just offsetting a little my mask and multiply it in the color, but the result was not good at all, so I discarded that. Since this was a gray colored mask, I realised i could use this as a heightmap, and even convert it as normal map.. And I discovered some nice little material functions in Unreal. I was tempted to use the NormalFromHeightmap function but the input was a Texture2D object and not a Float4 as I required. Then I found the NormalFromFunction node which is the same function but it accepted as input 3 Float3. These inputs are in fact the same input but with their UVs off-setted just a little.
This is how I implemented it.

As you see, I have cloned 3 times the code of the alpha mask and then offset the UVs just a little. The result of theses 3 functions was then merged into the NormalFromFunction node, having as a result a cheap, but good enought normal map which will be mixed with the lerped normals. The NormalFromFunction node is actually a material function shipped with UE4. You may as well check how it works inside by just double clicking on it, and even modify it (at your own risk).

NormalFromHeightmap and NormalFromFunction can be both used to generate normals maps on the fly

I know the material network is pretty messy, but when you have so many wires and nodes, it's almost impossible to don't have wires crossing each other.

And this is ending the result.

The alpha mask can also be used as a heightmap, and hence, with a little work you may also add some parallax or tessellation to your material. I didn't do it this time but that's something you may do it on your own.

Read More

Parallax Oclusion Mapping

Yesterday I dropped myself on the Unreal Engine forums and while digging on the rendering section, found this post related to attempting to reproduce Parallax Occlusion Mapping (POM for short) in UE4.

In UDK, we had access to Light vector in our materials and we could reproduce the effect following a guide we had in UDK Gems but right now, Light vector is a node that can only be used with light function materials, and the node tree described in that guide is pretty much a huge mess in my opinion.

Fortunately, we can reproduce the effect more easily in UE4 making use of the "Custom" node which allow us to put some HLSL code in our material.

But today I wanted also, not only share Ehamloptiran findings, but also make a little comparative on materials bump effects. So let's take a look!

As shown in the image, the first one is a simple flat material. No normal map added, just plain diffuse shading. Simple but very cheap. Very commonly used on mobile games.

Then we got the same material with a normal map. This is pretty much your average material.

Now we have our normal material but this time it does include an iterative parallax effect on it's UV. This is a very cheap and simple kind of parallax effect and I described how to do it some days ago. 

This is POM, as you may see, the effect it's quite impressive at first glance, but I has some inconvenients. First off, this material is very expensive and can heavily hit your performance.

There is also issues when approaching UV seams and not to mention the texture shimmering effect when looking the surface from an oblique angle which can only be solved increasing the samples.

And now we have tessellation which in fact it does bump the detail of your heightmap using real geometry. This method also has it's downside and it is very dependant on the topology of the mesh it is applied. In theses sample cubes, we only have 12 triangles which is not enough to achieve a good tessellation. Also, there are some issues related to cracks on the seams of the mesh (even when using the crack free option in the material), but that can be solved using color per vertex to adjust the strenght of tessellation in critical areas.

Regarding to materials, here are the networks to achieve theses effects:

Iterative parallax

You can make more iterations if you want but I think 4 is more than enough to achieve the effect.

Tessellated material

With this one I'm using also controlling tessellation over distance. We don't need over 20k triangles for a mesh that's is gonna be seen from far away so with this technique we can lerp the tessellation intensity over distance. I did also a cheap contrast of my heightmap.

Parallax Occlusion Mapping

Here we must do some HLSL coding using the"Custom" node.

As said before, the "POM" node it's in fact a Custom HLSL node its output must be set as CMOT Float 2

This is the code:

float CurrRayHeight = 1.0;
float2 CurrOffset = float2( 0, 0 );
float2 LastOffset = float2( 0, 0 );

float LastSampledHeight = 1;
float CurrSampledHeight = 1;

int CurrSample = 0;

while ( CurrSample < (int) InNumSamples )
{
float4 Temp = Material.Texture2D_0.SampleGrad( Material.Texture2D_0Sampler, InTexCoord + CurrOffset, InDX, InDY );
CurrSampledHeight = ( ( Temp.r * InChannelMask.r ) + ( Temp.g * InChannelMask.g ) + ( Temp.b * InChannelMask.b ) + ( Temp.a * InChannelMaskAlpha ) );

if ( CurrSampledHeight > CurrRayHeight )
{
float Delta1 = CurrSampledHeight - CurrRayHeight;
float Delta2 = ( CurrRayHeight + InStepSize ) - LastSampledHeight;

float Ratio = Delta1/( Delta1 + Delta2 );

CurrOffset = ( Ratio ) * LastOffset + ( 1.0 - Ratio ) * CurrOffset;

CurrSample = InNumSamples + 1;
}
else
{
CurrSample++;

CurrRayHeight -= InStepSize;

LastOffset = CurrOffset;
CurrOffset += InStepSize * InMaxOffset;

LastSampledHeight = CurrSampledHeight;
}
}
return CurrOffset;

And theses are the input variables:

1. InNumSamples

2. InStepSize

3. InTexCoord

4. InDX

5. InDY

6. NormalHeightMap (Not actually used, just there to ensure texture doesn't get optimized out)

7. InMaxOffset

8. InChannelMask

9. InChannelMaskAlpha (added because the custom node converts vector parameter to float3 instead of float4)

Also we do have a small but not less important not for the Silhouette clipping. Output is CMOT Float 2 too.

Code:

clip( InFinalCoords );
clip( 1.0f - InFinalCoords );

return InFinalCoords;

Input:

1. InFinalCoords

As well as Iterative parallax, this is an UV trick, so you have to the output to the UV from the different texture you will be using.

NOTE: Make sure that the height map is the first texture you drop into the material graph as the above custom code block accesses that texture directly via Material.Texture2D_0 and Material.Texture2D_0Sampler If you don't drop it in first, it will be referencing the wrong texture. To fix that you will need to change those two values to whichever one is assigned to the heightmap.

And this is it. Hope you found this article useful!

Read More

Updating to Unreal Engine 4.5

A couple days ago, Epic Games released the 4.5 version of UE which features several goodies. So, I decided to update.

This time I decided to use the installer version of the editor instead of compiling my UE4 from the source code in GitHub. The first thing that catch my attention even without looking at the release notes was that the whole editor was now translated to Spanish (which is my mother language if you didn't notice).

This translation in my opinion was barely unnecessary besides, some technical terms as "Specular" or "Displacement" shouldn't be translated at all in my opinion. ("Desplazamiento del mundo" sounds terrible even in spanish).

So right after loading a random project, and writing theses words, I have setted it back to English..
Also it seems there are some new built-in tutorials, which explains the very basic aspects of UE4 in a very visual way, although they don't teach you anything in depth.

One of the big features of this version are the new UIWidget which were available as an experimental feature in the precedent version. It seems that Epic won't be currently suporting Scaleform as they did in UE3 anymore, because it's quite obvious they are looking to do their own GUI designer tools in their Engine.

Though the new UIWidgets are awesome compared to the Slate UI which required to do draws through C++ code, it's still pretty raw and incomplete. Right now there are some UI plugins, both paid and free, that are still better solutions for UI design in my opinion. (Special mention to VaQuoleUI which allow you to do whole UI items done in HTML5 with blueprint support, though it needs to be updated for 4.5)

There is also a new raytraced shadows feature which IMHO is the the best feature of this patch. Ray trace shadow are actually dynamic shadow that are,in fact, faster and better than cascade shadows. Just test it out in your project and see the difference by yourself.
The bad side of this is that this kind of shadows needs to do build some mesh distance fields in order to work.,,which may take some time (but not as much as baking your scene lightning with Lightmass)

Alongside in the the rendering field, we also have SSSS (Screen SubSurface Scattering) which I haven't tested out yet but seems pretty good.

There are lots of mini fixes and changes but that's something you should check by yourself instead of reading all this mumbo jumbo from a random spanish guy like me :P.

As a wish list, Epic should address some rendering issues regarding their translucent material shader which have actually issues with specular reflections as we checked while attempting to do a water material.

Read More

Making a Landscape with World Machine (Part 2)

On this post I will continue what we started on the first part, and I will assume that you have already done everything to the last step where you got 5 files (though we will be using only 4 of them).

But before building our landscape, we should have a very basic landscape material. Just check the node schema below.

From that material I created also a material instance which will save me some shader compiling time. (be warned, making changes to landscape materials is very time consuming, so try to use material instance for tweaking and testing colors)

Right now, I'm not really sure about what textures I will be using with this terrain so I've chosen some funny colors just to easily locate the weightmaps in my landscape

So, let's open a new map and create a new landscape. When prompted about input parameters, we will just import our heightmap (the .r16 we produced with World Machine). Regarding to parameters we will just hit the "Fit To Data" button and we should modify the Z value in the scale so it matches the max height of our landscape (in this example, the height of the original "draft" landscape was 300 so I will choose that value).

Also make sure that our recently landscape material instance is set. This will pop the Layer subpanel where they will ask us for input weight maps (The 3 slope mask we rendered as .raw file) as well to create a layer information for each channel. We are using weight-blended normal layers.

Note that we don't have a mask for color4 layer and I did this on purpose because I wanted an extra empty layer for painting purposes

Once everything is set, just click import, wait until unreal it's done and check the result. In my case, I've got something like this:

Now, because I made a material instance I can quickly change the funny colors to something more coherent.

In some landscape, a plain color diffuse should suffice if it's going to be seen from very far away but I believe we all want to give it some texture, so let's go back to our landscape master material and tweak it!

Almost everything is parametrized so we can change things on the fly. Also I kept the vector colors to tint the input textures. Notice we are also controlling the tilling of the textures through a parameter

Don't forget about normal maps and roughness of each of your layers. Be warned that there is cap on how many textures you may have on a single material so try to don't use mask textures if you can use parameters instead.

And we are almost done, now you may invest some time tweaking in your own the landscape you actually have. Since I wanted from the very beginning to make an island, this is what I've got so far spending an hour of sculpting, texturing and tweaking my scene. Please note I have only used the sample textures shipped with a default project template and the result has been greatly improved through post-processing.

I've also used the sea material I described some days ago with some tweaks related to vertex painting. I may talk about that some other day, but for now, I think we are done with this tutorial.

Thanks for reading this so far ^^

Read More