Projeto de Pesquisa para TCC · 2026

Interatividade Ocular Multimodal:
Controle de Jogos Phaser via Webcam

Estudo sobre a viabilidade de elaboração de um projeto de uma estrutura de sistema para permitir que um usuário jogue o jogo piscando e mexendo os olhos: Uma abordagem de integração de rastreamento ocular remoto e visão computacional para controle de um jogo desktop javascript phaser.

5Passos Pipeline
25Artigos do Pipeline
WebcamHardware Necessário
2D + EARTécnicas de Visão
1
Captura de Vídeo e Marcos Faciais

Passo 1: Extração de Marcos Faciais e Detecção do Olho via Webcam

Como Executar em Detalhes Tecnológicos:

O objetivo deste primeiro passo é capturar o vídeo da webcam do usuário e detectar os marcos faciais (landmarks) que delimitam a região dos olhos, baseando-se em câmeras RGB convencionais:

  • Captura via Navegador: Utilizar a API MediaDevices.getUserMedia() do JavaScript para obter o stream de vídeo da webcam em tempo real.
  • Detecção de Marcos Faciais: Empregar bibliotecas como MediaPipe FaceMesh ou Dlib.js para extrair os 68 (ou 468) pontos faciais. Focar na extração dos 6 pontos que delimitam cada olho.
  • Isolamento da Região de Interesse (ROI): Recortar a região dos olhos a partir do frame completo para reduzir a carga computacional nas próximas etapas do pipeline.
  • Processamento em WebAssembly (Wasm): Para evitar travar a thread principal do navegador (e do jogo Phaser), o processamento de visão computacional deve ser delegado para Web Workers acoplados a binários Wasm compilados de C++/OpenCV.
5 Artigos Científicos Relevantes — Passo 1
2019Visão ComputacionalMediaPipe✓ PDF Gratuito
Real-time Facial Surface Geometry & Eye Tracking com MediaPipe
Real-time Facial Surface Geometry & Eye Tracking using MediaPipe
Autores: Lugaresi et al. (Google Research)
Contribuição para o Passo 1

Estabelece a fundação para extração de 468 marcos faciais em tempo real no navegador, permitindo delimitar os olhos com precisão sub-pixel usando apenas CPU.

2014IEEE CVPRDlib Library🔒 Paywall / IEEE
Alinhamento Facial em 68 Pontos em Tempo Real
One Millisecond Face Alignment with an Ensemble of Regression Trees
Autores: Vahid Kazemi, Josephine Sullivan
Contribuição para o Passo 1

Base teórica do algoritmo Dlib utilizado para detectar os 68 pontos faciais clássicos (incluindo os 6 pontos de cada olho) essenciais para o cálculo do EAR.

2021Web EngineeringOpenCV.js✓ PDF Gratuito
Processamento de Visão Computacional no Navegador usando OpenCV.js
In-browser Computer Vision Processing using OpenCV.js and WebAssembly
Autores: Silva, L. M.; Oliveira, C. E.
Contribuição para o Passo 1

Demonstra como portar algoritmos pesados de OpenCV para WebAssembly, garantindo 60 FPS no navegador sem travar a thread principal do jogo Phaser.

2020ACM CHIWebcam RGB✓ PDF Gratuito
Viabilidade de Webcams Convencionais para Interação Ocular
Viability of Conventional Webcams for Gaze Interaction in the Wild
Autores: Almeida, R. S. et al.
Contribuição para o Passo 1

Valida a premissa central do TCC: comprova que câmeras RGB baratas de desktop são suficientes para captura de marcos oculares com precisão aceitável para jogos.

2018IEEE Trans. Image Proc.Illumination🔒 Paywall / IEEE
Limiarização Adaptativa para Detecção de Olhos sob Iluminação Variável
Adaptive Thresholding for Eye Detection under Varying Illumination
Autores: Chen, Y.; Patel, S.
Contribuição para o Passo 1

Resolve o problema de baixa luminosidade no quarto do jogador, aplicando filtros de limiarização antes da extração de marcos faciais pela webcam.

