Skip to content

Commit 3d2c1a6

Browse files
vitalyuvitalyu
committed
feat: pages, gitignore, readme
1 parent c22cbb6 commit 3d2c1a6

File tree

4 files changed

+388
-2
lines changed

4 files changed

+388
-2
lines changed

‎.github/workflows/deploy.yml‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
workflow_dispatch:
8+
9+
permissions:
10+
contents: read
11+
pages: write
12+
id-token: write
13+
14+
concurrency:
15+
group: "pages"
16+
cancel-in-progress: false
17+
18+
jobs:
19+
deploy:
20+
environment:
21+
name: github-pages
22+
url: ${{ steps.deployment.outputs.page_url }}
23+
runs-on: ubuntu-latest
24+
steps:
25+
- name: Checkout
26+
uses: actions/checkout@v4
27+
28+
- name: Setup Pages
29+
uses: actions/configure-pages@v4
30+
31+
- name: Upload artifact
32+
uses: actions/upload-pages-artifact@v3
33+
with:
34+
path: '.'
35+
36+
- name: Deploy to GitHub Pages
37+
id: deployment
38+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# macOS
2+
.DS_Store
3+
.AppleDouble
4+
.LSOverride
5+
._*
6+
7+
# Thumbnails
8+
Thumbs.db
9+
10+
# Windows
11+
Desktop.ini
12+
ehthumbs.db
13+
14+
# Editor directories and files
15+
.vscode/
16+
.idea/
17+
*.swp
18+
*.swo
19+
*~
20+
21+
# Logs
22+
*.log
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# Dependencies (if you add npm/node later)
28+
node_modules/
29+
package-lock.json
30+
yarn.lock
31+
32+
# Build outputs (if you add a build process later)
33+
dist/
34+
build/
35+
36+
# Environment variables
37+
.env
38+
.env.local
39+
.env.*.local

‎README.md‎

Lines changed: 68 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,68 @@
1-
# ProjectorVideoMappingWeb
2-
Simple, easy and free projection mapping software right on your web browser
1+
# 🎥 Projection Mapping Web
2+
3+
A powerful, browser-based projection mapping tool built with WebGL. Create stunning visual projections by mapping videos, images, or camera feeds onto any surface with precise 4-corner perspective correction.
4+
5+
## Features
6+
7+
- **Multi-Layer Support** - Work with multiple layers simultaneously for complex compositions
8+
- **Multiple Input Sources**
9+
- 📁 File upload (video/image)
10+
- 📷 Live camera feed
11+
- 🎨 Solid colors
12+
- **Real-Time Warping** - Drag corner points to map your content onto any surface
13+
- **Layer Management** - Show/hide, reorder, and delete layers
14+
- **Keyboard Shortcuts** - Fast workflow with hotkeys
15+
- **Fullscreen Mode** - Perfect for live presentations
16+
- **No Installation** - Runs entirely in your browser
17+
18+
## Usage
19+
20+
1. Open `index.html` in your browser
21+
2. Click **+ Add Layer** to create a new projection layer
22+
3. Choose your content source:
23+
- **📁 File** - Upload a video or image
24+
- **📷 Camera** - Use your webcam
25+
- **🎨 Color** - Generate a solid color
26+
4. Drag the corner points to map the content onto your target surface
27+
5. Add more layers as needed for complex projections
28+
29+
## Keyboard Shortcuts
30+
31+
| Key | Action |
32+
|-----|--------|
33+
| `H` | Toggle control panel |
34+
| `F` | Toggle fullscreen |
35+
| `P` | Toggle corner points visibility |
36+
| `R` | Reset active layer corners |
37+
| `1-9` | Switch between layers |
38+
| `Delete` | Delete active layer |
39+
40+
## Controls
41+
42+
- **Reset** - Reset corner positions to default
43+
- **Points (P)** - Show/hide corner control points
44+
- **Panel (H)** - Show/hide control panel
45+
- **Fullscreen (F)** - Enter/exit fullscreen mode
46+
47+
## Technical Details
48+
49+
- Built with vanilla JavaScript and WebGL
50+
- Uses perspective correction shader for accurate mapping
51+
- Supports real-time video playback
52+
- Hardware-accelerated rendering
53+
- No external dependencies
54+
55+
## Browser Compatibility
56+
57+
Works in all modern browsers that support:
58+
- WebGL
59+
- MediaDevices API (for camera input)
60+
- ES6+ JavaScript
61+
62+
## License
63+
64+
MIT License - Feel free to use for personal or commercial projects
65+
66+
## Demo
67+
68+
Visit the live demo at: https://vitalyu.github.io/ProjectorVideoMappingWeb/

‎index.html‎

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="description" content="Browser-based projection mapping tool with WebGL. Map videos, images, and camera feeds onto any surface with real-time perspective correction.">
7+
<title>Projection Mapping Web - Free Online Video Mapping Tool</title>
8+
<style>
9+
* { margin: 0; padding: 0; box-sizing: border-box; }
10+
body {
11+
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
12+
color: #eee;
13+
font-family: system-ui, -apple-system, sans-serif;
14+
min-height: 100vh;
15+
display: flex;
16+
align-items: center;
17+
justify-content: center;
18+
padding: 20px;
19+
}
20+
21+
.container {
22+
max-width: 900px;
23+
width: 100%;
24+
}
25+
26+
header {
27+
text-align: center;
28+
margin-bottom: 60px;
29+
}
30+
31+
h1 {
32+
font-size: 3.5rem;
33+
color: #0f9;
34+
margin-bottom: 16px;
35+
text-shadow: 0 0 20px rgba(0, 255, 153, 0.3);
36+
}
37+
38+
.tagline {
39+
font-size: 1.25rem;
40+
color: #aaa;
41+
font-weight: 300;
42+
}
43+
44+
.hero {
45+
background: rgba(22, 33, 62, 0.6);
46+
backdrop-filter: blur(10px);
47+
border: 1px solid rgba(0, 255, 153, 0.2);
48+
border-radius: 12px;
49+
padding: 48px;
50+
margin-bottom: 48px;
51+
text-align: center;
52+
}
53+
54+
.hero p {
55+
font-size: 1.1rem;
56+
line-height: 1.8;
57+
color: #ccc;
58+
margin-bottom: 32px;
59+
}
60+
61+
.cta-button {
62+
display: inline-block;
63+
padding: 16px 48px;
64+
background: #0f9;
65+
color: #000;
66+
text-decoration: none;
67+
font-size: 1.25rem;
68+
font-weight: 600;
69+
border-radius: 8px;
70+
transition: all 0.3s ease;
71+
box-shadow: 0 4px 20px rgba(0, 255, 153, 0.3);
72+
}
73+
74+
.cta-button:hover {
75+
background: #0da;
76+
transform: translateY(-2px);
77+
box-shadow: 0 6px 30px rgba(0, 255, 153, 0.4);
78+
}
79+
80+
.features {
81+
display: grid;
82+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
83+
gap: 24px;
84+
margin-bottom: 48px;
85+
}
86+
87+
.feature {
88+
background: rgba(22, 33, 62, 0.4);
89+
border: 1px solid rgba(255, 255, 255, 0.1);
90+
border-radius: 8px;
91+
padding: 24px;
92+
transition: all 0.3s ease;
93+
}
94+
95+
.feature:hover {
96+
border-color: rgba(0, 255, 153, 0.3);
97+
transform: translateY(-4px);
98+
}
99+
100+
.feature-icon {
101+
font-size: 2rem;
102+
margin-bottom: 12px;
103+
}
104+
105+
.feature h3 {
106+
color: #0f9;
107+
font-size: 1.1rem;
108+
margin-bottom: 8px;
109+
}
110+
111+
.feature p {
112+
color: #aaa;
113+
font-size: 0.95rem;
114+
line-height: 1.6;
115+
}
116+
117+
.tech-stack {
118+
background: rgba(22, 33, 62, 0.3);
119+
border-radius: 8px;
120+
padding: 32px;
121+
text-align: center;
122+
}
123+
124+
.tech-stack h2 {
125+
color: #0f9;
126+
font-size: 1.5rem;
127+
margin-bottom: 16px;
128+
}
129+
130+
.tech-list {
131+
display: flex;
132+
flex-wrap: wrap;
133+
justify-content: center;
134+
gap: 16px;
135+
margin-top: 20px;
136+
}
137+
138+
.tech-badge {
139+
background: rgba(0, 255, 153, 0.1);
140+
border: 1px solid rgba(0, 255, 153, 0.3);
141+
padding: 8px 16px;
142+
border-radius: 20px;
143+
font-size: 0.9rem;
144+
color: #0f9;
145+
}
146+
147+
footer {
148+
text-align: center;
149+
margin-top: 48px;
150+
padding-top: 24px;
151+
border-top: 1px solid rgba(255, 255, 255, 0.1);
152+
color: #666;
153+
font-size: 0.9rem;
154+
}
155+
156+
footer a {
157+
color: #0f9;
158+
text-decoration: none;
159+
}
160+
161+
footer a:hover {
162+
text-decoration: underline;
163+
}
164+
165+
@media (max-width: 768px) {
166+
h1 { font-size: 2.5rem; }
167+
.tagline { font-size: 1rem; }
168+
.hero { padding: 32px 24px; }
169+
.cta-button { padding: 14px 32px; font-size: 1.1rem; }
170+
}
171+
</style>
172+
</head>
173+
<body>
174+
<div class="container">
175+
<header>
176+
<h1>🎥 Projection Mapping Web</h1>
177+
<p class="tagline">Transform any surface into a dynamic canvas</p>
178+
</header>
179+
180+
<div class="hero">
181+
<p>
182+
A powerful, browser-based projection mapping tool built with WebGL.
183+
Map videos, images, or live camera feeds onto any surface with precise
184+
4-corner perspective correction. No installation required—just open and create.
185+
</p>
186+
<a href="app.html" class="cta-button">Launch App →</a>
187+
</div>
188+
189+
<div class="features">
190+
<div class="feature">
191+
<div class="feature-icon">🎬</div>
192+
<h3>Multi-Layer Support</h3>
193+
<p>Work with multiple layers simultaneously for complex visual compositions</p>
194+
</div>
195+
196+
<div class="feature">
197+
<div class="feature-icon">📁</div>
198+
<h3>Multiple Sources</h3>
199+
<p>Use videos, images, live camera feeds, or solid colors as your content</p>
200+
</div>
201+
202+
<div class="feature">
203+
<div class="feature-icon">🎯</div>
204+
<h3>Real-Time Warping</h3>
205+
<p>Drag corner points to precisely map content onto any surface shape</p>
206+
</div>
207+
208+
<div class="feature">
209+
<div class="feature-icon">⚡</div>
210+
<h3>Hardware Accelerated</h3>
211+
<p>Smooth performance powered by WebGL with real-time video playback</p>
212+
</div>
213+
214+
<div class="feature">
215+
<div class="feature-icon">⌨️</div>
216+
<h3>Keyboard Shortcuts</h3>
217+
<p>Fast workflow with hotkeys for common operations and layer switching</p>
218+
</div>
219+
220+
<div class="feature">
221+
<div class="feature-icon">🌐</div>
222+
<h3>No Installation</h3>
223+
<p>Runs entirely in your browser—works on any device with WebGL support</p>
224+
</div>
225+
</div>
226+
227+
<div class="tech-stack">
228+
<h2>Built With Modern Web Technologies</h2>
229+
<div class="tech-list">
230+
<span class="tech-badge">WebGL</span>
231+
<span class="tech-badge">JavaScript ES6+</span>
232+
<span class="tech-badge">MediaDevices API</span>
233+
<span class="tech-badge">GLSL Shaders</span>
234+
<span class="tech-badge">Vanilla JS</span>
235+
</div>
236+
</div>
237+
238+
<footer>
239+
<p>Open source project • <a href="https://github.com/vitalyu/ProjectorVideoMappingWeb" target="_blank">View on GitHub</a></p>
240+
</footer>
241+
</div>
242+
</body>
243+
</html>

0 commit comments

Comments
 (0)