{"id":24017729,"url":"https://github.com/sungj921028/3dfightinggame","last_synced_at":"2026-05-05T10:35:45.142Z","repository":{"id":248358405,"uuid":"828477770","full_name":"SunGj921028/3DFightingGame","owner":"SunGj921028","description":"A fighting game made by Javascript and WebGL API.","archived":false,"fork":false,"pushed_at":"2024-08-26T17:06:53.000Z","size":95839,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-08T09:46:00.544Z","etag":null,"topics":["3d-graphics","3d-models","api","computer-graphics","css3","game","javascript","project","webgl-computer-graphics","webgl2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SunGj921028.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-14T09:19:16.000Z","updated_at":"2024-08-26T17:06:58.000Z","dependencies_parsed_at":"2024-08-26T19:50:02.847Z","dependency_job_id":null,"html_url":"https://github.com/SunGj921028/3DFightingGame","commit_stats":null,"previous_names":["sungj921028/computer-graphics-fightinggame"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SunGj921028%2F3DFightingGame","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SunGj921028%2F3DFightingGame/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SunGj921028%2F3DFightingGame/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SunGj921028%2F3DFightingGame/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SunGj921028","download_url":"https://codeload.github.com/SunGj921028/3DFightingGame/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240746841,"owners_count":19850993,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d-graphics","3d-models","api","computer-graphics","css3","game","javascript","project","webgl-computer-graphics","webgl2"],"created_at":"2025-01-08T09:42:46.261Z","updated_at":"2026-05-05T10:35:45.137Z","avatar_url":"https://github.com/SunGj921028.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 3D Fighting Game\n\nA browser-based 3D fighting game built with vanilla JavaScript and WebGL2, featuring real-time combat, first/third-person camera switching, dynamic shadows, cubemap reflections, and OBJ model loading.\n\n---\n\n## Project Highlights\n\n- **Pure WebGL2 pipeline**: no game engine, rendering and interaction built from scratch\n- **Playable combat loop**: movement, attack, skill cast, enemy HP, win condition\n- **Advanced graphics features**:\n  - shadow mapping (off-screen depth pass)\n  - dynamic environment reflection (cubemap framebuffer)\n  - normal mapping with TBN tangent space\n- **Immersive control system**: pointer-lock mouse look + WASD + jump + mode switching\n- **Custom OBJ loader**: in-project parser for model geometry and tangent-space preparation\n\n---\n\n## Demo Snapshot\n\n![3DFightingGame Screenshot](https://github.com/user-attachments/assets/b36e6629-3c4f-4d86-ba89-a102afbdc485)\n\n---\n\n## Tech Stack\n\n- **Language**: JavaScript\n- **Graphics API**: WebGL2\n- **Math Utilities**: `cuon-matrix.js`\n- **Assets**: OBJ models + textures + cubemap\n- **Runtime**: Browser Canvas (`\u003ccanvas id=\"webgl\"\u003e`)\n\n---\n\n## Gameplay Features\n\n- Player movement: `W/A/S/D`\n- Jump: `Space`\n- Camera mode toggle: `T` (first person / third person)\n- Mouse sensitivity toggle: middle mouse or `I` guidance flow\n- Attack: left mouse click\n- Skill cast: right mouse click (temporary enemy slow)\n- Pause with pointer unlock / resume with pointer lock\n- Enemy HP reduction and game-over victory state\n\n---\n\n## Graphics and Rendering Pipeline\n\n### 1) Multi-pass rendering\n\n- **Shadow pass**: render scene depth to `shadowFBO`\n- **Reflection pass**: render cubemap views to `dynamicReflectionFBO`\n- **On-screen pass**: combine lighting, texture, shadows, and reflection\n\n### 2) Lighting model\n\n- Ambient + Diffuse + Specular (Phong-like shading)\n- Light-space depth comparison for shadow visibility\n- Percentage-closer style sampling for softer shadow edges\n\n### 3) Normal mapping\n\n- Tangent/bitangent generated per triangle from OBJ geometry + UVs\n- TBN matrix built in vertex shader\n- Normal map sampled in fragment shader for detailed surface lighting\n\n---\n\n## System Architecture \u0026 Project Structure\n\n```text\n3DFightingGame/\n├── index.html            # App entry and script loading order\n├── WebGL.js              # Core render loop, game state, camera, combat timing/collision checks\n├── shader.js             # Shader sources: main shading, shadow map, env cube, reflection\n├── init.js               # Program creation + uniform/attribute binding + FBO setup hooks\n├── framebuffer.js        # Off-screen framebuffer utilities (shadow + cubemap rendering)\n├── model.js              # OBJ loading/parsing and tangent-space data generation\n├── object.js             # Scene object draw orchestration\n├── setMat.js             # Matrix and material setup per draw call\n├── interation.js         # Input system: pointer lock, keyboard/mouse actions, view mode switch\n├── texture.js            # Texture and cubemap loading\n├── cuon-matrix.js        # Matrix/vector math helper\n├── screen_design.css     # UI and HUD styling\n└── object/               # OBJ models\n```\n\n---\n\n## Key Technical Points\n\n- Designed a complete WebGL render architecture without external engine abstractions.\n- Implemented shader-based shadows and dynamic cubemap reflections in the same scene.\n- Built custom OBJ parsing and tangent-space generation to support normal mapping.\n- Integrated gameplay logic and rendering loop while maintaining responsive camera/input behavior.\n- Used pointer-lock based control to simulate FPS-style interaction in browser.\n\n---\n\n## Run Locally\n\nBecause models/textures are loaded via `fetch`, run with a local static server (do not open by `file://` directly).\n\n### Option A: VSCode Live Server\n\n- Open project folder\n- Run **Live Server** on `index.html`\n\n### Option B: Python static server\n\n```bash\npython -m http.server 5500\n```\n\nThen open:\n\n```text\nhttp://localhost:5500\n```\n\n---\n\n## Known Limitations\n\n- Game logic and rendering state are largely global-variable driven, making large-scale extension harder.\n- Enemy behavior is simple/randomized rather than full AI state machine.\n- No build pipeline or module bundling; script loading is direct in `index.html`.\n\n---\n\n## Future Improvements\n\n- Refactor to modular game architecture (entity/component or scene-system style).\n- Add robust collision volumes and hitbox/hurtbox logic.\n- Upgrade enemy AI to behavior tree or finite-state machine.\n- Add audio feedback, combo system, and richer UI/HUD.\n- Introduce TypeScript + lint/test tooling for maintainability.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsungj921028%2F3dfightinggame","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsungj921028%2F3dfightinggame","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsungj921028%2F3dfightinggame/lists"}