Curso Programación Motor 3D

vamos a iniciar un proyecto que básicamente consiste en la creación de un motor de gráficos 3d a partir de cero completamente y debido a esto el objetivo es aprender cómo funciona la proyección 3d sin apoyarnos o apoyándonos en la medida de lo posible lo menos posible en proyectos o librerías anteriores así que para ello me voy a ir vamos a abrir man vamos a abrir escritorio vamos a aplicaciones vamos a mando vamos a 72 en team vamos a brooks voy a crear un proyecto llamado 3d y dentro de este proyecto voy aquí a guardar un archivo vamos a verlo hc 23 de yo voy a guardar como index.html así que a partir de aquí voy a crear un documento creamos por aquí en un head creamos por aquí un bobby y dentro del body voy a crear un canvas qué bueno este momento va a tener un wifi de 512 píxeles un height 512 píxeles y el ide se va va a ser viendo a partir de aquí vamos a arrancar como decía vamos a arrancar man arrancar frank y start y a partir de aquí voy a entrar dentro de la carpeta de 3d bien tenemos por aquí el canvas aunque no se vea pero tenemos ahí el canvas vamos a poner aquí un pequeño estilo y vamos a decir que lienzo es en border en píxel sol y blanco así que hacemos así y recargamos ya tenemos por ahí el elemento ale ya tenemos por aquí como podemos ver el canvas preparado para trabajar bien dentro de un de un elemento 3d a partir de aquí vamos a empezar a pintar para pintar contamos con las herramientas clásicas voy a crear una script de javascript pensado para poder pintar script y aquí dentro del primero que voy a hacer es decir que marcó un texto es igual a documento de element by heidi que es el lienzo y aquí dentro voy a un get context 2 d entonces una vez que tengo esto voy a hacer algo sencillo con texto fill recto 20 20 20 20 simplemente para confirmar que ya puedo empezar a pintar simplemente para confirmar que una vez que tengo ese ese contexto cogido una vez que tengo ese contexto señalado pues ya puedo empezar a pintar vale no es lo que quería simplemente he creado esta línea como demostración de que efectivamente puedo pintar y ahora a continuación lo que vamos a hacer es empezar a definir nuestras entidades el canvas por defecto está pensado para pintar en 2d pero no está pensado para pintar en 3d puedo poner aquí un get context 3d pero entonces empiezo a trabajar con la api de web cl y la api de webgl y ya me realiza una serie de abstracciones y digamos que me realiza cierta parte de los cálculos y no es lo que quiero lo que quiero es realizar los cálculos completamente desde cero así que para ello voy a empezar con un contexto 2d y a partir de ahí dentro de ese contexto donde voy a realizar todas las proyecciones necesarias así que a continuación voy a definir una serie de objetos como digo por tanto por ejemplo en un contexto donde no hace falta definir lo que es la x la y porque el contexto desde ya lo sabe pero si voy a hacer un contexto 3d sí que es necesario definir la x la y porque el contexto como digo desconoce estas propiedades así que voy a decir lo siguiente voy a decir bar vértice es igual a un objeto y lo que voy a hacer en este caso es decir que es igual a un función donde el vértice se define en un vértice con tres dimensiones se define con x y y ceta y x y evidentemente son convenciones pero desde luego son convenciones muy ampliamente afectadas y ahora voy a decir de punto x es igual a x y es igual y 2.7 es igual a c está bien aquí tengo un pequeño problema que es el siguiente y es que ahora puedo venir y decir mi vértice va a divertirse es igual a new vértice y voy a decir que 234 así que ahora por ejemplo pongo con sole punto los mi vértice guardo recargo vamos a inspeccionar vamos a recargar completo y tengo aquí un vértice donde la x es 2 y las 3 y la z es 0 qué pasaría si yo viniera aquí y dijera 2 3 pues técnicamente esto es posible pero si yo luego contiene un programa con esta lógica pues lo que va a ocurrir es que tendré un error vale necesito algún tipo de validación que me impida digamos asignarle a un vértice otra cosa que no sea un número y para ello lo que voy a hacer es encapsular ya que realizó esta asignación y realizó una encapsulación dentro de un par soft load vamos a poner por aquí bien y ahora por tanto se intentó realizar esta asignación me va a decir una nota number vale me va a dar un nota number porque en definitiva pues eso no se puede no se puede procesar de hecho tengo ahí hay un informativo vale y luego a partir de aquí pues podría añadir otros elementos tales como por ejemplo pues sí por ejemplo voy a poner por aquí por 1 vamos a ver aquí por uno voy a poner por aquí por uno vamos a recargar sigo teniendo que recargar con fuerza podría decir que sí y la zeta is not a number pues podría igualar la a cero por ejemplo vale es decir puedo recurrir a diferentes técnicas para asegurarme de que este objeto finalmente pues contenga números y no contenga en ningún tipo de ningún momento puedo crear un vértice y a partir de aquí puedo crear un vértice 2d entonces por ejemplo voy a hacer lo siguiente esto es vértice 3 de vigo bar vértice 2 d función x y y ahora a continuación lo que voy a hacer es que me voy a copiar únicamente las propiedades de x y porque un vértice de 2d pues no tiene digamos no tiene profundidad no tiene tercera dimensión con esto por tanto ahora a continuación lo que vamos a hacer es pintar pero en un espacio tridimensional realmente un como te diría yo un vértice no tiene representación los vértices construyen cosas vamos a abrir blender por ejemplo podemos abrir cualquier programa 3d entonces si yo abro este programa 3d voy a abrir como ejemplo como ilustración no es que tengas que saber manejar blender por supuesto pero si yo añado un objeto como por ejemplo un cubo yo veo que realmente no estoy viendo los vértices del cubo que son estos elementos de aquí lo que estoy haciendo es ver las caras del cubo veo que el cubo realmente tiene ahí lo podemos ver ocho vértices cuatro arriba cuatro abajo cada uno de los vértices define una cara y es la cara lo que yo realmente estoy viendo en la pantalla entonces con definir vértices pues no es suficiente para poder ver algo en la pantalla porque en un espacio 3d no vamos a ver realmente los vértices sino que vamos a ver los polígonos que define cada uno de los vértices vamos a por ello por esto a continuación lo que voy a hacer es definir una primitiva mínima podría definir varias primitivas voy a empezar con una sencilla que es var cubo y el cubo va a ser un objeto que va a tener pues una serie de propiedades vamos a decir que del cubo quiero su centro y el lago y las dimensiones del lago entonces vengo por aquí y digo vamos a ver tengo vamos a ver bar anchura anchura es igual a al lado partido por 2 y entonces ahora a continuación lado aunque lo ponga de negro es esta de aquí entonces ahora a continuación voy a decir que los vértices son 8 porque 8 pues porque acabamos de decir que podemos verlo por aquí que un cubo tiene ocho vértices cuatro arriba y cuatro abajo suponiendo que el centro del cubo esté en el centro geométrico pues a partir de aquí voy a hacer lo siguiente un dish punto vértices es igual voy a crear una matriz no un objeto sino una colección y voy a decir new vértice 3d para eso no he creado y el vértice 3d recupera perdón toma tres datos entonces los datos son centro vamos a ver punto punto punto punto punto equis qué es digamos la propiedad x de este objeto ahora tenemos menos la anchura coma centro punto y ahí lo tenemos – la anchura centro punto z menos la anchura este es el primer punto este es el primer elemento de la colección y ahora voy a crear siete más así que uno dos tres cuatro cinco seis siete y ocho al último le quitó la coma así que ahora a continuación digo el centro x menos anchura vale si por ejemplo esto es más esto es menos ahora tengo que ir combinando esto es lo difícil lo que voy a hacer es que si éste es más éste es menos ahora por ejemplo digo éste es más éste es menos luego vamos a verlo tengo que buscar todas las combinaciones del ministerio así que esto es más más esto es más menos vale esto es más más esto es más o menos y esto es más esto es más esto es más esto es más y esto es más y esto es menos si lo he hecho bien debe haber ocho combinaciones diferentes debe haber todas las combinaciones posibles y ahora y ahora bien ahora lo que haré es instancia un cubo de hecho puede distanciar lo ya esto ya lo tenía pues farc vamos a armar mi cubo es igual a mí en un cubo vale y vamos a verlo me cubo toma el centro y el lado entonces el centro es centro cubo como por ejemplo y ahora es bar centro cubo es igual a new vértice 3 de donde voy a poner 0 0 como hacer un cubo que esté en el centro digamos de coordenadas básicamente para conservar no la idea un cubo como este que está alineado al centro así que ahora vengo por aquí y no me cubo vamos a ver si no tenemos ningún error y tengo un cubo que tiene una serie de vértices entonces tengo menos 111 menos 111 111 es decir tengo todos los vértices y si todo ha ido bien como digo pues debería tener todas las combinaciones posibles ahora ahora lo veremos en este ejercicio vamos a tardar un poco en ver algo en la pantalla aviso vale vamos a tardar un poquito en ver algo en pintar algo en la pantalla hay que tener un poco de paciencia simplemente porque pues bueno en un primer momento en un primer lugar los vértices van a existir digamos como concepto y ahora a continuación en cuanto pasemos a esa fase los vértices pasarán a existir en la pantalla vale pero como digo con comparado a otros proyectos que he realizado antes y que podéis haber visto donde siempre intento pintar desde cero algo enseguida en la pantalla en este vamos a tardar un poquito porque primero hay que definirlo como concepto y luego pintarlo en la pantalla bueno pues dentro de lo que es el cubo ahora a continuación hablaré aquí un punto y coma porque esto es el final de la asignación para a continuación lo que quiero es definir this punto caras y entonces le digo lo siguiente this punto caras es igual a una colección y voy a hacer lo siguiente voy a decir que es una colección que a su vez va a tener dentro otra colección dónde voy a poner this punto vértices de 0 coma de vértices de hopper crear esto de 1 2 y 3 de uno y tres vale ahora viene esta tarde también es difícil ahora viene una parte en la que ahora copio esto en la que estoy creando las seis caras de un cubo ya no son nuestro vértices sino que ahora son seis caras y contamos las caras de un cubo hay 1 2 3 4 5 y 6 vamos a mostrar lo mejor 12 cuatro cinco y seis caras claro la idea ahora es que debemos atar cada uno de los vértices digamos en su sentido correcto digamos que este es el 1 2 3 y 4 vale pues vamos a vamos a aquí al código para que salga mejor vamos a poner menos menos más valen menos menos menos o que más menos menos más menos más estaba al revés y vamos a ver vamos con los otros cuatro y vamos a empezar con este más más más menos – más menos ahora sí por último – + + – más en esa hora yo lo que estoy haciendo es que estoy creando una cara entre el 1 al frente del 0 el 1 el 2 y el 3 estoy creando digamos la cara de arriba así que ahora voy a crear 5 caras más estás la una dos tres cuatro cinco y seis caras quito la coma del final y ahora viene lo difícil porque ahora quiero la debajo entonces 4 5 6 ahora quiero un frontal 04 aquí 32 54 2 54 vale ahora 7 6 10 6 pero 70 34 7 34 y 1652 6 bien con esto ya tengo un cubo por tanto ahora puedo decir que guardo recargo y veo que tengo un array de ocho caras aquí las tenemos que a su vez son conjuntos de vértices y tengo un array de vértices con esto por tanto como digo ahora lo que existe en pantalla es que he creado pues el vértice que es el elemento principal pero también estoy creando el elemento de cara que en este caso está dentro de un cubo concreto más adelante sacaremos cara como elemento independiente pero ahora de momento lo que estamos haciendo es sacarlo como matriz vamos a pegar vamos allá vamos a por ello bien así que así que el problema digamos de un cubo es que se puede ver al final de muchas formas o sea todo depende digamos de la proyección por ejemplo esto es un cubo así se ve ese mismo cubo pero también esto es un cubo pero también así y también así es decir en el espacio 3d el trabajo es digamos mucho más difícil que en el espacio desde espacio desde es muy evidente pero el espacio 3d tiene en cuenta también digamos una cosa que es el punto de vista así que me hace falta una lo que se llama una proyección esa proyección digamos que es el punto de vista digamos que es la cámara así que para ello voy a crear de momento una proyección muy básica entonces voy a decir lo siguiente voy a crear una función directamente esto ya no es un objeto es una función llamada proyección sin acento por si acaso y voy a decirle que le paso pues algo le pasó una malla entonces el paso un objeto por ejemplo un objeto digamos le pasó una así que lado puede ser una o puede ser una malla una m puede ser un conjunto de vértices puede ser un cubo una fe puede ser lo que queramos así que le digo var voy a decir voy a crear la perspectiva va a dar perspectiva es igual a 200 ahora luego tocaremos este parámetro derecho y entonces digo lo siguiente bar vamos a ver par cálculo es igual a perspectiva partido el elemento punto y de ese objeto ese objeto ahora luego evidentemente perdón es una o tendrá un cálculo tendrá una propiedad de griega y por tanto lo que devuelve esta función es un new vértice 2 d y va a tener lo siguiente va a tener en el cálculo x o punto x coma y el cálculo x punto zeta y ya está así que a continuación a continuación lo que vamos a hacer es realizar una representación vamos a crear una función de representación mediante la representación es cuando ya vamos a empezar a pintar cosas por fin vamos a empezar a preparar la pintura de cosas si guarda y recargo no debería haber ningún error tampoco sabe nada en la pantalla pero no debería haber ningún error y ahora digo función representación y hay una palabra muy extendida que es la palabra render por la palabra render técnicamente es un anglicismo la palabra correcta en castellano es representación otra cosa que digo e insisto es que representación y proyección llevan acentos pero tengamos en cuenta que estamos declarando el nombre de una función estamos trabajando con un lenguaje de programación que pues originalmente está en inglés y aunque prácticamente cada lenguaje de programación hace ya tiempo que soportan unicode tienen soporte para unicode tienen soporte para caracteres con acentos con agnès todo esto pero yo por seguridad y por retrocompatibilidad prefiero seguir utilizándolo digamos seguir evitando mejor dicho pues palabras con acentos o palabras con agnès o cc villas-boas vale por tanto soy perfectamente consciente de que proyección y representación llevan acento pero nos estoy poniendo sin acento a propósito y entonces a continuación voy a decir lo siguiente voy a decir objetos contexto el contexto lo hemos definido antes está aquí vale contexto coma y ahora lo que voy a hacer es especificar pues cuál es el digamos la anchura del centro también así que esto es el diferencial de x diferencial de y ahora digo lo siguiente contexto punto clear recta y digo vamos a ver cuánto borro podría decir desde 00 de momento hasta 512 por 512 porque 512 por 512 pues porque recordemos que nuestro lienzo tiene vale 512 por ciento esta parte es esta parte es dura entonces lo que voy a hacer es empezar a comentar borró el canvas anterior bien ahora a continuación a continuación voy a decir lo siguiente digo por mar y es igual a cero y es menor que objetos links es decir los objetos que haya en la escena y más más ahora mismo no hay todavía ningún objeto ahora iremos a ellos ahora crearemos objetos vale pero de momento vamos a prestar ahora a continuación ahora a continuación voy a decir esto es para cada uno de los objetos de los objetos ahora para cada uno de los objetos para cada una de sus caras formar j es igual a 0 y ahora y ahora digo vamos a ver y ahora digo número de caras es igual objetos de iu punto vamos a ver punto caras punto links ahí está las caras que tenga el objeto y diego j es menor que número de caras vamos a ver ahí está el número de caras y más j uso un incremento luego osea perdón un pre incremento en lugar de usar un poste incremento voy a usar un pre incremento vamos allá valentín para j 0 aquí está muy bien muy bien y aquí tengo las 3 1 2 y 3 ok así que ahora a continuación yo vengo y digo lo siguiente marcará es igual a objetos de punto cara caras de j esa es la cara y ahora digo bar proyección es igual a proyección cara vamos a ver cara de 0 de la primera cara entonces una vez que tengo la primera cara digo con texto punto beijing paz empieza a dibujar y ahora digo contexto punto move y entonces digo proyección de x + de x coma proyección menos proyección de y más de y ahí tengo la proyección del primer punto de la cara y ahora a continuación para cada uno de los vértices he usado vamos con la que va acá es igual a 1 número de vértices es igual a cara punto link acá es menor que el número de vértices post pre incremento para la que ahora muy bien y ahora le digo p es igual a proyección la cara de acá y por tanto ahora vengo y digo contexto punto line ahora es cuando empieza a dibujar y p x + de equis coma – p punto y más de vídeo y por último una vez que he pintado todos los elementos de cada una de las caras ahora a continuación voy a decir con texto punto close paz contexto punto stroke contexto punto field así que ya tengo todos los requisitos ya tengo todo lo que me hace falta para empezar a crear este motor de representación 3d así que vamos a hacerlo vamos a por ello vamos a ponerlo en marcha ahora mismo no tengo nada lo sé vale pero vamos a poner esto en marcha y vamos a comprobar cómo efectivamente empieza a pintar algo en la pantalla así que una vez que tengo esto ahora voy a lo que sería la función principal luego será la función de inicio ahora mismo todavía no y entonces digo lo siguiente vamos a ver vamos a ver contexto punto stroke style es igual a rgb es decir 0 0 0 y ahora contexto punto feel style va a ser rgb a que estamos no sé 127 127 127 o sea gris y semitransparente 0.5 pues ya tenemos esto ahora a continuación una vez que ha definido lo que serán los estilos de los vértices y los estilos del relleno ahora a continuación voy a crear un cubo entonces para crear un cubo ahora comentaré estos elementos vale pero para crear un cubo voy a hacer lo siguiente para centro cubo es igual a pues un new vertex new vertex un new vértice 3d que estará en cero coma y ahora es donde viene lo siguiente voy a decir uno por ejemplo vamos a ver lo vamos a poner realmente vamos a verlo y esto es 0 realmente esto es la profundidad del cubo ahí tenemos un problema es que en un momento dado yo creo el cubo pero está pegado a la cámara yo igual no veré nada yo no veo ningún cubo pues lo que estoy haciendo es que ya que la cámara va a estar en cero es decir podría tener este problema vamos a ilustrarlo la cámara la cámara la cámara está en el cielo entonces si la cámara está en cero si la cámara está en cero y yo ahora miro a través de la cámara puedo decir no está el cubo pero no es que no esté el cubo simplemente es que el cubo está ahí donde es en el eje y básicamente lo que estoy haciendo es esto es mover el cubo pues 100 unidades 10 unidades ahora probamos vale pero estoy moviendo el cubo hacia adelante para que cuando lo vea con la cámara pues vea el cubo es lo que estoy haciendo realmente así que ahora vengo por aquí y digo bar cubo o barney cubo es igual a new co y voy a decir que es centro cubo pues por ejemplo vamos a probar entonces la anchura del cubo ahora para luego veremos ahora luego probamos entonces bar objetos es igual a de momento va a ser mi cubo ahora luego crearemos un montón de ellos pero de momento vamos a empezar con un cubo así que si todo va bien si todavía voy a decir lo siguiente voy a decir representación d los objetos en el contexto y voy a decir lo siguiente tx coma de y que es estos parámetros que al final yo creo que aquí están que los hemos utilizado para la perspectiva yo creo que ya yo creo que con esto ya podemos empezar a ver algo en la pantalla vamos a verlo cuando recargo bien the xx y es noticia dx es tan difícil 1066 44 vale muy bien y entonces bueno pues estoy pintando de momento ahí un cuadrado vale un cuadrado simplemente porque vamos a verlo porque aquí 000 voy a poner rgb a 0.5 a ver qué está pasando ahí vale parece que hay como un cubo vamos a verlo mi cubo se igualan en un cubo vamos a probar diferentes cosas centro cubo 5 vale ahí vemos que se hace un poquito más grande vamos a por ello voy a hacer lo siguiente voy a quitar un momento del contexto punto field a eso es otra cosa vale entonces ahí vemos que lo que estaba ocurriendo como podemos ver es que tenemos el cubo por allá arriba pero está como de central entonces lo que voy a hacer en este caso es llevármelo un poco hacia el centro vamos a ver vamos a poner aquí 8 y 8 a verlo vale 28 y 28 ok 228 228 eso ya es otra cosa entonces aquí digamos lo que está ocurriendo es que estoy empezando a representar a partir de ese punto bueno vamos a ver vamos a ver porque en este caso yo lo que voy a hacer es que voy a hacer lo siguiente bar centro x es igual a el documento get elemento baile de lienzo punto wifi y el partido 2 y por tanto ahora voy a decir centro y punto jalkh y entonces ahora aquí voy a decir centro x y voy a decir centro y ahora ya tengo el cubo centrado y ahora es cuando puedo empezar a jugar y ahora si por ejemplo cojo el cubo y le digo que no esté en 10 sino que esté en 5 vemos como el cubo está más cerca si cojo el cubo y le digo que esté en 25 veo que el cubo está más lejos con lo cual como podemos comprobar por aquí ahora sí vamos a empezar a dibujar ahora sí vamos a empezar a divertirnos ahora es cuando realmente las cosas se van a poner divertidas porque vemos que ya estamos dibujando en el espacio 3d y vemos cómo estamos dibujando en el espacio 3d digamos desde un punto de vista de perspectiva vale tenemos una perspectiva mediante la cual podemos dibujar lo que queramos podemos crear las geometrías que queramos podemos pintar lo que queramos vamos a por ello ahora voy a empezar a divertirme igual mi concepto la diversión no es igual que el vuestro pero para mí ahora la diversión consiste en empezar a crear un montón de cubos también voy a decir que yo ahora mismo tengo un poco de extrañeza en el sentido de que no acabo de saber porque el cubo antes era pintado de color negro vamos a ver contexto punto field se ha pintado absolutamente negro cuando estaba cogiendo un rg vea voy a decir 25 500 color rojo y creo que eso me pinta de color negro sólido 0.1 desde alguna forma no estoy cogiendo correctamente el contexto punto file style y no sé por qué la verdad es que no sé porque ahora mismo no lo estoy cogiendo correctamente otra cosa que puedo hacer es esto y ponerlo aquí y como digo feel style hay algo que no aumente algo que no estoy haciendo bien rojo semi transparente negro semi transparente de hecho de hecho yo casi podría decir que tampoco está cogiendo voy a quitar un momento el film tampoco está cogiendo el negro semitransparente vamos a hacer a pintar esto por aquí voy a esto por aquí y vamos a por ello voy a quitar el punto de coma creo que se pone como no va ahí sino que va aquí esto ya es otra cosa y ahora por tanto ya puedo pintar ahora sí de saber el relleno correctamente me sobraba ese punto y coma bien y ahora como digo y está esto es lo divertido y ahora vengo y digo bar cubos es igual a miwa ride y entonces entonces yo digo por bar y es igual a 0 y es menor que 30 por ejemplo y más más y entonces ahora voy a hacer lo siguiente cubos bueno centro q me recojo a este centro cubo centro cubo es igual a más punto random – 0.5 no sé 30 a ver qué pasa esto también y esto es más punto random por 30 también porque pues porque en mí y no quiero que las cosas vayan hacia atrás de la cámara solo quiero que sean positivos pero en xy en z así que quiero que estén en positivo y en negativo así que ahora digo cubos es igual a mí un cubo y ahí lo tenemos y aquí incluso digo más punto random y lo multiplicó por 5 porque cada cubo tenga su dimensión si ahora vengo aquí y digo objetos es igual a cubos vengo por aquí recargo y si todo ha ido bien vamos a verlo con solá no hay ningún error recargo bien ahora deberían aparecer muchos cubos vamos a ver kurz ok vamos a verlo tenemos ok diferentes cubos pero sólo tengo un cubo a la vez parte de ese que se ralla no pasa nada bien vamos a ver así es que yo ahora aclaró por favor cómo se ve y es una matriz bien y entonces ahora digo cubos ok ahora tengo cubos y los tengo aparte de ese que se ralla que debe ser lo que cae en cero pero bueno pero yo creo que queda claro que tengo una proyección vale tengo una proyección en perspectiva tengo una proyección cónica tendría que averiguar por qué se produce eso vamos a yo tengo la sospecha y tengo la sospecha de que esto es más uno pues no tengo la sospecha de que cuando algún parámetro es cero hace esa esas líneas extrañas pero bueno en el momento de momento con tren esto en la pantalla me vale ahora tengo una proyección ya tengo técnicamente como una especie de motor de representación en 3d ahora lo que quiero gustaría moverme un poco me gustaría mover lo que sería la proyección entonces para eso lo que voy a hacer es crear digamos unos escuchadores unos listeners dentro del espacio de trabajo y estos listeners me van a ayudar a bueno a trabajar más cómodo digamos al estos listeners me van a ayudar a escuchar digamos cuando hago clic y cuando muevo el ratón por encima del espacio de trabajo a continuación por tanto lo que voy a hacer es lo siguiente vamos a ver en esto de color azul que el rojo me ataca un poco a veces vale lo pongo de color azul marca la idea es que vamos a poder ir viendo cómo podemos tocar lo que queramos evidentemente y ahora vengo por aquí y ahora vengo por aquí y digo lo siguiente vamos a ver representación que haya antes de esto voy a decir voy a decir momento extremos abajo y entonces 5 bar lienzo es igual a esto de aquí una cosa es el contexto otra cosa es el lienzo ahora luego pondré puntos y comas donde es debido darle al ok y entonces y entonces dijo lo siguiente lienzo punto efe lissner y digo cuando haga mouse down quiero ejecutar una función llamada empieza en movimiento en el documento voy a añadir una deben lissner que es que cuando mouse cuando mueva el ratón quiero mover y en el documento quiero añadir un el disney que es cuando levante el ratón para movimiento ni que decir tiene que ahora evidentemente lo que tengo que hacer a continuación es crear los tres las tres funciones entonces function empieza en movimiento function mover y función para movimiento así que a continuación lo que voy a hacer es lo siguiente vamos a ver le digo le digo le digo vamos a ver eterna variable voy a crear una variable aquí para ratón abajo el ratón pulsado es igual a force momento es falso cuando empieza en movimiento es ratón pulsado es igual a true a partir de aquí le digo que vamos a ver esto empieza el movimiento lleva un event y le digo pues mx vamos a ver aquí van movimiento x es igual a cero bar movimiento y es igual a cero y entonces dijo m x es igual a event punto y esto será offset será un evento clic en equis y movimiento y será event punto cliente y a partir de aquí voy a hacer lo siguiente voy a decir si es cierto ratón pulsado lo cual equivale a decir es cierto que rato en pulsados igual a true vale a partir de aquí voy a crear una serie de proyecciones vamos a crear un par de ángulos z yf y que esté taifi pues el daisy es z es el movimiento orbital en horizontal y si es el movimiento orbital vertical vale z por tanto es horizontal si es el movimiento vertical vamos a por ello bien a partir de aquí vamos a crear estas variables es como vamos a ver bar z es igual a vamos a ver esto también lleva un evento podría poner evento esto es z es igual gibert punto cliente x menos movimiento en x todo esto multiplicado por más y partido 360 ahora digo bar fin es igual evento punto event punto client y menos movimiento en y x + puntopy partido por 180 y entonces ahora lo que voy a hacer es digamos rotar vale rotar el que pues claro el problema está en que esto digamos estaría pensado para hacer un único cubo vamos a hacer un único cubo y ahora luego haremos cubos vamos a verlo ok por aquí ok por allá y digo bar cubo es igual no va al centro cubo es esto de aquí habrá un buen fin bar centro cubo es 0 0 0 y ahora cubo bar cubo es igual ah y un cubo centro cubo como 3 habíamos dicho creo objetos es igual a cuba así que nos dónde estás centro como objetos es igual a cubo pero esto va así ahora ok a ver no me cuadra vamos a ganar así para esto es 11 ahora sí y el tamaño es 6 por ejemplo vale ahora por ejemplo me cuadra un poquito más bien entonces ahora entonces ahora voy a hacer lo siguiente voy a decir solo bari es igual a 0 y es menor que 8 porque tenemos 8 vértices y más más más más y bien a continuación lo que voy a hacer es rotar tengo que rotar y para ello lo que necesito por tanto es crear una función de rotación entonces para ello voy a crear vamos a ver por aquí una función de rotar vamos a crear la función de rotar vamos a poner rotar algo y ahora veremos qué es lo que rotamos exactamente vale pero pero vamos a ver antes vamos a definir esta función de rotar y digo a quién estoy rotando el centro y ahora z y fui así que a continuación digo bar 7 es igual a match.com el co seno de eta bar etc es igual a más puntos sin receta bar pepe es igual a match.com de fi y p perdón sp es igual a más puntos de fe una vez que ya tenemos los ángulos hemos calculado el seno y el coseno es cuando ahora sí podemos calcular la rotación entonces digo bar x es igual a m perdón x menos centro vamos a ver el centro no centro de x no centro centro x y es igual punto y menos centro punto y y bar z es igual a un punto z menos centro de zeta entonces y ahora vengo y digo objeto la la equis del objeto es igual a 7 x x – sp x cp por y más st por s&p porque está más centro punto x el objeto y es igual a éste por x + 7 x pp por y -7 por s&p por z más centro punto y y el objeto punto z es igual a sp por y mas pp punto z más centro punto zeta si ya tenemos esto si ya tenemos esto en este caso ya podemos vamos a verlo aquí está ya podemos empezar a rotar esta rotación como vemos pide cuatro objetos a le pide el objeto que es el cubo a continuación pide el contexto a continuación vamos a verlo pide el contexto momento esto es el contexto pide el objeto el objeto del centro zi6 al enfoque un momento voy a ponerlo otra vez rotar ahora si pide el cubo a continuación a continuación pide el centro el centro del cubo lo tengo por aquí este centro cubo y luego a partir de ahí vamos a la afi y la zeta la fila zeta vamos a decir menos más un tope partido 720 coma partido 720 una vez que tengo esto voy a hacer la representación los objetos en el contexto de x como de y y ya está vamos a verlo y entonces si ahora esto es mover perdón me quedaba para remover parar de mover el ratón abajo ratón pulsado es igual a force si todo ha ido bien vamos a ver lo bien centro y snoop de find en la línea 93 vamos a ver línea 93 centro centro y santi fire a ver momento hace muy bien centro centro centro el centro centro x centro y así estos centros esto es lo que he quitado antes que lo estaba quitando en la línea incorrecta vale ahora sí ok tengo esto y si todo va bien no lo sé pero aquí vale de x 6 notifight muy bien en la línea 121 línea 121 línea 121 es este de aquí vale entonces yo juraría el de x y el de y vamos a centro de xy centro y vamos a centro x y centro y vale recargamos en principio en principio en principio parece que no consola del momento no y voy a hacer una cosa voy a decir con sole log para comprobar que estamos hola vale es correcto es correcto pero sin embargo al pensar y arrastrar no está ocurriendo nada es decir no está ocurriendo nada desde el punto de vista lo que quiero decir es que no está realmente realizando una representación para los objetos en el contexto centro de xy centro y siempre siempre los está devolviendo empieza movimiento este es el foro rotar voy a actualizar esto mx es igual a evento punto cliente x y m y es igual a evento punto clic en y así que guardo recargo vale evento is not the fame es event guardo recargo vale sigue sin aparecer vamos a por ello centro x centro y y en principio aquí debería estar cambiando la representación sin embargo no lo está haciendo z vale y de alguna forma está manteniendo los puntos vamos a comprobar qué es lo que puede estar fallando rotar muy bien es cubo vale son los vértices cubo punto vértices beige vamos a ver lo recargó ok y ahora sí estoy rotando el cubo pero que pincha donde básicamente se mueve en la misma dirección no pasa nada por lo menos con estar rotando el cubo pues ya de momento me vale y ahora evidentemente lo que vamos a hacer es rotar el cubo hacia la zona hacia donde queramos pero de momento de momento veo que por lo menos el cubo ya está rotando lo cual me indica digamos que ya tengo el código en funcionamiento vamos a continuar con el código ya tengo el código en funcionamiento por tanto y ahora voy a ver mother y a quién rotar voy a poner feta por cierto y ahora por tanto y ahora por tanto ahora si recargo ahora si veo como ya estoy moviendo en horizontal y puedo mover también en vertical se mueva un poco el lado no pasa nada vale pues ahora ahora por tanto yo quiero hacer que este código sea extensible puedo quitar el control de puntos por cierto creo que va sumando eso ya queda un poco frito no pasa nada en la instrucción vale y ahí veo digamos que tengo el cubo pero recordemos que yo ahora no quiero hacer esta operación sobre un cubo quiero hacer esta operación sobre un montón de cubos entonces para ello para ello voy a hacer una segunda versión que hace un rato que no hago segunda versión y vamos a continuar creando el código en la segunda versión de este archivo bueno pues cargamos por tanto los dos elementos en cada uno de los dos sitios y ahora básicamente pues bueno dentro de mover lo que queremos hacer es realmente realizar esto es decir en representación pues aquí realmente lo que estamos haciendo es los objetos punto el em es decir que todos y cada uno de los objetos con lo cual aquí realmente vamos a ver aquí rotar cubo vale vértices de y con lo cual aquí lo que tendremos que hacer es todos y cada uno de los cubos vamos a ver primero vamos a devolver esto esto lo machacamos y entonces ahora aquí digo four bar j es igual a 0 j es menor que cubos links j + + y ahora por tanto vengo por aquí y vigo cubo cubos de j punto vértices punto lo que sea y ahora representación de objetos pues yo creo que yo y esto es y esto es y esto es cubos si todo ha ido bien ahora recargo y tengo un montón de cubos y ahora al hacer así pues vemos cómo puedo girar los cubos se comporta un poco lento más que nada porque ya no estoy rotando un cubo estoy rotando un montón de ellos voy a poner un 10 por ejemplo vamos a verlo y vemos ahí como tenemos ya la rotación de estos elementos es decir vemos como y cuidado en el momento en el que uno pero igual cuál es la lógica mediante la cual de repente algún objeto se va pero como podemos ver pues ahí lo tenemos tenemos en este caso como diríamos un problema con el rendimiento es decir observamos como pues ahora habría que mejorar el rendimiento de este sistema evidentemente pero por lo menos por lo menos tenemos ya un motor de render propio tenemos ya un entorno de representación en base al cual podemos trabajar ahora podemos extenderlo podemos crear nuevas primitivas podemos hacer en definitiva lo que queramos claro tenemos tengamos en cuenta que este ahora mismo es un motor que representa cubos vale evidentemente más adelante nos puede interesar representar cualquier otra cosa que no sean cubos puedo meter otra primitiva que se llame esferas por ejemplo puedo meter otra primitiva que se llame como yo quiera pero el concepto finalmente el concepto que vale en este caso es que tenemos un motor inicial de representación y a partir de ahí podemos extenderlo tanto como queramos vamos a extenderlo un poco más entonces para extenderlo un poco más por ejemplo podría hacer lo siguiente vamos a ver donde vemos que el cubo acepta un centro y un lado pues yo por ejemplo voy a poner que acepte un color así que ahora vengo por aquí y vivo y digo de color es igual a color y por tanto cuando pintamos un cubo si ahora nos vamos a representación vamos a ver aquí lo tenemos pues yo puedo venir por aquí y decir lo siguiente aquí aquí aquí vale con texto punto style es igual a objetos y punto color y entonces yo por ejemplo puedo venir aquí y cuando creo los cubos pues puedo darles un color vamos a verlo y están entonces ahora vengo por aquí y digo vamos a decir un cubo coma rgb 25 500 0.5 y entonces vamos a confirmar como ahora los cubos son de color rojo pero lo más interesante ahora veremos por qué eso se vuelve infinito mal pero lo más interesante aventín sí ahí tengo algo en cuba ahora veremos cuál es la razón vale lo más interesante es que yo ahora puedo venir aquí y puedo decir lo siguiente bar r es igual a más punto round de más punto random por 255 la clave es igual y ahora voy a decir que esto es [Música] esto es r esto es g y esto es d así que ahora guardo recargo y vemos como ya tenemos un motor donde pues cada cubo puede tener un color diferente tenemos digamos un principio de materialidad y en esta materialidad pues como podemos observar ahora mismo no estamos eligiendo bien quién se pinta primero y quién se pinta después de eso podemos estarlo más adelante pero de momento en definitiva tenemos pues un primer motor creado donde representamos en 3-d y donde en definitiva podemos de momento orbitar la vista en toda esta cuestión al final lo que queremos es crear está digamos este este programa este software de momento que cierre esto este software como una librería como un motor como una digamos que entonces esto lo podemos conseguir de la siguiente forma voy a crear un nuevo archivo dentro de este archivo voy a hacer lo siguiente vamos a ver vamos a todo esto y lo vamos a meter dentro de pues la librería cortamos tengo aquí lo pego lo voy a guardar esto lo guardo en 3d y lo guardo como pues jv 3d punto js así que le voy a guardar me da una serie de errores que dan igual los errores reales todo lo que tenga que ver con la librería lo voy a meter ahí dentro cubos es igual anima rayo vale todo esto bien esto fuera para rotar empieza a movimiento y mover y para movimiento todo esto realmente es parte de la librería y ha sido un poco pues abstraemos lo que es la librería de lo que es la utilización de la librería con todo esto con todo esto vamos a ver ahora bueno esto va a dar error por supuesto que sí y ahora voy a decir que script el crc es igual jv 3 de punto j s con esto esto empieza a funcionar de nuevo y vamos a mover vamos a ver todo esto mx am y esto es de la librería esto es correcto esto es correcto esto es correcto esto es correcto vale entonces si todo va bien por ejemplo voy a hacer así voy a hacer diferentes pruebas para comprobar que esta librería funciona es decir voy a hacer diferentes pruebas para comprobar que esto pues ya lo puedo hacer correctamente y que puedo utilizar la librería digamos ambiente y entonces voy a hacer una prueba e y voy a de firmar x es igual a 0 x es menor que 10 por ejemplo x + + ahora voy a decir lo mismo formar y es igual a cero y menos diez más voy a sacar esto voy a este momento aquí lo pego y ahora quiero ser una especie de tablero tablero de ajedrez entonces el centro cubo es igual a qué pues centro cubo es igual x por 30 esto es y por 30 y la zeta va a ser cero así que entonces me sola y voy a poner más 10 o más 30 o más 40 para que se vaya hacia el fondo y ahora entonces voy a decir esto vale voy a decir vamos a ver cómo os de y es igual a un centro cubo esto va a ser 3 vamos a verlo vamos a por ello recargo y snow define muy bien vale el contador es igual a cero es igual a cero esto es cubos de contador y le digo contador más más así que guarde recargo y tengo por ahí y tengo buenos 100 cubos los cuales cuestan de mover ahí están y veo que valen ok vamos a ver aquí 30 eterna cosa voy a decir 5 y 5 porque creo que esto se mueve un poco lento vale pero recargo recargo sé que falta lo cargo en otra página ahí lo vemos voy a intentar girarlo ahí lo vemos como tengo un tablero de 5 x 5 cubos con colores aleatorios la idea por tanto es que haber una entidad ver si cazo porque en el momento en el que esto sale de la pantalla de colores estoy ahí para algún punto en el que la proyección se vuelve un poco más cara parece que ahí está la cosa vale ahora localizaremos el por qué pero de momento la idea es esta quería hacer una proyección luego he hecho una proyección es decir he hecho una proyección en el sentido de qué pues bueno todo todo aquello que yo ahora a partir de aquí quiera dibujar pues puedo dibujarlo utilizando este motor le puedo dibujarlo utilizando este sistema de proyección 3d y bueno puedo meter esferas puedo meter geometrías y extendiéndolo evidentemente ya el reto está en extenderlo pues puedo meter luces puede meter texturas materiales y puedo meter básicamente lo que quiera

Deja una respuesta

Tu dirección de correo electrónico no será publicada.