AuthorTopic: Realtime Rendering of 3d Meshes as Pixelart  (Read 128158 times)

Offline Howard Day

  • 0010
  • *
  • Posts: 222
  • Karma: +0/-0
  • Hey, I'm a doofus.
    • View Profile

Realtime Rendering of 3d Meshes as Pixelart

on: September 18, 2015, 07:48:41 pm
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








I'm going to put together a tutorial and release the source when it's closer to done-ish.
Enjoy!
« Last Edit: September 18, 2015, 10:16:26 pm by Howard Day »

Offline Gil

  • 0100
  • ***
  • Posts: 1543
  • Karma: +1/-0
  • Too square to be hip
    • http://pixeljoint.com/p/475.htm
    • View Profile
    • My Portfolio

Re: Realtime Rendering of 3d Meshes as Pixelart

Reply #1 on: September 18, 2015, 08:03:48 pm
Oh hell yes. I was looking for something like this a while back. Combined with normal mapped pixel-art, we should be able to pull off some great stuff. I should get back into 3D.

Seems like there's still a fair amount of pixel noise. How much leeway is there left to eliminate that in a real-time situation? I imagine there must be a way to put basic cluster theory into a shader to get it just a bit better, but I can't imagine putting that into a pixel shader.

Offline Howard Day

  • 0010
  • *
  • Posts: 222
  • Karma: +0/-0
  • Hey, I'm a doofus.
    • View Profile

Re: Realtime Rendering of 3d Meshes as Pixelart

Reply #2 on: September 18, 2015, 08:25:28 pm
Well, you can increase the AA quality. 2X AA was simply done for speed on mobile devices (though, honestly shadows are the slowest part right now).
Here it is with 8X AA:

It's pretty smooth.

Offline Conzeit

  • 0100
  • ***
  • Posts: 1448
  • Karma: +3/-0
  • Camus
    • conzeit
    • View Profile
    • CONZEIT

Re: Realtime Rendering of 3d Meshes as Pixelart

Reply #3 on: September 18, 2015, 09:31:23 pm
 :o Howard you did it again. that's pretty effn good. are you trying to Force me to learn 3D?  >:( :P

it's looking pretty nice so far. I saw something like this on tweeeeeter a while ago but it didnt look nearly as good, that example pretty much looked just like low res cel-shading, are you doing anything new here that you hadnt explained in that Irkalla mech topic?

Also, one of the most appealing things of pixelart is controling shade by shade how the hue and saturation changes with the luminosity ("hueshifting") and I do see that the ramps on these do not stay on the same hue or saturation, but they seem to bounce around without much reason. Are you tweaking the values of the ramps by choosing them manually or is it some other more automated way?

Offline lachrymose

  • 0010
  • *
  • Posts: 345
  • Karma: +0/-0
    • View Profile

Re: Realtime Rendering of 3d Meshes as Pixelart

Reply #4 on: September 18, 2015, 09:56:55 pm
Pretty sweet. I know of a japanese program that does something similar. Doesn't work with ATI cards though.

Offline Howard Day

  • 0010
  • *
  • Posts: 222
  • Karma: +0/-0
  • Hey, I'm a doofus.
    • View Profile

Re: Realtime Rendering of 3d Meshes as Pixelart

Reply #5 on: September 18, 2015, 10:15:41 pm
Conceit: Thanks! So, I am controlling the ramps directly. Here's the texture.

The way the shader works is that it only lets you set the vertical (v) position of the UV map - the horizontal position is skewed side to side based on the angle of the surface to the scene light, the in/out shadow value, and vertex ambient occlusion.
You can see in that map that there's some hueshifting going on - not a huge amount, but some.
If you're looking at the build (or those images I posted) the palette being used isn't exactly accurate. I've added options to palettize to classic videogames. The examples I posted are being indexed to Rise of The Triad, Arne's 64 color palette, and Duke Nukem 3d. The only one using the actual palette I made for this project is the image on the light background with no AA.
http://www.hedfiles.net/PixelShader/pixart_01.png
The difference from the IRKALLA mechs is that those were pre-rendered in Max, using a procedural max material. This is 100% realtime, designed for use in games.

