Tutorial Post 3: Data Organisation.

Tutorial Post 3: Data Organisation.

Data organisation determines what can be designed.
Consider the following simple example with a model consisting of a single line segment and a single triangle:

Mki3d is written in JavaScript, so its data are being saved in JSON format:

{ "model":{ "segments":[ [ {"position":[0,0,0],"color":[1,1,1],"set":0}, {"position":[0,3,0],"color":[1,1,1],"set":0} ] ], "triangles":[ [ {"position":[-3,0,0],"color":[1,1,1],"set":0}, {"position":[-3,3,0],"color":[1,1,1],"set":0}, {"position":[0,3,0],"color":[1,1,1],"set":0} ] ] }, "view":{ "focusPoint":[-3,0,0], "rotationMatrix":[[1,0,0],[0,1,0],[0,0,1]], "scale":1, "screenShift":[0,0,60] }, "projection":{ "zNear":0.25, "zFar":300, "zoomY":4 }, "backgroundColor":[0,0,0], "cursor":{ "position":[-3,0,0], "marker1":{"position":[-3,0,0], "color":[1,1,1],"set":0}, "marker2":null, "color":[1,1,1], "step":1 }, "clipMaxVector":[100000000000000000000,100000000000000000000,100000000000000000000], "clipMinVector":[-100000000000000000000,-100000000000000000000,-100000000000000000000], "light":{ "vector":[0,0,1], "ambientFraction":0.2 }, "set":{ "current":0 } }

The shape of the designed object is defined by "model". The model consists of "segments" and  "triangles":

• "segments" is an array of elements, where each element is an array of two endpoints. 
•  "triangles" is an array of elements, where each element is an array of three endpoints. 

Each endpoint has following attributes:

• "position" - array of X,Y,Z coordinates in the model space
• "color" - array of R,G,B color components of the endpoint
• "set" - integer index of the set (used for auxiliary classification of the endpoints)

Note that each endpoint has its own attributes and is independent on other endpoints. A segment or triangle can have different colors and different set indices at different endpoints. Also the endpoints having the same position are not considered to be the same 'vertex'.

Besides "model" there are some other data:

• "view" describes the observer's position and orientation relative to the model space. From the observer's point of view the "focusPoint" of the model is first moved to oberver, then the model is rotated by rotation matrix, and finally the model is shifted by  "screenShift" vector.
• "projection" defines the so called 'view frustum' - parameters of perspective projection. 
• "backgroundColor"  is RGB background color.
• "light" defines direction vector of diffuse lighting component and what is the fraction of ambient light component. (Light is white and-in the editor-the diffuse directional light is emited in both  directions: "vector" and  -"vector".)
• "cursor" describes the position and color of the cursor. Since markers are used for inserting segments and triangles together with the cursor, they are listed inside "cursor" object. 
• "clipMaxVector", "clipMinVector",  define the corners of clipping box.
• "set" stores the value of "current" set index.

Tutorial Post 2: Markers - Inserting Segments and Triangles.

Tutorial Post 2: Markers - Inserting Segments and Triangles.

Markers, together with cursor,  are used for manual insertion of line segments  and triangles. There are two markers: MARKER 1 and MARKER 2. To start inserting press ENTER key. This sets MARKER 1 to the current position of the cursor:

When you move the cursor you will see a line between the cursor and MARKER 1. When you press ENTER key again this line segment is added to your designed object:

Note that MARKER 1 is also set to the new position of the cursor, since, in many cases, the user wants to insert another line starting in this position. (Inserting can be canceled by ESCAPE or 'C' key.)

To insert a triangle set MARKER 1 in the first endpoint of the triangle, move the cursor to the second endpoint of the triangle and press 'T' to set MARKER 2:

Then move the cursor to the third endpoint of the triangle and press ENTER:

New triangle is inserted, MARKER 2 is canceled, and MARKER 1 is set to the current position of the cursor.

Markers can be canceled by pressing either ESCAPE or 'C' key:

Tutorial Post 1: Cursor.

Tutorial Post 1: Cursor.

Position and Movement.

To see current position of the cursor press SHIFT key. The position is displayed in the upper right corner of the screen:

You can move the cursor using ARROWS and 'F', 'B', 'V' keys while the SHIFT key is pressed down. (While you move the cursor its current position is displayed in the upper right corner.)

You can also set cursor position in the 'Inputs Page'. Press the sequence of keys 'Q' 'I' and then input the values in the fields  'CURSOR X', 'CURSOR Y', 'CURSOR Z'.

Shape and Orientation of the Cursor.

The orientation of the cursor within the model space is fixed. The markings in its shape let you use the cursor as a kind of compass indicating X, Y and Z direction as follows:

The skew segment incident to the more horizontal line and crossing the more vertical line indicates which plane is most parallel to the screen and in which directions the cursor will be moved by arrow keys. 

Export to COLLADA.

Export to COLLADA.

I have added export to COLLADA ( *.dae files).

This should be useful if you want further process your rapidly designed models in some more advanced programs.

In current version, lines and triangles with vertex colors and ambient and directional lights are exported.

I have only tested it under Blender (version: 2.78) downloaded from    https://www.blender.org/ .

After importing to an empty scene in Blender, all the exported elements are under the node 'Root_node_MKI3D':

Blender imports only the colors of triangle vertices:

To have the colors of the triangles in the rendering add new material to Triangles_node_MKI3D:

And then enable option 'Vertex Color Paint':

To see the lines in the rendering, you have to add 'Wire' material to Lines_node_MKI3D:

Then you can render your exported scene:

You should see what you have exported:

File Chooser for Loading.

File Chooser for Loading.

Text Load Page is used for loading, merging, and importing data through the text-area.

I have just added option of loading a text from a file to the text-area on the Text Load Page with an input file-chooser. (Thanks to the article: https://www.html5rocks.com/en/tutorials/file/dndfiles/ )

On the Text Load Page press the key F and then ENTER to start the file-chooser. Note that the file is loaded to the text-area and you then still have an option to accept it by pressing ENTER or to change your mind.

Initial Post.

Initial Post.

I have started this blog to place posts about MKI 3D RAPID MODELER available at GitHub at
https://mki1967.github.io/mki3d/.

And I hope it is a good place for the user's comments.