Debug drawer for box2d.ts

debug-drawer.js

import { mat4, quat, vec3 } from "gl-matrix";
import { gl } from "./webgl-context.js";
import { getEuler } from "./math-helpers.js"

// This class implements debug drawing callbacks that
// are invoked inside b2World::Step
export default class DebugDrawer {

    constructor(program, pixelsPerMeter) {
        this.program = program;
        this.pixelsPerMeter = pixelsPerMeter;
        this.uMvpMatrixLocation = gl.getUniformLocation(program, "uMvpMatrix");
        this.uColorLocation = gl.getUniformLocation(program, "uColor");
        this.mvpMatrix = mat4.create();
        this.modelMatrix = mat4.create();
        this.projMatrix = null;
        this.viewMatrix = null;
        this.projViewMatrix = mat4.create();
        this.lineWidth = 4;
        this.centerX = 0;
        this.centerY = 0;
        this.tempVec = vec3.create();
        this.fromX = 0;
        this.fromY = 0;
        this.toX = 0;
        this.toY = 0;
        this.length = 0;
        this.position = vec3.create();
        this.rotation = quat.create();
        this.scale = vec3.create();
        this.color = vec3.create();
        this.unitX = vec3.fromValues(1, 0, 0);
        this.xf = vec3.create();
        this.radianOffset = 0;
        this.counter = 4;
        this.d2r = Math.PI / 180;
        this.r2d = 180 / Math.PI;
    }

    DrawSolidPolygon(vertices, vertexCount, color) {
        // console.log(vertices);
        // console.log(color);
        mat4.mul(this.projViewMatrix, this.projMatrix, this.viewMatrix);
        gl.uniform3f(this.uColorLocation, color.r, color.g, color.b);
        // this.color[0] = color.r;
        // this.color[1] = color.g;
        // this.color[2] = color.b;
        this.drawLine(vertices[0], vertices[1]);
        this.drawLine(vertices[1], vertices[2]);
        this.drawLine(vertices[2], vertices[3]);
        this.drawLine(vertices[3], vertices[0]);
    }

    drawLine(pointA, pointB) {
        this.fromX = pointA.x * this.pixelsPerMeter;
        this.fromY = pointA.y * this.pixelsPerMeter;
        this.toX = pointB.x * this.pixelsPerMeter;
        this.toY = pointB.y * this.pixelsPerMeter;
        if (this.fromX > this.toX) {
            this.centerX = this.toX + Math.abs(this.fromX - this.toX) / 2;
        } else {
            this.centerX = this.fromX + Math.abs(this.toX - this.fromX) / 2;
        }
        if (this.fromY > this.toY) {
            this.centerY = this.toY + Math.abs(this.fromY - this.toY) / 2;
        } else {
            this.centerY = this.fromY + Math.abs(this.toY - this.fromY) / 2;
        }
        this.tempVec[0] = this.toX - this.fromX;
        this.tempVec[1] = this.toY - this.fromY;
        this.length = vec3.length(this.tempVec);
        vec3.normalize(this.tempVec, this.tempVec);

        this.position[0] = this.centerX;
        this.position[1] = this.centerY;
        this.position[2] = 0;

        // quat.rotationTo(this.rotation, this.unitX, this.tempVec);
        const a = this.fromY - this.toY;
        const b = this.fromX - this.toX;
        const tan = a / b;
        const rad = Math.atan(tan);

        this.scale[0] = this.length;
        this.scale[1] = this.lineWidth;
        this.scale[2] = 1;

        // if (this.counter > 0) {
        //     const angles = vec3.create();
        //     getEuler(angles, this.rotation);
        //     console.log(/*angles[0] * this.r2d, angles[1] * this.r2d, */angles[2] * this.r2d);
        // }
        // this.counter--;

        mat4.identity(this.modelMatrix);

        mat4.translate(this.modelMatrix, this.modelMatrix, this.xf);

        // const angles = vec3.create();
        // getEuler(angles, this.rotation);
        if (this.counter > 0) {
            // console.log(Math.abs(angles[2] * this.r2d));
            console.log(rad * this.r2d);
        }
        this.counter--;
        mat4.rotateZ(this.modelMatrix, this.modelMatrix, rad);
        // mat4.rotateZ(this.modelMatrix, this.modelMatrix, 180 * this.d2r); // Math.abs(angles[2])

        mat4.translate(this.modelMatrix, this.modelMatrix, this.position);

        // Rotation
        // const rotationMatrix = mat4.create();
        // mat4.fromQuat(rotationMatrix, this.rotation);
        // mat4.mul(this.modelMatrix, this.modelMatrix, rotationMatrix);



        // vec3.add(this.position, this.position, this.xf);
        // quat.rotateZ(this.rotation, this.rotation, this.radianOffset);

        // Rotation
        // const quatMat = mat4.create();
        // quat.toMat4(this.rotation, quatMat);
        // mat4.multiply(this.modelMatrix, quatMat);
        // const rotationMatrix = mat4.create();

        // mat4.fromQuat(this.modelMatrix, this.rotation);

        // if (this.counter > 0) {
        //     console.log(rotationMatrix);
        // }

        // mat4.fromRotationTranslationScale(this.modelMatrix, this.rotation,
        //     this.position, this.scale);
        // mat4.fromZRotation(this.modelMatrix, this.radianOffset);

        // mat4.translate(this.modelMatrix, this.modelMatrix, this.position);

        // const rotationMatrix = mat4.create();
        // mat4.fromQuat(rotationMatrix, this.rotation);
        // if (this.counter > 0) {
        //     console.log(rotationMatrix);
        // }
        // this.counter--;
        // mat4.mul(this.modelMatrix, this.modelMatrix, rotationMatrix);
        mat4.scale(this.modelMatrix, this.modelMatrix, this.scale);
        mat4.mul(this.mvpMatrix, this.projViewMatrix, this.modelMatrix);
        gl.uniformMatrix4fv(this.uMvpMatrixLocation, false, this.mvpMatrix);
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    }

    PushTransform(xf) {
        this.xf[0] = xf.p.x * this.pixelsPerMeter;
        this.xf[1] = xf.p.y * this.pixelsPerMeter;
        this.radianOffset = xf.q.s;
        // console.log(xf.q.s * 180 / Math.PI);
    }
    PopTransform(xf) {}
    DrawPolygon(vertices, vertexCount, color) {}
    DrawCircle(center, radius, color) {}
    DrawSolidCircle(center, radius, axis, color) {}
    DrawSegment(p1, p2, color) {}
    DrawTransform(xf) {}
    DrawPoint(p, size, color) {}
}