AxΠ

Totorial Ipod Nano

by Andres F on Oct.23, 2009, under 3d

Lo que voy a tratar es de explicar como se logra el modelo de un ipod:

Antes que nada antes de empezar a modelar hay que saber por donde empezar, y un buen comienzo es buscar algún “blueprints” de lo que queremos modelar, en este caso un ipod nano, esto nos dara una excelente referencia sobre las proporciones del objeto, asi que siguiendo este método empecemos por preparar el blueprint.

apple-ipod-nano

Esta imagen nos servirá como guia principal para nuestro modelo, pero para poder sacarle el mayor provecho hay que ajustarlo adecuadamente en la escena, para eso lo primero que tenemos que saber son las dimensiones de la imagen, entonces sabremos las proporciones de la misma. Una vez que tengamos las medidas tenemos dos opciones:

A: En nuestra escena del 3ds max creamos un plano con exactamente las mismas medidas de ancho y altura que la imagen, posteriormente preparamos el material poniéndole un mapa de bits en el difuse y seleccionando la foto, aplicamos el material al plano y si resultara que es muy grande, como suelen ser los blueprints lo que tendremos que usar es la herramienta de escalar “scale” y usando la variación de escalado uniforme “scale uniform” con esto achicaremos proporcionalmente el blueprint a la medida que nos sea adecuada para las proporciones de la escena evitando que la imagen se deforme.

B: Haciendo cuentitas podemos sacar el radio de proporcionalidad, para esto hacemos alto/ancho y nos va a dar un numero que es la proporcion del alto sobre el ancho, entonces si nosotros quisiéramos en la escena que nuestro plano ocupe 600 unidades de ancho, para sacar la altura multiplicamos 600 por el radio y nos da la altura correspondiente, o si queremos una altura de 600 dividimos 600 por el radio y nos de el ancho.

Ubicamos los plano y le aplicamos el blueprint y nos quedaría en mi caso algo asi.

ScreenShot128

Lo que probablemente les suceda es que la calidad de las imágenes sobre los planos sea pésima, para eso hay que ajustar algunas opciones del viewport para que no de una buena calidad y tener mayor precision para trabajar, para eso vamos a customize -> preferences, en la solapa viewports tocamos el botón configure driver y ahí activamos esta opciones:

Opciones

Finalizado estos pasos estamos casi listos para empezar a modelar.

La forma en que modelé este objeto es usando operaciones booleanas, es decir substrayendo, soldando o intersectando solidos, desde ya que estas operaciones no son lo mas adecuado para lograr un modelo prolijo, ya que el 3ds max no es un software que maneje muy bien estas operaciones, por lo que en algunas ocasiones suele generar una malla muy desprolja la cual a la hora de realizar modificaciones editando polígonos o vértices resulta muy complicado, por otro lado nos permite lograr resultados que hechos de otra manera requiririan un mayor conocimiento y técnicas especializadas, lo cual si el modelo no es para animar (donde se requiere una maya mas prolija) puede resultarnos muy conveniente.

Comenzando el modelado:

vista top creando cajaPara empezar hagamos un cuadrado (box) mirando desde arriba el plano que contiene el blueprint, para eso si ubicamos bien los planos con la letra “t” cambiamos a la vista “top” la cual es ideal para darle las dimensiones iniciales a la caja.

Una vez que este creada ajustamos las dimensiones tratando de dejarla lo mas ajustada posible al blueprint, en mi caso no me preocupe demasiado en esos detalles, pero cuanta mas atención se les preste dará como resultado final un modelo mas preciso y real.

Ahora nos vamos a la vista frontal la cual tiene como tecla rápida la “f” y repetimos el mismo proceso ajustando el espesor de la caja:

vista frontal

Una vez que hagamos esto nos debería quedar la caja con las dimensiones justas del modelo, ahora lo que nos queda hacer es redondear esa caja, para eso deberemos utilizar un modificador, turbosmooth, lo que haces es redondear el objeto, antes de aplicarlo vamos a convertir la caja “box” en un polígono editable, para eso le hacemos click derecho sobre el objeto y seleccionamos “convert to” y después “editable poly”, luego aplicamos turbosmooth y nos quedara algo que poco se parece a lo que estamos buscando, dentro de los parámetros del turbosmooth tenemos el numero de iteraciones que realiza para suavizar el modelo, a mas iteraciones tenemos un modelo mas suave, pero mas pesado para trabajar quitándonos agilidad, asi que por el momento esta bien si le damos dos o tres como mucho.

Turbosmoothing

Lo que hay que hacer ahora es agregar algunas aristas para lograr que sea mas cuadrado, cuantas mas aristas tenga mas preciso sera el redondeo que realiza el modficador.

Para agregar estas aristas lo que vamos a hacer es expandir las opciones de edición del polígono, apretamos en el + y usamos la edición por “edges”, seleccionamos todas las aristas a lo ancho, osea todas las que son mas cortas, una vez que están todas elegidas (con control apretado podemos ir agregando a la selección), vamos a la barra de operaciones y hacemos un connect.

connnect

Como se ve en la imagen el modelo se esta asemejando un poco mas a la forma que tenemos que llegar, siguiendo con esta técnica ahora vamos a hacer un connect entre las aristas mas largas seleccionándolas, un detalle, el connect por si no se dieron cuenta lo que hace es crear un “loop” de aristas conectándolas entre si con una nueva.

Aplicamos connect:

segundo connect

Ya nos acercamos muchísimo a la figura final, yo le di los valores que me parecieron en el momento, pero después me dí cuenta que no estaban del todo correctos, asi que les recomendaría que ustedes con paciencia y detalle le de los valores que les resulte mas apropiado

El ultimo connect que vamos a hacer es el que no me convenció y se darán cuenta mas adelante, el cuerpo del ipod me quedo muy redondeado asemejándose a uno mas nuevo, y no como es en esta generación que son un poco mas cuadrados, asi que les recomendaría que no le den el mismo valor sino que traten de dejarlo un poco mas cuadrado.

Hasta aca debería ser algo asi el modelo:

parcial

Aplicando el ante ultimo connect:

connect

Noten que, lo que logramos con esto hacer darle forma a lo que vendría a ser la cubierta del ipod donde estan los botones y la pantalla, recuerden que para hacer este connect es seleccionar todas las aristas verticales, es decir las del espesor, en la imagen se ven las que están seleccionadas, para resultar mas fácil la visualización del modelo lo que hice es aplicarle un material semi transparente, esta es una buena costumbre que facilita ver las cosas, hacer este material es mas que sencillo, con un material estándar cono base, seleccionan el color de diffuse que quieran y después en opacity el valor de la transparencia, en mi caso con un 40 me gusto.

Ahora viene el ultimo connect, el cual yo les recomendé que lo hagan mas abajo que yo para que les quede un poco mas cuadrado.

ultimo connect

Con esto ya logramos la geometría general del modelo, lo que hay que hacer ahora es empezar a detallar el modelo, asi que como primer detalle que le vamos a dar es la unión de la parte metálica, es decir la parte de atrás, con la parte frontal donde dijimos que están los botones y eso. Para eso tenemos que seleccionar un grupo de caras “faces” y meterlas hacia adentro del modelo, para poder realizar esta tarea con precisión vamos a necesitar volver a convertirla a “editable poly” pero antes hay que ajustar las subdivisiones que hace el turbosmooth, a mi criterio con tres iteraciones es suficiente, acuerdense siempre de trabajar con la menor cantidad de iteraciones posible, y si después quieren suavizar el modelo, se vuelve a aplicar alguna técnica de suavizado una vez que se termine.

ajustando iteraciones

