Author Topic: [JavaScript] Glowb  (Read 1517 times)

0 Members and 1 Guest are viewing this topic.

Offline combatking0

  • JavaScript lives!
  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4569
  • Karma: 235
  • Retroman!
    • View Profile
    • Combat King's Barcode Battler Home
[JavaScript] Glowb
« 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!
You are our 9001st visitor.
Challenge Trophies Won:

Offline Kirl

  • Senior Member
  • Pentium
  • ********
  • Posts: 1200
  • Karma: 230
    • View Profile
    • Homepage
Re: [JavaScript] Glowb
« Reply #1 on: May 21, 2015 »
Looking forward to it, good luck!  :)
www.kirl.nl
Challenge Trophies Won:

Offline combatking0

  • JavaScript lives!
  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4569
  • Karma: 235
  • Retroman!
    • View Profile
    • Combat King's Barcode Battler Home
Re: [JavaScript] Glowb
« Reply #2 on: May 26, 2015 »
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.
You are our 9001st visitor.
Challenge Trophies Won:

Offline Kirl

  • Senior Member
  • Pentium
  • ********
  • Posts: 1200
  • Karma: 230
    • View Profile
    • Homepage
Re: [JavaScript] Glowb
« Reply #3 on: May 26, 2015 »
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:
www.kirl.nl
Challenge Trophies Won:

Offline combatking0

  • JavaScript lives!
  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4569
  • Karma: 235
  • Retroman!
    • View Profile
    • Combat King's Barcode Battler Home
Re: [JavaScript] Glowb
« Reply #4 on: May 26, 2015 »
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
You are our 9001st visitor.
Challenge Trophies Won:

Offline combatking0

  • JavaScript lives!
  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4569
  • Karma: 235
  • Retroman!
    • View Profile
    • Combat King's Barcode Battler Home
Re: [JavaScript] Glowb
« Reply #5 on: May 28, 2015 »
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 ;)
You are our 9001st visitor.
Challenge Trophies Won: