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