Large Star Field – Take 2, how to make it look "deep" and more reallistic


Check out the new starfield and compare it with the old one.


Edit: thanks to fashai for pointing out an issue, I updated the code again – now the stars no longer form straight lines if the Silverlight control was invisible for some time. Also updated the speed algorithm, to be more close-to-nature :)


Source and demo below show the latest changes.


Some notes on how it is made below the stars :)


Source code: http://nokola.com/sources/StarField.zip   








Do you like the new one or the old one better? Please comment

 

 





I made 4 improvements to the star field:


·      First I fixed the star brightness to actually be from 0 to 1 (initially it was in the range 0..256).


·      If you think about it, the further you look, the more stars you see. In the previous example, the further you look, the same number of stars you see. This takes a away a lot of the realism and feeling of “depth” to the field.


To fix this, I chose a 60 degrees viewing angle, then divided my “3d” space into 8 planes parallel to the screen (near to far plane).


Then, I compute the number of stars in each plane, based on the previous plane. The first plane contains 4 stars (chosen arbitrarily).


·        The other fix is star speed – the further back stars are, the slower they appear to move. Fixed it – nice J


·        Next one is star brightness – stars get dimmer based on the square of the distance from the viewer, not linearly


I also fixed a few bugs, and added some “magic” constants here and there. For example, the dimmest star is has alpha of 0.3…because I don’t want to waste resources on stars that are not noticeable on screen.

Comments (11)

  1. fashai says:

    Nice one nikola..i liked it. It looked very realistic to start with but when i hold on for some time infact around 5 minutes on the page. I see the starts are all moving clubbed together in straight lines…while i was commenting to this post i just scrolled up to see the animation again and i found tht they were moving in straight lines..Not sure if this was intentional but there seems to be a problem with Silverlight.i can even send you a screen shot if u need

  2. nikola says:

    Thanks Fashai, I know about this issue already..

    It is not intentional (not by me).

    Silverlight does not render the form whenever it’s out of screen (since it’s not visible, it makes sense). Because I capture CompositionTarget.Rendering, it does not get called until the form gets rendered. By this time, many of the stars are out-of-screen and I re-create them at the beginning of the screen (single line).

    The fix for this is to re-create the stars in random positions around the screen whenever there is more than one star to be re-created. I know how to fix it but didn’t have the time yet :)

    Thank you for leaving the comment, I didn’t realize at first it was a "wait-without-viewing problem" (thought it had to do something with 2 Silverlight apps on hte same page stealing the "render" whenever one is visible and the other not)

  3. nikola says:

    Hi Fashai, I fixed the "straight line" issue with the stars – updated source & demo

    Thanks,

  4. Morten says:

    Nice.

    Just to nitpick… the background seems to be much much much farther away than the furthest moving stars, yet a lot of them are often brighter.

    Also when you start focusing at the background, the depth of the moving stars suddenly seem very shallow.

  5. nikola says:

    yes, you’re right…the background looks brighter and much deeper than the furthest moving stars… I would like to fix it but it will probably require editing the background too (not sure.. with my designer skills it will take a long time. :)

    Thanks for the comment though – it’s good to know that it’s noticeable :)

  6. nikola says:

    yes, you’re right…the background looks brighter and much deeper than the furthest moving stars… I would like to fix it but it will probably require editing the background too (not sure.. with my designer skills it will take a long time. :)

    Thanks for the comment though – it’s good to know that it’s noticeable :)

  7. Sledge70 says:

    Wow really nice.

    To make it even more realistic the background should move very very slowly and wrap around.

    That would give a constant feeling of movement and more depth.

  8. nikola says:

    thanks Sledge70,

    yes, this is a good suggeston!

  9. Ozanges says:

    Hi Nikola,

    I write an french article on Silverlight optimisations. Could i use your code (spacefield) to illustrate it ? I will only change number stars displayed. All credits will be made.

  10. nikola says:

    Hi Ozanges,

    No problem – feel free to use it, and I’m happy you’re interested in it and optimizations!

    I’d like to read it when it’s published – appreciate if you add a comment in this blog with a link to your article!

    Thanks,

    Nikola

  11. Very Nice……Thanks alot…..can I use it in my website ?