JavaScript Rendering Engine

Description

This project is a basic 2D and 3D rendering engine written in JavaScript and HTML. It was created as a response to the first computer graphics project.

Usage

To run this engine, simply open the index.html file in your browser.

Features

The engine has the following features:

• Objects color customization: You can change the color of the objects in the scene using the color picker input.
• Background color customization: You can change the color of the background using the color picker input.
• Transformations: You can transform objects in the scene using the following inputs:
  • Translate: You can move objects along the X, Y, and Z axes using the numerical inputs.
  • Scale: You can scale objects along the X, Y, and Z axes using the numerical inputs.
  • Rotate: You can rotate objects around the X, Y, and Z axes using the range inputs.
• Projection: You can switch between orthographic and perspective projections using the dropdown menu. Additionally, you can adjust the field of view using the range input.
• Object selection: You can choose which objects to display in the scene using the checkboxes.

Toolbar

The toolbar contains the following inputs and options:

General options

• Objects Color: A color picker input to change the color of the objects in the scene.
• Background Color: A color picker input to change the color of the background.

Transform

• Translate: Numerical inputs to move objects along the X, Y, and Z axes.
• Scale: Numerical inputs to scale objects along the X, Y, and Z axes.
• Rotate: Range inputs to rotate objects around the X, Y, and Z axes.

Projection

• Type: A dropdown menu to switch between orthographic and perspective projections.
• Field of View: A range input to adjust the field of view.

Objects

• 2D objects:
  • Square: Display a square in the scene.
  • Rectangle: Display a rectangle in the scene.
  • Circle: Display a circle in the scene.
  • Triangle: Display a triangle in the scene.
• 3D objects:
  • Qube: Display a qube in the scene.
  • Pyramid: Display a pyramid in the scene.
  • Cylinder: Display a cylinder in the scene.
  • Sphere: Display a sphere in the scene.

To reset your changes on the selected object you can use the reset button.

Enjoy using the engine!