mathics-threejs-backend

Edges can be drawn in 3 ways:

Shader method

This is only possible for simple objects.

This is used in cuboid.
The whole cuboid is colored with the following formula:

edgeFactor × cuboidColor + (1 - edgeFactor) × edgeColor

When edgeFactor is 0 we are drawing the edge.
If the formula be edgeFactor == 1 ? edgeColor : diffuse the edge would be very aliased.
edgeFactor is calculated by a method that prisoner849 posted here.

Object method

This is less performant but works for everything.

To draw the edges this way you need to create an InstancedBufferAttribute:

const edgesGeometry = new InstancedBufferGeometry()
    .setAttribute(
        'position',
        new BufferAttribute(
            new Float32Array(magicNumbersArray)
        )
    )

To get the magic numbers, you print the automatically generated edges and Ctrl+C Ctrl+V.
We don’t use the automatically generated edges because it’s slow.
You can use the following script template to generate the edges:

import { EdgesGeometry, YourGeometryHere } from 'path_to_threejs';

// Generate the geometry.
// Each geometry is generated in a different way.
// See the three.js documentation for more details: https://threejs.org/docs/
const geometry = new YourGeometryHere();

console.log(EdgesGeometry(geometry).attributes.position.array);

Wireframe true

This is the easiest way to draw edges, but it is only possible when the edges should be in every corners, not just the hard-corners.
e.g.: wireframe: true in a dodecahedron would lead to lines passing through its faces but this works in a multi-face polygon.

This is slower than the object method but accepts a indexed geometry, so in some cases it can be faster, use less RAM and be simpler than the object method.

This is used in polygon.

To draw the edges this way you need to add the property wireframe: true to the material of the object:

const material = new ShaderMaterial({
    wireframe: true,
    ...
});