distance to the camera

[fuddl]

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

[mithi]

Hi @fuddl,

I just published 0.4.0. This version exposes all the utility functions which are the building blocks you can use to build your
own custom renderSceneFunction!

import {
    renderScene,
    SCENE_ORIENTATION,
    getWorldWrtCameraMatrix,
    AxesRenderer,
    SceneCube,
    DataRenderer,
    SceneCubeRenderer,
    Vector,
    rotateXYZmatrix,
    multiply4x4matrix,
    radians,
} from "@mithi/bare-minimum-3d"

If you check the renderScene source code, you can observe that it computes a matrix called cube.wrtCameraMatrix and a scalar called projectionConstant which are both passed to DataRenderer

The DataRenderer uses this algorithm to convert a 3d point to the 2d point. (note that transformMatrix here is cube.wrtCameraMatrix

You can take a look at lines 42-60 of DataRenderer to see how it converts the point from 3d to 2d.

bare-minimum-3d/src/data-renderer.ts

Lines 42 to 60 in 4bfd0ca

	_projectPoint(x_: number, y_: number, z_: number, i: number): Vector {
	const {
	sceneRange,
	dataXoffset,
	dataYoffset,
	dataZoffset,
	transformMatrix,
	projectionConstant,
	} = this
	const x = x_ / sceneRange + dataXoffset
	const y = y_ / sceneRange + dataYoffset
	const z = z_ / sceneRange + dataZoffset
	return new Vector(x, y, z, `${i}`)
	.transform(transformMatrix)
	.project(projectionConstant)
	}

Here's what I think you need.

1. What new Vector(x, y, z, "myVector").transform(matrix4x4) returns (if I'm not mistaken), is the the (x, y, z) coordinates of your point with respect to the camera
2. and i think the squareRoot(x**2 + y**2 + z**2) is the virtual distance to the camera that you're looking for.

This means, you may want to create your own DataRenderer to do something like

    _projectPointWithVirtualDistanceWrtCam(x_: number, y_: number, z_: number, i: number): Vector {
        /*** SNIP **/
      
       const pointWrtCam= new Vector(x, y, z, `${i}`).transform(transformMatrix)
       const virtualDistanceWrtCam = // squareRoot of pointWrtCam's x**2 + y**2 + z**2
       return {
         point2d: pointWrtCam.project(projectionConstant)
         virtualDistanceWrtCam
       }
    }

Or something like that.

If you'd like to learn more about the math behind translating 2d to 3d, I recommend the following resources

1. https://github.com/mithi/hello-tiny-box
2. https://www.scratchapixel.com/lessons/3d-basic-rendering/computing-pixel-coordinates-of-3d-point/mathematics-computing-2d-coordinates-of-3d-points
3. https://www.gabrielgambetta.com/computer-graphics-from-scratch/10-describing-and-rendering-a-scene.html

I hope that helps you, thanks!

[fuddl]

That was helpful. Thanks 😅