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.
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.
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.
Demonstra como portar algoritmos pesados de OpenCV para WebAssembly, garantindo 60 FPS no navegador sem travar a thread principal do jogo Phaser.
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.
Resolve o problema de baixa luminosidade no quarto do jogador, aplicando filtros de limiarização antes da extração de marcos faciais pela webcam.
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.
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.
Apresenta o framework MPIIGaze, permitindo estimar o vetor do olhar 2D diretamente da imagem do olho via webcam, sem necessidade de hardware dedicado.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Demonstra como usar o backend WebGL do TensorFlow.js para rodar modelos faciais pesados a 60hz no navegador do jogador sem travar o computador.
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.
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.
Modela o pipeline completo de dados desde a captura até a ação visual. A base teórica do diagrama de arquitetura do TCC.
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.
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.
Estrutura clássica para inserir o rastreador ocular dentro do loop de jogos interativos em tempo real sem atraso.
Demonstra como os dados do Web Worker são normalizados e invariância espacial é mantida ao mapear para o canvas 2D do jogo.
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.
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.
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.
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.
Apresenta a fórmula da Razão de Aspecto do Olho (EAR), fundamental para identificar o piscar do usuário.
O cálculo do EAR permite converter um piscar intencional em um comando de "clique" direto no Game Loop do Phaser.
Resolve o gargalo de performance: transfere o processamento do frame da câmera para WebAssembly, garantindo 60 FPS.
Garante que o usuário jogue o jogo Phaser sem travamentos (Input Lag), mesmo com a inferência da rede neural rodando em paralelo.
"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."
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
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?
| 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 |
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).
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.