Skip to content

Commit

Permalink
README pointing links to files to libgptjs repo
Browse files Browse the repository at this point in the history
  • Loading branch information
@GiovannyJTT
GiovannyJTT committed Nov 7, 2023
1 parent b29e8cd commit 91d6dd6
Showing 1 changed file with 35 additions and 35 deletions.
70 changes: 35 additions & 35 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,39 +22,39 @@ __NOTE:__ You can play this app at [smooth-dragon-github-page](https://giovannyj

## LIBGPT

* [three-global.js](./src/libgptjs/external-libs/three-global.js)
* [three-global.js](https://github.com/GiovannyJTT/libgptjs/blob/master/external-libs/three-global.js)
* It is used to create a global object `THREE` and add functionalities to it
1. Imports `three.js` library as module from npm
2. Names it `THREE` (following the nomenclature used in other modules)
3. Exports the object `THREE` from this script / module to be imported into the rest (ex: in OrbitControls.js)
4. In [OrbitControls.js](./src/libgptjs/external-libs/OrbitControls.js), or other scripts, new functionality is added to `THREE` object
* Graphical Programming with Threejs [libgptjs](./src/libgptjs/)
4. In [OrbitControls.js](https://github.com/GiovannyJTT/libgptjs/blob/master/external-libs/OrbitControls.js), or other scripts, new functionality is added to `THREE` object
* Graphical Programming with Threejs [libgptjs](https://github.com/GiovannyJTT/libgptjs/blob/master/)
* The classes at `libgptjs/` are importing `three-global.js`
* Wrapper / Library to facilitate re-use of code and organize the graphics pipeline
* It contains several objects (classes) for wrapping all the logic required for creating an scene with threejs
* This allows modularity and we can reuse code creating instances of those clases
* [GPT_Coords](./src/libgptjs/core/GPT_Coords.js)
* [GPT_Coords](https://github.com/GiovannyJTT/libgptjs/blob/master/core/GPT_Coords.js)
* Gets vertices (Float32Array) and edges array (Uint32Array)
* Calculates the normal vector for each triangle
* Provides a method for calculating the UV coordinates for each triangle
* [GPT_Model](./src/libgptjs/core/GPT_Model.js)
* [GPT_Model](https://github.com/GiovannyJTT/libgptjs/blob/master/core/GPT_Model.js)
* Simple class to integrate mesh + geometry + material
* Provides method for cleaning gl buffers that were reserved
* [GPT_LinkedModel](./src/libgptjs/core/GPT_LinkedModel.js)
* [GPT_LinkedModel](https://github.com/GiovannyJTT/libgptjs/blob/master/core/GPT_LinkedModel.js)
* Model formed of joining several `THREE.Object3D` in order to create articulated models like robot arms
* Provides method for adding a new link between two Object3D and finally linking all of them in sequence
* [GPT_ModelCollider](./src/libgptjs/core/GPT_ModelCollider.js)
* [GPT_ModelCollider](https://github.com/GiovannyJTT/libgptjs/blob/master/core/GPT_ModelCollider.js)
* Attaches an AABB (axis aligned bounding box) to an existign Mesh
* Provides a method for detecting collision with another AABB
* [GPT_Scene](./src/libgptjs/core/GPT_Scene.js)
* [GPT_Scene](https://github.com/GiovannyJTT/libgptjs/blob/master/core/GPT_Scene.js)
* List of `GPT_Model`s and `GPT_Light`
* Provides abstract methods for initial configuration and updates in every frame
* These methods have to be overriden when creating the instance of the `GPT_Scene`
* Provides methods for adding and removing models at runtime
* [GPT_Render](./src/libgptjs/core/GPT_Renderer.js)
* [GPT_Render](https://github.com/GiovannyJTT/libgptjs/blob/master/core/GPT_Renderer.js)
* It initializes the camera and camera-handler
* This is the main object that creates a `webgl-renderer` and invokes methods of `GPT_Scene`
* [GPT_App](./src/libgptjs/core/GPT_App.js)
* [GPT_App](https://github.com/GiovannyJTT/libgptjs/blob/master/core/GPT_App.js)
* Top-level object that configures the `window` and uses `GPT_Render`
* It contains the main loop for animation in which the `update` and `render` are being invoked

Expand All @@ -63,50 +63,50 @@ __NOTE:__ You can play this app at [smooth-dragon-github-page](https://giovannyj
* [main.js](./src/scripts/main.js)
* It is the entry point. It checks webgl compatibility and instanciates `GPT_Renderer`, `GPT_App`, and `SceneDragon`
* Then invokes init and run loop
* [Common.js](./src/libgptjs/scene-dragon/Common.js)
* [Common.js](https://github.com/GiovannyJTT/libgptjs/blob/master/scene-dragon/Common.js)
* Contains all constants to be re-used in several points in the code
* [CoordsDragon.js](./src/libgptjs/scene-dragon/CoordsDragon.js)
* [CoordsDragon.js](https://github.com/GiovannyJTT/libgptjs/blob/master/scene-dragon/CoordsDragon.js)
* Stores arrays of dragon model (vertices and edges)
* Since it inherits from `GPT_Coords` it provides methods for computing normals and UVs coordinates
* [CoordsGripper.js](./src/libgptjs/scene-dragon/CoordsGripper.js)
* [CoordsGripper.js](https://github.com/GiovannyJTT/libgptjs/blob/master/scene-dragon/CoordsGripper.js)
* Stores arrays of gripper model (vertices and edges)
* Since it inherits from `GPT_Coords` it provides methods for computing normals and UVs coordinates
* [ModelSkybox.js](./src/libgptjs/scene-dragon/ModelSkybox.js)
* [ModelSkybox.js](https://github.com/GiovannyJTT/libgptjs/blob/master/scene-dragon/ModelSkybox.js)
* Creates a big cube and maps the texture to simulate environment
* These skybox images will be reflected on the Dragon surface and Gripper surface
* [ModelDragon.js](./src/libgptjs/scene-dragon/ModelDragon.js)
* [ModelDragon.js](https://github.com/GiovannyJTT/libgptjs/blob/master/scene-dragon/ModelDragon.js)
* Inherits from `GPT_Model` and overrides `get_geometry` and `get_material` methods
* Creates and initializes `geometry` and `material` objects to be inserted into a `mesh`
* Computes `UV` coordinates per face (triangle) in order to simulate reflections of the skybox onto the dragon surface
* Contains a `GPT_ModelCollider`
* [ModelGripper.js](./src/libgptjs/scene-dragon/ModelGripper.js)
* [ModelGripper.js](https://github.com/GiovannyJTT/libgptjs/blob/master/scene-dragon/ModelGripper.js)
* Idem to ModelDragon
* [ModelRobot.js](./src/libgptjs/scene-dragon/ModelRobot.js)
* [ModelRobot.js](https://github.com/GiovannyJTT/libgptjs/blob/master/scene-dragon/ModelRobot.js)
* Inherits from `GPT_LinkedModel`
* Creates separately the parts of the robot (base, arm, forearm, hand and gripper). Then links them all in sequence
* [ModelTrajectory.js](./src/libgptjs/scene-dragon/ModelTrajectory.js)
* [ModelTrajectory.js](https://github.com/GiovannyJTT/libgptjs/blob/master/scene-dragon/ModelTrajectory.js)
* Given 2 initial points to be used as direction vector
* It computes the control points (`p1, p2, p3, peak and end`) to be used later into the spline points calculation
* Control points form a triangle with one of the edges following the `p1` and `p2` direction
* `Peak` point is in the middle of triangle and is the highest point
* `End` point is on the floor
* Spline points are calculated using the control points and `catmullrom` with N (30) segments
* Final spline points are used to create line geometry to be rendered
* [ModelBullet.js](./src/libgptjs/scene-dragon/ModelBullet.js)
* [ModelBullet.js](https://github.com/GiovannyJTT/libgptjs/blob/master/scene-dragon/ModelBullet.js)
* Creates the geometry, material, mesh, and GPT_ModelCollider
* Needs a trajectory and a starting point3D
* Provides a method for moving the bullet between 2 consecutive points3D of the trajectory based on time passed since last frame
* [InputManager.js](./src/libgptjs/scene-dragon/InputManager.js)
* [InputManager.js](https://github.com/GiovannyJTT/libgptjs/blob/master/scene-dragon/InputManager.js)
* Checks if it is running on mobile device or desktop
* Creates the UI (sliders, toggles, etc.) and installs the `onChange` callbacks to be executed when a value is updated by the user
* Creates html button for "shoot" and attaches the corresponding callback
* [FSM_Robot.js](./src/libgptjs/scene-dragon/FSM_Robot.js)
* [FSM_Robot.js](https://github.com/GiovannyJTT/libgptjs/blob/master/scene-dragon/FSM_Robot.js)
* Defines a finite state machine for robot shooter
* Defines `States`, `Events` and `Transitions`
* Defines Transitions as a dictionary of allowed state-event pairs
* Provides methods for `transiting` from one state to other depending on the "Event"
* Provides method for `updating` the current state based on timers expiration
* [SceneDragon.js](./src/libgptjs/scene-dragon/SceneDragon.js)
* [SceneDragon.js](https://github.com/GiovannyJTT/libgptjs/blob/master/scene-dragon/SceneDragon.js)
* Contains the handling of main interactions: InputManager, animation (update) of objects, etc.
* Inherits from `GPT_Scene` and overrides `createObjects`, `createLights`, `updateObjects` and `updateLights` methods
* Performs all setting up of models and lights: floor, dragon, skybox, robot, trajectory, etc.
Expand Down Expand Up @@ -163,7 +163,7 @@ __NOTE:__ You can play this app at [smooth-dragon-github-page](https://giovannyj
* `normal`
* It is a `Float32Array` containing all the normal vectors for all triangles
* Array lenght is `3 * num triangles`
* It is computed at [GPT_Coords](./src/libgptjs/core/GPT_Coords.js) `calculateNormals`
* It is computed at [GPT_Coords](https://github.com/GiovannyJTT/libgptjs/blob/master/core/GPT_Coords.js) `calculateNormals`
* Idem to `positions`
* `indices`
* It is a `UInt32Array` containing all the sequence of indices (of `positions` array) to form triangles
Expand All @@ -183,7 +183,7 @@ __NOTE:__ You can play this app at [smooth-dragon-github-page](https://giovannyj
* Each vertex will have 2 UV components (texture coordinates)
* UV coordinate values are in range [0.0, 1.0]
* Array lenght is `6 * num triangles`
* It is computed at [GPT_Coords.js](./src/libgptjs/core/GPT_Coords.js) `getUVs`
* It is computed at [GPT_Coords.js](https://github.com/GiovannyJTT/libgptjs/blob/master/core/GPT_Coords.js) `getUVs`
* `itemSize` 2 because each vertex has 2 UV componets
```javascript
_geom.setAttribute(
Expand Down Expand Up @@ -216,7 +216,7 @@ __NOTE:__ You can play this app at [smooth-dragon-github-page](https://giovannyj
### UV coordinates calculation
[GPT_Coords.js](./src/libgptjs/core/GPT_Coords.js) `getUVs`
[GPT_Coords.js](https://github.com/GiovannyJTT/libgptjs/blob/master/core/GPT_Coords.js) `getUVs`
1. Calculates UV for planar surface (x, y, z) where z = 0
2. Depends on geometry bounding box
Expand All @@ -226,7 +226,7 @@ __NOTE:__ You can play this app at [smooth-dragon-github-page](https://giovannyj
### Surface Smoothing by using Vertices Normals
1. First you need to have per-face (triangle) normals
* [GPT_Coords.js](./src/libgptjs/core/GPT_Coords.js) `calculateNormals`
* [GPT_Coords.js](https://github.com/GiovannyJTT/libgptjs/blob/master/core/GPT_Coords.js) `calculateNormals`
* Creates `points3D` array by grouping 3 values from `positions` array
* Creates triagles array by grouping 3 values from `points3D` array
* Computes normals for each triangle clockwise
Expand Down Expand Up @@ -259,7 +259,7 @@ __NOTE:__ You can play this app at [smooth-dragon-github-page](https://giovannyj
### Lighting and Shadows
[SceneDragon.js](./src/libgptjs/scene-dragon/SceneDragon.js) `createLights`
[SceneDragon.js](https://github.com/GiovannyJTT/libgptjs/blob/master/scene-dragon/SceneDragon.js) `createLights`
1. Creates an `ambient light` that will be added when shading the models surface
* 5% white
Expand All @@ -279,7 +279,7 @@ __NOTE:__ You can play this app at [smooth-dragon-github-page](https://giovannyj
### Skybox and reflections
1. [ModelSkyBox.js](./src/libgptjs/scene-dragon/ModelSkybox.js)
1. [ModelSkyBox.js](https://github.com/GiovannyJTT/libgptjs/blob/master/scene-dragon/ModelSkybox.js)
* Creates a `BoxGeometry`
* Attaches a texture (material) per face
* The texture images must be specifically for a cube texture, like the ones at [skybox_images/](./src/resources/images/Yokohama3/)
Expand All @@ -297,7 +297,7 @@ __NOTE:__ You can play this app at [smooth-dragon-github-page](https://giovannyj
})
...
```
2. Reflections on [ModelDragon.js](./src/libgptjs/scene-dragon/ModelDragon.js)
2. Reflections on [ModelDragon.js](https://github.com/GiovannyJTT/libgptjs/blob/master/scene-dragon/ModelDragon.js)
* Sets `transparent`, `opacity`, and `shinines` to simulate "glass"
* Sets the `Skybox Textures Array` as `envMap`
```javascript
Expand All @@ -316,11 +316,11 @@ __NOTE:__ You can play this app at [smooth-dragon-github-page](https://giovannyj
}
);
```
3. Idem for hand of the robot [ModelGripper.js](./src/libgptjs/scene-dragon/ModelGripper.js)
3. Idem for hand of the robot [ModelGripper.js](https://github.com/GiovannyJTT/libgptjs/blob/master/scene-dragon/ModelGripper.js)
### User Interface (sliders, toggles, buttons)
[InputManager.js](./src/libgptjs/scene-dragon/InputManager.js)
[InputManager.js](https://github.com/GiovannyJTT/libgptjs/blob/master/scene-dragon/InputManager.js)
1. It creates a `dat.gui` object
* dat.gui assumes the GUI type based on the target's initial value type:
Expand All @@ -338,7 +338,7 @@ __NOTE:__ You can play this app at [smooth-dragon-github-page](https://giovannyj
### Finite State Machine to handle "shooting robot"
[FSM_Robot.js](./src/libgptjs/scene-dragon/FSM_Robot.js)
[FSM_Robot.js](https://github.com/GiovannyJTT/libgptjs/blob/master/scene-dragon/FSM_Robot.js)
1. Defines `States`, `Events` and allowed `Transitions`
2. A transition is defined as `destination state` given a pair `State-Event`
Expand All @@ -351,7 +351,7 @@ __NOTE:__ You can play this app at [smooth-dragon-github-page](https://giovannyj
### Collision detection using AABB
[GPT_ModelCollider.js](./src/libgptjs/core/GPT_ModelCollider.js)
[GPT_ModelCollider.js](https://github.com/GiovannyJTT/libgptjs/blob/master/core/GPT_ModelCollider.js)
* Main concept can be read at [link](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection)
1. Attaches an AABB (axis aligned bounding box)
Expand All @@ -366,7 +366,7 @@ __NOTE:__ You can play this app at [smooth-dragon-github-page](https://giovannyj
#### Integration with libgptjs
[DragonFireParticles.json](./src/libgptjs/scene-dragon/DragonFireParticles.json)
[DragonFireParticles.json](https://github.com/GiovannyJTT/libgptjs/blob/master/scene-dragon/DragonFireParticles.json)
1. Adapted manually for our SceneDragon scale:
```json
Expand All @@ -390,7 +390,7 @@ __NOTE:__ You can play this app at [smooth-dragon-github-page](https://giovannyj
```
2. The rest of values (color, sprite, life cycle, etc.) were edited using the Nebula editor (windows)
[DragonFire.js](./src/libgptjs/scene-dragon/DragonFire.js)
[DragonFire.js](https://github.com/GiovannyJTT/libgptjs/blob/master/scene-dragon/DragonFire.js)
1. Loads the particle system from json file and creates an instance of `nebula` that will be used to render
* `Nebula.SpriteRenderer` needs the main `THREE.Scene`
Expand Down

0 comments on commit 91d6dd6

Please sign in to comment.