ray-tracing-fs

Ray Tracing (Path Tracing) in Fragment Shader using React Three Fiber, utilizing ShaderMaterial from Three.js.

Based on Ray Tracing in One Weekend

Dependency

• Next.js
• Three.js
• React Three Fiber

Running Development Server

$ npm i
$ run npm dev

Camera Controls

• Mouse Wheel : Change the vertical field of view
• Drag : Change the horizontal position of camera
• Key 'W' and 'S' : Change the focal length

Shaders

The shader files are in /shaders.

• Fragment Shader
• Vertex Shader

References

• Ray Tracing in One Weekend