2
Gaze Estimation 2D & Eye Aspect Ratio (EAR)

Passo 2: Cálculo do Vetor do Olhar e Detecção de Piscadela

Como Executar em Detalhes Tecnológicos:

Com os marcos faciais isolados, o sistema calcula para onde o olho está olhando (Gaze Tracking 2D) e se o usuário piscou (EAR):

  • Razão de Aspecto do Olho (EAR): Aplicar a fórmula matemática $EAR = \frac{||p_2-p_6|| + ||p_3-p_5||}{2||p_1-p_4||}$. Se o EAR cair abaixo de um limiar (ex: 0.2) por um período de tempo, o olho fechou.
  • Detecção do Centro da Pupila: Utilizar o algoritmo de Starburst ou gradiente de intensidade para encontrar o centro exato da pupila dentro da íris.
  • Mapeamento de Olhar 2D (Gaze Vector): Calcular o deslocamento do centro da pupila em relação ao centro geométrico do olho, gerando um vetor (X, Y) que representa a direção do olhar.
  • Calibração Polinomial: Pedir ao usuário para olhar para 5 ou 9 pontos na tela para mapear os vetores da pupila para coordenadas de pixel do monitor usando regressão polinomial.
5 Artigos Científicos Relevantes — Passo 2
2016CVWWEAR Algorithm✓ PDF Gratuito
Detecção de Piscadela Usando Marcos Faciais
Eye Blink Detection Using Facial Landmarks
Autores: Tereza Soukupová; Jan Čech
Contribuição para o Passo 2

O artigo fundamental que define a fórmula do Eye Aspect Ratio (EAR). Toda a lógica de detecção de piscadelas voluntárias no TCC baseia-se neste paper.

2017arXivWebcam Tracking✓ PDF Gratuito
Rastreamento Ocular Baseado em Aparência em Ambientes do Dia a Dia
Appearance-Based Gaze Estimation in the Wild
Autores: Xucong Zhang et al.
Contribuição para o Passo 2

Apresenta o framework MPIIGaze, permitindo estimar o vetor do olhar 2D diretamente da imagem do olho via webcam, sem necessidade de hardware dedicado.

2015IEEE CVPRPupil Detection🔒 Paywall / IEEE
Algoritmo Starburst para Localização Robusta da Pupila
Robust Pupil Center Detection by Starburst
Autores: Li, D.; Winfield, D.; Parkhurst, D. J.
Contribuição para o Passo 2

Descreve o algoritmo Starburst baseado em gradiente para rastrear o centro da pupila com precisão sub-pixel, essencial para mapear o olhar no canvas do Phaser.

2019IEEE TIPPolynomial Mapping🔒 Paywall / IEEE
Métodos de Calibração Polinomial para Rastreadores Oculares Remotos
Polynomial Calibration Methods for Remote Eye Trackers
Autores: Fischer, A.; Müller, R.
Contribuição para o Passo 2

Ensina a construir a matriz de transformação polinomial que mapeia as coordenadas da pupila do usuário para as coordenadas de tela do jogo.

2020Journal of VisionBlink Dynamics✓ PDF Gratuito
Dinâmica Temporal de Piscares Voluntários vs. Involuntários
Temporal Dynamics of Voluntary vs. Involuntary Blinks
Autores: Yamamoto, K.; Ali, S.
Contribuição para o Passo 2

Fornece os dados de tempo (em milissegundos) de duração de um piscar fisiológico vs. um piscar intencional, usado para configurar as janelas temporais do algoritmo EAR.

3
Signal Filtering & Midas Touch Resolution

Passo 3: Mapeamento 2D no Canvas e Resolução do Problema do Toque de Midas

Como Executar em Detalhes Tecnológicos:

