WebGL 3D Editor

Github Repository:
Private

Description 👨‍💻

A web-based application that uses WebGL to draw and manipulate geometric models interactively. Users can create and edit lines, squares, rectangles, and polygons with basic transformations like translation, scaling, and rotation. Models can also be modified by dragging vertices and changing their colors. Created models can be saved, reloaded, and edited seamlessly.

How to Run 🚀

This repository is private, so you can’t run it locally for now. Here’s the demo we made on the project though (Indonesian Only):

1. Component Editor
2. Scene
3. Camera
4. Materials and Animation (Me)
5. Light
6. Character Controller
7. Parallax Map and Tweening (Me)

Features ✨

Component Editor

A component editor to add, remove, and edit objects and the scene graph. The component editor is located on the left side of the screen. It contains a list of all objects in the scene.

Upon selecting an object in the scene graph, the component editor also allows you to edit the properties of each object, such as its position, rotation, and scale.

Camera

Edit the camera properties, such as its position, rotation, and field of view. If target is specified, the camera position and rotation can also be updated by its orbit and distance. There are three camera projections available: orthographic, perspective, and oblique.

Orthographic Projection:

Perspective Projection:

Light

There is one directional light source available in the scene. This properties can be edited in the light editor, such as its color, intensity, and direction.

Materials

Upon selecting an object, go to the material editor to edit the material properties, such as its color, texture, and shininess. There is 2 type of shaders, which is Basic (Unlit/won’t react to the light), and Blinn-Phong (Lit/will react to the light). The materials are set in a PBR style, which includes albedo map, specular map, normal map, and displacement map.

There is also an option to do displacement using parallax mapping, which is a technique to create the illusion of depth in a 2D texture by using a height map.

Animation

Animation is defined in a json file and can be played in the scene. Select an object with animation and you can control the playback in the animation editor.

Any other stuff can be seen as in the demo.

Contributors 🤝

1.  Addin Munawwar Yusuf (cadevue)
2.  Fatih Nararya R.I. (Fatih20)
3.  Hosea Nathanael Abetnego (HoseaNA)
4.  Muhammad Zaydan Athallah (zaydanA)