Comments (7)
@box2d/core already has the b2Draw class: Lusito/box2d.ts#33 (comment) but doesn't support JavaScript. I think you can get the b2Draw implementation from @box2d/core.
from planck.js.
box2d-wasm has the b2Draw class with JavaScript and ES6 module support.
Official example: https://github.com/Birch-san/box2d-wasm/tree/master/demo/modern/public
My example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- Since import maps are not yet supported by all browsers, it is
necessary to add the polyfill es-module-shims.js
Source: https://threejs.org/docs/index.html#manual/en/introduction/Installation
-->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"gl-matrix": "https://cdn.skypack.dev/[email protected]",
"box2d": "https://8observer8.github.io/lib/box2d-wasm-2.4.1/box2d-wasm-2.4.1.min.js"
}
}
</script>
<script type="module">
import Box2DLib from "box2d";
let box2d;
function initBox2D() {
return new Promise(resolve => {
Box2DLib().then((re) => {
box2d = re;
resolve();
});
});
}
async function main() {
await initBox2D();
const {
b2Draw: { e_shapeBit },
b2Vec2,
JSDraw
} = box2d;
const vec = new b2Vec2(1, 2);
console.log(`vec = ${vec.x}, ${vec.y}`);
function makeDebugDrawer() {
const debugDrawer = Object.assign(new JSDraw(), {
DrawSegment(vert1_p, vert2_p, color_p) {},
DrawPolygon(vertices_p, vertexCount, color_p) {},
DrawSolidPolygon(vertices_p, vertexCount, color_p) {},
DrawCircle(center_p, radius, color_p) {},
DrawSolidCircle(center_p, radius, axis_p, color_p) {},
DrawTransform(transform_p) {},
DrawPoint(vertex_p, sizeMetres, color_p) {}
});
debugDrawer.SetFlags(e_shapeBit);
return debugDrawer;
}
const debudDrawer = makeDebugDrawer();
}
main();
</script>
</body>
</html>
from planck.js.
Hey @8Observer8 , I just came across this, following the discussion on the other post.
I wonder what is the use-case for this? Is it not possible to do the same thing by iterating over objects in each frame and draw them?
from planck.js.
@shakiba What was the purpose of the b2Draw class, known in earlier versions of Box2D as b2DebugDraw? This is necessary for debugging the game. I can't know where the borders of the colliders are and what their real position is. All popular physics engines have this very necessary feature in game development:
- OimoPhysics: https://saharan.github.io/OimoPhysics/oimo/dynamics/common/DebugDraw.html
- rapier2D/3D: Add basic debug-render support
- Bullet Physics: https://pybullet.org/Bullet/BulletFull/classbtIDebugDraw.html
- Ammo.js (build of Bullet Physics to WASM)
- Box2D, Box2D-WASM and box2d.ts: https://box2d.org/documentation/classb2_draw.html
- Cannon ES: https://github.com/pmndrs/cannon-es-debugger But I'm using pure WebGL, and this engine uses Three.js to render colliders, so it doesn't work for me. I tried to make it possible for me to decide how to draw colliders, here: pmndrs/cannon-es#152
This is my example where I placed tiles and colliders in Tiled. Packed tiles and sprites into one texture atlas using Free Texture Packer. Physics at box2d/core. Drawn with pure WebGL 1.0 and linear algebra with glMatrix:
Demo: https://8observer8.github.io/webgl10-js/mario-2d-jumps-box2dcore-webgl-js/
This tutorial does a good job of explaining why you need "debug drawing": https://www.iforce2d.net/b2dtut/debug-draw
The quote from the tutorial above:
Obviously if you are making a game you will want to have all kinds of eye-popping fancy graphics instead of these boring polygons, but the debug draw feature can be very useful when you are having trouble getting the physics scene to work right. Sometimes the problem can be in the rendering part of your game, for example a sprite may be drawn at the wrong position or rotation, giving the appearance of incorrect physics. I recommend keeping the debug draw ready to hand for times when you want to check exactly what is going on in the Box2D world.
The way it works is quite simple. Box2D tells you all the shapes it sees and where they are eg. "a circle of radius r at x,y", or "an edge from a to b", etc and you draw what you are told. You don't have to do any transforming or worry about where the actual body positions are or which fixtures belong to which bodies, you simply draw the geometry. The idea is that if all you have to do is draw a few lines, you can't mess it up :-)
The default debug draw used by the testbed is done by subclassing the b2DebugDraw class, which has a bunch of virtual functions that can be overridden. Here are the main players:
virtual void DrawPolygon(b2Vec2* vertices, int32 vertexCount, b2Color& color) = 0;
virtual void DrawSolidPolygon(b2Vec2* vertices, int32 vertexCount, b2Color& color) = 0;
virtual void DrawCircle(b2Vec2& center, float32 radius, b2Color& color) = 0;
virtual void DrawSolidCircle(b2Vec2& center, float32 radius, b2Vec2& axis, b2Color& color) = 0;
virtual void DrawSegment(b2Vec2& p1, b2Vec2& p2, b2Color& color) = 0;
virtual void DrawTransform(const b2Transform& xf) = 0;
Separating the rendering code into one location like this makes it easy to implement debug drawing for different APIs like DirectX or OpenGL ES, or switch between different methods easily.
from planck.js.
Thanks for doing the research and sharing that!
I think the same thing could be achieved by iterating over bodies/fixtures, and joints, so I didn't add it. But I agree it is good abstraction and more convenient to use.
Would you be interested in making a PR and adding this?
from planck.js.
Would you be interested in making a PR and adding this?
Sorry, definitely not, because I do not have the necessary qualifications, time and desire. If you don't have the next problems on Planck.js in the future, as on box2d.ts:
, then maybe I will switch to Planck.js.
from planck.js.
I will close this for now, since it doesn't seems there is enough interest, but please feel free to reopen or comment if anyone is interest.
This is also the link to Rendering documentation page, which could serve the same purpose.
from planck.js.
Related Issues (20)
- When will version 1 be released? HOT 5
- Changing a circle collider's friction doesn't make it roll slower HOT 1
- Feature Request: Add the ESM button to jsDelivr
- How to change a collider's center? HOT 5
- Why does displacement cause multiple begin and end contact events? HOT 6
- Typo in the Wiki HOT 4
- setActive(true) throwing error in v1 beta 8
- ERROR changing a collider's mass cancels its linearVelocity HOT 5
- planck's npm package is quite large HOT 8
- World step error HOT 12
- possible testOverlap bug HOT 2
- Undefined Reading "x" error HOT 5
- Raycasts phasing through walls HOT 6
- clarification on the determinism limitation from docs HOT 1
- pointers on how to network planck HOT 8
- inconsistent Vec2 construction throughout examples
- DistanceJoint `getReactionForce` function not working HOT 4
- Script tag: Uncaught TypeError: t is null HOT 2
- Cannot read properties of undefined (reading "x") HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from planck.js.