Skip to content

Photoshop/figma-like program, a shape editor program that uses the Web Development Framework and WebGL API, written in TypeScript

Notifications You must be signed in to change notification settings

KenEzekiel/grafkom-webgl-1

Repository files navigation

Tugas Besar 1 IF3260 Grafika Komputer

Problem Description

WebGL is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser. Using vertex shader, fragment shader that creates a program to draw objects.

In this project, students are needed to develop a photoshop/figma-like program, a shape editor program that uses the Web Development Framework and WebGL API.

Developed for the fulfillment of IF3260 Computer Graphics Project 1

Program Description

This program allows users to create, edit, and visualize various 2D models interactively on a canvas. Users can draw lines, squares, rectangles, and polygons, as well as apply geometric transformations such as translation, rotation, and dilation to the objects.

There are also several features for each model, such as changing the color of vertices, moving vertices using drag-and-drop, and saving and reloading models. Additionally, some advanced features implemented in the program include Convex Hull for polygons, Animation, and implicit Vertex Locking.

To develop this program, pure WebGL is used without any external libraries for WebGL, but the use of other libraries to build the UI or other visual aspects is allowed.

How to Run

Ensure that pnpm is installed

  1. Execute pnpm install
  2. Execute pnpm dev The program is now running on localhost at the port displayed in the terminal

Created By

NIM Name
13521060 Fatih Nararya R.I.
13521089 Kenneth Ezekiel S.
13521101 Arsa Izdihar I.

About

Photoshop/figma-like program, a shape editor program that uses the Web Development Framework and WebGL API, written in TypeScript

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •