Ray by Day JS

Day Zero - Prologue (What's this about?)

Note that these pages are still in development and will continue to change in the upcoming months. Despite that, there is enough useful material in the pages to justify this site being publicly accessible even as it continues to evolve. If there are particular pages that interest you that seem incomplete, check back in a few weeks to see if things have changed.

One of the reasons this site was originally developed was to serve as the a working demonstration to support a talk given for the Philadelphia JavaScript Club in July of 2025. At the time of that demonstration this site was not yet completed and the explanatory content lagged significantly behind the working JavaScript code in the site - and that is still the case. This is why, for now, you will find that many of the later pages of site are functional but do not yet have any explanatory content - a flaw which I am working to change little by little.

This site attempts to explain the CGI technique called "ray tracing", a computer programming technique used to create realistic images of virtual three-dimensional environments by simulating the passage of rays of light through a virtual environment, use the tracking ("tracing") of these rays to calculate the view/image that would be seen from a specified vantage point (an "observer" or "camera") in that environment.

In addition to being about ray tracing, this site is also specifically for software developers and particularly those using the JavaScript language. All the examples shown on this site are in JavaScript accompanied by minimal HTML and CSS. In most cases the code examples shown will be the very same JavaScript code components used to dynamically generate the images shown on the pages of this site. (There is also some Node.js code in the repository as well, but that code is not an active part of the web site. Most of that Node.js code was used to generate static diagrams used in the site or elsewhere.)

Still, the real topic of this site is ray tracing, and the use of JavaScript is just incidental. I hope that developers familiar with other programming languages might still find this site useful and interesting regardless of what programming languages they are using.

The site is organized in an incremental day-by-day format. Each "day" in the material presents one or more new ideas or concepts related to CGI and ray tracing. For each day, coding examples in JavaScript are also provided. In addition to observing how that code is implemented, those with an interest in doing so might choose to develop their own JavaScript modules based on the ideas in these pages, or use the code in these pages as a starting point for their own projects using other languages.

I make no claim that any of the techniques I have used in these pages are the best or most efficient, nor do I even claim that my approach resembles any known standard for how to implement ray tracing. Most of the code on these pages is the result of my own trial-and-error efforts. Those more interested in the end results than the process would probably be well advised to find some appropriate pre-existing CGI tools rather than make use of the code in these pages. If you do make use of this JavaScript code, please take a look at the terms of the associated licensing agreement which grants free use of the code with the understanding that it is at your own risk. (Though attribution is not required, it would certainly be appreciated.)

All source code for this web site (JavaScript, HTML, and CSS) can be found in its companion GitHub repository which can be accessed and viewed via the link below. Viewers of this site are welcome and even encouraged to view the source code of these pages, whether by viewing the source code directly in their browsers or by visiting the repository via the link below.

GitHub repository: ray-by-day-js

Definitions

CGI
Computer-Generated Imagery
Ray Tracing
A computer graphics technique by which realistic images are generated by simulating the passage of rays of light through a defined virtual three-dimensional environment
Home Next