VISEDU-CG: Aplicação Didática para Visualizar Material...

55
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 gcg.inf.furb.br/visedu FURB Universidade Regional de Blumenau Grupo de Pesquisa em Computação Gráfica, Processamento de Imagens e Entretenimento Digital

Transcript of VISEDU-CG: Aplicação Didática para Visualizar Material...

Page 1: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

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

gcg.inf.furb.br/visedu

FURB – Universidade Regional de Blumenau

Grupo de Pesquisa em Computação Gráfica,

Processamento de Imagens e Entretenimento Digital

Page 2: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

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

Page 3: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Introdução

• Por que utilizar um software/jogo educacional?

– Mudança metodológica

– Uso de cognição

– Auto-instrução

– Motivação

Page 4: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Objetivos

• Estender a pesquisa intitulada AduboGL

– Aplicação Didática Usando a Biblioteca

OpenGL, desenvolvida por Luciana Araújo

(2012)

Page 5: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

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

Page 6: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

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

Page 7: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Trabalhos Correlatos

• AduboGL

Page 8: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Trabalhos Correlatos

• StarLogo TNG

Page 9: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Trabalhos Correlatos

• Three.js

Page 10: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

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

Page 11: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

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

Page 12: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

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

Page 13: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Especificação

A seguir serão apresentados os principais

diagramas do VisEduCG

Page 14: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Especificação

A seguir serão apresentados os principais

diagramas do VisEduCG

Page 15: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Especificação

Page 16: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Especificação

Page 17: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

• Diagrama de estado das peças:

Especificação

Page 18: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Implementação

• HTML5, CSS 3.0 e JavaScript

– jQuery v2.1.1

– Three.js v67

– JSColor 1.4.1 (adaptada)

– DDTreeMenu (adaptada)

• Notepad++ v6.5.5

• Chrome 34.0.1847.131, Firefox 29.0.1 e

Internet Explorer 11.0.9600.17107

Page 19: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Implementação

• Exemplos de código Three.js:

Page 20: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Implementação

Page 21: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Implementação

Page 22: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

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)

Page 23: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Implementação

• Demonstração da implementação do framework JSColor:

Page 24: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Implementação

• Demonstração da implementação do framework DDTreeMenu:

Page 25: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Implementação

• Padrões de projetos utilizados:

– Factory

– Singleton

– Observer

Page 26: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Operacionalidade da

Implementação

• Interface da aplicação:

Page 27: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Resultados e Discussões

• Análise performance Firefox:

Page 28: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Resultados e Discussões

Page 29: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Resultados e Discussões

Page 30: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Resultados e Discussões

• Comparação com trabalhos correlatos:

Page 31: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

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

Page 32: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

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

Page 33: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

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

Page 34: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Apresentação Prática...

Page 35: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Obrigado!

Page 36: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Obrigado!

Page 37: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Obrigado!

Page 38: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Obrigado!

Page 39: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Fundamentação Teórica

• Internet na educação

– Disponibilidade

• Troca de informações

• Visibilidade

– Criatividade

Page 40: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Fundamentação Teórica

• Tipos de ambientes interativos de aprendizagem:

– Sistemas de modelagem e simulação

– Ambientes de programação

– Micromundos

• WebGL

Page 41: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

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

Page 42: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

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

Page 43: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Especificação

• Pacote js.cg.objects.items.core:

Page 44: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

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

Page 45: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

• Pacote js.cg.panels:

Especificação

Page 46: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Implementação

Page 47: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Implementação

• A biblioteca CGCameraHelper é usada para criar a pirâmide que representa a peça Câmera.

Page 48: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

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

Page 49: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

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

Page 50: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Operacionalidade da

Implementação

• Painel Fábrica

de Peças:

Page 51: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Operacionalidade da

Implementação

• Painel Propriedades

da Peça:

Page 52: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Operacionalidade da

Implementação

• Painéis Comandos em JOGL e Lista de Peças:

Page 53: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Operacionalidade da

Implementação

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

Page 54: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

Operacionalidade da

Implementação• Comparação da cena gerada no VisEdu-CG com a cena gerada

pelo código JOGL:

Page 55: VISEDU-CG: Aplicação Didática para Visualizar Material ...dsc.inf.furb.br/arquivos/tccs/apresentacoes/2014_1_james-perkison... · Introdução •Por que utilizar um software/jogo

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