VISEDU-CG: Aplicação Didática para Visualizar Material Educacional, Módulo de Computação Gráfica

Transcrição

1 VISEDU-CG: Aplicação Didática para Visualizar Material Educacional, Módulo de Computação Gráfica James Perkison Montibeler Orientador: Dalton Solano dos Reis FURB Universidade Regional de Blumenau Grupo de Pesquisa em Computação Gráfica, Processamento de Imagens e Entretenimento Digital gcg.inf.furb.br/visedu

2 Roteiro Introdução Objetivos Fundamentação Teórica Trabalhos Correlatos Requisitos Especificação Implementação Operacionalidade Resultados e Discussões Conclusões Sugestões Apresentação Prática

3 Introdução Por que utilizar um software/jogo educacional? Mudança metodológica Uso de cognição Auto-instrução Motivação

4 Objetivos Estender a pesquisa intitulada AduboGL Aplicação Didática Usando a Biblioteca OpenGL, desenvolvida por Luciana Araújo (2012)

5 Objetivos Os objetivos específicos do trabalho são: converter as funcionalidades do AduboGL para o WebGL representar visualmente a cena criada através de um grafo de cena explorar outras funcionalidades gráficas, tais como câmeras e texturas

6 Fundamentação Teórica Internet na educação Softwares educacionais Ambientes interativos de aprendizagem. Características: construção e não instrução controle do estudante e não controle do sistema individualização é determinada pelo estudante e não pelo sistema feedback rico, gerado a partir da interação do estudante com o ambiente de aprendizagem e não pelo sistema WebGL

7 AduboGL Trabalhos Correlatos

8 Trabalhos Correlatos StarLogo TNG

9 Three.js Trabalhos Correlatos

10 Requisitos Principais requisitos funcionais: disponibilizar as funcionalidades existentes no AduboGL permitir o encaixe das peças em outras peças que disponibilizem o tipo de encaixe correspondente permitir que o usuário resolva exercícios de computação gráfica que utilizem o conceito de câmera

11 Requisitos permitir que o usuário visualize um cenário 3D a partir do ponto de vista definido para a peça que representa uma câmera disponibilizar uma lista de peças em forma de árvore com todas as peças encaixadas permitir a visualização de código em Java OpenGL (JOGL) dos comandos gráficos representados pela peça selecionada

12 Requisitos Principais requisitos não funcionais: ser desenvolvido na linguagem HTML5 utilizar o WebGL para executar as funções de computação gráfica utilizar o framework Three.js ser de código aberto executar em qualquer navegador que tenha suporte ao WebGL

13 Especificação A seguir serão apresentados os principais diagramas do VisEduCG

14 Especificação A seguir serão apresentados os principais diagramas do VisEduCG

15 Especificação

16 Especificação

17 Especificação Diagrama de estado das peças:

18 Implementação HTML5, CSS 3.0 e JavaScript jquery v2.1.1 Three.js v67 JSColor (adaptada) DDTreeMenu (adaptada) Notepad++ v6.5.5 Chrome , Firefox e Internet Explorer

19 Implementação Exemplos de código Three.js:

20 Implementação

21 Implementação

22 Implementação Bibliotecas utilitárias do Three.js: Signals Tween Gentilis_bold.typeface UI (adaptada) Detector (adaptada e renomeada para CGDetector) THREE.CameraHelper (adaptada e renomeada para CGCameraHelper) THREE.TrackballControls (adaptada e renomeada para CGTrackballControls)

23 Implementação Demonstração da implementação do framework JSColor:

24 Implementação Demonstração da implementação do framework DDTreeMenu:

25 Implementação Padrões de projetos utilizados: Factory Singleton Observer

26 Operacionalidade da Implementação Interface da aplicação:

27 Resultados e Discussões Análise performance Firefox:

28 Resultados e Discussões

29 Resultados e Discussões

30 Resultados e Discussões Comparação com trabalhos correlatos:

31 Conclusões Desenvolvida uma aplicação web que trabalha com conceitos básicos de cg Editor com um jogo de encaixe de formas geométricas Classificação: jogo educacional micromundo desempenho do sistema: muito bom

32 Conclusões Recursos do AduboGL na web não só uma ferramenta de ensino, mas uma oportunidade de aperfeiçoar o modo de ensinar: auto-intrução

33 Sugestões sistema dentro da abordagem de aprendizado socialmente distribuído tutorial para ensinar CG implementar outros conceitos de CG: iluminação, splines, polígonos, etc. Interagir com o exercício através do Espaço Gráfico Janelas flexíveis Utilizar canvas no editor 2D Elementos HTML: React e AngularJS Aperfeiçoar o trabalho com matrizes: calculadora GL_PROJECTION, GL_MODELVIEW, empilhamentos, tutorial Novos jogos: quebra-cabeça

34 Apresentação Prática...

35 Obrigado!

36 Obrigado!

37 Obrigado!

38 Obrigado!

39 Fundamentação Teórica Internet na educação Disponibilidade Troca de informações Visibilidade Criatividade

40 Fundamentação Teórica Tipos de ambientes interativos de aprendizagem: Sistemas de modelagem e simulação Ambientes de programação Micromundos WebGL

41 Pacote js.cg.core: Especificação

42 Pacote js.cg.objects.core: Especificação

43 Especificação Pacote js.cg.objects.items.core:

44 Pacote js.cg.objects.items: Especificação

45 Pacote js.cg.panels: Especificação

46 Implementação

47 Implementação A biblioteca CGCameraHelper é usada para criar a pirâmide que representa a peça Câmera.

48 Operacionalidade da Implementação A aplicação possui 5 painéis principais: Fábrica de Peças Comandos em JOGL Lista de Peças Visualizador Gráfico Visão da Câmera

49 Operacionalidade da Implementação Três painéis concorrem com a exibição do painel Fábrica de Peças: Arquivo, Propriedades da Peça Ajuda Dois painéis são exibidos sobre os demais painéis quando solicitados: Abrir Tutoriais de Ajuda

50 Operacionalidade da Painel Fábrica de Peças: Implementação

51 Operacionalidade da Painel Propriedades da Peça: Implementação

52 Operacionalidade da Implementação Painéis Comandos em JOGL e Lista de Peças:

53 Operacionalidade da Implementação Painéis Espaço Gráfico e Visão da Câmera:

54 Operacionalidade da Implementação Comparação da cena gerada no VisEdu-CG com a cena gerada pelo código JOGL:

55 Conclusões O Three.js se mostrou eficiente e simples de usar, agilizando o desenvolvimento e permitindo o alcance dos objetivos do trabalho Além da simplicidade, um dos fatores positivos do Three.js é a grande quantidade de exemplos e documentação existentes para o mesmo