Publishing Node modules with TypeScript and ES modules
Jack Franklin
April 23, 2020
https://blog.logrocket.com/publishing-node-modules-typescript-es-modules/

Microbundle
https://codewithhugo.com/microbundle-typescript-npm-module/

Other readings
https://dev.to/monisnap/5-min-typescript-npm-package-4ce4
https://moduscreate.com/blog/publishing-typescript-modules-npm/

And other techniques painter’s algorithm, back face culling, and/or depth buffering

• https://www.gabrielgambetta.com/computer-graphics-from-scratch/clipping.html
• https://www.gabrielgambetta.com/computer-graphics-from-scratch/hidden-surface-removal.html
• https://www.javatpoint.com/computer-graphics-hidden-surface-removal

Sweep-Line Algorithm for Line Segment Intersection (2/5) | Computational Geometry - Lecture 02

• https://www.youtube.com/watch?v=qkhUNzCGDt0

Check if two line segments intersect

• https://www.youtube.com/watch?v=bbTqI0oqL5U

How to check if two given line segments intersect? | GeeksforGeeks
https://www.youtube.com/watch?v=wCR48FqkI4w

Some relevant discussions here:
https://www.reddit.com/r/compsci/comments/il9bb5/for_a_tiny_3d_rendering_for_projecting_only_3d/

This repo is an amazing resource
https://github.com/volfegan/GeometricAlgorithms

Sweep-Line and Segment Intersection
http://www.cs.cmu.edu/afs/cs/academic/class/15451-s16/www/lectures/lec26-segments-intersect.pdf
lec26-segments-intersect.pdf

Bentley–Ottmann algorithm
https://en.wikipedia.org/wiki/Bentley%E2%80%93Ottmann_algorithm#Detailed_algorithm

A Short Survey of Intersection Algorithms
http://geomalgorithms.com/a09-_intersect-3.html

Casey Muratori, “Gilbert Johnson Keerthi"
https://www.youtube.com/watch?v=Qupqu1xe7Io
https://caseymuratori.com/blog_0003

Comments

It would be nice to have a description explaining the responsibility of each declared class/module
https://github.com/mithi/bare-minimum-3d/tree/master/src

Documentation

Please check the wiki / documentation, to learn the arguments that you'll need to pass to BareMinimum3d's renderScene function.

• SceneOptions
• SceneSettings
• ViewSettings

Algorithm

1. Start with a 2d circle defined by a radius, centered at the origin, in the xy plane
2. Get 5 points of a circle(r, 0), (-r, 0), (0, r), (0, -r), (0, 0)
3. Transform these 5 points in 3d given the 3 euler angles and the actual center (x, y, z)
4. Convert these points into 2d by projecting it to the canvas, the circle is now and ellipse
5. Get the radiusX and radiusY of the ellipse given the origin and two of the transformed points (compute the distance)
6. Get the angle of this new ellipse by getting the dot product of one of the vectors formed by the origin and one of the points and the x axis
7. We have now defined the ellipse (2d center, radiusX, radiusY, angle) representation

Motivation

renderScene() takes in viewSettings, sceneSettings,sceneOptions and data

Scene options has a shape that is specified here https://github.com/mithi/bare-minimum-3d/blob/master/src/parameter-types.ts You have to specify a lot of color, opacity, and lineSize among others. You may not want to think about these things.

Solution

So there should be an additional alternative function than can be used:
renderSceneDefaults(viewSettings, sceneSettings, sceneOptionsBoolean, backgroundColor, theme, data)

The user should be able to override the background color should s/he wish

The user should also be able to specify a theme which is light or dark which will use the default colors and lines etc.
The user should specify which scene option elements you want to show ie

const sceneOptionsBoolean: Record<string, boolean> = {
    showWorldAxes: true,
    showEdgeAxes: true,
    showCubeAxes: true,
    showXYplane: true,
    showCrosslines: true,
    showCubeEdges: true,
}

For the sceneOptions parameter, we can use these defaults for dark mode

const edgeAxes = {
    intersectionPointColor: "#FF00FF",
    intersectionPointSize: 5,
    xColor: "#E91E63",
    yColor: "#03A9F4",
    zColor: "#CDDC39",
    lineSize: 1,
    edgeOpacity: 1.0,
}

const worldAxes = {
    intersectionPointColor: "#FFFF00",
    intersectionPointSize: 5,
    xColor: "#E91E63",
    yColor: "#03A9F4",
    zColor: "#CDDC39",
    lineSize: 3,
    edgeOpacity: 1.0,
}

const cubeAxes = {
    intersectionPointColor: "#00FF00",
    intersectionPointSize: 5,
    xColor: "#E91E63",
    yColor: "#03A9F4",
    zColor: "#CDDC39",
    lineSize: 3,
    edgeOpacity: 1.0,
}

const sceneOptions = {
    paper: { color: "#17212B", opacity: 1 },
    xyPlane: { color: "#0652DD", opacity: 0.1 },
    sceneEdges: { color: "#1e3799", opacity: 1 },
    crossLines: { color: "#079992", opacity: 1 },
    edgeAxes,
    worldAxes,
    cubeAxes,
}

For refactoring purposes