lachrymose: Thanks! This actually works on everything, including phones and tablets.


Offline Conzeit

  • 0100
  • ***
  • Posts: 1448
  • Karma: +3/-0
  • Camus
    • conzeit
    • View Profile
    • CONZEIT

Re: Realtime Rendering of 3d Meshes as Pixelart

Reply #6 on: September 19, 2015, 02:35:46 am
what a fucking answer  ;D Thanks for explaining it to the 3D illiterate layman. godspeed! :y:

Offline RAV

  • 0010
  • *
  • Posts: 293
  • Karma: +0/-0
    • View Profile
    • Blackbox Voxel Tool

Re: Realtime Rendering of 3d Meshes as Pixelart

Reply #7 on: September 19, 2015, 03:09:06 am
Good work, Howard. This is the best attempt I've seen of trying to turn pixel art into a mere shader-option of standard 3d. It looks awesome.
Scrutinizing every frame of the .gif, surely a pixel artist will find plenty flaws in the pixel level rendering, after all pixel art is very much about the details of artistic rendering.
However, upwards HD resolutions exact pixelation matters less and less to the commoner's eye, and what remains as obvious hallmark to identify it as pixel art is the controlled palette.

We have this ideological spectrum of how to make pixel art transit into the next dimension, with two ends in seeming opposition:

Focusing on the result or focusing on the process. You have made a very strong and appealing case for the result, to make Pixel Art a sort of aesthetic choice in a different artform.
Taking advantage of industry standard 3d mesh modelling especially for animation and dynamic scenes can have astounding effects.

My own work is all about the process: preserving, refining and focusing the traditional method of pixel art on the transit.
This is so important to me that I might even be willing to skip on a result output that would try to mimic as close as possible true classic retro titles in a literal sense.
That is because I am most interested in finding ways and cases the pixel art method of creation is not a cumbersome hurdle we would want to skip on,
but its own creative advantages we can have productive interest in.

However, for the assets you showcase here as an example, I see your side in greatest favour. Good job on finding ways to keep your end of the spectrum so interesting.

« Last Edit: September 19, 2015, 04:41:14 am by RAV »

Offline Seiseki

  • 0011
  • **
  • Posts: 915
  • Karma: +1/-0
  • Starmancer
    • OminuxGames
    • http://pixeljoint.com/p/35207.htm
    • StarmancerGame
    • View Profile
    • Starmancer Patreon

Re: Realtime Rendering of 3d Meshes as Pixelart

Reply #8 on: September 19, 2015, 03:39:19 pm
This looks so damn cool!  :'(

edit: I wonder if it's too realistic for hand drawn pixel art, I'm curious how it would look without shadows and flatter shading.

what a fucking answer  ;D Thanks for explaining it to the 3D illiterate layman. godspeed! :y:

Go download Blender, watch some tutorials and learn 3D already! :P
Seriously though, learning 3D was the best thing I ever did, second only to signing up to this forum..
I always imagined it would be hard, but it's really not and there are tutorials for everything on youtube.
« Last Edit: September 19, 2015, 03:48:20 pm by Seiseki »

Offline Joe

  • 0010
  • *
  • Posts: 298
  • Karma: +2/-0
    • View Profile

Re: Realtime Rendering of 3d Meshes as Pixelart

Reply #9 on: September 19, 2015, 03:50:08 pm
Yea, you just created the future. Brilliant.  :y:
Another application I see for this is as a reference for manual work, showing oneself how it would most realistically look with a given palette. Cause this is about as realistic as it can get.

I too am interested to see how this would be refined to emulate all the pixel-level manipulations on the fly. I don't see why it couldn't be done.
Can't wait for the day I have time to finally dive into 3D. A year or so perhaps.