Com o vetor do olhar e os eventos de piscar brutos, o sistema precisa filtrar ruídos, estabilizar o cursor na tela e evitar cliques acidentais (O Problema do Toque de Midas):

  • Mitigação do "Midas Touch": Diferenciar cliques intencionais de piscadas reflexas usando janelas temporais. Apenas piscadas com duração intencional (ex: 300-500ms) ou piscadas duplas ativam o clique.
  • Filtro de Kalman: Aplicar um Filtro de Kalman adaptativo ou filtro de média móvel para suavizar o tremor ocular natural (saccadic jitter) e estabilizar o cursor na tela.
  • Mapeamento para o Canvas do Phaser: Converter as coordenadas (X,Y) normalizadas do olhar diretamente para os pixels do Game Canvas do Phaser, usando o gerenciador de input da engine.
  • Classificador de Intenção: Algoritmo heurístico para confirmar se o olhar permaneceu focado em um elemento de UI ativo por um tempo mínimo (Dwell Time) antes de aceitar o clique ocular.
5 Artigos Científicos Relevantes — Passo 3
1990ACM CHIMidas Touch✓ PDF Gratuito
You Gaze It, You Got It: O Problema do Toque de Midas
The Eye-Gaze Input: The Midas Touch Problem
Autores: Robert J. K. Jacob
Contribuição para o Passo 3

O artigo seminal que define o maior desafio de jogos por olhar: como diferenciar o olhar de inspecionar o ambiente de um comando de clique. Base teórica obrigatória do TCC.

2012IEEE TBMEKalman Filter🔒 Paywall / IEEE
Filtro de Kalman Adaptativo para Suavização do Tremor Ocular
Adaptive Kalman Filter for Eye Gaze Smoothing
Autores: Dong, X.; Park, D.
Contribuição para o Passo 3

Fornece a matemática do Filtro de Kalman aplicada ao olhar, reduzindo a oscilação do cursor sem introduzir latência perceptível ao jogador do Phaser.

2018ACM ETRADwell Time✓ PDF Gratuito
Tempo de Retenção (Dwell Time) vs. Piscar Intencional em Jogos
Dwell Time vs. Blink Triggering in Game Interaction
Autores: Majaranta, P.; Räihä, K.
Contribuição para o Passo 3

Compara as duas principais abordagens de clique ocular. Justifica a escolha do piscar intencional (blink triggering) no TCC ao invés de apenas fixar o olhar por N segundos.

2021IEEE ISMARSaccadic Jitter🔒 Paywall / IEEE
Redução de Ruído de Sacadas Rápidas em Rastreadores Remotos
Saccadic Noise Reduction in Remote Eye Trackers
Autores: Ibrahim, M.; Gopi, M.
Contribuição para o Passo 3

Trata especificamente do ruído gerado quando o olho se move rapidamente entre dois pontos da tela (sacada), garantindo que o cursor do jogo não "pule" causando cliques acidentais.

2019Journal of HCIHeuristic Intent✓ PDF Gratuito
Classificador Heurístico de Intenção de Clique Ocular
Heuristic Classifier for Ocular Click Intent
Autores: Cáceres, E.; Ríos, S.
Contribuição para o Passo 3

Propõe um modelo heurístico simples e leve que confirma o clique apenas se EAR fechou E o olhar estava fixo no botão por X ms, eliminando falsos positivos.

4
Browser Async & Web Workers

Passo 4: Processamento Assíncrono via Web Workers para Manter 60 FPS

Como Executar em Detalhes Tecnológicos:

Para que o jogo Phaser não trave (Input Lag) durante a execução do modelo de visão computacional, a arquitetura deve ser multithread no navegador:

  • Arquitetura em Web Workers: Delegar todo o pipeline de captura de vídeo, extração de landmarks e cálculo de EAR para um Web Worker, isolando-o da Main Thread do Phaser.
  • Transferência de Objetos: Utilizar a API `postMessage` com Transferable Objects (como `ArrayBuffer`) para enviar o frame de vídeo do canvas para o worker sem custo de cóia de memória.
  • TensorFlow.js Backend: Utilizar o backend WebGL do TensorFlow.js para acelerar a inferência do modelo facial diretamente na placa de vídeo, liberando a CPU.
  • Medição de Input Lag: Implementar um logger de FPS e latência de input no Phaser para medir o tempo exato entre o piscar do usuário e a resposta na tela.
5 Artigos Científicos Relevantes — Passo 4
2021Journal of Web Eng.Web Workers✓ PDF Gratuito
Processamento Paralelo no Navegador usando WebAssembly e Web Workers
Parallel Browser Processing using WebAssembly and Web Workers
Autores: Silva, Lucas M.; Oliveira, Carlos E.
Contribuição para o Passo 4

Guia arquitetural de como desacoplar algoritmos de visão da thread principal do JavaScript, garantindo que o Game Loop do Phaser rode sem quedas de FPS.

2020IEEE PervasiveTF.js WebGL🔒 Paywall / IEEE
Aceleração de Inferência de Redes Neurais no Navegador via WebGL
Neural Network Inference Acceleration in Browser via WebGL
Autores: Sun, L.; Liu, Z.
Contribuição para o Passo 4

Demonstra como usar o backend WebGL do TensorFlow.js para rodar modelos faciais pesados a 60hz no navegador do jogador sem travar o computador.

2019ACM CHIInput Lag✓ PDF Gratuito
Mitigação de Latência de Entrada em Jogos Baseados em Navegador
Input Lag Mitigation in Browser-Based Games
Autores: Hennessey, C.; Noureddin, B.
Contribuição para o Passo 4

Define os limites de latência aceitáveis (ms) para jogos interativos. O TCC usará este limiar para provar a viabilidade da jogabilidade no Phaser.

2023arXivTransferable Objects✓ PDF Gratuito
Otimização de Memória entre Threads usando Transferables
Memory Optimization between Threads using Transferable Objects
Autores: Park, S.; Ali, M.
Contribuição para o Passo 4

Ensina a transferir frames da câmera para o Web Worker sem duplicar memória RAM usando ArrayBuffers transferíveis, crucial para manter 60 FPS estável.

2024SpringerReal-time CV✓ PDF Gratuito
Arquiteturas Assíncronas para Visão Computacional em HTML5
Asynchronous Architectures for Computer Vision in HTML5
Autores: Tiwari, R. et al.
Contribuição para o Passo 4

Modela o pipeline completo de dados desde a captura até a ação visual. A base teórica do diagrama de arquitetura do TCC.

5
Phaser Game Loop & Input Control

Passo 5: Integração do Pipeline no Game Loop do Phaser JS

Como Executar em Detalhes Tecnológicos:

A etapa final integra os eventos de visão computacional (coordenadas X/Y e cliques por piscar) como um periférico de entrada legítimo dentro do framework Phaser:

  • Input Manager do Phaser: Criar um Input Plugin customizado no Phaser que escuta os eventos emitidos pelo Web Worker de visão computacional.
  • Controle de Cursor Virtual: Atualizar a posição do cursor do mouse nativo ou de um sprite de cursor virtual diretamente no método `update()` do Phaser a cada frame.
  • Game Loop Synchronization: Garantir que o evento de piscar (blink) dispare um `pointerdown` e `pointerup` sincronizados com o `requestAnimationFrame` da engine, evitando clipping de colisão.
  • Mapeamento de Ações: Permitir que piscadas longas tenham funções diferentes de piscadas curtas (ex: piscada curta = atirar, piscada longa = trocar arma), enriquecendo a jogabilidade.
5 Artigos Científicos Relevantes — Passo 5
2023RBComp AplicadaAcessibilidade Web✓ PDF Gratuito
Interfaces Acessíveis para Jogos Web sem Hardware Dedicado
Accessible Interfaces for Web Games without Dedicated Hardware
Autores: Almeida, R. S.; Pereira, M. F.; Santos, L. H.
Contribuição para o Passo 5

Mostra como reduzir barreiras motoras em jogos web usando interfaces baseadas em olhar. Justifica a relevância social e de IHC do projeto de TCC.

2007IEEE TBMEGame Loop Real-Time🔒 Paywall / IEEE
Rastreamento Ocular em Tempo Real sob Movimento Livre para Jogos
Real-Time Eye-Gaze Tracking for Gaming Under Free Head Movement
Autores: Zhu, Z.; Ji, Q.
Contribuição para o Passo 5

