Panorámica con Blender


Escribiendo el post anterior, me puse a buscar si habia alguna forma de mostrar un diseño de Blender de forma inmersiva, como en una photosphere (o panoramica) de Google Street View. He encontrado una forma muy facil de hacerla aqui, asi como una libreria web para poder mostrarla, consiguiendo este resultado:


(sobre la imagen, arrastrar para moverse y scroll para zoom)

Creacion de la photosphere:
  • Comenzando a partir de la escena ya creada en el post Diseño 3D con Blender, he redistribuido algunos elementos y añadido otros nuevos para mejorar el resultado.
  • Se sitúa la cámara en el centro de la escena, o en el punto donde este la perspectiva desde la que se verá la presentación.
  • Es muy importante que la camara se encuentre centrada, que no este inclinada hacia adelante o hacia los lados, de no ser así obtendríamos una imagen similar a esta: 
    donde se ve que el horizonte no es recto. Si utilizaramos esta imagen en el visor web veríamos como la vista se va "torciendo" a medida que giramos. Para que esto no suceda: seleccionamos la camara haciendo click derecho en ella, vamos al menu "Object" (el del cubo naranja), vamos al apartado "Transform" y cambiamos los valores de X e Y de "Rotation" por 90º y 0º respectivamente.
  • Nos aseguramos de tener seleccionado "Cycles Render"
  • Vamos al menu "Data" (el del icono con la camara), seleccionamos bajo "Lens" la opción "Panoramic" y en "Type" -> "Equirectangular".
  • (Opcional) Al utilizar Cycles Render es normal que la imagen resultado tenga ruido, para reducirlo podemos aumentar el número de pasadas que hace el renderizado. Este valor se encuentra en las propiedas de la escena, en "Sampling" -> "Samples:" -> "Render:".
  • Renderizamos (F12)
  • Obtenemos una imagen similar a esta:

Presentación web:

Para poder visualizar la imagen he utilizado la librería Photo Sphere Viewer de Jérémy Heleine.
  • Creamos un nuevo documento html y dentro del body insertamos el siguente código (cambiando el valor de la variable panorama por la url o ruta de la imagen que hemos creado).

<script src="https://ajax.googleapis.com/ajax/libs/threejs/r70/three.min.js"></script>
<script src="https://cdn.rawgit.com/JeremyHeleine/Photo-Sphere-Viewer/master/photo-sphere-viewer.min.js"></script>

<div id="sphere-container" ></div>
<script>
 var div = document.getElementById('sphere-container');
 var PSV = new PhotoSphereViewer({
  panorama: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigQYDpZguVLl7EYwJgMKgou4yYwBOx-qGjr8l0zleNlmM-JRrZdu4iA2UkrrI4ZCAVUrcdq5qqmFvHUciUWPezMLA84faG3z5a5lRDTHlxASwnjA7eHWIh0SprxSJWCdEpA_FnUCxTBsGv/s1600/002_sphere7.png',
  container: div,
  time_anim: 3000,
  webgl: true,
  navbar: false,
  zoom_level: 60,
  size: {
   width: '600px',
   height: '300px'
  }
 });
</script>


Referencias:
http://brianhenkedigitalart.blogspot.com.es/2013/03/using-blender-with-googles-photo-sphere.html
https://github.com/JeremyHeleine/Photo-Sphere-Viewer
https://github.com/mistic100/Photo-Sphere-Viewer

Comentarios

Publicar un comentario

Entradas populares de este blog

Obtener provincia a traves del codigo postal con Javascript

Imagen
Hoy quiero compartir un pequeña utilidad que hice, en Javascript, para obtener la provincia española de un determinado codigo postal. Es muy util para formularios de contacto. Por ejemplo, puede utilizarse para confirmar que la provincia y codigo postal introducido se corresponden correctamente o, como en este ejemplo, para rellenar automaticamente el campo de provincia introduciendo tan solo el codigo postal. Ejemplo: Introduzca un codigo postal valido: Codigo postal: Provincia: Código: <form> Codigo postal: <input type= 'text' id= 'entradacp' > Provincia: <input type= 'text' id= 'salidaprovincia' > </form> <script type= "text/javascript" > function darProvincia ( cpostal ){ var cp_provincias = { 1 : "\u00C1lava" , 2 : "Albacete" , 3 : "Alicante" , 4 : "Almer\u00EDa" , 5 : "\u00C1vila" , 6 : "Bada...
Leer más

GUI en Python con Glade

Imagen
Este es un pequeño ejemplo para realizar un programa en Python con una interfaz gráfica de usuario (GUI) clásica; que funcione tanto en Windows como Linux. He utilizado esto: Python 2.7 PyGTK 2.24 , un conjunto de módulos para crear GUI en Python Glade , un diseñador de interfaces de usuario Como lo he hecho desde Windows he utilizado los instalables disponibles en los enlaces de arriba. Para quien quiera hacerlo desde Linux: sudo apt-get install python2.7 sudo apt-get install python-gtk2 sudo apt-get install python-glade2 Para empezar, lo mas sencillo es diseñar la interfaz de usuario con Glade. Las diferentes partes del entorno son: Paleta de componentes: los diferentes elementos u objetos que se pueden utilizar (botones, combobox, diálogos, etc) Panel de edición: donde se van poniendo y distribuyendo los elementos Panel inspector: aquí aparecen organizados en forma de árbol los diferentes elementos según estén unos dentro de otros Panel de propieda...
Leer más

Conversor de imagenes a Base64

Imagen
He creado una pequeña utilidad para convertir imágenes png en base64. Este es un sistema que permite incrustar imágenes en una pagina web directamente codificadas en forma de texto, en vez de tenerlo en un archivo a parte. Hablando "en código", seria algo como esto: <!--- Imagen en archivo aparte ---> <img src= "./image.png" alt= "image" /> <!--- Imagen en base64 ---> <img src= "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtA AAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABoSURBVFhH7dixDYAwDABBhwEYLgshFkIMRY +UBaBxQ5HqJeTir4nLlyI3bvd1PlHYkm9ZBlIGUtMt3o81p39sfeT05RdTBlIGUgZSBlIGUgZSBl IGUgZSBlIGUgZS5QO9sFIGUgYyES9xhA3UXdTL/AAAAABJRU5ErkJggg==" alt= "image" /> Dando como resultado esto: Imagen en archivo aparte Imagen en base64 Como se puede ver el resultado es el mismo en ambos casos. Su principal ventaja es que al no cargar las imágenes de un archivo externo se reduce el n...
Leer más