@mithi next I'll try to implement the API into bare-minimum-3d. I guess it should look like this:

renderScene(viewSettings, sceneSettings, sceneOptions, data3d, plugins)

• prettier test
• code climate configs
• coveralls
• github actions to automatically publish in both npm and github registry
• Add 3 badges
  • bundlephobia - minified + gzipped
  • npm version

See also
https://github.com/mithi/hexapod/blob/master/.codeclimate.yml
https://github.com/mithi/hexapod/blob/master/.github/workflows/build.yml
https://dev.to/joeattardi/how-to-publish-an-npm-package-to-npm-and-github-package-registry-simultaneously-using-github-actions-213a

In the scene cube (https://github.com/mithi/bare-minimum-3d/blob/master/src/scene-cube.ts
) class, when the object is instantiated, the points of the cube are projected eagerly.

But sometimes they are not rendered by the scene cube renderer (https://github.com/mithi/bare-minimum-3d/blob/master/src/scene-cube-renderer.ts).

This is why it's better if we lazy load and /or memoize these things instead.

Scene Cube Constructor

    constructor(
        euler: { x: number; y: number; z: number },
        worldWrtCameraMatrix: matrix4x4,
        zOffset: number,
        range: number,
        projectionConstant: number
    ) {
        this.wrtWorldMatrix = rotateXYZmatrix(euler)
        this.wrtCameraMatrix = multiply4x4matrix(
            worldWrtCameraMatrix,
            this.wrtWorldMatrix
        )
        this.zOffset = zOffset
        this.range = range
        this.projectionConstant = projectionConstant
        this.crossPoints2d = this._projectedPoints(this.crossPoints3d)
        this.vertexPoints2d = this._projectedPoints(this.vertexPoints3d)
        const [center2d] = this._projectedPoints([this.center3d])
        this.center2d = center2d
        this.axes2d = this._projectedPoints(this.axes3d)
        this.worldAxes2d = this._projectedPoints(this.axes3d, 0, worldWrtCameraMatrix)
        const [worldOrigin2d] = this._projectedPoints(
            [this.center3d],
            0,
            worldWrtCameraMatrix
        )
        this.worldOrigin2d = worldOrigin2d
    }

Scene cube renderer expert

    render(): Array<Data2dSpecs> {
        return [
            ...this.drawXYplane(),
            ...this.drawBox(),
            ...this.drawCrossSectionLines(),
            ...this.drawEdgeAxes(),
            ...this.drawWorldAxes(),
            ...this.drawCubeAxes(),
        ]
    }

    drawBox(): Array<Polygon2dSpecs> {
        const { sceneEdges } = this.sceneOptions
        if (!sceneEdges) {
            return []
        }

1. More meaningful variables and classnames? (to be self documenting)
2. Add spaces

• bare-minimum-3d/src/axes-renderer.ts

  Lines 24 to 28 in c5cbf39

  	this.specs = specs
  	}
  	drawAxis(
  	p: Vector,
  	v: Vector,

• bare-minimum-3d/src/axes-renderer.ts

  Lines 55 to 58 in c5cbf39

  	}
  	}
  	render() {
  	const p = this.origin

3. Better module names ???

the DataRenderer currently returns two dimensional coordinates. I suppose it could additionally return the virtual distance to the camera. This could enable plug-ins to do things like:

• render a smaller markers for things that are further away
• calculate the radius of a 3d circle
• imitate a tilt-shift effect for markers that are too close to the camera

Currently, you can inspect https://github.com/mithi/bare-minimum-3d/blob/master/src/scene-cube-renderer.ts

Which has the following two helper functions

Draw Axes

const drawAxes = (
    p0: Vector,
    vx: Vector,
    vy: Vector,
    vz: Vector,
    name: string,
    AxesOptions: AxesOptions
) => {
    const {
        intersectionPointColor,
        intersectionPointSize,
        xColor,
        yColor,
        zColor,
        lineSize,
        edgeOpacity,
    } = AxesOptions

    let opacity = edgeOpacity || 1
    let size = lineSize || 1
    const xAxis: Lines2dSpecs = drawAxis(p0, vx, xColor, opacity, size, name, "x")
    const yAxis: Lines2dSpecs = drawAxis(p0, vy, yColor, opacity, size, name, "y")
    const zAxis: Lines2dSpecs = drawAxis(p0, vz, zColor, opacity, size, name, "z")

    const centerPoint: Points2dSpecs = {
        x: [p0.x],
        y: [p0.y],
        color: intersectionPointColor,
        opacity: 1.0,
        size: intersectionPointSize || 3,
        type: DataSpecType.points,
        id: `point-${name}`,
    }

    return [xAxis, yAxis, zAxis, centerPoint]
}

Draw Axis

const drawAxis = (
    p: Vector,
    v: Vector,
    color: string,
    opacity: number,
    size: number,
    name: string,
    axisType: string
): Lines2dSpecs => ({
    x0: [p.x],
    y0: [p.y],
    x1: [v.x],
    y1: [v.y],
    color,
    opacity,
    size,
    type: DataSpecType.lines,
    id: `${axisType}-${name}`,
})

Which is called by the following three methods.

It would be much cleaner if these 2 functions are replaced by one class which has the responsibility of drawing the 3 axes.