GitHub - ertugrulcetin/immersa: Open Source Web-based 3D Presentation Tool

Immersa

A Web-based 3D Presentation Tool - Create stunning 3D presentations with animated transitions between slides.

🎥 Demo

Watch Immersa in action: Demo Video

What is Immersa?

Immersa is an innovative presentation tool that brings your presentations into the third dimension. Unlike traditional slide-based tools, Immersa allows you to:

Load 3D Models: Import .glb 3D models into your presentation
Add Images: Place 2D images in 3D space
Create Text: Add 3D text elements to your slides
Animate Transitions: When you move, rotate, or scale objects between slides, Immersa automatically creates smooth animated transitions

How Slide Animation Works

The magic of Immersa lies in its interpolation system:

Create Slide 1: Position your 3D models, images, and text where you want them
Duplicate Slide: Create a new slide (which copies all objects)
Reposition Objects: Move, rotate, or scale objects to new positions on the new slide
Present: When presenting, Immersa smoothly interpolates between positions, creating fluid animations

This means if a car model is on the left in slide 1 and on the right in slide 2, it will smoothly animate from left to right during the transition!

Features

3D Scene Editor: Full 3D viewport with camera controls
GLB Model Support: Import any .glb 3D model
Image Support: Add images (JPG, PNG) to your 3D scene
3D Text: Create and style 3D text elements
Animated Transitions: Automatic smooth animations between slides
Presentation Mode: Full-screen presentation with progress bar
Local Storage: All data stored locally in your browser (IndexedDB)
Undo/Redo: Full undo/redo support
Keyboard Shortcuts: Quick access to common actions

Getting Started

Prerequisites

Node.js (v16 or higher recommended)
npm or yarn
Java (JDK 11 or higher) - Required for ClojureScript compilation

Installation

Clone the repository

git clone https://github.com/ertugrulcetin/immersa.git
cd immersa

Install dependencies
Start the development server
Open in browser Navigate to http://localhost:8280

Building for Production

The production build will be in resources/public/js/compiled/.

Usage Guide

Keyboard Shortcuts

Shortcut	Action
`T`	Add text
`D`	Duplicate slide
`B`	Add blank slide
`Cmd/Ctrl + Z`	Undo
`Cmd/Ctrl + Shift + Z`	Redo
`Delete/Backspace`	Delete selected object
`Escape`	Exit present mode
`Arrow Keys`	Navigate slides (in present mode)

Exporting

Click "Export" to download your presentation as an .edn file. This file contains all slide data and can be loaded later.

Technical Details

Technology Stack

ClojureScript - Primary programming language
shadow-cljs - Build tool
Reagent - React wrapper for ClojureScript
Re-frame - State management
Babylon.js - 3D rendering engine
IndexedDB - Local data storage

Project Structure

immersa/
├── src/immersa/
│   ├── common/           # Shared utilities
│   │   ├── local_storage.cljs  # IndexedDB storage
│   │   └── firebase.cljs       # Storage adapter
│   ├── scene/            # 3D scene management
│   │   ├── api/          # Babylon.js wrappers
│   │   ├── core.cljs     # Scene initialization
│   │   └── slide.cljs    # Slide/animation logic
│   ├── ui/               # User interface
│   │   ├── editor/       # Editor components
│   │   └── present/      # Presentation mode
│   └── presentations/    # Default presentations
├── resources/public/     # Static assets
│   ├── img/              # Images
│   ├── model/            # Sample 3D models
│   ├── shader/           # Custom shaders
│   └── index.html        # Entry point
└── shadow-cljs.edn       # Build configuration

Data Storage

All data is stored locally in your browser using IndexedDB:

Presentations: Slide data and structure
Thumbnails: Slide preview images
Files: Uploaded images and 3D models

Data persists across sessions. Clear browser data to reset.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Made with ❤️ by Ertuğrul Çetin