Ahora si, una vez ajustadas las iteraciones, nuevamente botón derecho sobre el objeto, convert to -> editable poly, y ahora nuevamente vamos a trabajar con las aristas “edges” para realizar un ajuste, precisamente un escalado, ¿por que?, porque entre arista y arista nos quedo mucha separación, por lo que si nosotros metemos esas caras para adentro nos quedaría una ranura muy grande y que no es real, esta separación entre la parte metálica y la parte frontal es mínima. Hacemos el ajuste de la siguiente manera, seleccionamos todas las aristas que dan la vuelta al modelo, para este tipo de selecciones nos es muy útil el “ring” lo que hace es seleccionarnos todas las aristas que dan la vuelta al modelo que son paralelas entre si.

ajuste de aristas

Una vez seleccionadas, elegimos la herramienta de escalado y lo aplicamos usando el eje Z para hacer dicho escalado solamente en esa dirección, el tamaño vertical lo dejo a su gusto. Lo que hacemos ahora es seleccionar las caras “faces” que reducimos de esta manera:

seleccion

Ahora lo que hacemos es un bavel con los siguientes parámetros:

bavel

Lo que hacemos aca, es meter las caras elegidas hacia adentro, esta herramienta tiene muchísimos uso, y les recomendaría que la prueben con distancias figuras y se den cuenta lo que significa cada parámetro.

Resultado:

resultado bavel

Bien, aca termina la parte prolija del modelo y nos ensuciamos las manos para usar las operaciones booleanas “booleans”, esta opciones se encunetra en la parte de solidos, y luego en el combo box “compound objects”, elegimos la vista frontal “f”, y para esto nos conviene que sea transparente el material para poder ver el blueprint.

ScreenShot041

Ahora lo que vamos a hacer es un chamfer box, este se encuentra en “extended primitives” copiando la figura que tenemos de fondo.

vista forntal

Esta figura la vamos a usar para restársela a la figura principal, pero lo que necesitamos es que sea plana de uno de los lados, sino cuando restemos no nos va a quedar el borde que queremos lograr, para esto vamos a convertirla a poly, pero antes de esto vamos a darle  un buen numero de “fillet segs” que nos van a dar una esquina mas redondeada de la chamfer box.

Una vez que termina esto vamos a seleccionar las caras que no queremos y las borramos con delete.

cortando el chamfer

Una vez que cortemos las caras que no nos sirven tendremos que volver a cerrar la figura para que nos sirva para aplicar el boolean, ara esto vamos a elegir la selección de bordes “border”, tocamos en el borde que nos quedo abierto y después buscamos en la barra de abajo el botón “cap”, esto no creara una nueva cara cerrando la figura.

resultado

Lo que vamos a hacer ahora es superponer los objetos, de forma que nos quede justo donde queremos hacer la substracción.

superposicion

Ahora vamos a realizar la substracción, para eso seleccionamos el cuerpo del ipod y vamos a la parte donde creamos nuevos solidos, elejimos como dijimos antes compound object -> boolean, después nos fijamos de que este elegida la opción de substracción y tocamos en “pick operand b” es muy importante tener elegido el ipod antes de elejir boolean, porque tomara ese objeto como operando A, de lo contrario si cambiamos el orden de los operando la substracción nos quedara invertida.

segundo booleanScreenShot060

Luego repetimos el paso anterior pero sin cortar el chamferbox y haciéndolo coincidir con el hueco de adentro donde iria el conector. Después de estos dos booleans nos tiene que quedar algo asi…

ScreenShot063

Ahora repetimos una vez mas la operación booleana pero con un cilindro para hacer la perforación donde ira el jack del auricular.

ScreenShot067

Una vez que tenemos listo la parte trasera del ipoc vamos a hacer los botones que están sobre la ruedita. Para eso seguimos con la misma mecánica, esta ves usamos la vista de arriba para copiar la forma de la rueda, obviamente vamos a usar un “tube”.

ScreenShot075ScreenShot076

Ahi vemos como ajusto la figura hasta encontrarle la posición correcta, lo que tenemos que hacer después es darle mas segmentos al tubo para lograr una figura mas suave y redondeada, una vez que la tengamos lista para realizar la substracción y crear el espacio para los botones la vamos a copiar porque es la figura que vamos a usar después para el botón mismo.

