Giter Club home page Giter Club logo

Comments (7)

8Observer8 avatar 8Observer8 commented on May 24, 2024

@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.

8Observer8 avatar 8Observer8 commented on May 24, 2024

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.

shakiba avatar shakiba commented on May 24, 2024

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.

8Observer8 avatar 8Observer8 commented on May 24, 2024

@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:

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/

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.

shakiba avatar shakiba commented on May 24, 2024

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.

8Observer8 avatar 8Observer8 commented on May 24, 2024

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.

shakiba avatar shakiba commented on May 24, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.