Best renderquality without Antialias?

About Truespace Archives

These pages are a copy of the official truespace forums prior to their removal somewhere around 2011.

They are retained here for archive purposes only.

Best renderquality without Antialias? // TS6 and Older

1  |  

Post by Tiles // Jul 22, 2006, 8:04am

Tiles
Total Posts: 1037
pic
Here is someting that bugs me since years.


I create 2d games as a hobby. Therefore i have to create 2D sprites. So i shape them, paint them, rig them, animate them, and render the animation sequences to bitmap.


I have to use medium quality for the renderpart. Because i need one defined background colour that can be set to transparent then. Which means to avoid Antialias. AA melts the border pixels. And then you have a border around your sprite. Not this good looking.


When i would render in best quality the result would look best. But i get antialiased borders around even with Antialias off. Not so good when you try to create prerendered 2d sprites for games. No way to use the result. Makes a border around the sprite after importing and setting the background colour to transparent.


Well, i am sure that i once was able to receive a sharp border against the blank background with best renderquality. But this way was useless. Because i have to place a ground object underneath to render the shadow. And i also have forgotten how i did it ^^


So my question: Is there any way to use best quality without having antialiased, unsharp borders around my sprite?


trueSpace 6.6 SP2

Post by parva // Jul 22, 2006, 8:54am

parva
Total Posts: 822
pic
you could try scanline instead of raycast. It creates a "sharpener" look as raycast.

Post by Zeipher // Jul 22, 2006, 11:11am

Zeipher
Total Posts: 224
pic
There is no way, no. I see no difference between high and medium really. All it does it seemingly add a filter, softening everything. Most of my renders are with medium quality, as I get more control over them in post-process. I'd just stik to that if I were you.


HTH

Post by bill // Jul 22, 2006, 12:35pm

bill
Total Posts: 114
pic
What if you rendered to a much larger image size than what you want as your final size. Then in a paint program reduce it to the correct size. This should give you the effect of anti-aliasing without blending the pixels.

Post by Tiles // Jul 22, 2006, 9:30pm

Tiles
Total Posts: 1037
pic
I have indeed thought of that eons ago. I had even my experiments with it in the past. With somehow bad results.The needed bigger size increased the rendertime. Resized result wasn´t the best, because i had to use linear resizing to get rid off of the unsharp border. It looked nearly as i would have rendered in medium quality anyway. And finally around 500 single pictures for one sprite, manually post processing, well, i kept my fingers away from that then :D


Scanline shows no difference to Raycast when it comes to the border using best render quality. Still unsharp borders.


Medium and best Quality. Well, there is a small difference. Soften a medium quality picture in a paint software looks a bit different from a just rendered high quality picture. So there must be something else than just soften it.


Alright. It stays as it is. I will stick to medium quality also in the future. Thanks for your help folks :)

Post by TomG // Jul 23, 2006, 9:40am

TomG
Total Posts: 3397
There is sprite rendering capability in gameSpace and I believe in gamePak. This renders with no anti-alias on the edge pixels, but anti-alias on the inside pixels. This gives the best looking "inside" to the sprite while retaining the hard border needed to overlay the sprite in a game without any background color from the render "bleeding" into the sprite edges.


Prior to this, there was no way to do it - I wrote an application in C++ and then rendered twice, once with anti-alias, and once without. The C++ application then scanned for the edge pixels, and used the aliased version if it was an edge pixel, and the anti-aliased pixel if it was not an edge pixel. Worked well :)


The equivalent logic is duplicated in the sprite rendering to achieve the same effect but much more easily. It is not in the default tS6.6 though, since it is a specific game development requirement, it only appears in the game development extensions and versions.


HTH!

Tom

Post by Tiles // Jul 23, 2006, 9:32pm

Tiles
Total Posts: 1037
pic
Ah, that´s interesting and very useful. So there is a way. Just not natively in TS 6.6. Too bad.


Does the gamePak solution render in one session?


For gameSpace, i thought that it comes without a renderengine. Just curious how to render there :)


Anyway. Thank you very much about telling me the idea that´s behind sprite rendering. Gives me an idea how to achieve this. I have no clue about real programming unfortunately. But maybe there is a way using the tool i create my games with. No real programming, but amazingly flexible for an authoring tool :)

Post by TomG // Jul 24, 2006, 5:36am

TomG
Total Posts: 3397
gameSpace comes with the same render engine as tS6.6 - whatever made you think it didn't have one? :)


Now, it will not render full movies, since gS is not intended for that, that's a tS6.6 thing, so you are limited in resolution and number of frames. But it will render short sequences, and to image sizes that are plenty big for it to do just what you are talking about here, which is render animated sprite sequences :)


It will also render to still images the same as tS6.6 does, so you can have your beauty renders of your models and your work.


The solution is indeed a one-pass render, much easier than what I had to do to get the result with my two pass render fed into a C++ program to get the third and final end-product files. I can tell you, a single pass render is much better than how I worked back then!


HTH!

Tom

Post by Tiles // Jul 24, 2006, 7:06am

Tiles
Total Posts: 1037
pic
gamePak is out of reach for this year. Unfortunately. New hardware in connection with real life needs within a short time period has emptied my financial resources down to zero at the moment. I am a poor hobbyist. And so i have to look for a cheap solution for now. Even when it makes more work. First experiments in writing my own little helper app are promising. Again thanks for your description. They have pointed me into the right direction :)


And thanks for your information about gameSpace. I don´t know why i have thought that it has no internal renderer. Must have been some misunderstanding from my side. Good to know that it has an internal renderer :)

Post by TomG // Jul 24, 2006, 8:10am

TomG
Total Posts: 3397
Hope all goes well with the helper application - it sure is possible to do, takes a little bit of extra work is all. That's a good solution for when money is short, a solution that costs little, but involves a little extra work - a good balance!


I'd be interested to see any results if you can share :)


Thanks!

Tom

Post by ProfessorKhaos // Jul 24, 2006, 5:42pm

ProfessorKhaos
Total Posts: 622
pic
It occurs to me that you could render the photo twice. Once as normal and once as a silouette, both with antialiasing turned on.


Use the photoshop "threshhold" feature to rid yourself of any grey pixels in your mask (make them the same color as your background) and you've got an automatically "de-antialiased" silouette. You could then use the mask as a means to select the original non-antialiased pixels.

Post by ProfessorKhaos // Jul 24, 2006, 5:54pm

ProfessorKhaos
Total Posts: 622
pic
One nice thing about this method is that you still get the antialiasing benefit in the areas that are not at the silouette's edge.


Here's a zoomed in image with the cube picked out of the background and placed on another image. My way on the left. Simply cutting out the pure red background on the right.


Note the antialiased edges of the cube nearest the viewer. The operation is fairly quick but 500 frames may take a while. There might be some sort of way to turn this into a macro in photoshop. Haven't really used that feature before myself.


Hope this helps!

Post by ProfessorKhaos // Jul 24, 2006, 6:12pm

ProfessorKhaos
Total Posts: 622
pic
It may be possible to achieve a quicker "macro-like" result if you have a video editor that can perform similar threshhold and masking functions. That way you could sit back and let it crank through all the frames for you.

Post by Tiles // Jul 24, 2006, 8:50pm

Tiles
Total Posts: 1037
pic
Thanks for your ideas. Still, It´s not this easy ;)


The problem with this method is that you loose the antialiased pixels inside the sprite. Which decreases the sprite size. And that´s not what i want to happen :)


Let´s say your sprite has an 4 pixel tall arm. Now remove all antialiased pixels. After this operation the arm is much smaller. In the worst case the arm is gone :D


That´s why you are in need of the second rendering without antialias. This picture gives you the correct border. And you can borrow the pixels here that you need to overlap the aliased pixels from the better version to achieve a clean edge.


The road i am trying at the moment means to render one version with best quality, and one with medium quality without AA. Then create a mask (not simply grab the background colour, but giving it one more pixel to overlap the AA pixels from the best quality one) from the medium one, and mask the high quality one with.


Have tested this way with The Gimp with one picture. The result was good enough. Definitely better than blank medium render quality. Now i need an app that does this with all pictures of the sprite at once. Too much steps for a macro in Gimp or PS. There is more than one picture involved. At least because i have no clue about macros :P


That´s why i have started to create this little app for that. My current problem is to mask the medium quality picture. Is in progress. I will keep you informed when i have a working result. May need some days. I hope i bring it to work as thought :)

Post by ProfessorKhaos // Jul 25, 2006, 2:16am

ProfessorKhaos
Total Posts: 622
pic
Ah, ok I see where you're going. You're right about that.


If you're looking at the algorithm solution, you may be able to do this in a single render if you double the size of the image, render unaliased then test 2x2 pixel combinations, stepping 2 pixels across for each row and 2 pixels down for each column. How hard you want to preserve the result would be up to you. For instance:


CASE 1: If all 4 pixels are NOT the background color then average all 4 pixels to create your final image's pixel value


CASE 2: If one of the 4 pixels is the background color then average the remaining 3 pixels to create your final image's pixel value


CASE 3: If two of the 4 pixels are the background color then average the remaining 2 pixels to create your final image's pixel value


CASE 4: If three of the 4 pixels are the background color then take the remaining pixel's value for your final image's pixel value


CASE 5: If all 4 pixels are the background color then the final image's pixel is the background color too.


How much of the edge you wanted to preserve would depend on how you treat CASE 2, CASE 3, and CASE 4. If you have CASE 3 and CASE 4 just return the background color then you're reducing the size of the image just a tad but it might give a better result (more akin to an original sized non-antialiased result but slightly higher quality because CASE 2 gives you a better answer than non-antialiased at original size).


With this method you're rendering 4 times as many pixels with a double sized image... but... internally that's what you're doing anyway when you use 2x antialiasing.


You could use a similar algorithm to render at 3x or 4x the original size but that would result in more intermediate cases to manage.


That avoids the necessity for an "edge test" and a 2nd series of renderings.

Post by Tiles // Jul 25, 2006, 2:51am

Tiles
Total Posts: 1037
pic
Hmm, double size rendering means longer render time. In the end it may take as long as render it twice. But sounds interesting :)


Still, i have no clue about real programming. I use an authoring tool for my little app :D


Half way through with my method by the way. Creating a mask from the med quali pic, reduce the size of this mask by one pixel, and paste it back into the med quali pic. Now i have a mask that can be put above the high quali pic. Which results in a best render quality with sharp borders from the med quali pic then. This task is for tomorrow. Followed by some code so that it does it with all pictures in some folders.


The first version may have fixed folders. But that´s minor stuff. Let´s have a look how quick i can finish my little helperapp :)

Post by TomG // Jul 25, 2006, 4:37am

TomG
Total Posts: 3397
There is another issue - you may not have a preset background color in the render.


For instance, I rendered the Space Taxi model with a sky sphere around it for the reflections (since this was before HDRI). This means the taxi for the sprite actually appeared rendered on a cloudy blue sky - there was no fixed background color.


It is also possible that the background color might appear in the sprite.


So, I chose the three pass render - anti-aliased, aliased, and mask. The C++ application actually allowed for just a two pass render, if no mask was specificied, with a background color being specified.


There is also the question of macro processing too, since sprites are animated you often have 200 images to process :) This can make the Photoshop method less attractive. The C++ app I wrote automatically searched for numbered sequences and processed them, reading all the image versions automatically.


Of course, far easier to have tS do it for you on rendering, as all this hard work and numerous options show! Which is why it was added to gS and gP processing so all this multi pass, masks, post render processing, etc become unnecessary :)


HTH!

Tom

Post by ProfessorKhaos // Jul 25, 2006, 5:13pm

ProfessorKhaos
Total Posts: 622
pic
Obviously this problem has been thought through by smart folks long before I entered the conversation. :)


I had assumed that the background would be a constant color and that it would be deliberately chosen because it was not a color in the object (only way which makes my method viable). If that were not the case you would need some way to tell if a pixel was from the object or the background which pretty much means you're back to using a mask.


Sounds like gamespace is the best solution if you don't want to be constrained to special cases or extra renderings.


P.K.

Post by TomG // Jul 25, 2006, 5:24pm

TomG
Total Posts: 3397
Aye, it's a "horses for courses" situation - the solution you post is definitely a good approach if you can use it. If you have some constraints, then the other solutions can help out. I made a generic approach for all the situations (I could think of) though it added painful repeat renders as the disadvantage!


Yes, "Buy gamePak or gameSpace" would be my recommended answer too of course :) Good to see all these solutions though for those who can't take that route.


It surprised me when I got into making sprites just how tricky it was, it seemed really simple, just render it - so I think this is an informative and interesting thread.


I had a nightmare of a time with perspective too, but that's a different issue ;)


Tom

Post by Tiles // Jul 25, 2006, 9:12pm

Tiles
Total Posts: 1037
pic
It´s indeed amazing how much special knowledge is necessary to create isometric graphics. Even now, after years, i am still at learning. As this example to increase the quality shows.


What looks this easy in the first moment can make mayor trouble when you try it. And every graphics gives you new experience. The angles, spritesize/ detail, texturing/colouring, grid, etc. . Especially because there were no tutorials or written knowledge around when i started with it. Even now it is a hard task to collect something useful when it comes to 2d isometric graphics tutorials. Reminds me that i have to rewrite mine when i find the time for. Now there´s one more point to mention :)


Making 3D Games is no this much better though. Making a low poly mesh differs this much from creating a mesh for a still, a movie, or a 2D game with prerendered graphics. Not talking about the texture or such funny stuff like animation. Also here lots of special knowledge necessary.


Gamedesign with all its components is one of the most complex things to try. Makes nevertheless fun :)

Post by Tiles // Jul 28, 2006, 2:37am

Tiles
Total Posts: 1037
pic
Wow, made more trouble than thought. A few hours of creating the code, and a few days to fight with the quirks, LOL. Using an authoring software is very tricky sometimes. But i finally managed it. Well, at least i hope so. I keep my fingers crossed that it has no bugs :P


Using my little helper is of course more time consuming than using the Spriterender plugin. You need to render in medium quality, in best quality, and finally melt them together with my tool. And you have to take care about typoes when rendering in medium and best quality.


I have no clue how the result compares with the Spriterender plugin. But the result from my little helper definitely looks better than the just medium rendered one :)


Here we go. AAspritesharpborder1-0, Zipfile, 552 kb


http://reinerstileset.4players.de/AAspritesharpborder1-0.zip


Simply extract at Desktop. One folder which contains all the stuff.


Short how to:


Render your sprite in Medium quality. Render your sprite in Best Quality. Use the same names for them. Avoid Black 0/0/0 for the background. This colour is used by the masking process. Then place all the animation pictures of the Medium Pictures in the medium folder of AASpritesharpborder. And the Best ones in the best folder.

Now open AASpritesharpborder and click at Start. The result will be output into the final folder.

The folders medium , best and final can be found in the folder of AASpritesharpborder.


I hope it is useful for some of you :)

Post by TomG // Jul 28, 2006, 4:36am

TomG
Total Posts: 3397
Not tested it, but it sounds great, and thanks for sharing! This should prove useful for those who want to solve the problem.


Note that this should prove useful for web graphics too etc, if you plan on using them on a page of unknown color using transparency say. You can then ensure the body of your render is anti-aliased, but the edges are not, avoiding any sign of the background color in trueSpace / gameSpace from showing up in the edges of your object when placed on the web page.


So it's not just about games ;)


Let me know how people get on with the helper (nice name for it).


Thanks!

Tom

Post by Tiles // Jul 28, 2006, 6:48am

Tiles
Total Posts: 1037
pic
Ah, haven´t thought about webgraphics or other bigger graphics at all. Workspace is just 512 x 512 pixels. Big enough for sprites. But a little bit too small for other stuff. Thanks for pointing me to that :)


Will have a look if i can increase it a bit so that it also eats bigger graphics :)

Post by Tiles // Jul 28, 2006, 10:49pm

Tiles
Total Posts: 1037
pic
Made some small fixings. Should work with bigger graphics now too :)


AAspritesharpborder1-1, Zipfile, 552 kb


http://reinerstileset.4players.de/AAspritesharpborder1-1.zip

Post by Tiles // Jul 30, 2006, 1:46am

Tiles
Total Posts: 1037
pic
Forgot to mention that it handles bitmaps only. Implementing loading and saving for other file formats would make it much slower. Because i would have to convert it internally and save it as a temp file, so that the extension that handles the stuff can read it. The price for using an authoring tool for programming ...


That´s why it handles Bitmaps only :)

Post by Tiles // Jul 31, 2006, 10:52pm

Tiles
Total Posts: 1037
pic
Bad karma.


A mayor bug makes the previous version worthless. I made a mistake and it just performed the first picture correct. For the pictures after it it used the mask from the first picture. With strange results ;)


Here´s the version that should finally work now. I keep my fingers crossed :)


AAspritesharpborder1-2, Zipfile, 553 kb (http://reinerstileset.4players.de/AAspritesharpborder1-2.zip)

Post by Tiles // Aug 6, 2006, 1:51am

Tiles
Total Posts: 1037
pic
And another improvement. In this Version 1-3 you can choose the source folders and the output folder. No more need to copy all the pictures around.


AASpritesharpborder1-3, 597 kb, Zipfile (http://reinerstileset.4players.de/AAspritesharpborder1-3.zip)


Simply extract the zifpile wherever you want. Then click at the exe in the folder to start AASpritesharpborder :)

Post by Tiles // Aug 14, 2006, 11:53pm

Tiles
Total Posts: 1037
pic
Last update. I made some small changings at the interface and have removed some small quirks with the warnings. AASpritesharpborder 1-4 is the final version.


AASpritesharpborder 1-4, 600 kb, Zipfile. (http://reinerstileset.4players.de/AAspritesharpborder1-4.zip)


Simply extract the zifpile wherever you want. Then click at the exe in the folder to start AASpritesharpborder :)
Awportals.com is a privately held community resource website dedicated to Active Worlds.
Copyright (c) Mark Randall 2006 - 2024. All Rights Reserved.
Awportals.com   ·   ProLibraries Live   ·   Twitter   ·   LinkedIn