Dark Bit Factory & Gravity
PROGRAMMING => Other languages => Topic started by: combatking0 on May 20, 2015
-
Sorry for the pun in the title, but I'm thinking of rendering a light sourced sphere in JavaScript on the canvas.
After looking at some generic methods for light sourcing, I've figured out how to calculate the brightness for each polygon in a fast way:
1. Calculate the distance of each point on the sphere from the light source in 3D space.
2. Assign each point a brightness value.
3. For each polygon, add up the brightness value for each point on that polygon.
4. Multiply that brightness value by the RGB colour for that polygon.
5. Draw the polygon, subject to backface culling.
It's a shame gouraud shading natively supported under JS.
Wish me luck!
-
Looking forward to it, good luck! :)
-
I'll put this up live on my website after work (on my lunch break right now), but for the time being, I have attached the results of my first test.
-
Excellent stuff ck, very well done! :cheers:
Next maybe check out phong shading (after a well derserved break of course), wich gets rid of the hard shading difference between tiles (should be a breeze after this). It would be awesome if you'd like to do a tut on your findings sometime.
I'm still mostly sticking to safe 2d territory, but I admire the brave souls who dare to push on, even in the face of quaternions and what not manner of strange beasts.
I applaud you good sir. :clap:
-
Thanks Kirl :D
Unfortunately I'd need to be good with webGL to use Phong or Gouruad shading. But this example is live: http://fx.barcodebattler.co.uk/waveSphere/glowb.htm
-
I've tweeked the above example. The glow centre can now be adjusted from -1 to 1 in all three axes.
There's also a very crude "texture map". I bet you can't guess what it is supposed to be ;)