SWGPU

Documentation - Demos - Screenshots

SWGPU is a simple 2D/3D game library written in TypeScript and powered by the latest web APIs. It offers an easy and complete way to create classic games in a non-opinionated but recommended coding style. From the start, we chose to embrace the future with pure WebGPU 3D rendering pipeline as the name suggests. Below the stack we've choice for this work:

API	Domain	Description
WebGPU	3D	A modern 3D graphics API designed to provide high-performance rendering and compute capabilities directly in web browsers.
Canvas2D	2D	A 2D graphics API designed to provide shapes, text, and images drawing.
CSS3	UI	The best way to build powerful and hightly maintenable user-interface.
Web Audio	Sound	An Audio API for playing sounds.

Getting started

Clone and install the starter-kit from this repository:

# git clone https://github.com/jay19240/SWGPU-StarterKit.git
# cd SWGPU-StarterKit
# npm install
# npm run dev

Edit the ''src/game_screen'' and start writing your game. Go to http://localhost:5173.

Features

🧱 Core
- Maths
- Tweening
- Events
- Curves
- Quaternions
- Object pooling
👾 2D
- Static sprite
- Animated sprite
- Isometric animated tilemap
- Orthographic animated tilemap
- Particles
- Rendering filters
- Motion lines
📐 2D Physics
- BoundingRect
- Tilemap box collider with slopes support
- Box2D built-in
🧊 3D
- Debug shapes
- Static mesh
- Animated mesh
- Static sprite
- Animated sprite
- Motion lines
- Billboarding
- Cubemap skybox
- Particules
- Flares
- Fog
- Vertex colorization
- Decals
- Shadow mapping
- Shadow volume
- Multi-viewport
- Camera orbit
- Camera WASD
- Auto mipmap
- Post rendering (gbuffers: depth/normal/ids)
- Rendering filters
- Customizable shaders
📐 3D Physics
- BoundingBox
- BoundingCylinder
- Walkmesh
- Hitmesh
- Ray-testing
- Jolt built-in
💥 3D Material
- Phong reflection model
- Dissolve texture map
- Displacement texture map
- Diffuse map
- Specular map
- Emissive map
- Normal map
- Env map
- Toon map
- Main textures scroll/scale handle
- Animated UV
- Specular shininess
- Emissive intensity
- Normal intensity
- Facing blending
- Secondary texture (mix/mul)
🌞 3D Light
- Directional light
- Point lights (max : 64)
- Spot lights (max: 16)
🖼️ 3D Post-processing
- Outline
- Hardware dithering
- Pixelation
- Color depth limiting
🎮 Input
- Action mapping
- Gamepad, keyboard and mouse support
🧠 AI
- A* for 2D/3D with graph and grid
- Djikstra graph
- Min-max with alpha-beta pruning
📺 Screen
- Navigate between different view of your game
- Resources pre-loading
📜 Scripts
- Load script from json file
- Register async command function and call-it from json file
- Manual jump to part of the script
- Command primitives like: WAITPAD, GOTO, GOTO_IF, EXEC_IF, VAR_SET, VAR_ADD, VAR_SUB, DELAY
🔊 Sound
- Handle sounds by groups
- Play multiple sounds at same time
🌳 Tree
- 2D binary space partition
- 3D binary space partition
🎨 UI
- Focus/unfocus widgets
- Fade in/out
- Widget architecture
🖍️ UI Widgets
🌆 DNA
- ECS architecture implementation

Examples

SWGPU come with 26 common examples.
Each one is thinking to represent a common game style (platformer, fighting, fps, rpg, etc...) or just a demo of features.
Template are written in typescript/javascript and build to be clean and extensible.

List of templates that you can test here:

3D Pre-rendered
3D Isometric
2D Visual Novel
2D Tilemap
2D Tilemap (with pathfinding)
2D Checker (extendable)
2D Trading Carding Game
3D FPS
3D Turn-based RPG
2D Fight
2D Triple Triad
2D Tilemap Isometric
2D Background Isometric
2D Shoot'em up
3D Third Person Camera
2D Platformer
3D Physics
2D Physics