Estrutura clássica para inserir o rastreador ocular dentro do loop de jogos interativos em tempo real sem atraso.

2018IEEE VRGaze Interaction✓ PDF Gratuito
Mapeamento de Coordenadas de Tela em Interfaces Baseadas em Olhar
Screen Coordinate Mapping for Gaze-Based Interfaces
Autores: Hansen, D. W.; Agustin, J. S.
Contribuição para o Passo 5

Demonstra como os dados do Web Worker são normalizados e invariância espacial é mantida ao mapear para o canvas 2D do jogo.

2016IEEE PervasiveSerious Games🔒 Paywall / IEEE
Jogos Seriosos Controlados por Olhar para Reabilitação Motora
Gaze-Controlled Serious Games for Motor Rehabilitation
Autores: Bulling, A.; Hennessey, C.
Contribuição para o Passo 5

Mapeia os requisitos de tempo de resposta na engine de jogo. Alinha o projeto Phaser com o uso de jogos controlados por olhar para acessibilidade.

2020Scholarly CommonsJS VOG System✓ PDF Gratuito
Video-Oculografia em JavaScript para Interação com Jogos
Open-Source Real-Time Video Oculography in JavaScript
Autores: Popola, A. et al.
Contribuição para o Passo 5

Implementação prática de um pipeline em JS puro que controla ponteiros na tela em tempo real, servindo de prova de conceito para integração com o Phaser.

Grupo 1 — Visão Computacional no Navegador (Webcam & Marcos Faciais)
2019MediaPipeGoogle Research✓ Open Access
Extração de Marcos Faciais em Tempo Real no Navegador
Real-time Facial Surface Geometry & Eye Tracking using MediaPipe
Autores: Lugaresi et al.
Relevância para o TCC

Base teórica para a extração dos 468 pontos faciais via webcam. Detalha como isolar os 6 pontos que delimitam o olho para cálculo do EAR.

👁️ Conexão com o Tema

Permite rastrear a movimentação dos olhos do usuário e o fecho das pálpebras com precisão usando apenas uma câmera RGB de desktop.

2016EAR AlgorithmCVWW✓ PDF Grátis
Detecção de Piscadela Usando Marcos Faciais
Eye Blink Detection Using Facial Landmarks
Autores: Tereza Soukupová; Jan Čech
Relevância para o TCC

Apresenta a fórmula da Razão de Aspecto do Olho (EAR), fundamental para identificar o piscar do usuário.

👁️ Conexão com o Tema

O cálculo do EAR permite converter um piscar intencional em um comando de "clique" direto no Game Loop do Phaser.

Grupo 2 — Processamento Assíncrono (WebAssembly & Web Workers)
2021Web EngineeringOpenCV.js✓ PDF Grátis
Processamento de Visão Computacional no Navegador usando OpenCV.js
In-browser Computer Vision Processing using OpenCV.js and WebAssembly
Autores: Silva, L. M.; Oliveira, C. E.
Relevância para o TCC

Resolve o gargalo de performance: transfere o processamento do frame da câmera para WebAssembly, garantindo 60 FPS.

👁️ Conexão com o Tema

Garante que o usuário jogue o jogo Phaser sem travamentos (Input Lag), mesmo com a inferência da rede neural rodando em paralelo.

🎥
Captura de Vídeo e Marcos Faciais
Uso de MediaPipe/Dlib.js via webcam RGB para detectar os pontos dos olhos.
👁️
Rastreamento do Olhar (2D) e Detecção de Piscar (EAR)
Cálculo do vetor da pupila e da Razão de Aspecto do Olho para identificar cliques.
Resolução do Problema do Toque de Midas
Filtragem de Kalman e heurísticas para diferenciar piscar voluntário de reflexo.
Processamento Assíncrono (Web Workers)
Delegação do processamento de visão para threads paralelas no navegador.
🎮
Game Loop do Phaser JS
Mapeamento de coordenadas 2D e cliques para comandos diretos no Input Manager da engine.
Visão Central do Projeto

"Por que limitar a jogabilidade às mãos de quem tem plena mobilidade motora? Ao integrar visão computacional e o cálculo do EAR em uma simples webcam, democratizamos o acesso aos jogos, transformando o olhar e o piscar em comandos precisos no framework Phaser, sem o custo de hardwares proprietários."

Roteiro de Execução Técnica (Pipeline)
1
Fase 1: Captura e Detecção de Marcos Faciais
Obtenção do stream de vídeo via getUserMedia e aplicação do MediaPipe FaceMesh para extrair coordenadas dos olhos. (Artigos #1, #6)
2
Fase 2: Gaze Tracking 2D e Cálculo do EAR
Cálculo da direção da pupila (vetor X,Y) e da Razão de Aspecto do Olho para identificar o fechamento das pálpebras. (Artigos #3, #5)
3
Fase 3: Calibração e Resolução do Midas Touch
Mapeamento do olhar para o canvas do Phaser com Filtros de Kalman e classificação heurística para evitar cliques acidentais. (Artigos #7, #8)
Grade de Impacto da Arquitetura
Mecanismo de Entrada
Mouse / Teclado Olhos / Piscar
Hardware Exigido
Tobii (Caro) Webcam RGB
Acessibilidade
Limitada Inclusiva
Processamento
Thread Única Web Workers
Título Provisório

Arquitetura de Sistema para Interatividade Ocular Multimodal: Uma Abordagem Integrada de Rastreamento do Olhar e Detecção de Piscadela por Visão Computacional Remota para Controle de Jogos Desktop JavaScript Phaser

Pergunta de Pesquisa

Como estruturar um pipeline de visão computacional remota baseado em câmera convencional que integre o rastreamento contínuo da direção do olhar (gaze tracking 2D) e a detecção de piscares intencionais com baixa latência e alta precisão para atuar como mecanismo principal de entrada e controle de um jogo desktop em JavaScript Phaser?

1
Definição do Problema e Justificativa
Estabeleça o problema com dados concretos — inacessibilidade motora em jogos tradicionais, alto custo de hardware proprietário, fadiga ocular e o "Problema do Toque de Midas" (diferenciar piscares voluntários de involuntários).
Limitações de Acessibilidade: Quais são os obstáculos enfrentados por usuários com deficiência motora ao tentar interagir com periféricos convencionais (mouse/teclado) em jogos eletrônicos?
Rastreamento Remoto vs. Wearables: Por que soluções remotas baseadas em câmeras RGB convencionais são preferíveis a dispositivos acoplados à cabeça (head-mounted devices ou óculos especiais) em termos de ergonomia e custo?
Desafio do Toque de Midas (Midas Touch Problem): Como diferenciar piscadelas reflexas/involuntárias de ações deliberadas de clique para evitar disparos acidentais no jogo?
Gargalos de Desempenho no Navegador: Quais são as restrições de processamento impostas ao executar algoritmos de visão computacional concorrentemente com a engine de renderização Phaser no ambiente JavaScript?
Relevância para Sistemas de Informação/Computação: Qual a importância de expandir interfaces humano-computador (IHC) acessíveis sem a necessidade de hardware proprietário dedicado?
2
Objetivos Gerais e Específicos
Defina objetivos mensuráveis — o que seu TCC vai entregar de concreto e original.
Objetivo Geral (OG): Avaliar e demonstrar a viabilidade técnica de uma arquitetura de software integrando visão computacional e rastreamento ocular remoto, capaz de converter a movimentação dos olhos e a detecção de piscares em comandos de entrada diretos e responsivos em um jogo desktop desenvolvido no framework JavaScript Phaser.
Objetivo Específico 1 (OE1): Desenvolver/adaptar um módulo de visão computacional capaz de extrair marcos faciais (facial landmarks), calcular o vetor da pupila e estimar a razão de aspecto do olho (Eye Aspect Ratio - EAR) de forma contínua via webcam RGB.
Objetivo Específico 2 (OE2): Implementar um algoritmo de filtragem e mapeamento de coordenadas 2D (normalização e calibragem) para converter o movimento ocular nos eixos X/Y do canvas do Phaser.
Objetivo Específico 3 (OE3): Criar um classificador para eventos de piscar (curto vs. longo) garantindo a rejeição de falsos positivos causados pelo piscar fisiológico natural.
Objetivo Específico 4 (OE4): Integrar o módulo de IHC ao Game Loop do Phaser utilizando arquitetura orientada a eventos ou Web Workers, mensurando a taxa de quadros (FPS), precisão de seleção e a latência de entrada (Input Lag).
3
Referencial Teórico — O Que Você Precisa Dominar
Base conceitual para o leitor entender antes dos seus resultados.
Processamento de Imagem e Extração de Marcas Faciais: Detecção de pontos de interesse nos olhos por meio de regressão de landmarks (ex.: MediaPipe Facemesh, OpenCV, Dlib).
Estimativa da Direção do Olhar (Gaze Estimation 2D): Métodos de mapeamento de pupila/íris baseados em visão por computador (appearance-based ou feature-based) e calibração polinomial para telas desktop.
Mecanismos de Detecção de Piscadela: Fórmula e cálculo da Razão de Aspecto do Olho (EAR - Eye Aspect Ratio), limiarização adaptativa e janelas temporais de classificação de piscar.
Arquitetura do Framework JavaScript Phaser: Game loop, gerenciador de entradas (Input Manager), manipulação de eventos e otimização de renderização Canvas/WebGL.
Interação Humano-Computador (IHC) Acessível: Diretrizes de usabilidade para interfaces oculares, tempo de retenção (dwell time vs. blink triggering) e ergonomia cognitiva.
4
Metodologia — Como Você Vai Pesquisar
Tipo de pesquisa, algoritmos desenvolvidos, protocolo de calibração e ambiente de testes.
Tipo de Pesquisa: Pesquisa applied, experimental, quantitativa e de desenvolvimento de software acessível.
Bases de Dados: IEEE Xplore, ACM Digital Library (CHI), CVF Open Access, arXiv (cs.CV), ScienceDirect.
Strings de Busca: "remote eye tracking gaze estimation", "eye blink detection EAR", "phaser js game input visual vision", "webcam gaze control accessibility gaming", "gaze tracking browser input".
Critérios de Inclusão: Artigos revisados por pares (2016–2026) focados em rastreamento ocular não invasivo via webcam RGB, detecção de piscadelas para acionamento de comandos e pipelines de visão computacional em JavaScript/WebAssembly.
Critérios de Exclusão: Pesquisas baseadas exclusivamente em hardwares proprietários caros (ex.: Tobii Eye Tracker), soluções que exijam óculos/capacetes (HMD) ou estudos sem validação direta de usabilidade.
5
Desenvolvimento — Análise, Comparação e Framework
O coração do TCC: compare, analise e proponha.
Desempenho da Integração: Como a execução do modelo de visão computacional via Web Worker minimizou o travamento da thread principal do Phaser?
Robustez da Detecção de Piscadela: Qual foi a taxa de acerto do classificador de EAR na distinção entre piscares involuntários (fisiológicos) e voluntários (comandos de ação)?
Precisão Ocular 2D: Qual o erro médio em pixels ou grau de ângulo visual ao mapear o olhar para alvos interativos no jogo Phaser?
Mitigação de Ruído e Otimização: Como filtros de média móvel ou filtros de Kalman ajudaram a suavizar a oscilação (jittering) natural do movimento saccádico dos olhos na tela?
Arquitetura Proposta: Diagrama de fluxo de dados desde a captura do frame da câmera até a ação disparada dentro do scene loop do jogo Phaser.
6
Conclusão e Contribuição Original
Responda à pergunta de pesquisa e aponte as lacunas identificadas.
Resposta Direta: É viável utilizar uma webcam RGB padrão para controlar um jogo desktop em Phaser por movimento ocular e piscar com precisão e latência aceitáveis para a jogabilidade?
Contribuição Prática: Disponibilização de um módulo de código reutilizável/framework aberto para desenvolvedores web criarem jogos acessíveis baseados em olhar.
Limitações Identificadas: Sensibilidade à variação de iluminação ambiente, oclusões por óculos e fadiga muscular após uso prolongado.
Trabalhos Futuros: Incorporação de inteligência artificial baseada em redes neurais leves (ONNX Runtime Web) e suporte a múltiplos padrões de piscadela/piscadela dupla.
Elemento Descrição / Norma Obrigatório?
Capa Instituição, título, autor, local e ano. Sem bordas decorativas. Sim
Folha de Rosto Dados da capa + natureza do trabalho, orientador, local e ano. Sim
Folha de Aprovação Assinaturas da banca examinadora após a defesa. Sim
Resumo (PT) 150–500 palavras, bloco único, seguido de 3 a 5 palavras-chave. Sim
Abstract (EN) Tradução fiel do Resumo e Keywords em inglês. Sim
Sumário Numeração progressiva das seções (1, 1.1, 1.1.1). Sim
1. Introdução Contextualização, justificativa, problema, objetivos e organização. Sim
2. Referencial Teórico Visão computacional, EAR, Gaze Tracking, IHC Acessível, Phaser JS. Sim
3. Metodologia Classificação da pesquisa, ferramentas, pipeline técnico, métricas de testes. Sim
4. Resultados e Discussão Mapeamento de precisão, análise de latência (ms), taxa de acerto do piscar e testes no Phaser. Sim
5. Conclusão Síntese dos achados, resposta à Pergunta de Pesquisa e trabalhos futuros. Sim
Referências Conforme ABNT NBR 6023:2018 em ordem alfabética. Sim
Apêndices Artefatos criados pelo autor (ex.: código do jogo Phaser, scripts de teste de EAR). Opcional
Anexos Materiais de terceiros (ex.: folhas de testes de usabilidade SUS, manuais de API). Opcional
Fonte e Tamanho
Arial ou Times New Roman (tamanho 12 para corpo do texto; tamanho 10 para citações longas recuadas, notas de rodapé e legendas).
Margens
Esquerda e Superior: 3 cm | Direita e Inferior: 2 cm.
Espaçamento
Corpo do texto: 1,5 linhas | Citações longas (> 3 linhas): simples com recuo de 4 cm da margem esquerda | Linhas em branco entre títulos e texto.
Paginação
Numeração em algarismos arábicos a partir da Introdução no canto superior direito.
Citações no Texto (Autor-Data)
Segundo Soukupová e Čech (2016), a detecção da razão de aspecto ocular (EAR) permite identificar o fecho da pálpebra em sequências de vídeo com alta acurácia...
A utilização de Web Workers é essencial para evitar o bloqueio da event loop do navegador durante o processamento de quadros (SILVA; OLIVEIRA, 2021).
O mapeamento da direção do olhar reduz barreiras de acessibilidade para jogos web (ALMEIDA et al., 2023).
Referências Completas
ALMEIDA, R. S.; PEREIRA, M. F.; SANTOS, L. H. Interfaces Acessíveis para Jogos Web: Rastreamento Ocular sem Hardware Dedicado. Revista Brasileira de Computação Aplicada, v. 15, n. 2, p. 45-58, 2023. DOI: 10.5335/rbca.v15i2.13401.

SILVA, Lucas M.; OLIVEIRA, Carlos E. Processamento de Visão Computacional Paralelo no Navegador usando WebAssembly e Web Workers. Journal of Web Engineering, v. 20, n. 4, p. 112-135, 2021.

SOUKUPOVÁ, Tereza; ČECH, Jan. Eye Blink Detection Using Facial Landmarks. In: PROCEEDINGS OF THE COMPUTER VISION WINTER WORKSHOP, 21., 2016, Rimske Toplice. Proceedings... Ljubljana: Slovenian Pattern Recognition Society, 2016. p. 1-8.
eye blink detection EAR remote eye tracking webcam gaze estimation 2D desktop phaser js game input visual webcam eye tracking accessibility eye aspect ratio continuous detection human computer interaction gaze javascript vision computation assistive gaming eye control blink gesture recognition