Skip to content

Helios Ray

A celestial-object studio in the browser. You compose a planet, a star, a nebula or a galaxy, tune it parameter by parameter, then publish it to a gallery the community explores.

Year
2024 — en cours
Role
Product, tech and development
Scope
Real-time rendering · Procedural generation · Creation tools · Community platform
Stack
Angular · Three.js · WebGL2 · GLSL · NestJS · MongoDB · WebSocket
01 / 04

The project

Helios Ray is a celestial-object studio that runs entirely in the browser. Planets, stars, nebulae, and galaxies. Each has its parameter set, its render, and its way of being tuned.

The stance is that of a tool, not a toy. You do not pick from a preset menu: you tune a material — density, turbulence, scatter, colour temperature, emission — and you see the result recompose live, at full resolution.

What is created does not stay in a corner. Each object can be published, explored, filed in collections, and taken as a starting point. The community gallery is part of the product, not a growth plan.

Helios Ray studio: gallery of nebulae and galaxies created by the community, with creation tools in the left column.
The studio and its gallery: each thumbnail is a published procedural object, replayable and editable.
02 / 04

The render

Everything is generated on the fly: none of these nebulae is an image. Volumes are written in GLSL and computed every frame, which lets you travel through a cloud rather than orbit a texture.

The difficulty of volumetric rendering in a browser is the budget. Each effect — the noise that gives the gas its matter, light scattering inside, the halo, the grain of the stars — is paid in samples per pixel. The work is to get visual density without exceeding the budget of an ordinary graphics card.

The post-processing chain does the rest: exposure, selective bloom on emission zones, and a colour correction that gives creations a visual kinship without making them uniform.

03 / 04

What the studio brings

  • An editor that renders the result continuously: the parameter and its effect are never separated by a compute step.
  • Truly procedural objects, defined by their parameters rather than by a file — so editable, derivable, and light to store.
  • A gallery where you explore, feature, and collect other people’s creations, with packs ready to browse.
  • A frictionless entry: you explore freely, you only create an account to publish.
04 / 04

Architecture

The client is an Angular application cut into isolated modules — world, interface, creation, assets — with Three.js for WebGL2 rendering and a dedicated post-processing chain. The move to WebGPU is planned in the design rather than added after the fact.

The server is a modular NestJS backend: accounts, creations, collections, activity. Exchanges go through REST for operations and WebSocket for community signals.

Persistence rests on MongoDB, whose document model matches the nested nature of a procedural object: a tree of parameters, not rows and columns.

Prismorphic

A project of the same order to launch? Describe the problem.

Start a project