https://github.com/codeagent/rb-phys2d-renderer
The means for visualizing and interacting with world created by RbPhys2D
https://github.com/codeagent/rb-phys2d-renderer
renderer rigid-body-dynamics simulation viewport visualizer webgl
Last synced: 28 days ago
JSON representation
The means for visualizing and interacting with world created by RbPhys2D
- Host: GitHub
- URL: https://github.com/codeagent/rb-phys2d-renderer
- Owner: codeagent
- License: mit
- Created: 2023-02-06T16:51:03.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-21T19:29:29.000Z (over 3 years ago)
- Last Synced: 2026-05-16T23:51:51.576Z (about 1 month ago)
- Topics: renderer, rigid-body-dynamics, simulation, viewport, visualizer, webgl
- Language: TypeScript
- Homepage:
- Size: 262 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/codeagent/rb-phys2d-renderer/actions/workflows/ci.yml) [](https://badge.fury.io/js/rb-phys2d-renderer)
# Debug Renderer For RbPhys2D
The means for visualizing and interacting with world created by [RbPhys2D](https://github.com/codeagent/rb-phys2d)
## What's Included:
- Picking And Dragigin Objects (`LMB`)
- Viewport Scaling And Navigation (`WHEEL`, `MMB`)
- Rendering `Axes`, `Objects`, `Joints`, `Contacts`
- Touch Devices Support
## Installation
Using `npm` package manager:
```bash
npm install rb-phys2d-renderer
```
## Usage
### ESM
```typescript
import { createViewport, createWorldRenderer } from 'rb-phys2d-renderer';
const canvas = document.getElementById('canvas');
// Create Viewport And Assign Required Controls
const viewport = createViewport(canvas)
.addMousePickingControl(world)
.addViewportAdjustingControl();
const renderer = createWorldRenderer(viewport, world);
// Somewhere in loop:
// clear viewport
renderer.clear();
// render parts determined by render mask
renderer.render(RenderMask.Default & ~RenderMask.Joint);
```
### Browser
```html
// use global accessible object rbPhys2dRenderer
const viewport = rbPhys2dRenderer
.createViewport(canvas)
.addMousePickingControl(world)
.addViewportAdjustingControl();
const renderer = rbPhys2dRenderer.createWorldRenderer(viewport, world);
// ...
renderer.clear();
renderer.render(
rbPhys2dRenderer.RenderMask.Default & ~rbPhys2dRenderer.RenderMask.Joint
);
```
## Contributing
Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.
Please make sure to update tests as appropriate.
## License
[MIT](https://choosealicense.com/licenses/mit/)