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
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
Introdução
• Por que utilizar um software/jogo educacional?
– Mudança metodológica
– Uso de cognição
– Auto-instrução
– Motivação
Objetivos
• Estender a pesquisa intitulada AduboGL
– Aplicação Didática Usando a Biblioteca
OpenGL, desenvolvida por Luciana Araújo
(2012)
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
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
Trabalhos Correlatos
• AduboGL
Trabalhos Correlatos
• StarLogo TNG
Trabalhos Correlatos
• Three.js
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
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
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
Especificação
A seguir serão apresentados os principais
diagramas do VisEduCG
Especificação
A seguir serão apresentados os principais
diagramas do VisEduCG
Especificação
Especificação
• Diagrama de estado das peças:
Especificação
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
Implementação
• Exemplos de código Three.js:
Implementação
Implementação
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)
Implementação
• Demonstração da implementação do framework JSColor:
Implementação
• Demonstração da implementação do framework DDTreeMenu:
Implementação
• Padrões de projetos utilizados:
– Factory
– Singleton
– Observer
Operacionalidade da
Implementação
• Interface da aplicação:
Resultados e Discussões
• Análise performance Firefox:
Resultados e Discussões
Resultados e Discussões
Resultados e Discussões
• Comparação com trabalhos correlatos:
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
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
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
Apresentação Prática...
Obrigado!
Obrigado!
Obrigado!
Obrigado!
Fundamentação Teórica
• Internet na educação
– Disponibilidade
• Troca de informações
• Visibilidade
– Criatividade
Fundamentação Teórica
• Tipos de ambientes interativos de aprendizagem:
– Sistemas de modelagem e simulação
– Ambientes de programação
– Micromundos
• WebGL
Especificação• Pacote js.cg.core:
Especificação• Pacote js.cg.objects.core:
Especificação
• Pacote js.cg.objects.items.core:
Especificação• Pacote js.cg.objects.items:
• Pacote js.cg.panels:
Especificação
Implementação
Implementação
• A biblioteca CGCameraHelper é usada para criar a pirâmide que representa a peça Câmera.
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
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
Operacionalidade da
Implementação
• Painel Fábrica
de Peças:
Operacionalidade da
Implementação
• Painel Propriedades
da Peça:
Operacionalidade da
Implementação
• Painéis Comandos em JOGL e Lista de Peças:
Operacionalidade da
Implementação
• Painéis Espaço Gráfico e Visão da Câmera:
Operacionalidade da
Implementação• Comparação da cena gerada no VisEdu-CG com a cena gerada
pelo código JOGL:
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