Desenvolvendo Aplicações de Realidade Aumentada para Web

Transcrição

1 Workshop de Realidade Virtual e Aumentada WRVA 2010 Mini-curso Parte 2 Desenvolvendo Aplicações de Realidade Aumentada para Web GRVA/UFU ICE/UNIFEI SP 10/11/2010 Cláudio Kirner Alexandre Cardoso Edgard Lamounier Fábio Henrique Pedro Cacique

2 Sumário 5 - Interação em Aplicações de RA (na WEB) 6 -Desenvolvimento de Aplicações de RA (na WEB) por não Programadores - Demonstrações

3 Modelos 3D Quinta Parte AS3 Flex SDK INTERAÇÃO EM APLICAÇÕES DE RA (NA WEB)

4 Interação em Aplicações de RA (na WEB) Interaction, Collaboration and Authoring in Augmented Reality Environments ( 1 - Interação do usuário com os objetos virtuais em ambientes de realidade aumentada: - Baseada em dispositivos - Baseada na visualização - Visão direta - Visão indireta

5 Interação em Aplicações de RA (na WEB) Visão Direta 1ª Pessoa HMD PDA (Handheld, Palm), Tablet PC, cel. ARhrrrr - An augmented reality shooter - YOUTUBE

6 Interação em Aplicações de RA (na WEB) Visão Indireta (Com webcam) 3ª pessoa espelho

7 Interação em Aplicações de RA (na WEB) Seleção, Manipulação e Liberação do Objeto Virtual teclado Marcador Flarmagnet - mouse

8 Interação em Aplicações de RA (na WEB) Seleção, Manipulação e Liberação do Objeto Virtual Inclinação Gestos - levelhead v1.0, 3-cube speedrun *SPOILER* - YOUTUBE

9 Interação RA (Adaptado de Bowman)

10 Interação em Aplicações de RA (na WEB) Demonstrações -Vídeos -Sites INTERAÇÃO POR: -Teclado ou botão ou toque -Mouse -Marcador -Gesto -Som -Wiiremote/ joystick -etc.

11 Modelos 3D Sexta Parte AS3 Flex SDK DESENVOLVIMENTO DE APLICAÇÕES DE RA (NA WEB) POR NÃO PROGRAMADORES

12 Desenvolvimento de Aplicações de RA (na WEB) por não Programadores FERRAMENTAS para RA: Uso local: ARToolKit para programadores ling. C SACRA para não programadores Uso na Internet: FlartoolKit para programadores AS3 EZFlar para não programadores Outras -??? Aplicação com Flartoolkit pré-instalado

13 Desenvolvimento de Aplicações de RA (na WEB) por não Programadores Aplicação com Flartoolkit pré-instalado (para uso local ou para fazer upload no servidor) > realidade aumentada Arquivo DAE (Collada) Renomear para objeto.dae

14 Desenvolvimento de Aplicações de RA (na WEB) por não Programadores Aplicação com Flartoolkit pré-instalado Descompactar Levar para a aplicação com FlartoolKit e renomear para objeto.dae Não use arquivos pesados Arquivo DAE (Collada)

15 Desenvolvimento de Aplicações de RA (na WEB) por não Programadores Aplicação com FlartoolKit pré-instalado 1 - Imprimir Descompactar 3 Habilitar e colocar o marcador voltado para a webcam 2 - Ativar a aplicação html

16 Desenvolvimento de Aplicações de RA (na WEB) por não Programadores Edição e geração de novo código Editar e gerar código

17 RealidadeAumentada.as package { // PROGRAMA DE VISUALIZACAO DE UM OBJETO DO TIPO COLLADA (DAE) //Para obter objetos DAE, vá ao armazem 3D do Google e tente fazer o download do objeto // Se aparecer Collada, baixe-o e descompacte-o. Retire o modelo DAE da pasta models // Coloque uma cópia do modelo na raiz e a renomeie como objeto.dae // Se quiser tentar outro modelo, elimine o objeto.dae e repita a operacao anterior import flash.events.event; import flash.events.mouseevent; import org.papervision3d.objects.displayobject3d; import org.papervision3d.objects.parsers.dae; [SWF(width=640,height=480,frameRate=30,backgroundColor=0x0)] public class RealidadeAumentada extends PV3DARApp { private var ambiente:displayobject3d; private var arquivodae:dae; public function RealidadeAumentada() { this.init('data/camera_para.dat', 'Data/marker.pat'); }

18 protected override function oninit():void { super.oninit(); arquivodae = new DAE(); arquivodae.load("objeto.dae"); // para alterar a inclinacao do objeto, tire o comentario das linhas a seguir e ajuste o angulo arquivodae.rotationx = 90; //arquivodae.rotationy = -90; //arquivodae.rotationz = -90; arquivodae.scale = 1; // altere esta escala para ajustar o tamanho do objeto this.ambiente = new DisplayObject3D(); this.ambiente.addchild(arquivodae); // para altear a posicao do objeto, tire o comentario das linhas a seguir e ajuste a distancia this.ambiente.z = -10; //this.ambiente.x = 10; //this.ambiente.y = 10; this._basenode.addchild(this.ambiente); } } }

19 Obrigado! Contatos: