[WIPz / RELz] vtastek's NPR Shaders : III

» Thu Jan 06, 2011 7:41 pm

vtastek's NPR shaders

NPR is Non-photorealistic rendering.

http://en.wikipedia.org/wiki/Non-photorealistic_rendering

I created some NPR shaders and a shader which can create an instant splash screen. As always Enjoy!

Galeries
http://s51.photobucket.com/albums/f386/vtastek/morrowind/Morrowind2009/splashshader/
http://s51.photobucket.com/albums/f386/vtastek/morrowind/Morrowind2009/cel%20shader/

Download:
http://www.4shared.com/file/PSJMARLY/vtasteks_NPR_shader_pack.html

==============================================
vtastek's NPR shader pack

v01 for MGE

by vtastek
===============================================

==============================================
REQUIREMENTS:
==============================================
This requires MGE. Some shaders in the pack can run with old MGE versions but insta! splash needs depthbuffer enabled.

Also insta! splash and painterly needs a background template. You can find a quality example here:
http://szazmyrr.com/mods.html
and here(widescreen!)
http://planetelderscrolls.gamespy.com/View.php?view=Mods.Detail&id=7240

You can provide your own too.

==============================================
ABOUT THIS MOD:
===============================================

Basictoon
This creates basic lines based on an edge detection method and adds it on the original image. You can bind some hotkeys to control mipmaps via MGE. It can look good with a couple of skipped mipmaps.

Insta! Splash
This one uses MGE's depth buffer feature and creates a blend between provided background and Morrowind's render. There are some variables you may want to look at inside the shader. You can set where the effect starts, control blending phase and outline threshold. I recommend using some hotkeys for MGE's zoom function to get the looks. It works best with good lighting.

Painterly
This one creates a soft painting look for Morrowind. There was some issues in dark environments but I fixed it with using MGE's HDR feature. When it is too dark, background power goes to zero. So you won't notice background tile a lot. I will try to make a scrolling tile based on eyevec(eye vector) so it won't repeat itself.

There are no recommended load orders for this shader. Feel free experiment! But I recommend SSAO strongly, it creates the missing shades.

===============================================
INSTALLATION:
===============================================

Shaders are going to
Data Files/shaders/default/

background template goes to
Data Files/Textures/

background tile is named
emptytexscroll.tga
by default inside the shader and both painterly and insta! splash uses the same name. You can edit the names inside the shader.

Warning!
This pack does not contain the background tile image. You have to find one.

===============================================
VERSION HISTORY
===============================================

v01

===============================================
INCOMPATIBILITIES & SAVED GAME WARNINGS:
===============================================

None. Pre MGE 3.8.0 users should look here:
http://mgeshaderlibrary.wikispaces.com/Using+Shaders
at number 6: Special Case

===============================================
CREDITS & USAGE:
===============================================
MGE team, OGE team and Bethesda.
Edge detection from StudioPostEffect
I think I deserve a little note on your splash packages created by this shader.

vt arts & software 2010

===============================================
Screens
===============================================
http://s51.photobucket.com/albums/f386/vtastek/morrowind/Morrowind2009/cel%20shader/
http://s51.photobucket.com/albums/f386/vtastek/morrowind/Morrowind2009/splashshader/

===============================================
BONUS
===============================================
I put a new shader in the pack:
color grading.
It saturates colors towards the most dominant color. It is a natural eye adaptation effect. When our eyes adapts to a colorful scene, most dominant colors start to look out of place, this shader eliminates that problem.

For future:
one thing would be adding depth based edges to the cel shading.
Maybe I can figure out how to do a cube texture that is projected correctly around the player for "painterly". So you won't notice the unmoving background image/tile.

Next level:
real strokes, brushes, smudges... My goal is absolute seamless between human painting/drawing and Morrowind render.

My final target is "what dreams may come".

Even if it doesn't go up to there, I think in the way, I will create some good stuff.

» Thu Jan 06, 2011 8:09 pm

That third shader is epic in the extreme! I love how it makes the game look. I just wish I could use shaders on my machine. I use MGE but if I try to use shaders or distant land my FPS slows to a crawl. Anyway, great work! Maybe I'll get a better machine in the future and be able to use these.

» Thu Jan 06, 2011 8:27 pm

Yeah, the third one rocks !!! I'm waiting for a release to test !!!

» Fri Jan 07, 2011 2:16 am

All three are nice, but my personal favorite is the splash shader. It just looks... really neat. Any situation, boom, instant splash screen =)

» Thu Jan 06, 2011 6:23 pm

The first one isn't too great due to the mipmaps, but without new textures, I guess it's tough to get it right (unless you combine lowish mip-map bias with reducing the amount of colours maybe? Or use a colour palette or something? idk I'm just blurting stuff out here.)
The second one looks useful for making personalised loading screens.

But the third looks brilliant! I'd love to play with that shader.
Real strokes, smudges, that would be great too! Good luck, I hope you achieve your final target.

» Thu Jan 06, 2011 7:17 pm

Don't like the first one...kind of weird. The second one could be really useful for actually making splash screens.

The third one I would actually use...sometimes, at least.

» Fri Jan 07, 2011 2:15 am

The splash shader is just awesome, and i love the painting effect in the third one, very beatiful!

» Fri Jan 07, 2011 4:20 am

I'll be creating lots of splash screens once I get my hands on that shader. :hehe:

» Thu Jan 06, 2011 11:00 pm

That third shader is epic in the extreme! I love how it makes the game look. I just wish I could use shaders on my machine. I use MGE but if I try to use shaders or distant land my FPS slows to a crawl. Anyway, great work! Maybe I'll get a better machine in the future and be able to use these.

You can use painterly and basictoon without distant land. They will work with very old MGE versions too.

The first one isn't too great due to the mipmaps, but without new textures, I guess it's tough to get it right (unless you combine lowish mip-map bias with reducing the amount of colours maybe? Or use a colour palette or something? idk I'm just blurting stuff out here.)
The second one looks useful for making personalised loading screens.

But the third looks brilliant! I'd love to play with that shader.
Real strokes, smudges, that would be great too! Good luck, I hope you achieve your final target.

Yeah, I think if I can do the depth edge method it will look clean. More like borderlandish.

I'll be creating lots of splash screens once I get my hands on that shader. :hehe:

I will get lots of credits then. :chaos:

I finished writing the readme. I am behind some web filter but nothing I can't solve. But after diner. :bolt:

Thanks for all kind comments. I will make sure to release it on PES and nexus so more people will be aware of it. I think people will like the insta! splash a lot. :wink_smile:

After my HDD died, I lost the shaders and I had all three inside one shader which I constantly changed. I improved them but in my case it is very hard to beat my original self.

I hope they look like the screens and even better and you enjoy them. I will make more improvements.

» Thu Jan 06, 2011 3:55 pm

Something I tried some time ago should really make the spash shader really useful!

1*Setup mge to save screenshots in your Splash folder.
2*Setup mge to save screenhots as .DDS
3*Now whenever you save a screenshot you will have it as a loadingscreen =)

And the splash shader makes that all the more enjoyable. I should ask in MGE thread for a function to toggle shaders on and off. Not only the option but single shaders.

» Thu Jan 06, 2011 9:09 pm

Something I tried some time ago should really make the spash shader really useful!

1*Setup mge to save screenshots in your Splash folder.
2*Setup mge to save screenhots as .DDS
3*Now whenever you save a screenshot you will have it as a loadingscreen =)

And the splash shader makes that all the more enjoyable. I should ask in MGE thread for a function to toggle shaders on and off. Not only the option but single shaders.

With mods shaders can be activated and deactivated manually. There are examples. skaeps.mp3 made one. An item in inventory to turn on-off shaders too.
http://www.gamesas.com/index.php?/topic/1082017-general-purpose-shader-script/page__p__15761872__fromsearch__1&#entry15761872

OK, I uploaded the file, editing the first post.

» Fri Jan 07, 2011 3:51 am

Hey vtastek, if you want some inspiration for your painterly shader, you may want to check this VirtualDub video plugin out. It's called http://www.compression.ru/video/cartoonizer/index_en.html but it also has a painting-like setting. It filters any video to look like a painting or cartoon or even pencil drawing. But it can also be used on individual images. And it looks great on large screenshots.

I can make some and upload them if you'd like to seen any.

» Thu Jan 06, 2011 4:39 pm

When I click on your photobucket gallery links, I get a 403 error saying I'm forbidden. Is anyone else getting this? :unsure2:

» Fri Jan 07, 2011 2:40 am

I'm receiving the same thing.

» Thu Jan 06, 2011 9:57 pm

Oh sorry, links fixed now.

@skaeps.mp3,
Now that's nice. But figuring out those stuff will be insane.

These three shaders are my old ones. Let's say from my pre-photoshop days. Now I can do what photoshop can do.(almost) Wait for updates.

I noticed painterly looks like "accented edges" filter. You know what, I created it accidentally. So if I can create that one by accident, I can do others as well.

» Fri Jan 07, 2011 12:55 am

http://i18.photobucket.com/albums/b120/iamerik/MW%20and%20Oblivion/MGEScreenshot134.jpg

More will follow.

» Thu Jan 06, 2011 4:11 pm

That a'int half bad. If you turn the blending distance up way high then only the sky gets the background.

And it's fun trying different background textures. With a flat color, this even works as an odd fog shader!

» Thu Jan 06, 2011 6:15 pm

That a'int half bad. If you turn the blending distance up way high then only the sky gets the background.

And it's fun trying different background textures. With a flat color, this even works as an odd fog shader!

It would be interesting if you could blend the distant land into the actual sky map, perhaps end up with an effect something more like http://arsludica.org/archivio/forum_htm/2006/%5B2006-03-12%5D%5BEmack%5D%20Okami%20&%20Bad%20Day%20LA_files/okami-001.jpg. Which is to say, still have an animated sky rather than a background image.

» Fri Jan 07, 2011 4:27 am

It would be interesting if you could blend the distant land into the actual sky map, perhaps end up with an effect something more like http://arsludica.org/archivio/forum_htm/2006/%5B2006-03-12%5D%5BEmack%5D%20Okami%20&%20Bad%20Day%20LA_files/okami-001.jpg. Which is to say, still have an animated sky rather than a background image.

When vtastek perfects the depth-based toon shading it might be possible to apply it to the landscape in insta!-splash and change the background to blend like painterly. I'm sure that would look 90% like that Okami screenshot. Which would be awesome.

(We sure do seem to link to Okami a lot around here. Too bad I never got to play it. :sadvaultboy: )

» Thu Jan 06, 2011 7:17 pm

When vtastek perfects the depth-based toon shading it might be possible to apply it to the landscape in insta!-splash and change the background to blend like painterly. I'm sure that would look 90% like that Okami screenshot. Which would be awesome.

(We sure do seem to link to Okami a lot around here. Too bad I never got to play it. :sadvaultboy: )

Wonderful game, and absolutely gorgeous to boot. I really think that visual style is effective in Morrowind, sort of masks the archaic nature of the stiff animations which seem much more out of place with a photorealistic approach. My http://i11.photobucket.com/albums/a156/MojoBox/MGEScreenshot44.jpg http://i11.photobucket.com/albums/a156/MojoBox/MGEScreenshot41.jpg at emulating this style are making some small progress, but I'm nothing more than a tinkering when it comes to shaders.

» Thu Jan 06, 2011 9:22 pm

http://i18.photobucket.com/albums/b120/iamerik/MW%20and%20Oblivion/SplashAldRuhn.jpg
http://i18.photobucket.com/albums/b120/iamerik/MW%20and%20Oblivion/SplashGuar.jpg
http://i18.photobucket.com/albums/b120/iamerik/MW%20and%20Oblivion/SplashVivecTemple.jpg
http://i18.photobucket.com/albums/b120/iamerik/MW%20and%20Oblivion/SplashDagothUr.jpg

» Thu Jan 06, 2011 11:48 pm

It would be interesting if you could blend the distant land into the actual sky map, perhaps end up with an effect something more like http://arsludica.org/archivio/forum_htm/2006/%5B2006-03-12%5D%5BEmack%5D%20Okami%20&%20Bad%20Day%20LA_files/okami-001.jpg. Which is to say, still have an animated sky rather than a background image.

I am trying some stuff right now which can make that possible. But progress is slow though. Although if you accept the background tile as sky, I can make it easily. Maybe if we can have skycol in shaders I can add it there too. And if it is a problem I can disable the background tile for the sky.

