Visualizador de imagens 360 graus interativas na plataforma Android Acadêmico: Jorge Luis Iten Júnior Orientador: Dalton Solano dos Reis
Visualizador de imagens 360 graus interativas na plataforma
Android
Acadêmico: Jorge Luis Iten JúniorOrientador: Dalton Solano dos Reis
Roteiro
• Introdução• Objetivos• Fundamentação Teórica• Desenvolvimento• Conclusão• Extensões• Demonstração
Introdução
• Motivação
– Desenvolvimento para plataforma móvel
– Aplicativo envolvendo computação gráfica
Objetivos
• Disponibilizar a visualização de imagens 360 graus
• Utilizar como entrada imagens 360 graus já existentes
• Disponibilizar funcionalidades que permitam o usuário interagir com o aplicativo
• Ser desenvolvido na plataforma Android
Fundamentação Teórica
• Projeção de imagens
– Projeção Cúbica
– Projeção esférica (equiretangular)
– Projeção Cilíndrica
– Projeção fisheye
Fundamentação Teórica
• Plataforma Android
– Arquitetura: API Java, bibliotecas C/C++
– Roda na Máquina Virtual Dalvik
– Interface simples com os sensores
Fundamentação Teórica
• OpenGL ES
– Suporte versão 1.0 e 2.0 no Android• Versão 2.0 ainda não possui suporte no simulador
– Suporte nativo no Android ou via interfaces do framework.
Fundamentação Teórica
• OpenGL ES – Desenhar objetos– Carregar objetos de arquivos externos– Desenhar objetos utilizando geometria simples
Fundamentação Teórica• Trabalhos correlatos
– PTViewer
Fundamentação Teórica• Trabalhos correlatos
– Photoaf 3D
Fundamentação Teórica• Trabalhos correlatos
– Web Rotate 360
Desenvolvimento• Requisitos Funcionais
– RF01 - Permitir visualizar um panorama de 360 graus já formado, na plataforma Android (Requisito Funcional – RF);
– RF02 - Permitir pelo menos dois formatos de imagens panorâmicas como entrada;
– RF03 - deverá ter funções básicas de navegação (direita, esquerda, cima, baixo), assim como função de zoom in e zoom out;
– RF04 - utilizar o multitoque para interagir com as funções do aplicativo;
Desenvolvimento• Requisitos Não Funcionais
– RNF01 - Ser desenvolvido na linguagem Java;
– RNF02 – utilizar o Eclipse IDE como ambiente de desenvolvimento, juntamente com o Android SDK;
– RNF03 – ser compatível com o Android 2.2 ou superior ;
– RNF04 – ser compatível com pelo menos um dispositivo móvel que suporte a plataforma Android.
Desenvolvimento• Especificação
uc Use Case Model
Usuário
UC02 - Visualizar imagem panorâmica
com toque
UC01 - Selecionar imagem para v isuzalização
UC04 - Aplicar Zoom na imagem
UC03 - Visualizar imagem panorâmica com o acelerômetro
Desenvolvimento• Diagrama de pacotes
pkg Diagrama de pacotes
br.furb.v iewer.util
+ FpsCalculator+ ImageAdapter+ TextureLoader+ ViewerSingleton+ ViewerUti l+ ViewType
br.furb.v iewer.renderer
+ AccelerometerListener+ ViewerRenderer+ ViewerSurfaceView+ ZoomListener
br.furb.v iewer
+ FurbViewerActivity+ GridViewActivi ty+ InitialActivi ty
br.furb.v iewer.objects
+ Cube+ CubeConstants+ CustomTexture+ Sphere+ ViewerObject
Desenvolvimento• Diagrama de classes class br.furb.v iewer.objects
ViewerObject
- texBuffer: FloatBuffer- vertexBuffer: FloatBuffer- textures: Hashmap
- disableGLCubeFunctions(GL10) : void+ draw(GL10) : void- enableCubeTextures(GL10) : void- enableCubeVertex(GL10) : void- enableGLCubeFunctions(GL10) : void
CustomTexture
- context: Context- id: int- resourceId: int- bitmap: Bitmap
+ getBitmapImage() : Bitmap+ getHeight() : int+ getId() : int+ getWidth() : int
«final»CubeConstants
- cubeCoords: float[]- depth: float- height: float- width: float- cubeTextcoords: float[]
Cube
+ draw(GL10) : void
Sphere
+ draw(GL10) : void- buildSphere(Context, GL, float, float, int, int) : void
class br.furb.v iewer.objects
ViewerObject
- texBuffer: FloatBuffer- vertexBuffer: FloatBuffer- textures: Hashmap
- disableGLCubeFunctions(GL10) : void+ draw(GL10) : void- enableCubeTextures(GL10) : void- enableCubeVertex(GL10) : void- enableGLCubeFunctions(GL10) : void
CustomTexture
- context: Context- id: int- resourceId: int- bitmap: Bitmap
+ getBitmapImage() : Bitmap+ getHeight() : int+ getId() : int+ getWidth() : int
«final»CubeConstants
- cubeCoords: float[]- depth: float- height: float- width: float- cubeTextcoords: float[]
Cube
+ draw(GL10) : void
Sphere
+ draw(GL10) : void- buildSphere(Context, GL, float, float, int, int) : void
class br.furb.v iewer.objects
ViewerObject
- texBuffer: FloatBuffer- vertexBuffer: FloatBuffer- textures: Hashmap
- disableGLCubeFunctions(GL10) : void+ draw(GL10) : void- enableCubeTextures(GL10) : void- enableCubeVertex(GL10) : void- enableGLCubeFunctions(GL10) : void
CustomTexture
- context: Context- id: int- resourceId: int- bitmap: Bitmap
+ getBitmapImage() : Bitmap+ getHeight() : int+ getId() : int+ getWidth() : int
«final»CubeConstants
- cubeCoords: float[]- depth: float- height: float- width: float- cubeTextcoords: float[]
Cube
+ draw(GL10) : void
Sphere
+ draw(GL10) : void- buildSphere(Context, GL, float, float, int, int) : void
Desenvolvimento• Diagrama de classes
pkg br.furb.v iewer.renderer
ViewerSurfaceView
- previousX: float- previousY: float- renderer: ViewerRenderer- TOUCH_SCALE_FACTOR: float {readOnly}- scaleListener: ZoomListener
+ onTouchEvent(MotionEvent) : void
ViewerRenderer
- angleX: float- angleY: float- context: Context- cube: ViewerObject- z: float
+ onDrawFrame(GL10) : void+ onSurfaceChanged(GL10, int, int) : void+ onSurfaceCreated(GL10, EGLConfig) : void
ZoomListener
- mZoomFactor: float
+ onScale(ScaleGestureDetector) : boolean+ setmZoomfactor(float) : void+ getmZoomfactor() : float
AccelerometerListener
+ onAccuracyChanged(Sensor, int) : void+ onSensorChanged(SensorEvent) : void
Desenvolvimento• Técnicas e ferramentas utilizadas
– Eclipse– Android Development Tools (ADT)– Simulador do Android SDK– Samsung Galaxy Fit
Desenvolvimento• Implementação
– Preparação da tela
Desenvolvimento• Implementação
– Desenho dos objetos
Desenvolvimento• Implementação
– Construção do cubo
Desenvolvimento
Desenvolvimento• Operacionalidade da aplicação
– Tela Inicial Escolher Imagem
Desenvolvimento• Operacionalidade da aplicação
– Imagem projetada Rotação
Desenvolvimento• Operacionalidade da aplicação
– Zoom FPS
Resultados e Discussão• Testes para cada projeção
• Testes utilizando FPS e Memória heap
• Testes utilizando o simulador
• Testes utilizando dispositivo móvel (Samsung Galaxy Fit)
Resultados e Discussão• Projeção Esférica
– Teste de FPS utilizando dispositivo móvel
Resolução da imagem FPS (média) Total de Pixels
320x160 93 51.200
500x250 90 125.000
1.024x512 91 524.888
1.280x640 91 819.200
2.000x1000 88 2.000.000
Resultados e Discussão• Projeção Esférica
– Teste de FPS utilizando o simulador
Resolução da imagem FPS (média) Total de Pixels
320x160 7 51.200
500x250 5 125.000
1.024x512 6 524.888
1.280x640 5 819.200
2.000x1000 5 2.000.000
Resultados e Discussão• Projeção Esférica
– Teste de memória heap utilizando o dispositivo
Resolução da imagem Memória heap(mb) Total de Pixels
320x160 2.873 51.200
500x250 2.873 125.000
1.024x512 2.875 524.888
1.280x640 2.876 819.200
2.000x1000 2.847 2.000.000
Resultados e Discussão• Projeção Esférica
– Teste de memória heap utilizando o simulador
Resolução da imagem Memória heap(mb) Total de Pixels
320x160 2.935 51.200
500x250 2.915 125.000
1.024x512 2.956 524.888
1.280x640 2.955 819.200
2.000x1000 2.978 2.000.000
Resultados e Discussão• Projeção Cúbica
– Teste de FPS utilizando dispositivo móvel
Resolução da imagem FPS (média) Total de Pixels
103x103 91 63.654
161x161 91 155.526
327x327 90 641.574
409x409 90 1.003.686
638x638 89 2.442.264
Resultados e Discussão• Projeção Cúbica
– Teste de FPS utilizando o simulador
Resolução da imagem FPS (média) Total de Pixels
103x103 9 63.654
161x161 8 155.526
327x327 8 641.574
409x409 8 1.003.686
638x638 7 2.442.264
Resultados e Discussão• Projeção Cúbica
– Teste de memória heap utilizando o dispositivo
Resolução da imagem Memória heap(mb) Total de Pixels
103x103 2.958 63.654
161x161 2.982 155.526
327x327 3.048 641.574
409x409 3.051 1.003.686
638x638 3.107 2.442.264
Resultados e Discussão• Projeção Cúbica
– Teste de memória heap utilizando o simulador
Resolução da imagem Memória heap(mb) Total de Pixels
103x103 2.664 63.654
161x161 2.678 155.526
327x327 2.746 641.574
409x409 2.854 1.003.686
638x638 3.155 2.442.264
Resultados e Discussão• Comparação entre as projeçõesTeste de FPS
Resultados e Discussão• Comparação entre as projeçõesTeste de memória heap
Resultados e Discussão• Comparação com os trabalhos correlatos
Aplicativo Projeções Captura de Imagens
Plataforma Móvel
Carregar imagens
FurbViewer Cúbica, esférica
não sim não
PTViewer Cilíndrica, esférica
não não sim
PhotoAF Cilíndrica sim sim sim
Web Rotate ? sim não sim
Conclusão• Estudo do OpenGL ES na plataforma Android
• Simulador limitado na parte gráfica• API estável e bem documentada
• Objetivos atingidos
• Implementação adicional
Extensões• Incluir captura de imagens
• Carregamento dinâmico de imagens
• Adicionar mais projeções
• Transformar em framework
Demonstração