TU ANUNCIO / YOUR PUBLICITY

AQUÍ PODRÍA ESTAR TU ANUNCIO: / HERE COULD BE YOUR AD E-mail
Mostrando entradas con la etiqueta 3d HTML.. Mostrar todas las entradas
Mostrando entradas con la etiqueta 3d HTML.. Mostrar todas las entradas

domingo, 24 de mayo de 2015

The discrete GIS I / El GIS discreto I

Introducción / Introduction


El objetivo final de este artículo es explicar como es posible pasar de una geolocalización a una capa de GIS. Hacer una geolocalización de datos es extremadamente simple. Sin embargo, realizar una zonificación GIS es mucho más compleja. Además hoy en día tenemos multitud de dispositivos móviles. Estos tienen multitud de sensores, ampliables con gadgets y siempre constan de GPS. Es "fácil" crear software que tome estos datos, los procese, y los asocie a unas coordenadas. De esta forma tendremos al final un conjunto de datos geolocalizados. Para que estos pasen a formar parte de un GIS es necesario dotarles de continuidad.

The ultimate goal of this article is to explain how it is possible to convert a geolocation in a GIS layer. Make geolocation data is extremely simple. However, making a zoning GIS is much more complex. Moreover today we have many mobile devices. They have a multitude of sensors, expandable with gadgets and always consist of GPS. Is "easy" to create software that takes this data, process, and associating coordinates. In this way we will have at the end a set of geo data. So that these become part of a GIS it is necessary to provide them with continuity.

Una primera idea será actuar de la misma forma que ante un problema topográfico. ¿En qué consiste? Se hace un taquimétrico que no es otra cosa que dotar a unos puntos del espacio (X e Y) de una coordenada Z. Se realiza una triangulación (generalmente del tipo Delaunay) y se obtiene como resultado final un modelo de terreno. Bien podrá ser la propia triangulación, la realización de unas curvas de nivel o una matriz discreta cuadriculada.

A first idea is to act in the same way that in a topographical problem. What does it consist of? One tachymetric lifting is done. This is to equip some points in space (X and Y) of a coordinate Z. Triangulation (Delaunay usual type) is performed and final result is obtained as a terrain model. This may be the triangulation own, performing a level curves or a discrete grid matrix.

En nuestro blog ya hemos utilizado las técnicas de triangulación y para más información de este tema vea: 
In our blog we've used triangulation techniques and for more information about this, you could see:


La novedad la tendremos en la consecución de una matriz discreta cuadriculada. En realidad estamos buscando un nuevo método de modelización del terreno apartándonos de la típica triangulación. Como se verá más adelante tendrá una repercusión muy importante.

The novelty we have in achieving a discrete grid matrix. We're actually looking for a new method of modeling the ground moving away from the typical triangulation. As will be seen later you will have a very significant impact.

Base matemática / Mathematical basis


Conviene volver a leer nuestro artículo de redes de Taylor multidimensionales:
Should re-read our article about multidimensional networks Taylor:


También necesitamos recordar como se resuelven los sistemas de ecuaciones aunque creo que no hemos olvidado el típico cálculo de resolución de sistemas de ecuaciones.

We also need to remember how the systems of equations are solved but I think that we have not forgotten the typical calculation of solving systems of equations.


Un ejemplo / One example


Hemos partido de los datos de toma de contaminación electromagnética provocada por las redes wifi de Pontevedra

We started with the data of electromagnetic pollution from wifi networks of Pontevedra.

Colocando los datos sobre con Google Earth
Positioning data with Google Earth

Se ha usado Google Earth
Google Earth has been used


El caso más simple lo obtendríamos con un sólo dato (resolveríamos por cada punto una ecuación con una incógnita)
The simplest case you would get with a single data (for each point would solve an equation with one unknown)



Se ha usado Google Earth
Google Earth has been used


Comparando dos datos por punto:
Comparing two data per point:


Se ha usado Google Earth
Google Earth has been used

Comparando tres datos por punto:
Comparing three data per point:

Se ha usado Google Earth
Google Earth has been used


Comparando seis datos por punto:
Comparing six data per point:



Y siendo salvaje, cambiamos la matriz de 100x100 (10.000 puntos ) por otra de 1000x1000 (un millón de puntos):
let's us wild, we change the matrix of 100x100 (10,000 points) for another of 1000x1000 (one million points):


Se ha usado Google Earth
Google Earth has been used

Quizás pensemos que será mejor tener más marcadas las curvas de nivel:
We may think we'd better have more pronounced the contour lines:

Para 100 divisiones: / For 100 divisions

Se ha usado Google Earth
Google Earth has been used


Para 1000 divisiones: / For 1000 divisions:

Se ha usado Google Earth
Google Earth has been used
Conclusiones / Conclusions

Con un número pequeño, pero bien pensado, se pueden extraer los mismos resultados que una batida de recogida de datos masiva cuando éstos son difusos como la contaminación por ondas (también puede utilizarse con el ruido - ondas sonoras)

With a small number, but well thought out, you can extract the same results as a massive collection of data where these are diffuse pollution as waves (also can be used with noise - sound waves)





domingo, 12 de enero de 2014

Programming for LIDAR / Programando para LIDAR

Creación de un programa de escritorio para datos LIDAR

Creating a desktop program for LIDAR data

Después de realizar varios programas con la temática LIDAR, hemos empezado a crear el programa definitivo. Para ello hemos empezado a modular el programa. Hemos dividido el problema en varios problemas diferentes. La resolución de cada problema es un módulo distinto.

Soluciones a buscar:

1ª Lectura de archivos LIDAR en su formato .las
2ª Visualización de la planta y diálogo con ella. Debemos poder colocar escalado un resumen de la planta y además poder extraer coordenadas de este objeto.
3ª Visualización de las proyecciones y/o 3D. Extracción de datos de ésta.

La lectura de archivos LIDAR se hace siguiendo las instrucciones de las especificaciones publicadas en http://www.asprs.org/a/society/committees/lidar/LAS_1-4_R6.pdf.

Es complejo, pero no imposible. Hemos utilizado para nuestro proyecto Visual Basic 6 por varios motivos. Somos poseedores de una licencia, se conecta muy bien en güindous y cierra el programa. Cada módulo será un archivo .ocx que se incorpora fácilmente en programas más grandes.

After making several programs with the theme LIDAR, we started to create the final program. So we've begun to modulate the program. We have divided the problem in several different problems. The resolution of each problem is a different module.

Solutions to search:

1st Reading LIDAR file format. .las
Display 2nd floor and dialogue with it. We climbed to place a summary of the ground and also to extract coordinates of this object.
Viewing 3rd projections and / or 3D. Extracting data from it.

LIDAR File reading is done following the instructions of the published specifications http://www.asprs.org/a/society/committees/lidar/LAS_1-4_R6.pdf.

It's complicated, but not impossible. We have used for our project Visual Basic 6 for several reasons. We are holders of a license, it connects fine in "Güindous" and closes the program. Each module is a file. OCX that is readily incorporated into larger programs.

El primer módulo, P_LIDAR.ocx. Visualizando la Planta General.

The first module, P_LIDAR.ocx. Viewing General Plant.

El aspecto externo es este:
The external appearance is this:



Con las funciones y subrutinas siguientes:
With the  following functions and subroutines:

Sub DameDir(Directorio)  → Lee y pinta todos los archivos las de un directorio completo.
Sub DameArchivo(Archivo)  → Lee y pinta un Archivo
Sub ColorFondo(Color)  → asigna un color de fondo. Por defecto es amarillo pálido.

La nueva versión la subiremos en breve

.... Continuará

Funciones Val_x(), Val_y()
         → Nos devenven los valores donde se pinchara por última vez en el objeto.

