Skip to content

thomasnrs/holo-screenVR

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
docs
docs
 
 
pc
pc
 
 
phone
phone
 
 
server
server
 
 
.gitignore
.gitignore
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 

Repository files navigation

    ___          ___           ___           ___           ___         ___           ___           ___           ___           ___          _____          ___
   /  /\        /__/\         /  /\         /__/\         /  /\       /  /\         /  /\         /__/|         /  /\         /  /\        /  /::\        /  /\          ___
  /  /:/        \  \:\       /  /::\        \  \:\       /  /::\     /  /::\       /  /::\       |  |:|        /  /:/_       /  /::\      /  /:/\:\      /  /:/_        /__/\
 /__/::\         \__\:\     /  /:/\:\        \  \:\     /  /:/\:\   /  /:/\:\     /  /:/\:\      |  |:|       /  /:/ /\     /  /:/\:\    /  /:/  \:\    /  /:/ /\       \  \:\
 \__\/\:\    ___ /  /::\   /  /:/  \:\   _____\__\:\   /  /:/~/:/  /  /:/~/::\   /  /:/~/:/    __|  |:|      /  /:/ /:/_   /  /:/~/:/   /__/:/ \__\:|  /  /:/ /:/_       \  \:\
    \  \:\  /__/\  /:/\:\ /__/:/ \__\:\ /__/::::::::\ /__/:/ /:/  /__/:/ /:/\:\ /__/:/ /:/___ /__/\_|:|____ /__/:/ /:/ /\ /__/:/ /:/___ \  \:\ /  /:/ /__/:/ /:/ /\  ___  \__\:\
     \__\:\ \  \:\/:/__\/ \  \:\ /  /:/ \  \:\~~\~~\/ \  \:\/:/   \  \:\/:/__\/ \  \:\/:::::/ \  \:\/:::::/ \  \:\/:/ /:/ \  \:\/:::::/  \  \:\  /:/  \  \:\/:/ /:/ /__/\ |  |:|
     /  /:/  \  \::/       \  \:\  /:/   \  \:\  ~~~   \  \::/     \  \::/       \  \::/~~~~   \  \::/~~~~   \  \::/ /:/   \  \::/~~~~    \  \:\/:/    \  \::/ /:/  \  \:\|  |:|
    /__/:/    \  \:\        \  \:\/:/     \  \:\        \  \:\      \  \:\        \  \:\        \  \:\        \  \:\/:/     \  \:\         \  \::/      \  \:\/:/    \  \:\__|:|
    \__\/      \  \:\        \  \::/       \  \:\        \  \:\      \  \:\        \  \:\        \  \:\        \  \::/       \  \:\         \__\/        \  \::/      \__\::::/
                \__\/         \__\/         \__\/         \__\/       \__\/         \__\/         \__\/         \__\/         \__\/                       \__\/           ~~~~
      ___           ___                         ___           ___           ___           ___           ___           ___           ___           ___
     /__/\         /  /\                       /  /\         /  /\         /  /\         /  /\         /  /\         /  /\         /__/\         /  /\
     \  \:\       /  /::\                     /  /::\       /  /:/_       /  /:/        /  /::\       /  /:/_       /  /:/_        \  \:\       /  /:/_
      \__\:\     /  /:/\:\    ___     ___    /  /:/\:\     /  /:/ /\     /  /:/        /  /:/\:\     /  /:/ /\     /  /:/ /\        \  \:\     /  /:/ /\
  ___ /  /::\   /  /:/  \:\  /__/\   /  /\  /  /:/  \:\   /  /:/ /::\   /  /:/  ___   /  /:/~/:/    /  /:/ /:/_   /  /:/ /:/_   _____\__\:\   /  /:/ /::\
 /__/\  /:/\:\ /__/:/ \__\:\ \  \:\ /  /:/ /__/:/ \__\:\ /__/:/ /:/\:\ /__/:/  /  /\ /__/:/ /:/___ /__/:/ /:/ /\ /__/:/ /:/ /\ /__/::::::::\ /__/:/ /:/\:\
 \  \:\/:/__\/ \  \:\ /  /:/  \  \:\  /:/  \  \:\ /  /:/ \  \:\/:/~/:/ \  \:\ /  /:/ \  \:\/:::::/ \  \:\/:/ /:/ \  \:\/:/ /:/ \  \:\~~\~~\/ \  \:\/:/~/:/
  \  \::/       \  \:\  /:/    \  \:\/:/    \  \:\  /:/   \  \::/ /:/   \  \:\  /:/   \  \::/~~~~   \  \::/ /:/   \  \::/ /:/   \  \:\  ~~~   \  \::/ /:/
   \  \:\        \  \:\/:/      \  \::/      \  \:\/:/     \__\/ /:/     \  \:\/:/     \  \:\        \  \:\/:/     \  \:\/:/     \  \:\        \__\/ /:/
    \  \:\        \  \::/        \__\/        \  \::/        /__/:/       \  \::/       \  \:\        \  \::/       \  \::/       \  \:\         /__/:/
     \__\/         \__\/                       \__\/         \__\/         \__\/         \__\/         \__\/         \__\/         \__\/         \__\/

