From 91d6dd60b7d48cc5aaa2515da8ecdd55a38c5c50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Giovanny=20Javier=20Tipantu=C3=B1a=20Toapanta?= <67277278+GiovannyJTT@users.noreply.github.com> Date: Tue, 7 Nov 2023 17:28:49 +0100 Subject: [PATCH] README pointing links to files to libgptjs repo --- README.md | 70 +++++++++++++++++++++++++++---------------------------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/README.md b/README.md index e6bf181..601e4bc 100644 --- a/README.md +++ b/README.md @@ -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 @@ -63,28 +63,28 @@ __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 @@ -92,21 +92,21 @@ __NOTE:__ You can play this app at [smooth-dragon-github-page](https://giovannyj * `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. @@ -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 @@ -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( @@ -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 @@ -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 @@ -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 @@ -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/) @@ -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 @@ -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: @@ -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` @@ -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) @@ -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 @@ -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`