ScreenShot080

Ahí estamos posicionando la figura para realizar el substract.

ScreenShot078

Para copiar la figura no hace falta mas que arrastrarla manteniendo shift apretado, ahora hacemos la substracción y posicionamos la copia en la posición del botón:

ScreenShot079ScreenShot083

Lo que vamos a hacer ahora es redondear los bordes del botón, yo decidí borrar ambos bordes como se ven elegidos en la segunda imagen, pero después de terminarlo me dí cuenta que ese borde quizás no era necesario, en fin el borde que crean necesario redondear lo seleccionan, pueden seleccionar un segmento y usar el botón loop para seleccionar todo el contorno, siempre utilizando la selección de egdes como veníamos haciendo, luego buscamos el botón chamfer, esta herramienta nos redondea las aristas que tenemos seleccionadas, tiene dos parámetros, el radio de curvatura de redondeo y la cantidad de aristas que le asigna, cuantas mas aristas mas suave y prolijo queda el modelo.

ScreenShot084

ScreenShot086

Ya tenemos la parte de los botones listos ahora vamos a ocuparnos de la pantalla que es un tema mas complicado, lo que tenemos que hacer es un hueco interno donde supuestamente estaría la pantalla y lo que queda de material arriba seria el vidrio, en este punto vamos a tener que hacer un manejo un poco mas profundo de polígonos, vamos paso por paso.

Primero que todo vamos a crear un chamfer box, ajustándolo a la figura de la pantalla, y vamos a hacerle plana una de sus caras como hicimos anteriormente, en la imagen se ve que estan las dos caras planas pero no es necesario, una vez que tengamos la figura la situamos a muy poco de la superficie del ipod y realizamos la resta con booleans.

ScreenShot099

Lo que nos queda es algo como lo que se ve a continuación, una vez que nos quede el corte hecho vamos a volver a convertir el ipod a poligono ya que cada vez que le aplicamos una operación booleana nuestro objeto se transforma en un boolean, esto es porque tenemos q volver a trabajar con aristas, caras, etc…

ScreenShot108

Ahora viene la parte en hay que darle el detalle a mano, lo que vamos a hacer es usar la selección por caras “faces” y seleccionar la cara grande que conforma la pantalla, esta cara vamos a moverla hacia abajo con la herramienta de movimiento pero manteniendo apretado shift antes, con esto lo que vamos a hacer es dejar un borde que luego debemos borrar.

ScreenShot110

Ahí se ve el borde parcialmente borrado, lo que tenemos que hacer es ir borrando las caras de esa franja, para esto usamos la selección por caras elegimos la cara y apretamos delete y eliminamos asi toda la vuelta.

ScreenShot114

ahora como cada vez que tenemos una figura que esta abierta tenemos dos nuevos bordes, estos bordes los vamos a seleccionar y hacerles un “cap” para crear las caras que faltan.

ScreenShot116

esa es la primera “cap”, se ve negra es porque cada cara tiene lo que se llama un vector normal, que es donde apunta la cara, que valga la redundancia tiene una cara y no una de cada lado, por lo tanto la parte negra esa que vemos es porque la cara esta apuntando hacia abajo y esta bien que sea asi, ahora vamos a crear la segunda cara que es la que va a ir arriba.

ScreenShot117

ahora vemos que la cara se ve bien, del mismo color de material que el resto del modelo, y esto es precisamente lo que queremos, ¿porque puso una cara apuntando para abajo y la otra para arriba?, bueno esto es porque el 3ds max tiende a apuntar los normales de las caras haciéndolos coincidir con el de las caras vecinas, imaginemos que estos vectores normales son como pelos que salen desde la cara, bueno esos pelos nos indicarían para que lado esta la cara.

ScreenShot001

¿Para que hicimos esto?, bueno cuando estemos en la etapa de texturización este borde de material que dejamos nos va a servir para hacer de vidrio, y en la cara que esta adentro poner un material que simule la pantalla y que emita luz.

