Creando herramientas CAD personalizadas en la web con ThreeJS

Ahora, ¿por qué querrías hacer eso? Hay muchas razones, pero las más significativas para mí son que puedes hacer herramientas realmente amigables para principiantes y puedes hacer herramientas que son excelentes para el contenido generado por el usuario. Además, no es tan difícil como podrías pensar. Entonces, ¿por qué hacer una herramienta basada en la web? Bueno, porque la web es la mejor plataforma. Es fácil de distribuir, es inherentemente cross-platform, y nuevamente, todo esto contribuye a ser muy accesible para los principiantes.

Aquí tienes un ejemplo del tipo de cosa que quiero decir. Quería que fuera fácil hacer paneles de ciencia ficción de Reebly, así que hice esta herramienta que se ejecuta en un navegador y en lugar de mover puntos o vértices o polígonos, simplemente dibujas un rectángulo en la superficie de la forma base y puedes agregar una característica paramétrica de algunos tipos diferentes. Puedes agregar extrusiones, puedes agregar matrices de botones, puedes agregar asas del tipo que podrías ver en equipos montados en rack, y puedes agregar diales. Y nada de esto requiere habilidades convencionales de modelado 3D, así que es muy accesible. Y hice esto con Three.js. Three.js es una biblioteca fantástica. Es un envoltorio alrededor de WebGL. Tiene muchas cualidades excelentes. Ha estado disponible durante unos 13 años, por lo que tiene un ecosistema muy completo. Funciona bien con React y otros frameworks. Y, al menos personalmente, siento que tiene un gran nivel de abstracción.

Así que hoy vamos a hacer un cubo y vamos a tomar un camino un poco indirecto para llegar allí, pero al hacerlo, aprenderemos todo lo que necesitamos saber para crear geometría personalizada y paramétrica propia.

Pero antes de eso, hay un poco de plantilla. Sé que este código probablemente es demasiado pequeño para ver. Tendré un enlace a un repositorio de GitHub al final, pero lo que quiero destacar es que esto es todo lo que necesitas para configurar una escena en Three.js. Aquí solo hay alrededor de 30 líneas. Todo es muy sencillo.

Entonces, habiendo terminado con eso, hablemos de geometría. La geometría puede contener muchos datos, pero los dos tipos más importantes son los vértices, que son puntos posicionados en el espacio 3D, y las caras, superficies que conectan esos puntos. Hay muchas otras cosas de las que no tendremos tiempo para hablar hoy, pero con los vértices y las caras podemos crear geometría.

Así que aquí tenemos un cubo. Vamos a quitarle su piel y veremos que tiene ocho puntos. Comencemos dándole a esos puntos un orden. Les daremos algunos números, del cero al siete, para organizarlos en algún orden. Y una vez que hayamos hecho eso, especifiquemos dónde están en el espacio. Para mantenerlo simple, solo estamos usando negativos y positivos, lo que nos dará un cubo de dos unidades centrado en el origen, lo cual es genial. Habiendo hecho todo eso, podemos especificar nuestros datos de vértices. Para hacer eso, simplemente voy a configurar un arreglo y voy a agregar números para las coordenadas X, Y y Z de cada vértice. Ten en cuenta que este es un arreglo unidimensional. No estoy agregando un conjunto completo de tripletas a la vez, y esto termina siendo unidimensional, lo cual es importante más adelante.

Entonces, esos son nuestros datos de vértices. Ahora estamos listos para configurar nuestras caras. Las caras se especifican dando una secuencia de vértices en orden. En lugar de tener datos reales, simplemente hacemos referencia a los datos que ya existen en la lista de vértices. El orden en el que especificamos los vértices es muy importante. En gráficos 3D, una gran parte de lograr un rendimiento óptimo es no dibujar cosas que no necesitas ver. Y una de las formas en que lo hacemos es dibujando solo un lado de las caras de forma predeterminada. Las caras realmente solo existen desde una dirección. Y la forma en que especificamos qué dirección es esa es el orden en el que especificamos los vértices. Es importante que especifiquemos nuestros vértices en orden antihorario. Por ejemplo, este triángulo azul involucra los vértices cero, cuatro y tres.

Pero si los especificamos en orden cero, cuatro, tres, eso sería en sentido de las agujas del reloj. Y esta cara apuntaría hacia el interior del cubo en lugar de hacia el exterior del cubo. Y no veríamos nada y nos preguntaríamos por qué no se está representando nada, lo cual es un estado muy común en los gráficos 3D.

Entonces, en cambio, debemos asegurarnos de especificarlos en orden contrario a las agujas del reloj, como tres, cuatro, cero. Dicho esto, podemos especificar nuestros datos de las caras. Comenzamos nuevamente con un arreglo. Y para cada triángulo, ingresamos tres enteros que son índices en los datos de vértices. Así que hacemos eso una vez por cada triángulo que tengamos.

Y con eso, estamos listos para configurar realmente alguna geometría en Three.js. Los objetos en Three.js siempre consisten en geometría y un material. Así que configuremos eso. Vamos a usar un material básico de malla. Hay muchos tipos de materiales diferentes en Three.js. Este es el más simple, pero todos funcionan de manera similar en el sentido de que los creamos y pasamos un objeto con parámetros. En este caso, simplemente pasamos un color, verde brillante, y para la geometría, vamos a usar una geometría de búfer.

Ahora también hay una geometría básica en Three.js, pero está un poco desactualizada y es un poco menos eficiente. Quiero que todo esté configurado realmente bien para el futuro. Así que vamos a usar una geometría de búfer, lo que significa que tenemos que llenar búferes. Un búfer es un dato binario tipado que se puede utilizar para mover datos de manera eficiente desde la CPU a la GPU. Para los vértices, queremos usar float32 como tipo de datos. Porque estamos hablando de números de punto flotante que representan la posición en el espacio tridimensional. Así que primero creamos un arreglo float32 a partir de nuestros vértices. Luego creamos un nuevo atributo de búfer. Y esto puede parecer un poco críptico. Pasamos los datos de vértices, ¿verdad? Pero luego pasamos este tres. Y lo que tiene que ver con eso es que los atributos de búfer siempre están en función de cada vértice. A medida que pasamos datos, debemos especificar cuántos números o qué tan rápido consumimos datos por vértice. En este caso, son datos de posición. Así que tenemos una X, una Y y una Z. Así que tenemos tres números por vértice.

Así que pasamos el valor tres. Ahora que tenemos el atributo de búfer, lo configuramos como la posición. Y ahora estamos listos para los índices, que es similar, excepto que usamos un unsigned int en su lugar. Y cuando creamos el atributo de búfer, esto es un índice por vértice, así que pasamos el valor uno. Y luego configuramos el índice. Y con eso, tenemos la geometría.

Pero es un poco difícil de ver, porque todo es de color verde brillante. Así que podemos solucionarlo rápidamente con las normales. Entonces, ¿qué es una normal? Una normal es un vector que apunta hacia afuera de una superficie. Puedes tener normales de vértice como en la izquierda o normales de cara como en la derecha. Y puedes pasar esto como atributos de búfer, pero lo haremos un poco más fácil, y dejaremos que Three.js las calcule por nosotros con compute vertex normals. Y una vez que hayamos hecho eso, podemos usar un material de normales de malla, que funciona tomando cada vector, una normal es un vector con componentes x, y y z. Y si interpretamos el x, y y z como un valor RGB, obtenemos colores. Y con esos colores, podemos obtener algo que podemos ver y obtener un detalle mucho mejor de la geometría que hemos creado. Y eso es todo. Muchas gracias.