List of examples:

3D Curve
3D Particles
3D Performance Test
3D Shadow Map
UI Menu
3D Viewer
3D Menu Ring
3D Pack

Compatible tools

The Blender Plugin

Find the the exporter in bin folder of this repository.
Install it on Blender by going to Edit -> Preferences -> Add-ons -> Install... -> Select the zip.
Push "n", and click on WarmeY2K Exporter to see the exportation panel.
Please, before export check if:

Your Blender scene is saved.
You've set the output path in the right panel -> output -> output path.

Click on the mesh and select Export JSM.
Congratulation, your static mesh is now exported !

Contributors

Crisxzu - Contribute to the Wiki, typedoc converter and Triple Triad demo.
zuda - Contribute to Triple Triad demo.
luciedefraiteur - Contribute to the fog.
thetinyspark - Contribute to the binary space partition.
Impre-visible - Contribute to 2D tutorial.

Some parts taken for this work

DOM for UI elements
CanvasRenderingContext2D for 2D stuffs
Box2D for 2D physics engine
Jolt Physics for 3D physics engine
No glTF support, we don't want to support the rendering techniques used by this format (BSDF, Skinning, etc...)

Bugs track

~~Physics bug when change tab and come back (even with paused the game before tab changing)~~

Changelog

- [Ver. 1.6.13] The 3D physics demo become more complete (full character implementation).
- [Ver. 1.6.12] A 2D physics demo is added.
- [Ver. 1.6.12] Change Rapier3D physics engine for Jolt Physics.
- [Ver. 1.6.12] Change Rapier2D physics engine for Box2D.
- [Ver. 1.6.12] Change the shootemup demo for a real shootemup base.
- [Ver. 1.6.12] Renderer hook in screen added.
- [Ver. 1.6.5]  Changes material animation to support multi-textures.
- [Ver. 1.6.5]  Scroll added on main textures.
- [Ver. 1.6.5]  Secondary texture added.
- [Ver. 1.6.5]  Dissolve texture added.
- [Ver. 1.6.0]  Tile slope support added.
- [Ver. 1.6.0]  Spritefusion support re-added.
- [Ver. 1.6.0]  Aseprite support added.
- [Ver. 1.6.0]  Tilekit support added.
- [Ver. 1.5.0]  Pack archivage added.
- [Ver. 1.5.0]  New mesh shader hook added.
- [Ver. 1.5.0]  Engine manager added.
- [Ver. 1.5.0]  ECS Components check optimized with the use of Set.
- [Ver. 1.5.0]  ECS query is added.
- [Ver. 1.5.0]  ECS nice sugar methods is added.
- [Ver. 1.5.0]  Fix offset factor on all sprite classes.
- [Ver. 1.5.0]  Tile collision method added to Gfx2TileMap.
- [Ver. 1.5.0]  Platformer template added.
- [Ver. 1.2.0]  Binary format for 3D files added.
- [Ver. 1.1.14] Tilemap SpriteFusion format added.
- [Ver. 1.1.13] Cylinder collision class added.
- [Ver. 1.1.12] Fix and optimize jnm.
- [Ver. 1.1.10] Some added to fps demo.
- [Ver. 1.1.7]  Mipmap added.
- [Ver. 1.1.5]  Export as npm module added.
- [Ver. 1.1.1]  Outline post-process effect added.
- [Ver. 1.1.1]  Normals, id and depth rendering buffer added.
- [Ver. 1.1.1]  Object pooling added.
- [Ver. 1.1.0]  Move physics to dedicated folder and redesign JNM.
- [Ver. 1.1.0]  Rapier has been added.
- [Ver. 1.0.3]  Playstation one post-process effect has been added.
- [Ver. 1.0.3]  Post-processing effects has been added.
- [Ver. 1.0.3]  Camera WASD has been added.
- [Ver. 1.0.3]  Camera orbit has been added.