Guilty Gear Xrd shader test

Thanks @neoshaman, the sprite effect looks amazing.

After testing the outline I think I prefer the thin lines so I won’t add line thickness. One thing I was thinking about was that the edges could have a direction and be more detailed than just a line. So you could have a low res mesh and say that the edges should be drawn as fur or hair e.g. Princess Mononoke’s fur cape.

 

That really does sound like it could be awesome and useful. Got any examples of it working like that?

 

https://www.disneyresearch.com/publication/fin-textures-for-real-time-painterly-aesthetics/

 

That's quite nice, @DominoM ! -- I had actually considered doing something almost exactly like that many years ago, but that was back in the N64 days when graphics weren't really decent enough to pull off something like this with a decent framerate, so, naturally, I tabled the idea. Besides, true "shaders" as we know them today weren't really a thing back then anyhow, so it would have been quite a lot of work to begin with. I'm really glad to see somebody actually making it happen for real though!

When I see stuff like this, it reminds me that times are indeed changing in regards to graphics -- and people like us are the pioneers!

With such cool visual technology possible, there's no reason to see the same FPS or MMORPG over and over again. So props to all you guys for forging ahead on the shader front! -- It's an exciting time indeed.

 

Also, talk about some amazing stuff -- this is pretty amazing indeed:

 

Those shaders are incredible, they really look just like a 2d painting. I hope someone releases a game that uses this art style. I was just going to try making quads on the outline edges and map them to some UV’s. Or maybe make a vector art style mesh on the edges. One issue I’d have is on the light/dark color transition which would be a smooth curve. I’d probably need someway to apply a similar fur edge on the transitions. I’m not sure when I’ll start working on it but I’m a bit more motivated after seeing those painted examples.

I also recently found out that you can automatically bake ambient occlusion data to textures or vertex colors in blender.

 

Might be worth looking at Tilt Brush, I'm guessing that'll do something similar with the right data.

 

Watching the "VRtist" video with the Jazza guy drawing the Hulk in 3D with TiltBrush seems like it could get painful fast.

I think drawing on the model's normals (with the computer) is essentially what Disney was doing with Maya -- the strokes were just drawn on top of all but previous strokes and strokes that were behind other strokes were likely given (slightly!) more 'depth' and such so that the shader could sort them out based on angle -- only the most screen-facing 'fins' show at any given moment, and the further they angle away from the camera, the faster they are faded away and discarded. This 'depth' I mention also was likely based around their overall normal angle vs. the screen's angle, a lot like specularity is calculated, and that was what defined the 'fins' that appeared vs. the fins that didn't appear or were to fade away as their angle toward the screen became greater.

Also...

Drawing on the model from various angles (with the stylus I might add) can actually *already* be done in Blender -- if I'm not mistaken -- with the Grease Pencil -- That, imo, would be a better way of getting that painterly / fur data inside Unity -- especially without having to have an expensive VR environment setup.

 

So cool

 

I was trying some more inking tests based this. It's running on the CPU at about 80 fps. Its drawing around 1000 inner lines (blue) and 7500 outer lines (black). I might add a texture for edge stats like enabled or inner edge angles. The inner lines could be baked into keyframes (most of the CPU is processing the inner edges). It should run a lot faster with a compute shader.

Because the edges are just on or off it sometimes snaps when animating. This would probably be less of an issue at 12 fps. It also has a bug in the mesh welding (can see lines on the UV seams). It feels like it might work on a modern PC, I wouldn't try it on mobile. I’m not sure if I’d actually use it in a game.

 

Looks like you've got some badass stuff going on there!! Nice job man!

I wonder if you could manage to tweak the lines to be checked only in certain places by perhaps sampling the vertex color data, which would explicitly turn the edge/line-checking on/off for given areas where light pools (or perhaps, with compute shaders, you would simply pre-process this step on first run, and then set certain edges to be "off" that reference this area data). No idea if this would work with your current setup, but I thought it might be worth a shot to mention at least.

Either way -- keep up the good work! -- I'm really glad to see more work in this area of 2D-looking graphics!


PS: Why not share what you've got here code-wise? -- Maybe one of us can play with it to see if anything can be done to optimize this further? I personally think this area of development could use a few more people involved.

 

Thanks, I was thinking of using vertex data for the edges so if I had two connected verts that are colored black then I might disable the edge. The issue I had was if I had a something like a grid and I wanted to enable the horizontal lines but disable the vertical ones then the data needs to be on the edge rather than using the verts. I was thinking I might paint the data to a UV texture (e.g paint the vertical lines in blender). Then in a preprocessing state I could sample the color between the two verts for each edge.

Sharing the asset sounds like a good idea. After importing the package just run the “Ink” scene. The lines are drawn using GL so they might look a bit jagged. You can increase the anti aliasing in the quality setting for smoother lines (I normally use x4 or x8). If you switch to scene view when the game is running you can see what the lines really look like (only looks correct from camera).

There are three main classes:
Pen: a Monobehaviour to draw GL lines e.g InnerLinesPen and OutterLinesPen game objects. Each pen has its own material / color.
InkData: a ScriptableObject used to create preculated data. This should weld the mesh (doesn’t currently work, can see seams on UV’s) and creates the edges / triangles. An edge is a link between two vertices and has one or two triangles attached. To create a new asset right click the assets folder and select “Create/InkData”. Then assign the assign the mesh and select “Bake Mesh” from the gearbox icon.
Ink: Monobehaviour that uses InkData and Pens to create and draw lines. The SrcRend property links to the skinned mesh and innerEdgeAngle affects the number of inner lines.

Notes:
The skinned meshes have the Example_Normal Extrusion material applied. This is used to make sure the lines are above the mesh. I couldn’t seem to get the z offset working with the GL lines. There also seems to be an issue with fbx scaling so I turned off “use file scale” in the import.


Once the welding is fixed it should create a lot less outlines (black lines) and look something like the image above (old test).

 

Updated version with fixed seams.

 

Nice job @High_Noon -- Looks really great so far!

Is there some way to do a fade between the on/off of the interior lines in the geometry shader? -- That, or perhaps is there a way to thin the lines depending on either the vertex distance from the screen or perhaps the amount of light hitting a particular vertex?

Seems like there should be a way to do some sort of tapering -- at least for the exterior lines -- to make this look even more amazing.

 

Amazing job High Noon!
Sadly the Guilty Gear Xrd Shader seems to be incompatible with the current Unity version.
I already tested it last year and it was working fine, now all I get is a purple color.
Any chance to upgrade the shader to work again? Or is something else the problem?
Keep up the good work.

 

I tried importing the first link "Guilty Gear Xrd shader test.unitypackage" into Unity 2017.3.0f3 (64-bit) for windows and it seems to be ok. Maybe try importing just the package into a new project. If it works then it might be conflicting with a global shader. If it doesn’t then it might be an issue with the graphics card or maybe a non-windows system.

Thanks @awesomedata, tapering the edges would definitely help. After seeing the Dragon Ball FighterZ demo it feels like the standard method that Arc System Works uses gives better results and performance so I probably won’t continue working on this inking project. The other problem with this inking method is that the lines would become really thin on high resolution monitors.

I noticed that Freestyle is open source (used in Blender). I might check it out to see how they handle inking and shading some day.

 

Yeah man -- it's hard to believe THAT is not 2D:

Speaking of the inking method they use -- do you have any info on the technique to tell you how its method is better/more performant? DBZ has always made use of speed lines and inking techniques to make itself look more dynamic -- I wonder how this was approached in this game's case, considering up to 6 characters can be on-screen at once, unlike GGXrd's method, which was admitted to be a bit less performant by the devs themselves. The trick in DBZ seems like a strange mix of shaders+postprocessing FX to me, but I might be wrong. I would guess Blender's inking method might be how they achieved this look to some extent, since Blender's is a bit of a post-processing effect too (if I remember right).

 

Been looking for a cel-shader and this really fits my need, especially the fact that you can choose the color of the shadows (colors near white tend to become grey and changing ambient color will just make everything else the wrong color).

With my very limited photoshop skills I quickly modified Unity-chan

I used colorblendy to choose the right colors for the SSS map. Took the default texture and made it grayscale + mixed with the level to get the inner lines.

 

The Guilty Gear Xrd shader does take directional ligth and receives the external shadows?

I think, that it does not, there is a way to do that?
I do not know much about the programming of shaders

 

Has anyone managed to update this to work with unity 2018? I'm not that good with shaders but I'd love the look that this shader is capable of.

 

It looks like there was a bug in the first shader that might have made it look pink. If anyone has issues with the “Guilty Gear Xrd shader test.unitypackage” on the first page try replacing “GearXStage.shader” with the attached one. I’ve also included a test package for the ToonB shader that includes an outline. Both should work in 2018.

 

sorry to bother you CodeKiwi thank you so much for your GearXStage shader it's just what I'm looking for, but I was wondering if you could make it so the shader doesnt go completely dark when there's no light on the scene , like adding a threshold to how dark it can get overall, I wish I'm not being too hopeful I'd be really nice for a game called VRchat, your shader is the only one who gets the colors right so It would be wonderful

 

That’s odd, when I try disabling the lights it just shows the dark color (ToonB and GearXShader). Maybe compare it with the May sample. Personally I find it a bit flat without lighting, I’d recommend leaving the light on and try swapping the material to a night version.

 

Oh I forgot to reply, I fixed it, indeed I had modified the shader in hopes it would interact with the lightcolor and messed it up

sorry

 

I recently made a skinning method similar to Blenders preserve volume constraint (implementation of "Real-time Skeletal Skinning with Optimized Centers of Rotation" by Disney). It’s available for download here.

One interesting thing I noticed is that the centers could be used with toon normals. I tried a more basic version that isn't based off of the Disney paper. In the sample below each vert just finds the nearest point for each bone (direction). A better method would be to use the nearest point on a line (start / end bone), then it would create a capsule shape for the normals instead of a cylinder. The main benefit is that the normals are always updated instead of being set once e.g. face expressions don't create weird shadows.


I was also checking out the Pixar research site. The “Computing Smooth Surface Contours with Accurate Topology” paper seems to be a better implementation of what I was trying with the inking test. It doesn’t look like it would run in real time but it does reduce the flickering lines. I also found “Effective Toon-Style Rendering Control Using Scalar Fields” interesting and tried implementing it. The demo below doesn’t include line thickness. It’s similar to line detection but instead of using depth and normals it just uses regions and a line thickness map. This allows for inner lines e.g lips have the same normal / depth and also works with intersections. If I was planning to use it I’d probably also add a map to hide lines when facing the camera (mainly for inorganic objects).

http://graphics.pixar.com/library/ToonRendering/paper.pdf

 

Just wow bro, F***ing good!!

 

Hi guys. I just stumbled upon this and super excited at what I see so far! I just had a quick question. Does the shader work on any model if I just download the shader for Unity? Or do I have to do some special things before exporting the FBX model from my 3D software?

Thank you so much for your time!

 

The sample in ToonB.unitypackage should be easy to setup with an existing model. GearXStage.shader matches the games model format and the textures are a bit more difficult to set up (more details can be found in the links on the first page). The main difference is that you might want to simplify the normals before exporting to fbx (similar to the far right image in the previous post).

 

That's fantastic news! Seriously, hat's off to you good Sir-
Would you happen to have a tutorial going over how you changed the normals in Blender before exporting to FBX??
I'm absolutely in love with this style and was extremely worried It wouldn't be possible in Unity lol.

 

I found this tutorial really useful, it also shows why editing the normal is important.

As a quick test you could try the following:

• add mesh / monkey (Enable "Auto smooth" in mesh settings, required for normals)
• add mesh / uv sphere
• select monkey, add data transfer modifier
• source = sphere
• tick the "Face corner data" checkbox
• the monkey normals should look like the spheres
• try different dropdowns next to the "Face corner data" checkbox (I normally use "Nearest Face Interpolated")
• maybe modify the sphere to be roughly closer to the monkey shape

For a real character I split it into parts then make a low res mesh for each part.

 

Super appreciate the awesome share and will begin learning this immediately! I'll share some things I learn from my own tests as figure stuff out if I think it could help anyone. This is incredible work man. Thanks for being so helpful

 

Thanks for the thread. Great info.

Can someone please elaborate on the custom UVs for the inner lines?

How is it achieved?

 

The inner line concept is fairly simple but its a pain to implement so I haven’t tried it on a custom model. If I had a really low res texture e.g. 32x32 then a diagonal line would look bad. However a horizontal or vertical line looks sharp. So inner lines only use horizontal or vertical edges (the attached black and white image is the alpha channel of the ILM texture).The shoe image is an example of the UVs.



As a side note, I saw this on the Unity blog today. The new shader graph looks pretty cool, I should probably try it out someday.

 

Wow thanks for sharing. You're great.

That's really F***ing clever tbh to use only vertical and horizontal lines.

But I'm wondering how does one unwrap it like that. Must be a real pain in the ass.

Also, what about more delicate lines, I mean do they really unwrap any line to be in a square shape including small facial lines like cheekbone pronounce and nose? Crazy.

I've seen the GDC conference but I didn't notice them mentioning how they did some of the ultra dark shadows like under the nose and cavities? Is that just a different base color?

Also what about the eyes? Are the eyes an exception?

Thank you for your guidelines, you're great.

I haven't been this inspired to do 3D work in ages. This is a new challenge that I like.

Hmm, one last question that goes beyond the shader.

So, I saw in the animations they have parts when the eyes literaly change to complete blank circles in the fashion of anime animation.

What's the catch? How do they replace the current eyes mesh with the circle thats blank?

After 10 years of 3D I still find myself asking noob questions...

Edit: I failed to mention I'm a character artist myself so I'm more interested in the modeling/uv side of the work so I can replicate and actually ehance their work. I want to uprez the meshes to about 100k and make for even smoother and flawless anime look.

 

It looks like they do use inner lines for delicate areas. Even for the small lines and curves around the eyes. I hope they had some tools to help because doing it manually would take forever. The nose is a special case and uses a flat black mesh pointing away from the face.


The ultra dark shadows seem to be set in one of the color channels of the ilm texture (can’t remember which layer). An example for May is the armpit area. There was also an odd formula like if the color channel was less than 50% it was an ultra dark area otherwise it was really bright. So it has four color gradients. I’m not sure what the real formula was so I just made it darker or lighter based on the sss texture.

While the outer edges of line eyes do use inner lines the centers of the eyes seem to be from the texture. In Mays case there are a few eyes in the base texture and few more in the decal texture. Some shapes are too complex for inner lines so they just add them to the decal texture.


An extra basic mesh is used when the eyes change to the blank circle shapes. It covers the detailed eyes like a cloth.

It might be interesting to try setting up the inner lines to work like the nose mesh e.g extrude the edges in the direction of the normals. This would also make the lines look thinner/disappear if you look in the same direction as the normal.

 

Thank you this is such great info.

Although the inner lines S*** is kinda disturbing...

I don't think making every inner line as a mesh is the most cost effective way tbh...

Idk, manually unwrapping like that with the Inner lines is not too daunting as long as you can automatically square border unwrap each section.

Basically even without a script you could just make a copy of the mesh, detatch all the parts (for instance as the conference shows, deltoid muscles, biceps, triceps etc) and select the horizontal and vertical borders and squash them and form a square and then just relax the inner polys.

A little bit of drag would be then to manually adjust thickness but on the other hand it's a single days work so it's not that tedious.

Of course some lined are more complex then other as you would potentially have to have the topology follow all the lines, but since the lines mostly follow anatomy either way, just like topology does, I can't see this being too much of an issue.

So I think I'm actually gonna attempt it.

Since you were kind enough to do share all the information. I'll make sure to remember to share progress here if I ever get down to it.

Basically, I wouldn't even be inspired if I didn't think I can do it better than they did, simply by removing the poly limitations and trying to work upon and improve the formula, creating even better renderings.

Cheers.

 

Hey, another thing. With zero coding experience. How easy is it to setup such a shader in Unreal Engine along with all the trickery, vertex paint shadows (I never used vertex paint so I'm clueless to how to even use it like a map??), outline mesh etc...

Cause I'm an Unreal guy mostly, cause I have some limited experience in there. I know these are the unity forums hehe, but I guess it doesn't hurt nobody? Unless there's a strong beef going on lol...

 

This shader originate from unreal, it's very clever but not really fancy technically as it's very art driven, so my guess is easy providing you understand the shader concept behind these.

 

I understand the shader concept but not the coding component as I am not a coder.

But thanks.

 

I'm saying the coding is like minimal at best, it's mostly artistic input.
1. deform mesh depending on camera
2. align texture to Uv to get crisp line
3. bake normal to get the right lighting
4. flipbook with mesh
5. ramp texture for shading
6. potentially some extra line as meshes
7. highlight has meshes

The only coding part is to set up the ramp shader to pickup light, ie like you plug the ndotl output to a sampler and you plug that into the color output.

If you are lazy and don't want code at all:
8. just draw light on a cubemap and use that instead, no need for 5.

 

I’m currently working on a mesh deform modifier (similar to Blenders).

I noticed that the weights used for skinning vertices to the cage mesh can also be used to simplify the normals at runtime e.g. doesn’t cause the issues I was having earlier with baked normals. More details can be found here.

Guilty gear also had a low resolution cage mesh with the character so I think they might have used a similar technique.