Funciones Max_x(), Max_y(), Max_z(), Min_x(), Min_y(), Min_z() 
         → devuelven los valores máximos y mínimos de contorno.

Función MaxN(NumMax)
         → asigna el maimo valor de puntos representados. Por defecto este número es de 20.000.

Con el evento siguiente:
DondePincha (Boton, Mayus, X, Y, UTMx, UTMy)  → Al hacer click en el objeto tendremos acceso a conocer que botón fue pinchado, si lo fue con las mayúsculas y la posición relativa (x,y) o absoluta (UTMx, UTMy). Esto último nos permitirá vincularlo a otros objetos.

Sub DameDir (Directory) → Lee and paint all .las files in an entire directory.
Sub DameArchivo (Archive) → Lee and paints a File
Sub backgroundColor (Color) → assigns a background color. Default is pale yellow.

Val_x functions () Val_y ()
          → We return the values ​​which punctured last in the object.

Max_X Functions (), y_max (), max_z (), x_min (), y_min (), MIN_Z ()
          → return the maximum and minimum values ​​of contour.

MaxN Function (maxnum)
          → maimo assigned point value represented. By default this number is 20,000.

With the next event:
DondePincha (Button, Shift, X, Y, utmx, UTMY) → By clicking on the object will have access to know which button was tapped, if it was with .las case and the relative position (x, y) or absolute (utmx, UTMY). The latter will allow us to link it to other objects.

Descargable desde aqui.
Download here.

Mi amigo Miguel E. me pidió que modificara el código para que el Norte estuviera siempre arriba (perdón por el error) y que además no parara de leer un archivo al sobrepasar los 2GB. El problema del segundo caso es la utilización por el entorno directo de programación de Windows que limita en el valor del entero máximo (tipo Long) como Int32. Es decir 2³¹ = 2.1471483.648 = 2GB. Al cambiar el sistema a la lectura utilizando las dlls directas del kernel es posible es utilizar el siguiente tipo de entero Int64 que eleva al utimo byte leible a 2⁶³ = 183446.7442073.7091551.616. Siguiendo los sufigos disponibles 181446.744TB ó 18.446PB (petabyte) ó 18EB (exabyte). Si tiene curiosidad por saber cómo se hace contacte con nosotros.

Si bien algunos archivos LIDAR sobrepasan los 2 GB no se nos van a dar casos tan exagerados. Por tanto la solución cierra el problemas del tamaño.

My friend Miguel E. asked me to modify the code so that the North was always up (sorry for the error) and also do not stop to read a file to exceed 2GB. The second problem is the use case for the direct environment of Windows programming that limits the maximum integer value (type Long) as Int32. That is 2 ³ ¹ = 2.1471483.648 = 2GB. By changing the reading system using kernel direct dlls is possible is to use the following integer type Int64 that elevates the latter one byte readable to 2 ⁶ ³ = 183446.7442073.7091551.616. Following the sufigos available 181446.744TB or 18.446PB (petabyte) or 18EB (exabyte). If you're curious about how to make contact with us.

While some LIDAR files exceed 2GB not going to give us so exaggerated cases. The solution thus closes the size problems.

Una nueva versión:

A new version:

El nuevo módulo OCX para LIDAR contiene las siguientes propiedades y métodos

.SeaDir "Diectorio de lectura" Sólo establece el directorio de trabajo. Serán leídos todos los archivos .las contenidos

.CentroX_ = valor de la coordenada X. Establece en centro de visualización del archivo
.CentroY_ = valor de la coordenada Y. Ídem.
cota = .CentroZ_ Devuelve el valor más probable de la cota en las coordenadas (X,Y). SÓLO DISPONIBLE DESPUÉS DE REALIZAR EL DIBUJO.

.LadoCorto = Establece uno de los lados del paralepípedo de selección (10m. por defecto)
.LadoLargo = El otro lado (30m. por defecto)
.Avance = Distancia siguiente en la dirección del ratón. (10m. por defecto)

.PintaSeccion = Empieza a trabajar.
.Para = true/false establece la interrupción de la lectura

Con estos datos el aspecto es éste:

The new LIDAR OCX module contains the following properties and methods

. SeaDir "Diectorio reading" only sets the working directory. Will read all .las Content

. CentroX_ = X coordinate value Set file display center
. CentroY_ = Y coordinate value Ditto.
height =. CentroZ_ Returns the most probable value of the elevation at the coordinates (X, Y). AVAILABLE ONLY AFTER MAKING THE DRAWING.

. LadoCorto = Set one side of the parallelepiped selection (10m. default)
. LadoLargo = The other side (default 30m.)
. Avance = Distance next in the direction of the mouse. (10m. default)

. PintaSeccion = starts working.
. Para = true / false establishes interrupt reading

With these data, the issue is this:



Datos de partida:

.LadoCorto = 20
.LadoLargo = 14 -> Recuadro azul.
.Avance = 10 -> línea amarilla.


A partir de aquí podemos hacer peticiones al módulo OCX.

Uno de sus métodos es:

_DondePincha (ByVal Button as IntegerByVal Shift as IntegerByVal x as SingleByVal y as SingleByVal UTMx as DoubleByVal UTMy as DoubleByVal PROPx as DoubleByVal PROPy as Double)

Button: botón derecho/izquierdo
Shift: Pulsado al tiempo control/mayúsculas/nada
x,y : coordenadas relativas
UTMx, UTMy: coordenadas absolutas del puntero (ratón)
PROPx, PROPy: coordenadas del punto rojo (a la distancia definida en .Avance, en nuestro caso 10m.)

Dentro de esta subrutina se puede, por ejemplo, modificar el centro de forma sencilla de la siguiente manera:

.CentroX_ = UTMx ó PROPx
.CentroY_ UTMy ó PROPy
.PintaSeccion

.GuardaRecuadroExterior "nombre del archivo de destino"
Guarda en coordenadas absolutas en un archivo ascii .xyz con el orden xyziRGB el conjunto del borde exterior.

Input data:

. LadoCorto = 20
. LadoLargo = 14 -> Blue Box.
. Avancet = 10 -> yellow line.


From here we can make queries to the module OCX.

One of his methods is:

_DondePincha (ByVal Button as IntegerByVal Shift as IntegerByVal x as SingleByVal y as SingleByVal UTMx as DoubleByVal UTMy as DoubleByVal PROPx as DoubleByVal PROPy as Double)


Button: Right / left
Shift: Pulsed time control / shift / no
x, y: coordinates relative
Utmx, UTMY: absolute coordinate of the pointer (mouse)
Propx, PROPy: red point coordinates (a defined distance. Avance 10m in our case.)

This subroutine can, for example, modifying the center simple way as follows:

. CentroX_ = utmx or propx
. CentroY_ = UTMY or PROPy
. PintaSeccion

. GuardaRecuadroExterior "destination filename"
Save in absolute coordinates in ascii file. Xyz with xyziRGB order the entire outer edge.


Visualización del extracto con FrugoViewer
Viewing the extract with FrugoViewer

.GuardaRecuadroInterior "nombre del archivo de destino"
Idem pero relativo al trozo comprendido en el recuadro azul. En coordenadas absolutas.

. GuardaRecuadroInterior "destination filename"
Idem but on the piece within the blue box. In absolute coordinates.


Visualización del extracto con FrugoViewer
Viewing the extract with FrugoViewer

.GuardaRecuadroInteriorRel "nombre del archivo de destino"
Idem pero relativo al trozo comprendido en el recuadro azul. En coordenadas relativas.

. GuardaRecuadroInteriorRel "destination filename"
Idem but on the piece within the blue box. In relative coordinates.

