Skip to content

README.md

Latest commit

 

History

History
49 lines (40 loc) · 2.28 KB

README.md

File metadata and controls

49 lines (40 loc) · 2.28 KB

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!
⚡