An immersive 3D experience showcasing dynamic billboards with video textures, interactive elements, and real-time animations.
- Real-time video textures on 3D billboard models
- Multiple video formats support (MP4, WebM)
- Seamless video playback with autoplay and looping
- Cross-browser compatibility for video rendering
- Four distinct billboard types with unique characteristics
- Static image billboards with high-quality textures
- Glowing border effects with dynamic blue highlights
- Rotating video billboards with continuous horizontal rotation
- Click-to-inspect mesh interaction system
- Professional lighting with hemispheric light setup
- Optimized camera controls with ArcRotateCamera
- Responsive design that adapts to all screen sizes
- Smooth 60fps animations with efficient render loops
- Modular GLB loader utility for easy 3D model management
- TypeScript support with full type safety
- Clean architecture with separated concerns
- Hot reload development environment
src/
├── components/
│ └── BabylonScene.tsx # Main 3D scene component
├── utils/
│ └── glbLoader.ts # GLB model loading utility
└── app/
├── layout.tsx # App layout wrapper
└── page.tsx # Main page component
public/
├── 3D assets/
│ ├── billboard.glb # Static image billboard
│ ├── billboardGlow.glb # Glowing border billboard
│ ├── billboardForVideos.glb # Video billboard
│ └── billboardRotate.glb # Rotating video billboard
├── images/
│ ├── bad_meow_01.jpg # Static textures
│ └── bad_meow_02.jpg
└── videos/
├── crypto_life.mp4 # Video textures
├── crazy_run.mp4
├── hehe_emoji_video.mp4
└── oops_emoji_video.mp4
- Node.js 18+ or Bun
- Modern web browser with WebGL support
# Clone the repository
git clone https://github.com/gayanukabulegoda/Billboard-Showcase.git
cd Billboard-Showcase
# Install dependencies
npm install
# or
bun install
# Start development server
npm run dev
# or
bun dev# Build for production
npm run build
# or
bun run build
# Start production server
npm start
# or
bun start- Mouse drag - Rotate camera around the scene
- Mouse wheel - Zoom in/out
- Click on meshes - Inspect mesh details in console
| Billboard | Type | Features |
|---|---|---|
| Static | Image textures | High-quality static images |
| Glow | Image + Effects | Blue glowing borders |
| Video | Video textures | Real-time video playback |
| Rotating | Video + Animation | Continuous horizontal rotation |
- Add GLB model to
public/3D assets/ - Configure in
BabylonScene.tsx:
{
glbFile: "your-model.glb",
textures: [
{
meshName: "MeshName_primitive1",
texturePath: "/path/to/texture.jpg",
materialName: "uniqueMaterialName",
isVideo: false, // or true for videos
}
]
}// In glbLoader.ts
if (materialName.includes("glow")) {
material.diffuseColor = new Color3(0.0, 0.5, 1.0);
material.emissiveColor = new Color3(0.0, 0.3, 0.8);
// Add custom glow effects
}const camera = new ArcRotateCamera(
"camera",
-Math.PI / 1.8, // Horizontal rotation
Math.PI / 3, // Vertical angle
15, // Distance
new Vector3(12, 0, 0), // Target position
scene
);const light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
light.intensity = 1.5; // Adjust brightnessscene.clearColor = new Color4(0.75, 0.75, 0.75, 1.0); // Light gray- Push to GitHub
- Connect repository to Vercel
- Deploy automatically
- Efficient render loops with 60fps target
- Texture compression for faster loading
- LOD (Level of Detail) for complex models
- Frustum culling for off-screen objects
- ✅ Chrome 80+
- ✅ Firefox 75+
- ✅ Safari 13+
- ✅ Edge 80+
- Fork the repository
- Create feature branch:
git checkout -b feature/amazing-feature - Commit changes:
git commit -m 'Add amazing feature' - Push to branch:
git push origin feature/amazing-feature - Open Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Developed by Gayanuka Bulegoda