🛸 Holo-Screens VR

Um cockpit de telas-holograma flutuando em 3D, renderizado no seu monitor comum — navegado pelo giroscópio do celular, pelo rosto via webcam, ou pelo mouse. Como usar um headset de VR sentado (estilo Immersed / Virtual Desktop), só que sem headset nenhum.

Você dispõe várias "telas" num arco/cilindro ao seu redor, coloca em cada uma um app capturado, um vídeo do YouTube, um GIF, um site ou um widget — e passeia entre elas movendo o celular ou a cabeça, com zoom, foco e efeito de brilho ambiente (ambilight).

⚠️ Plataforma: o app roda no Windows (a ponte de captura/foco de janelas e os widgets de sistema usam PowerShell + APIs do Windows). O renderer 3D é web (Three.js) e roda em qualquer navegador Chromium (Chrome/Edge/Brave).

📸 Demonstração

O ambiente virtual em ação — telas-holograma dispostas em 3D ao redor do usuário:

Holo-Screens VR — visão do cockpit 3D

Holo-Screens VR — telas flutuantes no ambiente virtual

✨ Funcionalidades

  • 🖥️ Telas em 3D — quantas quiser (até 8), dispostas num arco/cilindro ao seu redor.
  • 📱 Controle por giroscópio — abra uma página no celular e mova o aparelho pra olhar em volta.
  • 📷 Head tracking pela webcam — mova a cabeça pra mover a câmera (MediaPipe FaceLandmarker).
  • 🖱️ Controle por mouse — arraste pra olhar, scroll pra zoom (fallback sem celular).
  • 🪟 Captura de apps — coloque qualquer janela/app/monitor ao vivo dentro de uma tela.
  • ▶️ YouTube — pesquise (sem API key) e assista vídeos embutidos e interativos.
  • 🖼️ Mídia — fotos e GIFs animados (por URL ou arquivo local).
  • 🌐 Web screens — sites/dashboards interativos via iframe em 3D.
  • 🕒 Widgets — relógio e monitor de sistema (CPU / GPU / RAM + clima).
  • 🎯 Entrar na tela — traz a janela real pra frente pra você usar com mouse/teclado nativos.
  • 🔀 Reordenar arrastando + adicionar/remover telas no painel.
  • 🎨 19 temas (dia/tarde/noite, neon, vaporwave, aurora…) + modo chuva com som procedural.
  • ✨ Glow ambilight — cada tela emite um halo com as cores do próprio conteúdo.
  • 💾 Persistência — telas, temas e layout voltam após o F5.
  • 💻 Tela de abertura com arte ASCII e "carregando".

🚀 Como rodar

Pré-requisitos

  • Windows 10/11
  • Node.js (versão 18 ou superior)
  • Um navegador Chromium (Chrome, Edge ou Brave) — necessário pra captura de tela
  • PC e celular na mesma rede Wi-Fi (se for usar o controle por celular)

Passos

# 1. clone o repositório
git clone https://github.com/thomasnrs/holo-screenVR.git
cd holo-screenVR

# 2. instale as dependências
npm install

# 3. suba o servidor (gera o certificado HTTPS na 1ª vez)
npm start

O terminal vai mostrar dois endereços:

  No PC (monitor):  https://localhost:8443/
  No celular:       https://192.168.0.X:8443/phone
  1. No PC: abra https://localhost:8443/ no Chrome/Edge/Brave.
  2. No celular (mesma Wi-Fi): abra o endereço /phone — com https:// e a porta :8443.
  3. Como o certificado é autoassinado, o navegador vai avisar → Avançado → Prosseguir (faça isso nos dois dispositivos).
  4. No celular, toque em Ativar sensores e comece a mover o aparelho. 🎉

💡 Se o celular der timeout, libere a porta no Firewall do Windows (PowerShell como Admin):

New-NetFirewallRule -DisplayName "Holo-Screens 8443" -Direction Inbound -Protocol TCP -LocalPort 8443 -Action Allow

🎮 Controles

No PC (teclado)

Tecla Ação
G Alterna giroscópio / mouse
F Liga/desliga head tracking pela webcam
R Recentraliza a "frente" (e recalibra o rosto)
Tab Alterna navegar ↔ interagir (clicar em vídeos/sites)
Enter Entra na tela central (traz a janela real pra frente)
B Próximo tema
C Liga/desliga a chuva 🌧️
H Esconde/mostra o HUD
scroll Zoom (aproxima/afasta)
arrastar Olhar em volta (modo mouse)

