CrossHatch Post Processing Filter – Let’s go manga!

Home Forum Development User Code & Projects CrossHatch Post Processing Filter – Let’s go manga!

This topic contains 17 replies, has 5 voices, and was last updated by  nehon 3 years, 7 months ago.

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #19116
    +5

    baalgarnaal
    31p
    Participant

    Hey folks!

    I’m not sure wether this post belongs here or in the contributers forum, but as I do not identify myself as a contributer yet (not one in italic anyway) I decided to go with the user code forum.

    I have been interested in the general idea of shaders for a while now but never dared to try writing them myself. Through some other post on the forum here I stumbled upon this and truly, I love the idea of games that look like they were drawn while actually being 3D. As there was an example attached I decided to give this thing a shot and now, 5 hours later, I finished my first shader, and I still can’t believe how easy that went :)
    Anyhow, to show the results I got (yes, I implemented it in jME3 right away, how cool is that?), here are some pics:


    Anime image on a box with black lines


    Same anime image with colors leaking through


    My avatar with different color settings for both lines and background


    An image of a test game I was making with an early version of the filter applied

    I think that when applied correctly with a nice cartoonedge filter and some anime style models we could very well create an anime style drawn effect, as shown in the first 2 pictures.As I doubt I will use this shader much myself, I sincerely hope this shader will be included in the jME packages as part of the standard library so it is of use to someone ;)

    Please test this shader on any system you have and report whether it works, I had 0,0 experience writing these things until this afternoon and it all seems so logical, I can’t believe it’s that simple… I’m sure I must have made ahuge mistake, just need to find it yet :P

    The files I created:

    CrossHatchFilter.java

    CrossHatch.jm3d CrossHatch15.frag CrossHatch.frag

    Update: Added lineThickness option and now updates shader after initialization wehn changes setters are used

    #128508

    Normen Hansen
    2778p
    Keymaster

    Hey, great work :) The advertising talk about “so easy to use shaders in jme3 that you can learn them in the time you save applying them to your models” seems to be true eh? ;)

    #128509

    baalgarnaal
    31p
    Participant

    Well, I believe I got that advertisement somehow although I have no clue where :) But yeah, it appears it was true.

    Anyhow, a friend of mine just suggested I should allow for thicker lines, already found a way to do that easily, I’ll update the code tomorrow :)

    I frigging love this,

    #128510

    Erlend Sogge Heggen
    501p
    Keymaster

    Wow this is brilliant, thanks for sharing! This is the perfect way to get away with fairly simple art assets without affecting overall presentation. Actually, this reminds me a great deal of a game design doc I once typed up. Maybe I’ll dig it up and put it out here.

    Alright, I found an old draft of the game, “Black Matters”
    https://docs.google.com/document/d/1EE0H43XaJFXIPxxe8JaAfo0GufrxiWIdVc8tf59j-lE/edit?hl=en#

    I dare say I’m a much more accomplished design doc writer today ^^ Yet I always liked this idea. If anyone could be interested in prototyping the concept, using techniques like the ones demonstrated above, I’d be happy to flesh out the design.

    #128511

    nehon
    1851p
    Keymaster

    ooooh Nice!!
    I like Filter contribution.
    If you have some feedback on the Filter implementation (was it easy to implement your own?, easy to understand?, etc…) , i’m eager to hear it.

    A remark though.
    In your Filter you set the parameters to the material in the initFilter, which is good practice. But you need to set them in the setters too or changing the filter’s parameters in the main loop of the game won’t have any effect.

    Nice job, let me know when you consider it finished, i’ll add it to the core.
    Thanks

    #128512

    baalgarnaal
    31p
    Participant

    @erlend_sh
    Getting rid of the necessity of good art assets was exactly one of the reasons I liked this filter, so many people get stuck there :P I think it would be fun making games without textures, just colors and mostly simple open gl lighting would do using this kind of techniques, perhaps combined with some extra shadow shaders. I just read through that game design doc, not sure what to expect of that game but it seems like an original idea :P Might be fun to see some sort of demo of it, and I’d love to see this filter put to work. ;)

    @nehon
    Thanks for the remark, I’ll fix that right away. As I had no clue on implementing a shader I just followed the fog shader included in jME, lot’s of copy/paste and edit stuff done and some trail and error to find out how to work with it. Was already wondering about that ;)

    For the feedback on filter implementation on my own, well… There was a bit of guessing, good guessing tho. Everything was quite easy to understand once I looked a little closer and tried changing things. jME nicely told me what was wrong whenever I made an error (yeah, I programmed it in jMP too =]). I looked at the advanced shader tutorials on the wiki pages but it seemed these were not on post processing (at least, that’s what I understood).
    One thing to mention that I found pretty much magic was the passing around of values: from the java class to the .jm3d material was done by setFloat etc (no magic), then when I got into my .frag file I had to dig them back up as m_SameName. It’s definately not hard to see, it just was a bit of a suprise to me, but then again, I had no experience doing this whatsoever tho I did recognize the m_ in front right away. Plus I think I know why these things are done this way, as I understand you have to glue java and opengl together somehow and this is a pretty neat way to do so.
    In short:
    Easy to implement on your own? Definately, just take an example, copy all parts and play with it until it does what you want. After a few hours, everything becomes crystal clear and you can do anything you imagine.
    Easy to understand? Hell yes. See the result and consider the fact I only started this as a first try.

    #128513

    nehon
    1851p
    Keymaster

    OH I didn’t notice you even made a glsl 1.5 with multisampling
    Very nice work!!

    yeah the m_ part needs to be documented a bit more.

    Thanks for the feed back ;)

    #128514

    baalgarnaal
    31p
    Participant

    Updated! See the end of my topic start for changes :) Should be final this way unless someone has some great idea or sees a miserable mistake.

    @nehon I suppose that’s a good thing? Like I said, just followed the fog shader wherever it went to, actually started with the glsl1.5 and ported it back to 1.0 ;)

    #128515

    nehon
    1851p
    Keymaster

    yep that’s great, this way I just have to copy your files in the core, and Done! :p

    I updated the shader doc to explain the “m_” thing, see the “User’s uniform” section.
    http://hub.jmonkeyengine.org/wiki/doku.php/jme3:advanced:jme3_shaders

    I’ll integrate your Filter in the core tonight.

    #128516

    baalgarnaal
    31p
    Participant

    @nehon
    That definately clears things up :)

    I’m gonna go ahead and try some other shaders now, is there a list of certain shaders that need to be done? Some kind of request list, preferentially with an article that describes how it works? Just need to practise a bit, could start off with the easier ones and progress to more difficult sorts of shading as I go. Programming these things seems an art on its own: Simple, but very, very powerful…

    I’m thinking about posterization and dream-vision filters at the moment, any suggestions? ;)

    Edit: Guess I should make a kind of list…
    Posterization
    Dream-vision
    Film-grain

    #128517

    Empire Phoenix
    611p
    Participant

    ´Looks awesome

    #128518

    nehon
    1851p
    Keymaster

    @baalgarnaal go ahead with posterization and dream-vision it can be nice.
    The filters remaining on my todo are motion blur and under water (which will probably be an enhancement of the current Water filter), but those are pretty advanced.

    Other “simple” ideas could be night vision, or heat vision, infra red etc…..

    #128519

    nehon
    1851p
    Keymaster

    Also a heat distortion filter could be nice like this

    This would be some kind of distance blur with some distortion

    #128520

    nehon
    1851p
    Keymaster

    Ok the CrossHatchFilter is in

    Thanks ;)

    #128521

    baalgarnaal
    31p
    Participant

    Great :D Just browsed google source a bit, can’t wait to see your test for it hehe :P
    I did notice tho that the links I put in seem to have taken some extra load with them (tags and crap around them), it’s not very important but I suppose that may be removed some day :P

    Edit: Not really sure where to put this, don’t want to start a new topic for this, but I just found this lovely presentation that gives an introduction to GLSL stuff. I think it’s quite useful as a quick reference card to find out what is possible (although I figured out most of it myself already anyway). Oh, and I’m working on a funny shader that draws some heat-above-ground defraction using only the frag file. I think it’s a bit heavy on sampling but it is quite well able to determine where the effect should be drawn, plus I haven’t found anyone doing this yet. I still need to find a good defraction function tho, horizontal sampling using a sine is good for underwater effects but sucks for warmth, although it is a good place holder. Any suggestions? (Oh, I can make the sine-underwater thing too if anyone wants it, just need to extract it, shouldn’t take much more than an hour to make. I think @pspeed would love to see that.)

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.