https://github.com/muhamadajiw/webgl-visualizer
WebGL to implement a web application with drawing, editing, and visualizing a variety of models on a canvas. Made for Computer Graphics Course
https://github.com/muhamadajiw/webgl-visualizer
typescript vanilla-typescript vite web webgl
Last synced: 2 months ago
JSON representation
WebGL to implement a web application with drawing, editing, and visualizing a variety of models on a canvas. Made for Computer Graphics Course
- Host: GitHub
- URL: https://github.com/muhamadajiw/webgl-visualizer
- Owner: MuhamadAjiW
- Created: 2024-05-16T17:39:13.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-16T17:40:23.000Z (about 2 years ago)
- Last Synced: 2025-03-16T21:51:46.403Z (over 1 year ago)
- Topics: typescript, vanilla-typescript, vite, web, webgl
- Language: TypeScript
- Homepage:
- Size: 721 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tugas Besar Grafika Komputer
Using pure WebGL to implement a web application with drawing, editing, and visualizing a variety of models on a canvas.
## Implemented models, along with their special methods:
- **Line**: Adjust length
- **Square**: Adjust side length
- **Rectangle**: Adjust length or width
- **Polygon**: Addition and deletion of corner points
## For each model, the following can be done:
- 2 geometry transformations: translation, scaling, rotation
- Move one of the corner points using a slider or drag and drop
- Change the color of one or all corner points
- Save a created model
## Advanced features:
- Implementation of an algorithm to draw polygons in such a way that regardless of the changing order of adding points, the final polygon image remains the same, which is the convex hull of its points.
- Integration of animation on flat shapes
- Integration of animation on each vertex (marker)
- Calculation of the centroid of the polygon for rotational purposes
Kelompok SukaSamaKamu
- Fakhri Muhammad Mahendra / 13521045
- Razzan Daksana Yoni / 13521087
- Muhamad Aji Wibisono / 13521095
## Requirement
- node version 20 or latest
- npm version 10 or latest
# How to Run the program
1. Ensure the requirement are installed on your device
2. Enter the directory and run on terminal
```sh
npm install
npm run dev
```
5. Open localhost:5173 on your browser (chrome recommended)