next »

[Firepith]

I had an exciting idea today, and I'd like for someone with experience in 3d graphics to tell me if it is feasible, or if it has already been done.

The idea is to generate 3D graphics as 2d pixel art. And I don't mean like a voxel engine, or like 3D Dot Heroes (I don't want to turn pixels into cubes ok), or anything like just rendering 3d at a lower resolution. I mean having an engine that will draw each frame, following the rules of pixel art, so that it looks like someone spent hours drawing it, yet it can be panned, zoomed, etc and still look exactly like pixel art.


Look at this image. See those roof tiles? Each of them is a few pixels. Now Imagine zooming up and seeing those same tiles, still pixel art, but at the same res with a woodgrain texture. How fucking awesome would that be?!

Imagine an amazing pixel art scene - one that took someone hours, or even days to draw. (Like the one shown above.) Now imagine being able to pan and zoom around that same scene in real time while enjoying the exact same level of graphical continuity. Now imagine being able to do the same with 3d lighting, and still have it look like it was hand-drawn. Or to change the style of pixel art that's being generated.

I would draw and animate a mockup of what that would look like, but it would take for-fucking-ever. And that would be the win with this technique - to generate pixel art graphics without drawing all the assets from every needed angle. You could just make them in 3d, and use this techinque. It would have to be perfect, of course - not a cheap imitation effect, because you would immediately be able to tell the difference. But done right, I could imagine bigger, better projects being done, with gameplay that simply wouldn't have been possible without dropping the pixel art aesthetic in favor of 3D, or settling for something that is pixel-art-ish, but not the same. It would be having your cake and eating it too.

The main questions I have about this idea are:

• Has it been done already? (Post a link, please.)
• If not, can it be done? Can pixel art techniques be coded and applied to real-time 3D rendering?
• Would you expect the average PC to be able to handle this graphics technique?

And please, share your thoughts on this topic!

Knowing nothing about rendering 3d graphics myself, I am imagining some combination of heavily modified cel-shading, and traditional effects like bump-mapping and all that fancy stuff they use in today's games, rendered at various low resolutions.

How marvelous would a 3d pixel art first-person shooter be?

[Tycho Brahe]

You could probably quite eaisily acheive this effect with shaders. The lighthouse 3d shaders tutorial did somthing just like this, except it called it an "led" shader.
When I'm on a computer instead of an iPod I'll post the link and/or some screenshots.

[John Nesky]

I am skeptical but am not ready to dismiss the idea entirely.

A challenge would be alignment of details on pixel boundaries. Many of the details in the image you picked have details that are only one or two pixels across. A 3D rendered image with an arbitrary angle would likely fail to put these details directly on pixels boundaries and you'd end up with either aliasing or anti-aliasing, neither of which are what you want.

If you accept graphics with more pixels-per-detail than this image, it would be easier.

[BorisTheBrave]

Methinks much of quality in pixel art cannot be done automatically. Fonts are done by vectors to get the scalability you talk about, but for small sizes they are still manually pixelled to maintain visibility. Like John says, aligning with awareness of the pixel boundaries are.

The "rules of pixel" art are not strict enough. If they were, it wouldn't be pixel art, it would be pixel technique.

"Pixel style", sure, like you get "cell style" via shaders etc. 14113's technique sounds plausible. And there's tools to do stippling etc for you.

[Ivan]

I've been thinking about writing a shader like this for a long time, but it's a pretty daunting task. Pixelart looks so crisp and nice basically because there are some very particular rules applied to each pixel in relation to its neighbors. So what a pixelart shader would do is go through each frame pixel by pixel and analyze its neighbors and then adjust the pixels in question based on the established pixelart rules. The problem with this approach is that it pretty much has to be multipass, so it would require quite a bit of GPU usage. Another problem i can see with this is that screen shaders dont work on a pixel per pixel basis. You render a scene to a texture and then sample it in a normalized range, which makes it difficult to do precise pixel operations like this shader would require.

[Firepith]

You could probably quite eaisily acheive this effect with shaders. The lighthouse 3d shaders tutorial did somthing just like this, except it called it an "led" shader.
When I'm on a computer instead of an iPod I'll post the link and/or some screenshots.

I found that. It doesn't accomplish what I'm going for because it doesn't maintain the 2d  appearance. If you download the demo, you can pan around and see that the squares turn into rhombuses.
http://www.lighthouse3d.com/opengl/ledshader/

[Ivan]

Yeah, just pixellating something doesn't make it pixelart.

[Firepith]

I've been thinking about writing a shader like this for a long time, but it's a pretty daunting task. Pixelart looks so crisp and nice basically because there are some very particular rules applied to each pixel in relation to its neighbors. So what a pixelart shader would do is go through each frame pixel by pixel and analyze its neighbors and then adjust the pixels in question based on the established pixelart rules. The problem with this approach is that it pretty much has to be multipass, so it would require quite a bit of GPU usage. Another problem i can see with this is that screen shaders dont work on a pixel per pixel basis. You render a scene to a texture and then sample it in a normalized range, which makes it difficult to do precise pixel operations like this shader would require.

Great thoughts. I knew I wasn't the only one ever to think it up. And I knew it would be difficult. But man, I just wanna see someone take a crack at it.

[Sos]

This, perhaps?



Also, overburned ambient occlusion and 4 layers of normal maps would be sufficient as well.

[Firepith]

This, perhaps?



Also, overburned ambient occlusion and 4 layers of normal maps would be sufficient as well.

Wow. I've never seen that before. Bits of that video look almost like pixel art.

[pgil]

An important part of the pixelart look is the limited palette. You could probably create a pixel shader that reduces the image to a predefined palette (

has apparently done it already). If you apply that lcd shader with something like this (with a much less limited palette than the zx spectrum of course), you'll be getting closer to the right look.

[Will Vale]

Another problem i can see with this is that screen shaders dont work on a pixel per pixel basis.

It shouldn't be a problem - when you write certain kinds of image filter shaders, e.g. blurs and edge detect, you tend to sample using whole pixel offsets to get the exact result you want using a point-filtered input texture.

e.g. (rough HLSL-ish code, don't forget to adjust for pixel centres in DirectX!)

Code:

#define TAP_COUNT 4
static const float2 TAPS[TAP_COUNT] = 
{
  float2(-1, 0), // whole pixel offsets in X and Y
  float2(+1, 0),
  float2(0, -1),
  float2(0, +1),
};

float2 OneOverTextureSize;
sampler2D Texture;

main( out float4 color : COLOR0, in float2 uv : TEXCOORD0 ) 
{
  float4 accumulator = 0;

  for ( int i = 0; i != TAP_COUNT; ++i )
  {
    accumulator += tex2D( texture, uv + TAPS[i] * OneOverTextureSize );
  }

  return accumulator / TAP_COUNT;
}

Normally for a fixed kernel and fixed texture size you'd compute the offsets offline rather than waste time in the shader, but this hopefully makes it clear.

It is an interesting idea. I'm quite tempted to have a go, if I ever find the time

Will

[agj]

Fonts are done by vectors to get the scalability you talk about, but for small sizes they are still manually pixelled to maintain visibility.

Actually, there is a technique called 'hinting', which helps fonts become readable at smaller sizes. I don't know exactly how it works, but it snaps designer-specified points to pixel boundaries.


Unlimited detail seems pretty neat.

[Firepith]

If anyone does feel like giving it a go, it would be neat just to see it done with something simple like this:
http://lollige.deviantart.com/art/Isometric-shading-tutorial-59702334

[Skofo]

Find 3D image -> shrink -> posterize -> colorize -> pixel art!

[Firepith]

 

[raigan]

I've had the same idea, but with a much simpler pixel-art style since even that is VERY complicated -- much more than you'd think. I'd love to hear about anyone with any experience on this sort of thing.

[Cagey]

Find 3D image -> shrink -> posterize -> colorize -> pixel art!

http://i.imgur.com/x2fTX.gif

This is a legitimately good way to think about it I reckon. The next step would be recognizing edges and objects and then rendering them according to specified rules. Eg for humans always render their eyes as a single white pixel (or something along those lines).

[Core Xii]

http://www.tomtallian.com/
http://supernitro.deviantart.com/gallery/#Low-Poly

I'm attempting to achieve exactly what you describe in some of my own projects. I haven't solved it yet, unfortunately, so I cannot say. I'm thinking low-resolution textures, appropriate texture filtering (nearest neighbor) and perhaps some fragment shader tricks. One thing to try is to draw separately and anti-alias the edges, i.e. the profile of the model.

[Alex May]

The thing is that the detail you're after requires a lot of data, which must either be manufactured procedurally or created by hand, as it is in the pixel art images you want to recreate. So either your 3D scene must be ridiculously detailed, with very high resolution textures, and the accompanying art time that comes with that, or you have to spend a long time on procedural generation techniques. That is before you even get to the visualisation step, which would involve crisping up the image and reducing the colour palette, and having really kick-arse shadow technology etc.

Good luck!