Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add library support for 3D ellipses #1711

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

Conversation

keenancrane
Copy link
Collaborator

@keenancrane keenancrane commented Feb 9, 2024

image

This (draft) PR provides functionality for drawing 3D ellipses using a single 2D Ellipse shape. The 2D ellipse is an exact, rather than approximate, representation of the 3D ellipse under perspective projection.

Changes already made:

  • added the library function projectEllipse to Functions.ts
  • exposed projectEllipse in Style, via a function of the same name
  • added a rotation field to the Ellipse shape, which is needed to draw projected ellipses

Still in progress:

  • Add warnings for programs that try to use constraints/objectives/functions which assume ellipses are not rotated (whenever rotation is set to a nonzero angle)
  • Improve robustness of projectEllipse by properly handling the case where QB is close to zero.
  • Augment projectEllipse to use a model, projection, and view matrix, so that 3D ellipses can be drawn in the same context as other 3D shapes (lines, polygons, etc.).
  • Maybe: augment projectEllipse to return a final argument indicating whether the project ellipse is front- or back-facing relative to the oriented plane of projection.
  • Maybe: add a function projectSphere that draws the silhouette of a 3D sphere as an ellipse, under perspective projection.

Future Work

In general, it is possible to obtain an exact or near-exact vectorization of two classes of 3D objects:

  • silhouettes of quadric surfaces, and
  • intersection curves of quadric surfaces with a plane.

Quadric surfaces include ellipsoids, paraboloids, and hyperboloids (with spheres, cylinders, and cones as important special cases). Under perspective projection, all of these curves become (pieces of) ellipses, parabolas, or hyperbolas in the plane. SVG can exactly represent parabolas (via quadratic Bézier curves) and ellipses; hyperbolas are well-approximated by two Bézier curves and two lines.

A rough "pipeline" that handles this more general class resembles the one used in this PR:

  1. Construct the quadric for the desired curve, incorporating modelview and projection matrices.
  2. Extract curve parameters from the quadric, performing tests on matrix elements to determine if the curves are elliptical, parabolic, or hyperbolic.
  3. Convert ellipse/parabola/hyperbola parameters into SVG parameters for ellipse, quadratic Bézier, and Bézier/line primitives, respectively.
  4. Optional: clip paths against 3D planes (e.g., to truncate infinite cylinders, hyperboloids, etc.).
  5. Optional: clip paths against the screen-space viewport.
  6. Generate SVG path data for the resulting collection of curves (which in general will consist of more than one segment).

Each of these steps is conceptually not a big deal, but takes some elbow grease to actually develop the specific formulas (especially for clipping). This is a much larger project than can be addressed in the current PR, and is left to future work.

Copy link

github-actions bot commented Feb 9, 2024

± Registry diff

M	geometric-queries/closest-point/test.svg
M	geometric-queries/closest-silhouette-point/test.svg
M	geometric-queries/ray-intersect/test-group.svg
M	geometric-queries/ray-intersect/test.svg
M	geometric-queries/test.svg
M	hypergraph/hypergraph.svg
M	random-sampling/test.svg
M	shape-spec/all-shapes.svg
M	structural-formula/molecules/caffeine.svg
M	structural-formula/reactions/methane-combustion.svg

📊 Performance

Key

Note that each bar component rounds up to the nearest 100ms, so each full bar is an overestimate by up to 400ms.

     0s   1s   2s   3s   4s   5s   6s
     |    |    |    |    |    |    |
name ▝▀▀▀▀▀▀▀▀▀▚▄▄▄▄▄▄▄▄▄▄▞▀▀▀▀▀▀▀▀▀▘
      compiling optimizing rendering

If a row has only one bar instead of four, that means it's not a trio and the bar just shows the total time spent for that example, again rounded up to the nearest 100ms.

Data

                                                          0s   1s   2s   3s   4s   5s
                                                          |    |    |    |    |    |