ScreenShot127

Digamos como que el modelo esta a grandes rasgos casi terminado, omití el detalle del botón que posee arriba porque es fácilmente modelable con la técnica que veníamos aplicando hasta ahora y no creo que les presente mayores problemas.

pr

Espero que les haya sido de utilidad, en otra oportunidad les voy a explicar como llevar a cabo el proceso de texturización que si bien no es nada muy complejo tiene sus truquitos para hacerlo simple y lograr buenos efectos.

Aca les adjunto lo parámetros de vray para este render.:

ScreenShot003ScreenShot004ScreenShot007

Es una configuración típica de vray, luego use una sola luz vray con multiplier en 30 y de 28×28.

Saludos Andrés F.

11 Comments :, , , , , , more...

Imagenes Embebidas en CSS

by Andres F on Jul.21, 2009, under PHP, Programación

Las imagenes embebidas en CSS es una tecnica que se utiliza para lograr un cacheo de imagenes sin tener ningun script que haga el precacheo de imagenes, ademas de que evitamos hacer peticiones, ni siquiera para saber si el archivo es el mismo que esta en cache.

Segun un estudio de la empresa Yahoo, el 80% del tiempo en que tarda en cargarse una imagen no se debe a la compilacion del script que este del lado del servidor sino a operaciones que sea realizan del lado del cliente osea, el navegador.

Lo que se hace comunmente en una hoja de estilo para cargar una imagen es usar url() y entre parentesis la url de la imagen, con esta tecnica lo que se hace es escribir los bytes codificados para que la imagen este directamente en el archivo de texto plano, y lo que falta es decirle al navegador mediante identificadores que lo que sigue a continuacion es una imagen del tipo que corresponda, jpeg, png, etc. y que se encuentran los bytes codificados con cierto algoritmo.

aca va un ejemplo:

#header-bd{
width:12px;
height:38px;
background-image:url(../img/header/header_d.jpg);
background-repeat:no-repeat;
}

Embebiendo la imagen quedaria asi:

#header-bd{
width:12px;
height:38px;
background-image:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAZAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAgICAgICAgICAwMDAwMDAwMDAwEBAQEBAQECAQECAgIBAgIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMD/8AAEQgAJgAMAwERAAIRAQMRAf/EAF4AAQEAAAAAAAAAAAAAAAAAAAoJAQEAAAAAAAAAAAAAAAAAAAAAEAABAwIGAgEFAAAAAAAAAAABAgQFAwYAERITBwghIhQxYTIVCREBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AVN1qv+XjuUICCZvqwirirOGElHGopTWuAxcuKDjYJ20um9dunTUA1BBUnPSoghVLAQv6uTvy+feN2utB3JZ96heZ9IOUq/TLz+GAuhgDd9K7o/Y9oeJme6Vb0rMkJ1A5hFqz9byMjqy0fbAJEwBQv57ThedxeFGxWo7svc3gkEeli3QvPwT5OnAK9wB0P5xcedXbb5+gJOh2CZ8jcnmhK0eP7bY2DyNbLJDhUW7VKu/m3HbbRhVfU4dDgJCnKBsqqZIUcikEX4D/2Q==");
background-repeat:no-repeat;
}

La diferencia esta en data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AAR…. y aca esta el secreto.
Con data le decimos al navegador que la imagen esta embebida, es decir incluida en el mismo archivo y que es una imagen jpg (image/jpeg), seguido se le dice como están codificado los bytes, en este caso base64, que es un algoritmo que usa 64 símbolos para codificar y lo ultimo es la salida del algoritmo de cifrado que es la imagen en si, y con esto se logra embeber una imagen en css. Ahora la primera pregunta obvia que surge es ¿Como codifico la imagen en base64?, diria que esto se puede hacer con casi cualquier lenguaje de programación, se encuentra en cualquier libreria basica del lenguaje, en el caso de PHP este ya viene y se llama con base64_encode(), entonces para codificar una imagen el script en php seria algo asi:

<?php

$image = file_get_contents("url_de_la_imagen.jpg");

echo base64_encode(file_get_contents($image));
?>

Eso nos daria una salida en el navegador como la que vimos en el css y si la remplazamos en el ejemplo anterior se veria su imagen.

Este metodo no solo sirve para embeber las imagenes de nuestro css, tambien se podria hacer para embeber las imagenes que tenemos en nuestro html, por ejemplo si tenemos una imagen <img src=”mi_imagen.jpg”> se aplica la misma tecnica y se remplaza la url de la imagen por data:…

<html>

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAZAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAgICAgICAgICAwMDAwMDAwMDAwEBAQEBAQECAQECAgIBAgIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMD/8AAEQgAJgAMAwERAAIRAQMRAf/EAF4AAQEAAAAAAAAAAAAAAAAAAAoJAQEAAAAAAAAAAAAAAAAAAAAAEAABAwIGAgEFAAAAAAAAAAABAgQFAwYAERITBwghIhQxYTIVCREBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AVN1qv+XjuUICCZvqwirirOGElHGopTWuAxcuKDjYJ20um9dunTUA1BBUnPSoghVLAQv6uTvy+feN2utB3JZ96heZ9IOUq/TLz+GAuhgDd9K7o/Y9oeJme6Vb0rMkJ1A5hFqz9byMjqy0fbAJEwBQv57ThedxeFGxWo7svc3gkEeli3QvPwT5OnAK9wB0P5xcedXbb5+gJOh2CZ8jcnmhK0eP7bY2DyNbLJDhUW7VKu/m3HbbRhVfU4dDgJCnKBsqqZIUcikEX4D/2Q==">

</html>


——
Aunque esto es valido no es tan eficiente como embeber las imágenes de la hoja de estilo, ya que esta es cacheada por el navegador tras que el html si es generado dinamicamente no, por lo tanto no tendríamos ningún ahorro en descarga de imágenes aunque si en ahorro de peticiones.

Esto simplemente es la tecnica, ahora surge la siguiente situacion, “quiero embeber todas las imagenes de mi hoja de estilo”, bueno hacerlo a mano podria llevar un buen rato y es un trabajo muy repetitivo, asique mejor hagamos un script que lo haga por nostros :D .

Lo primero que tendriamos que hacer es obtener todas las url de nuestras imagenes que se usan en el css, asique con una expresion regular catchaemos todo lo que este entre url( y ), despues con cada url que obtuvimos hacemos la codificacion, y por ultimo buscamos cada url y la remplazamos por las directivas y su respectiva codificacion, entonces:

<?php

$file = "mi_css.css";

$content = file_get_contents($file);

preg_match_all('/url\((.*)\)/',$content,$img);

foreach ($img[1] as $image){
$content = str_replace("url(".$image.")",'url("data:image/jpeg;base64,'.base64_encode(file_get_contents($image)).'")',$content);

}
echo $content;
?>

Así quedaría nuestro script y daría como salida en el navegador la nueva hoja de estilo con todas las imagenes embebidas, yo asumí que todas mis imágenes eran jpeg, así que no hice nada para reconocer que tipo de imagen estoy embebiendo, pero se puede solucionar fácilmente comprobando la extensión de la url y con un case escribir png, jpeg, etc. según corresponda.

En mi opinión personal me dio muy buenos resultados agilizando muchísimo la carga del sitio, ya que a veces se tarda mas en obtener la respuesta de la petición de la imagen que la descarga en si de la misma, y esto se aprovecha mucho mas cuando usamos imágenes para hacer marcos o contenedores que llevan varias imágenes de poco peso y que suelen ser muchas cuando se tienen varios contenedores.

Saludos.

12 Comments :, , , , , more...

Estas buscando algo?

Use el formulario para buscar:

Todavia no encontraste los que buscabas? Deja tu comentario o enviame un mail!

Webs Amigas!

Algunos amigos recomendados...

Archivo

Todas las entradas, ordenadas cronologicamente...