A simple ray tracer written in javascript with WebWorker support. This is a hobby project which was based on the following tutorial. https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-ray-tracing/implementing-the-raytracing-algorithm

Simulate the refraction and reflection of light on a surface. Glass with any shapes constructed from line segments and circular arcs, or shapes defined by a custom inequality f (x) < y < g (x). Material with a custom refractive index function n (x,y). An ideal lens which obeys exactly the thin lens equation (1/p + 1/q = 1/f).

Basic raytracing engine using Javascript. Added: Raytracing at each pixel Sphere object Vector class This step demonstrates the most bare-bones raytracing engine: Shoot a ray from each pixel on the canvas into the world, find where it lands, and set the pixel's color to …

Mar 13, 2025 · This ray tracing example demonstrates how to build an interactive graphics application with HTML Canvas and JavaScript. By integrating vector mathematics and ray-circle intersection logic, we’ve created a robust, educational, and visually appealing simulation.

Mar 20, 2025 · 3D browser voxel editor with a ray tracer capabilities implemented. Entirely made with pure Javascript and THREEJS.

Jan 12, 2021 · I'm making a small ray tracing example with JavaScript, but I have a problem. When I'm trying to calculate the reflected color it always returns [255,255,255] and I don't know why. If object is specular I trace a ray and it returns 255,255,255.

May 19, 2024 · So I built a dynamic realtime raytracer in pure JavaScript with no libraries. Check it out on Github: github.com/gianlucatruda/rays. Try the live demo in your browser (best on desktop): gianluca-rays.vercel.app. Realtime rendering: 75fps for 192 x 108 resolution. High-res rendering: ~700ms for 1152 x 647 resolution.

Ray tracing involves drawing specific rays that pass through a lens to determine the location and characteristics of the image formed by the lens. The adjustable parameters include position and focal length (f1 and f2) of the lenses, which can be altered using sliders and combo boxes.

Nov 10, 2018 · Simple ray tracing in pure Javascript As a quick diversion, I recently followed Peter Shirley’s excellent Ray Tracing in One Weekend guide, which is a terrific refresher of the surprisingly simple math involved in ray tracing.

In this session, Dylan Beattie will explain the principles behind ray-tracing, the technique behind most modern computer graphics. - and then, using modern JavaScript APIs like web workers, clamped arrays and ES modules, we’ll create a pure JavaScript ray …