3D-Renderer 🚀

Welcome to 3D-Renderer, a custom-built 3D rendering engine that brings your geometric visuals to life! Dive into the world of ray tracing, shading, and rendering techniques with this project.

🌟 Features

• Customizable Camera 🎥: Easily adjust camera position and orientation.
• Ray Tracing 🌈: Simulate realistic light interactions with objects, producing shadows, reflections, and more.
• Phong Shading 💡: Approximate light reflection with the Phong model for a smooth, realistic appearance.
• Anti-Aliasing 🖌️: Supersampling to reduce jagged edges and create smoother visuals.
• Real-time Preview ⏱️: Visualize changes instantly as you tweak rendering settings.

🔧 Technologies Used

• React & Three.js: UI and 3D rendering framework.
• JavaScript: Core logic and algorithms.
• CSS/Tailwind: Styled components for a sleek interface.
• Framer Motion: Animated transitions for a smooth user experience.

🚀 Getting Started

Prerequisites

• Node.js (v14+)
• npm or yarn

Installation

1. Clone the repo:

   git clone https://github.com/devKanix/3D-Renderer.git
   cd 3D-Renderer

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev
   
   

Usage

• Adjust Camera Settings: Modify the camera props in StarsCanvas for different perspectives.
• Customize Lights: Change the light intensity and position for different effects.
• Modify 3D Models: Add or modify objects in the scene using Three.js.

Concepts Covered

• Ray-Sphere Intersection: Calculate if and where rays intersect with spheres.
• Phong Illumination Model: Simulate ambient, diffuse, and specular reflections.
• Recursive Ray Tracing: Trace rays for reflections and refractions.

Prerequisites for 3D Rendering

To get started with 3D rendering concepts, it’s helpful to have a basic understanding of:

• Vector mathematics (dot product, cross product).
• Light reflection and refraction.
• Ray tracing and shading models.

Thank You!