Wonderful game, and absolutely gorgeous to boot. I really think that visual style is effective in Morrowind, sort of masks the archaic nature of the stiff animations which seem much more out of place with a photorealistic approach. My http://i11.photobucket.com/albums/a156/MojoBox/MGEScreenshot44.jpg http://i11.photobucket.com/albums/a156/MojoBox/MGEScreenshot41.jpg at emulating this style are making some small progress, but I'm nothing more than a tinkering when it comes to shaders.

Those are great, I am trying some depth based stuff right now, but they look nothing like yours. I have two edge detecting method now, but both is 2D. I will make it though, somehow. I think I will try to mix 2D and 3D together.

I have good control on this, if you have any suggestions I can make it happen!

» Thu Jan 06, 2011 11:59 pm

I think I've gone about as far as I can with my limited knowledge. I'm pretty happy with it, but the performance hit is fairly sharp. Never been a big problem for me with Morrowind though. Still probably going to run into issues with fog, but distant terrain looks much better now. I've gone and set the Fog Offset to 0 for all weather conditions myself. EDIT: Oh, and I should add I'm using the Vibrant Morrrowind v4 texture pack.

http://i11.photobucket.com/albums/a156/MojoBox/MGEScreenshot53.jpg
http://i11.photobucket.com/albums/a156/MojoBox/MGEScreenshot54.jpg
http://i11.photobucket.com/albums/a156/MojoBox/MGEScreenshot57.jpg
http://i11.photobucket.com/albums/a156/MojoBox/MGEScreenshot58.jpg

Here are the pertinent details of what I'm using.

Shaders and Load order:

Painterlyv01
knx_SSAO_v09
knx_DOF_v12_pk
basictoonv01
sunshafts_v002a
DX9 HLSL HDR 5

So the basic idea here is to have painterly add the general tone or flavor to the scene, the modified SSAO to apply general cel shading to the scene, the DoF shader is set to keep distant terrain out of focus and to effect the depth based cel shading. The edge detection basictoon shading, however, is not affected by the DoF with this load order, and is tweaked to only show up in areas of high contrast (such as terrain backed by sky), this adds a lot to the hand painted look of the scene I feel. After that is sunshafts and HDR. Sunshafts you can take or leave, but I think a more overblown blooming effect adds a lot to the scene, a more accurate and subtle HDR would be less effective I think.

Here are the pertinent shader tweaks:

Knx_SSAO_V09

Spoiler

#define SM ps_3_0 // Shader model: ps_3_0, ps_2_b, ps_2_a
#define N 16 // Samples: 48, 32, 16, 10, 6. More means precision and performance hit. ps_2_x supports 16 without rotation / 10 with.
#define BLUR // Enable AO blur.
#define ROTATE // Enable random rotation. Generally more precise, but might give noise or other artifacts.
//#define DEBUG // Enable debug mode: AO term only.

static float R = 1.0; // Max ray radius, world units
static float multiplier = 5.0; // Overall strength. 1.0 is the correct physical value
static float occlusion_falloff = 10000.0; // More means less precision, and more strength
static float blur_falloff = 10000.0; // Same for blur
static float blur_radius = 1.0; // In pixels

Note I'm using SM3 for this and have enabled ROTATE. The ray and blur radii are turned way down, and the multiplier up. Falloff is WAY cranked up. I'm still not 100% what those do, but the results generally have seemed better with them cranked.

Painterlyv01

Spoiler

float4 ColorBlend = float4(431,431,431,0.05f);
//first three is line color, last one is thresold

float paintpow = 0.10; //background tile power

Basictoonv01

Spoiler

float4 ColorBlend = float4(431,431,431,1.55f);

» Fri Jan 07, 2011 3:40 am

It looks amazing but load order is overkill. I guess I have to speed things up. One unified shader!

PS. I also use sunshafts over painterly. It looks great.

http://s51.photobucket.com/albums/f386/vtastek/morrowind/Morrowind2010/sc03/?action=view¤t=painterlyw.jpg

» Fri Jan 07, 2011 8:14 am

It looks amazing but load order is overkill. I guess I have to speed things up. One unified shader!

PS. I also use sunshafts over painterly. It looks great.

http://s51.photobucket.com/albums/f386/vtastek/morrowind/Morrowind2010/sc03/?action=view¤t=painterlyw.jpg

Yup! I agree, to both points