set-theory-domain/tree-venn                               ▝▚▘
set-theory-domain/tree-tree                               ▝▀▞
group-theory/quaternion-multiplication-table              ▝▀▚▀▘
walk-on-spheres/SignedAngleOutside                        ▝▀▚▘
spectral-graphs/examples/hypercube                        ▝▀▞
group-theory/quaternion-cayley-graph                      ▝▚▘
set-theory-domain/tree-venn-3d                            ▝▞
atoms-and-bonds/one-water-molecule                        ▝▞
structural-formula/molecules/caffeine                     ▝▀▚▄▀
walk-on-spheres/walk-on-stars                             ▝▀▀▚▞▀▀▘
set-theory-domain/continuousmap                           ▝▞
mobius/mobius                                             ▝▞
linear-algebra-domain/two-vectors-perp                    ▝▞
tutorials/tutorial1                                       ▝▞
tutorials/tutorial2                                       ▝▞
tutorials/tutorial3                                       ▝▞
molecules/nitricacid-lewis                                ▝▀▞
exterior-algebra/vector-wedge                             ▝▞
shape-spec/all-shapes                                     ▝▚▀▀▘
shape-spec/arrowheads                                     ▝▞
graph-domain/textbook/sec1/fig1                           ▝▀▄▘
graph-domain/textbook/sec1/fig2                           ▝▀▄▄▘
graph-domain/textbook/sec1/fig3                           ▝▀▄▄▞
graph-domain/textbook/sec1/fig4                           ▝▀▚▄▄▘
spectral-graphs/examples/hexagonal-lattice                ▝▀▀▀▀▀▀▀▀▚▄▄▀
dinoshade/dinoshade                                       ▝▀▀▀▀▀▞▘
spectral-graphs/examples/star-graph                       ▝▀▀▀▀▀▀▀▀▀▚▘
spectral-graphs/examples/box                              ▝▀▀▀▀▀▀▀▞
graph-domain/textbook/sec1/fig5                           ▝▀▚▄▄▄▘
graph-domain/textbook/sec1/fig6                           ▝▀▀▀▀▀▄▄▄▄▄▄▄▄▄▄▄▄▄▞
graph-domain/textbook/sec1/fig7                           ▝▚▞
graph-domain/textbook/sec1/fig8a                          ▝▀▚▄▄▄▘
graph-domain/textbook/sec1/fig8b                          ▝▀▄▄▄▘
graph-domain/textbook/sec1/fig9                           ▝▀▄▘
graph-domain/textbook/sec1/fig10                          ▝▀▞
graph-domain/textbook/sec1/fig11                          ▝▀▄▀
graph-domain/textbook/sec1/fig12                          ▝▀▚▄▞▘
graph-domain/textbook/sec1/fig13                          ▝▀▄▄▞
graph-domain/textbook/sec2/fig3                           ▝▀▀▚▄▄▄▄▄▄▄▄▞
graph-domain/textbook/sec2/fig4                           ▝▀▚▄▄▄▄▞
graph-domain/textbook/sec2/fig5                           ▝▀▀▚▄▄▄▄▄▄▄▄▘
graph-domain/textbook/sec2/fig6                           ▝▀▀▀▄▄▄▄▄▄▞
graph-domain/textbook/sec2/fig9                           ▝▀▀▀▀▄▄▄▄▄▄▄▄▄▄▄▄▄▘
graph-domain/textbook/sec2/fig10a                         ▝▚▄▞
graph-domain/textbook/sec2/fig10b                         ▝▚▞
graph-domain/textbook/sec2/fig11a                         ▝▚▘
graph-domain/textbook/sec2/fig11b                         ▝▚▘
graph-domain/textbook/sec2/fig11c                         ▝▚▘
graph-domain/textbook/sec2/fig12                          ▝▚▘
graph-domain/textbook/sec2/fig13                          ▝▀▀▀▚▄▄▄▄▄▄▄▄▄▄▞
graph-domain/textbook/sec2/fig14                          ▝▀▄▞
graph-domain/textbook/sec2/fig16b                         ▝▚▘
geometry-domain/textbook_problems/c05p13                  ▝▚▘
geometry-domain/textbook_problems/c01p01                  ▝▚▘
geometry-domain/textbook_problems/c03p01                  ▝▚▘
geometry-domain/textbook_problems/c05p01                  ▝▚▘
geometry-domain/textbook_problems/ex                      ▝▀▄▘
triangle-mesh-3d/two-triangles                            ▝▚▘
random-sampling/test                                      ▝▀▚▘
geometry-domain/textbook_problems/c11p12                  ▝▀▄▘
curve-examples/catmull-rom/catmull-rom                    ▝▞
word-cloud/example                                        ▝▚▄▞
geometry-domain/siggraph-teaser                           ▝▀▞
minkowski-tests/maze/non-convex                           ▝▞
lagrange-bases/lagrange-bases                             ▝▞
hypergraph/hypergraph                                     ▝▀▚▄▄▄▄▄▄▄▄▞
persistent-homology/persistent-homology                   ▝▚▄▄▄▄▞
walk-on-spheres/laplace-estimator                         ▝▀▞
walk-on-spheres/poisson-estimator                         ▝▀▞
walk-on-spheres/nested-estimator                          ▝▀▞
walk-on-spheres/offcenter-estimator                       ▝▀▞
shape-distance/points-around-star                         ▝▀▞
shape-distance/points-around-polyline                     ▝▚▘
shape-distance/points-around-line                         ▝▚▘
shape-distance/lines-around-rect                          ▝▞
fake-3d-linear-algebra/projection                         ▝▞
animation/center-shrink-circle                            ▝▞
graph-domain/other-examples/hamiltonian-cycle             ▝▀▄▄▘
structural-formula/reactions/methane-combustion           ▝▀▚▄▄▄▄▄▘
molecules/glutamine                                       ▝▀▞
matrix-ops/tests/matrix-matrix-addition                   ▝▞
matrix-ops/tests/matrix-matrix-division-elementwise       ▝▞
matrix-ops/tests/matrix-matrix-multiplication-elementwise ▝▞
matrix-ops/tests/matrix-matrix-multiplication             ▝▞
matrix-ops/tests/matrix-matrix-subtraction                ▝▞
matrix-ops/tests/matrix-transpose                         ▝▞
matrix-ops/tests/matrix-vector-left-multiplication        ▝▞
matrix-ops/tests/matrix-vector-right-multiplication       ▝▞
matrix-ops/tests/scalar-vector-division                   ▝▞
matrix-ops/tests/scalar-vector-left-multiplication        ▝▞
matrix-ops/tests/scalar-vector-right-multiplication       ▝▞
matrix-ops/tests/vector-vector-addition                   ▝▞
matrix-ops/tests/vector-vector-division-elementwise       ▝▞
matrix-ops/tests/vector-vector-multiplication-elementwise ▝▞
matrix-ops/tests/vector-vector-outerproduct               ▝▞
matrix-ops/tests/vector-vector-subtraction                ▝▞
logic-circuit-domain/half-adder                           ▝▞
curve-examples/cubic-bezier                               ▝▄▄▘
triangle-mesh-2d/diagrams/cotan-formula                   ▝▚▘
triangle-mesh-2d/diagrams/concyclic-pair                  ▝▚▞
triangle-mesh-2d/diagrams/halfedge-mesh                   ▝▚▘
triangle-mesh-2d/diagrams/relative-orientation            ▝▚▘
triangle-mesh-2d/diagrams/triangle-centers                ▝▚▘
triangle-mesh-2d/diagrams/angle-equivalence               ▝▀▄▄▘
timeline/penrose                                          ▝▀▞▘
graph-domain/textbook/sec5/ex32                           ▝▀▀▀▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▞
curve-examples/open-elastic-curve                         ▝▚▄▘
curve-examples/closed-elastic-curve                       ▝▀▄▞
graph-domain/other-examples/arpanet                       ▝▀▀▚▄▄▄▄▄▄▄▄▄▄▄▄▄▄▘
graph-domain/other-examples/nyc-subway                    ▝▀▀▀▀▀▄▄▄▄▄▄▄▄▄▄▄▘
fancy-text/fancy-text                                     ▝▚▄▘
curve-examples/blobs                                      ▝▀▀▀▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▞
curve-examples/space-curves                               ▝▀▀▀▄▄▄▘
geometric-queries/ray-intersect/test-group                ▝▀▀▀▞
ray-tracing/path-trace                                    ▝▞
ray-tracing/bidirectional                                 ▝▞
ray-tracing/next-event-estimation                         ▝▞
geometric-queries/test                                    ▝▀▞
geometric-queries/closest-point/test-group                ▝▞
geometric-queries/closest-point/test                      ▝▞
geometric-queries/closest-silhouette-point/test           ▝▞
geometric-queries/ray-intersect/test                      ▝▀▀▚▘
box-arrow-diagram/computer-architecture                   ▝▀▀▀▚▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▘
stochastic-process/stochastic-process                     ▝▀▀▀▀▀▀▀▀▀▀▀▀▀▀▚▀▀▘
stochastic-process/epsilon-shell/AbsorbingBoundary        ▝▀▀▀▀▀▀▀▀▀▀▞▘
solid/eigenspace                                          ▐▌
solid/triangles                                           ▐
solid/vectors                                             ▐
tsne/tsne                                                 ▝▀▀▀▀▀▚▄▄▄▄▄▄▄▄▘
spectral-graphs/examples/4x4-sudoku-graph                 ▝▀▞
spectral-graphs/examples/dodecahedral-graph               ▝▚▘
matrix-library/crossProductMatrix                         ▝▞
matrix-library/diagonal2d                                 ▝▞
matrix-library/diagonal3d                                 ▝▞
matrix-library/identity2d                                 ▝▞
matrix-library/identity3d                                 ▝▞
matrix-library/inverse2d                                  ▝▞
matrix-library/inverse3d                                  ▝▞
matrix-library/matrix2d                                   ▝▞
matrix-library/matrix3d                                   ▝▞
matrix-library/outerProduct2d                             ▝▞
matrix-library/outerProduct3d                             ▝▞
matrix-library/rotate                                     ▝▞
matrix-library/rotate2d                                   ▝▞
matrix-library/rotate3d                                   ▝▞
matrix-library/rotate3dh                                  ▝▞
matrix-library/scale2d                                    ▝▞
matrix-library/scale3d                                    ▝▞
matrix-library/shear2d                                    ▝▞
matrix-library/shear3d                                    ▝▞
matrix-library/skew2d                                     ▝▞
matrix-library/translate2d                                ▝▞
matrix-library/translate3dh                               ▝▞
atoms-and-bonds/wet-floor                                 ▝▄▘
curve-examples/offset                                     ▝▄▘
curve-examples/frenet-frame                               ▝▞
curve-examples/osculating-circle                          ▝▞
curve-examples/evolute-of-cardioid                        ▝▀▀▞
spectral-graphs/examples/truncated-cube-graph             ▝▀▞
spectral-graphs/examples/torus                            ▝▀▀▀▀▀▀▀▀▀▀▀▀▀▀▚▄▀
spectral-graphs/examples/mobius                           ▝▀▀▀▀▀▀▀▀▀▀▀▀▚▄▞
impossible-ngon/ngon                                      ▝▀▀▀▀▀▚▀▘
impossible-ngon/parameters                                ▝▞
impossible-ngon/nsides-chirality                          ▝▚▘
spectral-graphs/examples/periodic-hexagonal-lattice       ▝▀▀▀▀▄▘
alloy-models/dining-philosophers                          ▝▀▞
alloy-models/message-passing                              ▝▚▄▄▄▘
alloy-models/ring-leader-election                         ▝▞
alloy-models/river-crossing                               ▝▞▀
alloy-models/workstations                                 ▝▚▄▘
alloy-models/generic                                      ▝▀▀▄▄▄▄▄▄▄▄▘
Dynamics/Lyapunov                                         ▝▞
fractals/chaos-game/sierpinski-triangle                   ▝▀▀▀▀▀▄▀▀▀
fractals/chaos-game/vicsek-fractal                        ▝▀▀▀▀▀▀▀▄▞▀▀▘
fractals/l-systems/tree                                   ▝▀▞
fractals/ifs/ifs                                          ▝▀▀▀▀▀▀▞▀▀▘
dataviz/linearreg                                         ▝▞
dataviz/residual                                          ▝▞

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants