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