No celular

  • Mover o aparelho → olha em volta · Pinça (2 dedos) → zoom
  • Sensibilidade (slider) · Recentralizar · Entrar na tela / Cockpit

Painel "Criar / capturar telas" (canto superior direito)

  • Tela N ▸ capturar — escolhe a janela/app pra exibir
  • + adicionar tela · + relógio 🕒 · + sistema 📊 · + mídia 🖼️ · + youtube ▶️
  • Arraste uma linha sobre outra pra reordenar · × remove a tela

🖥️ (Opcional) Monitores virtuais — setup estilo spacedesk

Por padrão, você captura janelas/apps que já estão no seu monitor. Mas dá pra ir além: criar monitores virtuais (telas extras headless, sem painel físico) e jogar os apps neles. Assim o cockpit 3D fica no seu monitor real enquanto os apps "moram" em telas off-screen dedicadas — você os vê no 3D e os controla com mouse/teclado nativos, sem nunca sair do cockpit.

Isso usa um driver de display virtual (IddCx). O mais usado e gratuito é o Virtual Display Driver (VDD), controlado pelo app VDC (Virtual Driver Control).

⚠️ É um driver de kernel — exige permissão de administrador e um reboot. Instale por sua conta e risco. Desinstale o VDD antes de atualizar drivers de GPU (evita tela preta).

Instalação do VDD/VDC

  1. Instale o app de controle (PowerShell como Administrador): 
    winget install --id=VirtualDrivers.Virtual-Display-Driver -e

    Precisa do Microsoft Visual C++ Redistributable (já vem na maioria dos PCs). Alternativa: baixar o VDC na página de releases.

  2. Reinicie o PC.
  3. Abra o VDD Control: 
    "%LOCALAPPDATA%\Microsoft\WinGet\Links\VDD Control.exe"
    (ou procure por VDD Control no menu Iniciar)
  4. Clique em Install Driver e aprove o UAC — isso cria o adaptador de vídeo virtual.

Criar e usar os monitores

  1. Ainda no VDC, defina quantos monitores virtuais quer (ex.: 4) e deixe-os habilitados (também dá pra editar C:\VirtualDisplayDriver\vdd_settings.xml). A tela pode piscar — normal.
  2. Confirme que apareceram (na pasta holo-screens): 
    powershell -File "server\winbridge.ps1" -Action monitors
    Você deve ver DISPLAY2, DISPLAY3… além do seu monitor real.
  3. Mova os apps para os monitores virtuais (Win+Shift+←/→, ou arrastando) e capture cada monitor numa tela do cockpit (painel Tela N ▸ capturar → escolha o monitor).

ℹ️ Como o Windows tem uma única fila de input, você controla um monitor por vez (igual a uma área de trabalho estendida normal) — perfeito pra olhar tudo no 3D e interagir com um foco.

🏗️ Como funciona

┌─────────────────┐      WebSocket (HTTPS)       ┌──────────────────────────┐
│   CELULAR        │  ── orientação + gestos ──►  │   SERVIDOR (Node)        │
│  (giroscópio)    │                              │  relay + ponte Windows   │
└─────────────────┘                              └──────────┬───────────────┘
                                                            │ captura/foco de
┌─────────────────┐                                         │ janelas, stats…
│   PC / MONITOR   │  ◄── posição da câmera, conteúdo ──────┘
│  Three.js 3D     │
│  telas no arco   │  captura de tela via getDisplayMedia (navegador)
└─────────────────┘
  • pc/ — renderer Three.js que roda no monitor (cena, câmera, telas, widgets, efeitos).
  • phone/ — página de controle do celular (giroscópio + toques).
  • server/ — servidor HTTPS + relay WebSocket + ponte com o Windows (PowerShell).

Three.js vem via CDN (importmap) — não há etapa de build.

🧰 Stack

  • Three.js — renderização 3D (WebGL + CSS3D)
  • ws — WebSocket (Node)
  • MediaPipe Tasks Vision — head tracking
  • PowerShell / Win32 — captura, foco de janelas e stats de sistema
  • getDisplayMedia — captura de telas/janelas no navegador

⚠️ Limitações conhecidas

  • Captura de tela só funciona em navegadores Chromium (não no navegador embutido do VS Code).
  • Após o F5, o vídeo ao vivo das capturas precisa de 1 clique pra reativar (segurança do navegador) — a associação de controle persiste; só o stream visual precisa do reclique.
  • Mídia por arquivo local não persiste no F5 (vira blob:); use URL se quiser que volte.
  • Web screens só abrem sites que permitem iframe (muitos bloqueiam via X-Frame-Options).
  • Head tracking precisa de boa iluminação e consome CPU/GPU.

📄 Licença

MIT — use, modifique e divirta-se. 🛸

About

Virtualização de telas para vários monitores em um só estilo workspace [VR]

Resources

Readme

License

MIT license
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages