다음을 통해 공유

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: https://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

  • Anonymous
    August 10, 2009
    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

  • Anonymous
    August 10, 2009
    The comment has been removed

  • Anonymous
    August 10, 2009
    The comment has been removed

  • Anonymous
    August 11, 2009
    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.

  • Anonymous
    August 11, 2009
    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 :)

  • Anonymous
    August 11, 2009
    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 :)

  • Anonymous
    August 13, 2009
    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.

  • Anonymous
    August 13, 2009
    thanks Sledge70, yes, this is a good suggeston!

  • Anonymous
    January 07, 2010
    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.

  • Anonymous
    January 08, 2010
    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

  • Anonymous
    July 15, 2011
    Very Nice......Thanks alot.....can I use it in my website ?