More Post FX…

I had a play around with layering images in my post fx materials and applying different LUTs to see what other effects I could get with post processing.

An accident when I was trying to make a pastel LUT made for a really cool black and white noir type look.

highresscreenshot00011highresscreenshot00010highresscreenshot00009highresscreenshot00012

I tried to create a Ukiyo-E type look by layering images into my post fx shader. I didn’t quite get what I was after but created something interesting anyhow! I did like the comic book sort of style I got here.

highresscreenshot00014highresscreenshot00013highresscreenshot00015highresscreenshot00016

I tried to add a blur to this to get a watercolour look, but it didn’t quite go as planned!!

2

 

Toon Shader

Post Fx number 3! A toon shader!

Started this one off by grabbing the diffuse colour of the scene.

1

I then divided the post process output by it to get only the lighting.

2

Clamping that and taking the r channel gave me the lighting in black and white.

3

I used this as the uv input for a texture. At first, I used a simple texture with black at the tottom and white at the top, which made the shadows black and the highlights white.

4

Multiplying this with the diffuse gave us a shadow overlay.

5

Changing the texture’s tiling type and filter to clamp and nearest neighbor brought me closer to the toon look I was after.

89

But the effect was much too dark, so I multiplied the lighting output by 3 to make it lighter.

10

I combined it with the edge detection I setup in the last blog post and played around with brightness.

1215

In the end I settled on this.

14

I wasn’t happy with the weird fuziness I was getting on the edges though. This was to do with the normal map, so I removed the normal map from the wall to get this.

highresscreenshot00005

There’s clearly something funky going on with the normals for the wall, but I’ve left it for now.

Here’s some final shots!

highresscreenshot00004highresscreenshot00007highresscreenshot00003highresscreenshot00006highresscreenshot00002highresscreenshot00005highresscreenshot00004

Edge Detection

highresscreenshot00000

Continuing my post process shader adventures, I decided to look into edge detection. This was a lot more complicated than I anticipated and used a lot of math! I’ve added some of the resources I used in the post.

To do this, I set all of my objects to use custom depth, and for each pixel in the custom depth buffer, compared it to the adjacent pixels. If the weighted average of the pixels multiplied by a kernel is greater than 0, then the pixel is on the edge of an object, so I colour it with a solid colour.

I started by making a material function to get a pixel adjacent to the current pixel. It takes the custom depth buffer and a pixel offset value. Multiplying these together and adding it to the uv of the screen gives us the UV coordinate of the desired pixel. Imputing different pixel offset values will give us different pixels.

kernel

Image by Michael Orzelek

3

To get the depth of the adjacent pixel, we use the pixel depth material function. It takes the UV coord that we got from the adjacent pixel material function and uses that as the UV input to the custom depth. This is clamped to 0-5000 and then divided by 5000, to ensure that we always get a value between 0 and 1.

pixel-depth

getpixel-depth

We get this custom depth for each pixel surrounding our current pixel. Now that we have this, we can calculate which pixels are edges.

To do this we input the depth values of the pixels and the values of a kernel into the ConvoleTex function. I’ve used 3 vector3s to represent the 9 values in the kernel.

convove3

Each pixel value is multiplied by the corresponding value in the kernel and then they are all added together. This gives us one number that is the weighted average of all of the pixels surrounding our current pixel.

convolvr

We do this twice, once for horizonal and once for vertical.

Info on kerenels here.convovle2

The horizontal and vertical values are then turned into a vector2 and we get its length. If the length is greater than 0, set the pixel to be the line colour, otherwise make it the postprocess output.

I’ve added a couple of extra controls on top of this, adding an optional colour multiplier to give the purple look in the first image of the post. I’ve also changed the 0 in the if statement to an editable edge thickness value, to give the user some control over the amount of pixels that are affected.

bring-together

Here’s the shader without the colour multiplier.

4

And here’s it with it!

highresscreenshot00001

Pixel Post FX Shader

I was playing Persona 4 recently and just got to this dungeon:

Persona_4_void_quest_2.png

This gave me an idea for a post fx shader. I imagine the assets for this dungeon were purposely made to look pixelised, but since the rest of the game doesn’t look like that I figured it could be cool to swap styles using the shader.

I made the shader by getting the postion for each pixel on the screen and the multiplying it to scale it up. I floored this to prevent decimal values so that we’d get nice blocky pixels. I then divided this by the amount I multiplied to remap it back to the same uv space.

2

Plugging this into the UV coords of the G-buffer contents gave us this!

highresscreenshot00007

I thought there was something off looking about this image, and I think the problem was that something that low res is unlikley to be handling so many colours.

I added a LUT to my post process volume and created some textures using photoshop’s indexed colour mode. This allowed me to limit the amount of colours in the image.

1

rgbtable16x1_256

Here’s the scene in 256 colours:

highresscreenshot00006

Combining the two we get a pretty nice effect!

highresscreenshot00009

I had a go with pixel scale values of 64, 128 and 256, as well as colour amounts of 8, 16, 128 and 256. Using material instances made this simple to swap in  and out.

rgbtable16x1_128

rgbtable16x1_16

rgbtable16x1_8

highresscreenshot00017highresscreenshot00016highresscreenshot00015highresscreenshot00014highresscreenshot00012highresscreenshot00011highresscreenshot00010highresscreenshot00008

Nucleus – Launcher Tool Finished

I’ve finally finished my launcher tool! It now has support for photoshop and project folder, and I’ve made some nice UI tweaks as well as a lot of bug fixing!

Here’s a video of the tool in action! Excuse the horrible quaility…trying to find a free recorder and editing program that would use the same codec was maddening and I was also full of the cold at the time, so I have a snuffly voice!

Nucleus Project Manager from Amy Stevens on Vimeo.

Photoshop and Folder Support

I added support for opening photoshop and a project folder. The folder was no fuss, but photoshop was a pain!
I really wanted to be able to define a defualt save location for any new file created in photoshop, but couldn’t find a way to do it outside of photoshop. There’s no file I can edit in the same was as 3Ds max. Most suggestions online involved opening a file and saving it or using photoshop actions. Opening a file goes against what I want to do with the tool, and photohop actions are a topic to learn another day.

Hopefully the ability to open the project folder means the user can at least copy the folder location when they first save.

Bug Fixing

Next time I do a script classes and functions will actually be planned…
This whole script was hack on top of hack becuase I didn’t have a defined plan or scope and it caused loads of bugs. A lesson learned!

UI

So I discovered Qt Designer stylesheets…

lol

…and posted this on facebook to annoy everyone I know.

On a more serious note, stylesheets in designer are great to use. I just used the dropdown options here, which don’t offer a great deal of customization, but were enough for my needs.

2

1

I added a nice dark grey colour scheme and an icon, because its not finished until it has an icon! Had some trouble getting this to work until I remembered to include it in my setup file for packaging, oops! The icon could probably be more detailed/interesting but it does its job.

Packaging

This time I wanted to package my project into an .exe that could be run independently of python. To do this I used the cx_Freeze module. I created a setup file that specified which files I’d like included in my build, and then ran:

setup.py build

from the command line, in the scope of the folder that setup.py was in. This was easier than expected, especially considering I’d had problems before trying to use pyinstaller, which seems to be the recommended packaging module.

This made me a lovley wee .exe with a folder that had the json files required for running the program, along with all the associated python modules! Very pleased with this result.