Visualización del extracto con FrugoViewer
Viewing the extract with FrugoViewer
El fichero tiene esta forma:
The file is:

            4.41710 6.98247 59.83 27 70 57 66 
            4.39831 6.95703 59.83 27 72 59 68 
            4.36560 6.93402 59.83 31 65 52 61 
            4.45072 6.96944 59.83 28 68 55 64 
            4.43193 6.94400 59.83 29 71 58 67 
            4.39921 6.92099 59.83 36 69 56 65 
            4.38043 6.89555 59.83 27 67 54 63 
            [...]

A partir de aquí seguir con las proyecciones, crear el fichero eje es lógicamente trabajoso, son muy grandes los ficheros pero es totalmente factible.

Es recomendable tener los grandes ficheros partidos en cuadraditos (véase apartadohttp://carreteras-laser-escaner.blogspot.com.es/p/dividir-en-cuadritos-un-archivo-las.html)

También conviene ver el apartado: http://carreteras-laser-escaner.blogspot.com.es/ 2012/ 12/ division en perfiles transversales.html

From here continue to projections, create the file is logically laborious axis, are very large files but it's totally doable.

It is advisable to have large files into small squares parties (see section http://carreteras-laser-escaner.blogspot.com.es/p/dividir-en-cuadritos-un-archivo-las.html)

It should also see: http://carreteras-laser-escaner.blogspot.com.es/ 2012/ 12/ division en perfiles transversales.html

Resultado final de la proyecciones.
Final outcome of the projections.

Más datos. Si hacemos ,

cota = PGeneral.CentroZ_, tendremos en cota la cota más probable del punto central.

a = PGeneral.RinconX_, b = PGeneral.RinconY_,
          obtendremos las parejas {(a(0),b(0))..(a(3),b(3))} coordenadas absolutas de lasesquinas de cuadrilátero interno.

MX = PGeneral.X_, MY = PGeneral.Y_, MZ = PGeneral.RinconZ_,
            obtendremos las coordenadas de los puntos del recuadro exterior {(MX(0), MY(0), MZ(0))..(MX(n), MY(n), MZ(n))}

donde n = PGeneral.NumeroPuntos.

Otras matrices son Color=PGeneral.C_ donde Color(j) corresponderá al color del punto (MX(j), MY(j), MZ(j))

Otras matrices son Intensidad=PGeneral.I_ donde Intensidad(j) corresponderá la intensidad del punto (MX(j), MY(j), MZ(j))

Módulo descargable desde aquí

Con esta herramientas hemos creado el siguiente programa:

More details. If we do,


cota = PGeneral.CentroZ_, we will most likely bound the dimension of the center point.

a = PGeneral.RinconX_, b = PGeneral.RinconY_,
           couples obtain {(a (0), b (0)) .. (a (3), b (3))} lasesquinas absolute coordinates of inner ring.

MX=PGeneral.X_, MX = MY = PGeneral.Y_, MZ = PGeneral.Z_,
             obtain the coordinates of the points of the outer box {(MX (0), MY (0), MZ (0)) .. (MX (n), MY (n), MZ (n))}

where n = PGeneral.NumeroPuntos.

Other matrices are Color=PGeneral.C_ where Color = Color (j) corresponds to the color point (MX (j), MY (j), MZ (j))
Intensida=PGeneral.I_ where Intensidad = Intensity (j) correspond intensity point (MX (j), MY (j), MZ (j))

Module downloaded from here

With this tool we have created the following program:


Con un módulo PGeneral creamos un visión general de la carretera y nos posicionamos en un punto.
With a module PGeneral create an overview of the road and positioned ourselves at one point.

Después de posicionarnos pasamos al detalle en donde exportaremos la selección interna
After we position ourselves to detail where internal selection will export
Dicha selección interna podremos proyectarla en planta, frontal y laterales
Such internal selection can project it on top, front and side

Con nuestro otro programa ANPE podremos rescatar el fichero exportado y visualizarlo en 3D
With our other program ANPE can rescue the exported file and view it in 3D






domingo, 15 de septiembre de 2013

Clouds of points vs. 3D models / Nubes de puntos y modelos 3D

¿Estamos ante dos caras de una misma moneda?
Are we looking at two sides of the same coin?

De la realidad previa  al entrono virtual

From virtual reality to environment previous


Cuanto nos centramos en nubes de puntos queremos preservar una realidad en un entorno virtual escaneando ésta. Es decir la realidad está antes que el modelo:

1º Modelo:

If we focus on point clouds we want to preserve a reality in a virtual environment scanning it. I mean the reality is before the model

1.- Model:
Fuente / source: http://sitegi.enmacosa.com

2º Toma de datos en forma de nubes de puntos:
2nd reading of data as point clouds:

Fuente / source: http://sitegi.enmacosa.com

3º Podemos trabajar sobre ellas como, por ejemplo, conocer sus proyecciones:
3er. We can work on them as, for example, know their projections:

Fuente: http://sitegi.enmacosa.com

Del entorno virtual a la realidad

Form Virtual environment to reality

Un ejemplo de esto puede ser una estructura en ejecución
Podemos tener un puente, por ejemplo, que esté en ejecución:

An example of this may be a structure running
We have a bridge under construccion:

Puente sobre la ría de Noia (26-11-2012)
Bridge Ría de Noia (26-11-2012)
Puente sobre la ría de Noia (03-06-2013)
Bridge Ría de Noia (03-06-2013)
Un escaneo nos daría un estado actual de la obra. Pero si quisiéramos saber como quedaría tendríamos que adelantarnos. Habría que hacer una recreación virtual de esta estructura de los elementos que faltan.

A scanning ead give us a current status of the work. But if we know how to stay, we would anticipate. We should do a virtual recreation of the structure with the  missing elements.


En el vídeo anterior se ofrece una recreación de uno de los pilares del puente inmerso en un bloque de cristal (también virtual)
In the video above gives a recreation of one of the bridge piers immersed in a glass block (also virtual)

... en proceso de redacción ...
... being drafted ...







domingo, 7 de julio de 2013

2D to 3D Conversion


One of the ideas that we have set e: Can we get a 3D from 2D projections?

Our starting point is the following:

With these projections, our eye really know where we are but the computer it is more difficult. For this reason we study the best transformation which would give us a break lines planes. We use openCV libraries and after tinkering with some features including, in particular, with laplace function.


And with a little Python code to get this 3D projection:

The image is a bit poor. Our interest is in knowing that you can have 3D data automatically.
Or ground by colors:


The data 3D can only be those that can be edges.

----------------------------------------------------------------------------------------------------------

Con estas proyecciones, nuestro ojo sabe muy bien donde estamos pero el ordenador lo tiene más difícil. Por ese motivo estudiamos cual sería la mejor transformación que nos dé sólo las lineas de rotura de planos. Recurrimos a las bibliotecas de openCV y tras trastear con algunas funciones incluidas, en concreto, con la función de laplace.


Y con un pequeño código en phyton obtenemos esta proyección en 3D:

La imagen es un poco pobre. Nuestro interés es en saber que se pueden tener datos 3D automáticamente.
O en planta por colores:


Los datos que se pueden tridimensioalizar sólo serían aquellos que puedan ser aristas.







domingo, 4 de noviembre de 2012

Ground proyection from previous files

After obtaining the squares in. xyz (ASCII), the next step is to create the ground proyection of these files. In this way we can access in the future to data in a more efficient way and as we know the actual dimensions scaled measurement will be much easy.

We created another program the PlantaLasEje2.


The way of working is simple. File .xyz is selected. and checked the option<Dibuja planta> or every one <Todo Directorio>.


We now have everything in place to create the database that will feed our application Google Maps with centimeter accuracy:

Fuente: Bounded-Roads

What size is it?

45.000 files .xyz will be 45.000 files .jpg. 3,2GB. Fotos with 72KB  (300px x 300px)

Aside from this program described, we developed another in C and compilated with gcc and Linux (Ubuntu). Te time are reduce in 1/5 and the exit ase in png format (less size).

--------------------------------------------------------------------------------------------------------

Una vez obtenidos los cuadraditos en archivos .xyz, el siguiente paso es crear el dibujo en planta de estas secciones. De esta manera podremos acceder en un futuro a los datos en planta de una forma más eficiente y como sabremos las dimensiones reales la medición escalada será mucho más sencilla.


La forma de funcionar es muy sencilla. se selecciona el archivo .xyz y se le da a la opción <Dibuja planta> si se deseha hacer el trabajo de todo el directorio se pincharía en la opción <Todo Directorio>.


En este momento tenemos todo dispuesto para la creación de la base de datos que alimentará a nuesta aplicación Google Maps con exactitud de centímetros:

Fuente: Bounded-Roads

¿Cuanto ocupa?

En el apartado anterior los 45.000 archivos de datos .xyz se traducen en 45.000 archivos de dibujo .jpg que en total ocupan 3,2GB para unas fotos de 72KB de media. (tamaño: 300px x 300px)

Aparte de este programa descrito, hemos desarrollado otro en C y compilado con gcc y Linux (Ubuntu). Los tiempos los hemos reducido en 1/5 y la salida de plantas las hemos realizado en formato .png que en estos casos suele reducir el tamaño del archivo a una cuarta parte que su homólogo en .jpg, mejorando su transmisión por internet.

sábado, 3 de noviembre de 2012

3D Display in HTML / Visualizador 3D en HTML

Es ambicioso querer visualizar un archivo LIDAR dentro de un navegador. Sabemos de antemano que tal visualización sería obviamente lenta. Aun así se intentará que sea lo más eficiente posible.

It is ambitious want to view a LIDAR file within a browser. We know in advance that such a display would obviously slow. Even so will try to be as efficient as possible.
Gif animado, emulador del javascript de Bounded-Roads>>informes>>HD
Gif animated, emulador from javascript, Bounded-Roads>>informes>>HD

El primer paso será saber que han hecho otros en este aspecto. Los mejores visualizadores de objetos en 3D que he visto son los siguientes:

The first step is to know that others have done in this regard. Best 3D objects displays I've seen are:

Canvas Surface Rotation:
3Quarks Platonic Solids:

http://htmlchess.sourceforge.net/demo/example.html
http://www.uselesspickles.com/triangles/
http://www.brokstuk.com/jiglibjs2/jiglibjs2_vehicle_physics.html

Y así podríamos continuar con un largo etcétera de ejemplos de visualizaciones en 3D hechas con javascript.
En nuestro caso hemos modificado el código fuente de los ejemplos anteriores hasta el mestizaje de nuestra aplicación.
Además hemos incorporado la visualización en cónica:

We could continue with a long list of examples of 3D visualizations made ​​with javascript.
In our case we have modified the source code of the examples above to the mix of our application.
We have also incorporated the conical display:

Extracto de la visión en 3D

NOTA: También podríamos haber partido de WebGL. Sería más eficiente pero sólo funciona bien en Firefox y algunos Chrome. Como mucha gente utiliza el Internet Explorer y otros navegadores que no admiten la biblioteca OpenGL no prodría visualizarse. Queda para el futuro. Si quieres saber más visita: http://www.jlabstudio.com/webgl/tutoriales-webgl/tutoriales-webgl-puro/
Este paso se dará pero cuando todos los navegadores admitan webGL.

NOTE: We could also have started from WebGL. It would be more efficient but only works well in Firefox and some Chrome. How many people use the Internet Explorer and other browsers that do not support OpenGL library prodría not displayed. It remains for the future. To learn more visit: http://www.jlabstudio.com/webgl/tutoriales-webgl/tutoriales-webgl-puro/

This step will be taken but when all browsers support WebGL.