Greetings!

Welcome to Scifi-Meshes.com! Click one of these buttons to join in on the fun.

3DRealtime Rendering of 3d Meshes as Pixel-Art

Howard DayHoward Day632 Posts: 434Member
edited May 2016 in Work in Progress #1
Working on custom shaders and rendering in unity to make 3d objects render like classic pixel art. Some success so far! The web build is here: http://www.hedfiles.net/PixelShader/PixelShader.html


pixart_01.png
pixart_02.png
With extra smooth 8X AA:
pixart_04.png
Animations:
pixart_03.gif
pixart_05.gif
pixart_06.gif
pixart_07.gif

I'm going to put together a tutorial and release the source when it's closer to done-ish.
Enjoy!
109444.gif
Post edited by Howard Day on
Tagged:
«1

Posts

  • ST-OneST-One188 Posts: 293Member
    Nice!
  • TALON_UKTALON_UK2 Posts: 0Member
    Awesome.

    :thumb:
  • Nathan RubricNathan Rubric180 GermanyPosts: 159Member
    Impressive... most impressive! :o
  • evil_genius_180evil_genius_1804256 Posts: 11,034Member
    This is awesome. I love old pixel art. :)
  • BlueNeumannBlueNeumann652 Posts: 1,296Member
    Oh man! Can't wait to see some of the awesome thngs on this board get pixellated and made into fake video games... or even better, REAl video games.
  • Knight26Knight26192 Posts: 838Member
    very nice
  • fractalspongefractalsponge254 Posts: 1,088Member
    Awesome.
  • SamuraiSamurai185 Posts: 408Member
    Brilliant. Also strangely hypnotic. o_O
    "Perfect. Then that's the way it shall be."
  • ArmondikovArmondikov0 Posts: 0Member
    Jesus, Howard! That's, like... an actual game-changer for doing pixel art in Unity!
  • Howard DayHoward Day632 Posts: 434Member
    Thanks, guys!
    Armondikov: Maybe. There's still work to be done to make it awesome in most situations.

    Okay, took the opportunity to put together a little kitbashed space fighter from bits. It looks pretty neat! First is in the native, intentional palette, the second is indexed to the Raptor Call of the Shadows palette. :D
    pixart_10.gif
    pixart_11.gif
    ..and a angled verticle SHMUP version!
    pixart_12.gif


    Enjoy!
  • evil_genius_180evil_genius_1804256 Posts: 11,034Member
    Dude, that's awesome. I like the design. Do you have any plans to make a retro style space game with this stuff? That would be killer. :D I have an Android game that has this style of artwork, but the characters are more cartoon style (big heads and eyes, etc.)
  • ArmondikovArmondikov0 Posts: 0Member
    Do you have any plans to make a retro style space game with this stuff? That would be killer.

    Well, since you mentioned it: http://www.wingsofstnazaire.com
  • IRMLIRML253 Posts: 1,993Member
    this is brilliant

    http://www.hedfiles.net/PixelShader/pixart_05.gif

    with that one a giveaway is the shadow cast by the mech onto the girl, it has a higher temporal resolution than the 'sprite' itself has

    I wonder if dynamic shadows should even be allowed? self shadows sure, as that's how the sprite would have been rendered, but casting shadows from one to the other? maybe not? perhaps an average value of the shadow over the whole sprite would make it look like it's being faked more?
  • Chris2005Chris2005678 Posts: 3,097Member
    Amazing! That's all I can say. :)
    AMD Ryzen 9 5900X
    Gigabyte RTX 3080 Gaming OC 12GB
    1TB NVMe SSD, 2 x 1GB SATA SSD, 4TB external HDD
    32 GB RAM
    Windows 11 Pro
  • Howard DayHoward Day632 Posts: 434Member
    evil: Nah, these are just tests. I'm going to release them - so if someone else wants to make a SHMUP, they're welcome to try. :D

    IRML: Hmm, interesting thought - but unity cant' do that kind of single object shadow maps. :/ The difference in update frequency is something that can be controlled - and is in the latest builds!

    Chris2005: Thanks!

    Okay. In new news... I've been an absolute idiot. The Indexing shader that I wrote wasn't quite doing what I thought it was. As a result...the indexed colors were being smoothly interpolated. This is, safe to say, not the intended behavior. I've since fixed it, and now, the indexed results are absolutely perfect. Kills me that I missed something this stupid. Ugh. UGH.
    Here's a look at the new output:
    pixart_15.png
    pixart_16.png


    So that's settled, and a weight off my mind. The next thing on my ToFIX list was the AA. It was very blurry - and just..looked artificial, and not pixeled at all. So, I figured out a method around that. The Scene is rendered with AA at 3x the final screen resolution.. then Nearest Neighbor scaled to the final desired resolution. Here's the image with no AA:
    pixart_15.gif
    And with the new AA!
    pixart_16.gif
    I'm stoked. It looks much improved to me!
    Here are some more shots - pay attention to the LUT cube in the upper left. :D
    pixart_18.png
    pixart_19.png
    pixart_21.png
    pixart_23.png


    I'd love to hear any and all feed back and thoughts you guys have.


    Enjoy!
  • evil_genius_180evil_genius_1804256 Posts: 11,034Member
    Yep, that definitely looks more like indexed color, with the harder "edges" between colors. It's funny, I used to hate that in games and other programs, now it's cool and retro. :lol: The new AA is a definite improvement in making it look more retro too. :thumb: The lines really were too anti-aliased before, they look more correct now.
  • TALON_UKTALON_UK2 Posts: 0Member
    Much better, much retro coolness.

    :thumb:
  • ArmondikovArmondikov0 Posts: 0Member
    Just as with Wings, it's not just retro, it's a better version of retro.
  • Howard DayHoward Day632 Posts: 434Member
    MADE A DRONE.
    pixart_33.gif
    Thems some thin lines, son! the object line width is totally controlable - you use the vertex alpha value to multiply the width.

    I wasn't a huge fan of the existing glow, and was looking for a way to fix it. Given some suggestion on another forum - I went with the hybrid approach:
    pixart_31.gif
    pixart_32.gif
    And the skin shader + enhanced facial features:
    pixart_30.gif

    Enjoy!
  • evil_genius_180evil_genius_1804256 Posts: 11,034Member
    The drone is cool. I love the new glows, they're very '80s and '90s looking. :thumb: The previous ones weren't bad or anything, they just looked more modern.
  • Howard DayHoward Day632 Posts: 434Member
    What I've been playing with so far... the start of explosion VFX.
    A test for the debris flame...
    pixart_40.gif
    And with bigger explosion blasts...
    pixart_41.gif


    Enjoy, and keep the crits coming!
  • evil_genius_180evil_genius_1804256 Posts: 11,034Member
    The chick in her underwear needs to be careful. She looks dangerously close to being roasted. ;)

    Looking great. In another circumstance, I'd comment on how cartoony it looks. But, that's the goal here, isn't it? :)
  • Howard DayHoward Day632 Posts: 434Member
    Done. Got unity particle effects playing at locked framerates.

    pixart_44.gif
    Easy to set the frame rate now... Works on any and all particle systems. :D
    pixart_45.gif
  • evil_genius_180evil_genius_1804256 Posts: 11,034Member
    Oh yeah, that brings me back. Now I'm in the mood to play an old side scroller from the '80s or '90s. Fortunately, I keep some of those around here for when I get that urge. :D
  • ArmondikovArmondikov0 Posts: 0Member
    Since you're going from 3D models to a 2D-effect in the rendering, how well does it work when you have backgrounds undergoing the same treatment? Do you envision having to use different settings in order to make the pseudo-sprites stand out as they would on old SNES games? Or do you think that dropping a fairly normal scene and switching the shaders to "ON" will be sufficient?
  • Howard DayHoward Day632 Posts: 434Member
    Armondikov: Yes, good question! I don't know, as of yet - I'm still having to make the background art to test with. I suspect with the controls I have in place, it will look awesome. :D


    Okay! So, I re-wrote the dithering to work on the material, not as an overlay. It works a TON better. It's now controlled via vertex colors, which means variable dithering is possible! It's pretty nice, and adds a huge amount of control to the visual result. I also set the shadow density to 50%, and toned the ambient values down as well.
    pixart_46.gif
    pixart_47.gif
    Enjoy!
  • evil_genius_180evil_genius_1804256 Posts: 11,034Member
    I don't know how that chick can be so cool about being roasted alive. :p

    Seriously, great stuff. :thumb:
  • Howard DayHoward Day632 Posts: 434Member
    Got dithered Alpha working! Boy, do I like this effect. It's much better than just straight alpha.
    pixart_50.gif
    Enjoy!
  • evil_genius_180evil_genius_1804256 Posts: 11,034Member
    I like it too. It makes it look even closer to those old video game graphics. :)
  • TALON_UKTALON_UK2 Posts: 0Member
    This thing just looks even more awesome with each update, excellent work.

    :thumb:


    Flaming chick just too disturbing for anyone to mention? Cracking looking effect though.

    :devil:
Sign In or Register to comment.