Data Transmission Formats Java Project

Users can search the internet for free 3D model data files of their interest (e.g. famous buildings). We would like to help them to view these model files mapped to 2D. The idea is that an application reads the 3D json file and converts it to SVG. SVG files can be viewed with a web browser

Functionaliy

Application reads 3D model json file that contains triangles shapes.
Application rotates the triangles, maps them to 2D and moves them to the visible portion of the screen.
Write the triangles as polygons into an SVG file

Sample Input

The input can be found in the input folder.

This is a tetrahedron shape (formatting can be strange; reason is to fit on one page):

[
  [
    {
      "x" : -100,
      "y" : 100,
      "z" : -100
    },
    {
      "x" : 100,
      "y" : 100,
      "z" : -100
    },
    {
      "x" : 0,
      "y" : -100,
      "z" : 0
    }
  ],
  [
    {
      "x" : 100,
      "y" : 100,
      "z" : -100
    },
    {
      "x" : 0,
      "y" : 100,
      "z" : 100
    },
    {
      "x" : 0,
      "y" : -100,
      "z" : 0
    }
  ],
  [
    {
      "x" : -100,
      "y" : 100,
      "z" : -100
    },
    {
      "x" : 0,
      "y" : 100,
      "z" : 100
    },
    {
      "x" : 0,
      "y" : -100,
      "z" : 0
    }
  ],
  [
    {
      "x" : -100,
      "y" : 100,
      "z" : -100
    },
    {
      "x" : 100,
      "y" : 100,
      "z" : -100
    },
    {
      "x" : 0,
      "y" : 100,
      "z" : 100
    }
  ]
]

The tetrahedron rotation angles on each of the axles are (values are given in radian):

X axis: -0.5
Y axis: 1
Z axis: 0.5

Sample Output

The output can be found in the output folder.

This is an output example:

<?xml
version="1.0" ?>
<html>
  <body>
    <svg width="1000" height="1000">
      <polygon points="0.0,11.967310893242441 131.05818858679152,192.82522360138182 244.19152869049444,0.0" style="fill:white;stroke:black;stroke-width:0.1"></polygon>
      <polygon points="94.83197635580758,63.774255693227595 131.05818858679152,192.82522360138182
244.19152869049444,0.0" style="fill:white;stroke:black;stroke-width:0.1"></polygon>
      <polygon points="0.0,11.967310893242441 94.83197635580758,63.774255693227595 244.19152869049444,0.0" style="fill:white;stroke:black;stroke-width:0.1"></polygon>
      <polygon points="0.0,11.967310893242441 94.83197635580758,63.774255693227595
131.05818858679152,192.82522360138182" style="fill:white;stroke:black;stroke-width:0.1"></polygon>
    </svg>
  </body>
</html>

Result displayed on screen with a web browser:

Triangle Rotation

Rotate triangles by rotating their 3D points with this formula: rotation matrix * 3D point

Example for X axis rotation:

Matrix multiplication: https://en.wikipedia.org/wiki/Matrix_multiplication

Rotation Matrices

X axis rotation matrix:

Y axis rotation matrix:

Z axis rotation matrix:

Rotation example

The following example demonstrates the rotation of the first 3D point from the tetrahedron on the X, Y and then Z axis using the formulas and rotation matrices given above.

Point coordinates:

x = -100
y = 100
z = -100

The rotation angles (in radian) on each of the axles:

X = -0.5
Y = 1
Z = 0.5

Step 1: Rotate the point on the X axis by -0.5 radian using the given formula (with detailed matrix multiplication):

Step 2: Rotating the resulting point on the Y axis by 1 radian:

Step 3: Finally rotating the point on the Z axis by 0.5 radian will result in the following:

Notes: The demonstrated algorithm rotated only one point once on each of the three axles. This algorithm has to be applied on all points of each triangle. This means that all three points of a triangle have to be rotated three times

Mapping to 2D

Offset the coordinates: find the smallest x coordinate out of all of the points, if it is negative add its absolute value to every x coordinate, else do nothing. Do the same with the y coordinates.
Sort the triangles: for each triangle take the average z value of the points, sort the triangles by that value in descending order.
Write the triangles in the given order, as polygon, only the x and, y coordinates

Eiffel tower

Sample input files are provided in the initial code repository.

This is the Eiffel tower visualized after conversion:

Use the following rotation angles on the three axles for the Eiffel-tower (given in radian):

X axis: 1.8
Y axis: -0.5
Z axis: 0

Technology

Read the input json with JSON-P Streaming API.
Write the SVG with StAX XML API

Cata77 / Data-Transmission-Formats