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 needAnonymous
August 10, 2009
The comment has been removedAnonymous
August 10, 2009
The comment has been removedAnonymous
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, NikolaAnonymous
July 15, 2011
Very Nice......Thanks alot.....can I use it in my website ?