Loading...
Log in
Loading...
Sign Up
Built With Babylon.js

Turn your website into an interactive space.

Build more than a website with realtime systems, visual tools, and the infrastructure needed to create unforgettable experiences online.

Drag-and-drop 3D builder
Run on your own domain
VR-ready out of the box
Real-time team collaboration
Usage-based pricing. No monthly fees
Start with $30 in free tokens
Get Started Explore Demo
ENGINE POWER, SIMPLIFIED

Built for scale. Designed for control.

From realtime synchronization to scene streaming and distributed asset delivery, the systems behind GEM are designed to keep large interactive worlds responsive and under control.

Autobahn

Real-time interaction, built in.

Autobahn is GEM's realtime backbone for live avatars, chat, movement, broadcast animations, triggers, and shared scene events. It is what turns a scene from something people view into a place they can enter together.

3D Scenes, assets, cameras, materials, and lights.
+
Realtime Avatars, chat, movement, triggers, and shared moments.
4D A live, shared experience on the web.
GEM asset manager previewing a building model before adding it to a scene
Asset Management

Drag And Drop.
Keep Moving.

Upload asset models, inspect them, and save to your asset library without leaving the GEM workflow.

GEM builder tool editing a building mesh inside a Babylon.js scene
Real Builder Workspace

Build directly inside your scenes.

Select a mesh, tune transforms, adjust materials, and shape the world while the full experience stays alive behind the tools.

Inside The Builder

The builder combines scene tools, realtime systems, and publishing workflows into one connected workspace.

If you are new to GEM, the builder is how your project becomes a playable web experience. Start with a scene, add assets, then open editor panels when you need to adjust lighting, objects, water, motion, and more.

01

Start your project

Choose the project type, default scene, assets, sounds, and features you want GEM to turn on.

02

Shape the world

Drag in assets, place meshes, sculpt terrain, set lights, tune materials, and preview the result as you build.

03

Publish a version

When the scene feels ready, GEM prepares the runtime config, thumbnails, scene data, and CDN files.

04

Put it on the web

Add the loader to your site, initialize your project key, and keep extending the experience with GEM JavaScript APIs.

Builder Mesh Editor

General

Selected Mesh
Transform
X Y Z
Snap
1.00
Mesh Tools
Scene State

Physics

Behavior

Material

Lights

Sounds

Quick Animations

Mesh Editor

Adjust every detail until the scene feels right, with the tools and controls at your fingertips.

The mesh editor is the everyday object tool. Use it when a building, prop, platform, avatar, or imported asset needs positioning, behavior, material, sound, or physics.

Transform

  • Move, rotate, scale, focus, undo, redo, snap, and quick-scale objects.
  • Rename objects and update exact position, rotation, scaling, and size values.

Object Tools

  • Clone, instance, download, bake, or delete selected meshes when needed.
  • Parent meshes, remove parent links, merge objects, or split reusable pieces.

Scene Behavior

  • Control collision, visibility, disabled state, and scene behavior flags.
  • Assign a selected mesh as the avatar or ground when the scene needs a new foundation.

Click Actions

  • Attach actions that load scenes, play sounds, toggle visibility, open URLs, or send custom signals.
  • Stack multiple actions on one object and reorder them as the experience grows.

Attached Systems

  • Open materials, sounds, behavior, lights, physics, sensors, and animations.
  • Tune object settings without leaving the focused mesh workflow.
Environment
Lighting
122 deg
82%
18%
Day Cycle
Active
Environment

Set the mood of the scene.

Use Environment when you want the whole world to feel brighter, darker, calmer, or more alive. Lighting, sky, fog, time of day, and ambient sound live together here.

  • Move the sun and adjust brightness, shade, fog, ambient color, and camera FOV.
  • Preview sunrise, day, sunset, and night while you are building.
  • Add day and night sound loops so the scene changes as time passes.
  • Jump into skybox, sea, and terrain setup when the world needs more shape.
Builder Mesh Editor
Water
3.5
0.22
0.76
Edit Water

Add water that belongs in the scene.

Use the water controls when your project needs an ocean, lake, pool, or stylized surface without hand-building a shader.

  • Adjust wind force, wave height, wave length, wave speed, and wave count.
  • Tune color, transparency, depth color, bump height, and layered wave detail.
  • Switch between world-space waves, Fresnel split, and unlit water options.
  • Open water settings directly from Environment once a sea mesh exists.
Builder Mesh Editor
Path
Start x 0.0, y 1.4, z -2.0
Roof landing x 10.4, y 16.2, z 5.5
Playback
2.0
Quick Animations

Make objects move with simple paths.

Quick Animations are for doors, lifts, platforms, rides, scene reveals, and shared moments. Set waypoints, choose how it starts, and let GEM handle playback.

  • Build a path from a start point and as many destination points as you need.
  • Start automatically, start when clicked, repeat, fade, or reverse on the next click.
  • Let visitors ride local click animations for vehicles and moving platforms.
  • Broadcast one-click animations when every visitor should see the same moment.
And More

The builder keeps going.

Mesh editing, water, environments, and animations are only part of the toolkit. GEM's mission is to deliver practical controls around the things teams need to build polished web experiences.

Scene Deployment
Asset Control
Sound Management
Team Collaboration
Version Control
Easy to Install

Run with one script or click.

GEM handles your deployment pipeline, so you can focus on crafting something unforgettable. Just drop the loader into your site and log in to start building!

Read Install Docs View GitHub Starter Project 
<script src="https://cdn.gem4d.net/js/gem.js"></script>
<button id="launch-gem">Enter Experience</button>

<script>
    const projectKey = "project-key-XXXXXXX-XXXX-XXXX-XXXXXXX";

    // Auto-start GEM when the page loads.
    // gem.init(projectKey);

    // Or launch GEM from a button click.
    document.getElementById("launch-gem").addEventListener("click", () => {
        gem.init(projectKey);
    }, { once: true });
</script>
Pricing

Only pay for what you use.

GEM runs on tokens, so your costs follow real usage instead of a fixed monthly platform fee. Add tokens to your account, publish projects, and let GEM measure the services your scenes actually consume.

Usage rolls up daily across project activity like scene delivery, hosted assets, realtime events, signups, users, sounds, and builder-managed resources. Realtime events include chat, avatar movement, broadcast animations, and other live features.

Token Pricing Read Docs
Starter Credit $30

Free tokens when you sign up and start building.

1 Buy Tokens

Top up from the GEM store whenever your account needs more balance.

2 Build And Publish

Use hosted assets, scenes, chat, avatars, sounds, and realtime features.

3 Daily Rollup

GEM calculates usage each day and deducts from your token wallet.

No monthly platform fee. No unused seat math. Just usage you can review and manage.
From Our Blog

Updates, guides, and ideas from the GEM team.

View Blog
Accessibility Matters More Than Most People Think
Latest Updates / May 12, 2026

Accessibility Matters More Than Most People Think

Immersive experiences shouldn’t require massive downloads or platform-specific installs before users can even begin. In this post, we explore why accessibility, instant access, and streaming content on demand may matter more than graphics alone — and how GEM is being built around a browser-first future.

 Can the Browser Become a Game Engine?
Latest Updates / May 8, 2026

Can the Browser Become a Game Engine?

Modern browsers are evolving into something far beyond document viewers. From real-time rendering and multiplayer systems to streaming worlds and immersive environments, the web is becoming a powerful runtime for interactive experiences. In this post, we explore whether the browser can truly become a game engine — and what that means for the future of the web.

 Why We Built a Token-Based Platform
Latest Updates / May 7, 2026

Why We Built a Token-Based Platform

Traditional billing models weren’t designed for real-time interactive platforms. In this post, we explore why GEM uses a token-based system to support scalable infrastructure, predictable usage, flexible growth, and immersive experiences without unexpected billing surprises.

 What Is the Autobahn?
Latest Updates / May 6, 2026

What Is the Autobahn?

Interactive worlds depend on more than rendering — they depend on systems communicating in real time. In this post, we explore the Autobahn, GEM’s high-speed runtime communication layer designed to synchronize services, stream content on demand, and power connected interactive experiences across the platform.

 The Architecture and Services Behind GEM
Latest Updates / May 4, 2026

The Architecture and Services Behind GEM

Behind every immersive web experience is a network of systems working together in real time. In this post, we explore the architecture and services behind GEM — from scene systems and runtime orchestration to asset pipelines, APIs, and scalable infrastructure designed for interactive web worlds.

 Welcome to GEM
Latest Updates / Apr 30, 2026

Welcome to GEM

GEM started as an idea for an online commerce game, but quickly evolved into something bigger. After building the tools needed to create immersive web experiences — scene systems, editors, asset workflows, and runtime infrastructure — it became clear the platform itself could help other creators build beyond traditional websites. GEM is focused on making interactive, scalable web worlds more practical to create, directly in the browser.

Ready when you are.

No credit card required. Create an account, get your free tokens, and start building something amazing today.

Games Storefronts Art galleries Virtual campuses Product showrooms Music venues Training worlds Community hubs Interactive portfolios
Start Building VIEW DEMO