JS Ray Tracing

• 

  Example Render Using JS Ray Trace

• 

  Really!!! It's Only JS

• 

  Cotton Candy?

Inspiration

Rocket Ships, Satellite modeling, and a whole host of GIS applications are built on ray tracing. With the initial moon landing, when technology and abstraction in CS were not at a high level, modeling posed a significant challenge. Using a scripting language to ray trace seemed a perfect way to blast off on a difficult challenge!

What it does

It does ray casting completely locally utilizing only JavaScript functions. Behind every animation and picture clicked is a huge amount of calculations and functions.

DoEs It REallY MAThS ThO

Yes it really does, here's a quick rundown of the math JS Ray Tracing Utilizes: matrix multiplication, division, addition, subtraction dot product cross product ray origin ray direction pin hole projection camera Rgb conversions

How I built it

JS Ray Tracing is built using plain JS/HTML with Node.js and is deployed on Heroku.

Challenges I ran into

In JavaScript you don't have access to pointers or lower level memory manipulation. Additionally, JavaScript variable names make it quite difficult to keep track of what's what especially when a bunch of math is being thrown around.

Accomplishments that I am proud of

I am not too sure how many purely javascript ray tracers are out there. To know that what is coded here is quite rare makes me proud.

What I learned

Why external APIs that interface with web applications exist. On a serious note, the mathematics behind ray casting.

What's next for JS Ray Tracing

JS Ray Tracing needs to do more complex ray tracing, and from there an acceleration structure. One day JS Ray Trace could possibly utilize a machine's GPU to do real time ray tracing.

Built With

• express.js
• heroku
• html5
• javascript
• node.js