Arashtad 3D Runtime (Oshida), a declarative HTML layer for Babylon.js [Open-source, MIT License]

Demos and projects
1

We’ve recently open-sourced Arashtad 3D Runtime, a small declarative layer for Babylon.js that lets you describe parts of a 3D scene directly in HTML.

The idea is fairly simple: HTML describes the scene, Babylon.js remains the actual 3D engine, and JavaScript is still available whenever direct control is needed.

For example:

<canvas id="scene">

    <arashtad-camera
        type="ArcRotateCamera"
        id="camera"
        alpha="1.57"
        beta="1.2"
        radius="10"
        target="new BABYLON.Vector3(0, 0, 0)">
    </arashtad-camera>

    <arashtad-light
        type="HemisphericLight"
        direction="new BABYLON.Vector3(0, 1, 0)">
    </arashtad-light>

    <arashtad-mesh
        type="Box"
        id="box"
        size="2">
    </arashtad-mesh>

</canvas>

The runtime handles the declarative scene construction and then exposes the resulting Babylon.js scene and objects normally.

It currently covers things such as:

  • Cameras and lights
  • Meshes and materials
  • Model loading
  • Environment/HDR settings
  • Events and Babylon.js action triggers
  • Runtime JavaScript actions
  • Shadows
  • Havok physics
  • GUI and particle systems
  • Runtime/plugin extensions

It is intentionally not intended to replace Babylon.js. The goal is to provide another way of structuring Babylon.js scenes while keeping the underlying engine and API accessible.

The project is MIT licensed and available on GitHub:

There are also a number of examples in the repository showing the different parts of the runtime.

We’re sharing it here mainly because Babylon.js is the foundation it is built around, and I’d be interested in feedback from people who work with Babylon.js, particularly regarding the API design, declarative approach, and places where the runtime could integrate better with Babylon.js.

This topic will be updated with new features, products built with this runtime, and tutorials we release for it frequently.

Thanks.

1 Like
2

hey, this really looks amazing! Do you have some demos online of sites that were built using this framework?

3

Thanks for your kind words. Yes, there are products built with this runtime that are being publishd one by one. Arashtad 3D Annotation is a WordPress plugin and it’s the first product we’ve released that uses Arashtad 3D Runtime and its plugin system:

It also has a free community version that is being published on WordPress.org.
There are also more projects in the way, some of them mssive.

In addition,
The GitHub repo of the runtime has a directory full of examples. We’re frequently updating it with more samples if you’re interested in having a look at it.

1 Like
4

All released versions are available in the official repository:

5

Update: New Examples and Runtime Integration Categories

We’ve just pushed another major update to the Arashtad 3D Runtime GitHub repository.

This push adds 14 new example categories, covering the runtime construction, integration, plugin system, and interaction APIs:

  • 13 Generic Runtime Construction
  • 14 Runtime Integration & API
  • 15 Plugin System
  • 16 Lazy Loading Plugin
  • 17 Scroll Lock Plugin
  • 18 Touch Controls Plugin
  • 19 Interactions - Foundation
  • 20 Interactions - Targets
  • 21 Interactions - Bindings
  • 22 Interactions - Highlighting
  • 23 Interactions - Cards
  • 24 Interactions - Navigation
  • 25 Interactions - Points
  • 26 Interactions - Actions

The repository now contains 351 complete examples covering the Arashtad 3D Runtime from basic scene setup through Havok, advanced interaction and plugin functionality.

The examples are available here:

You can also browse all example categories directly from the repository’s examples/categories/ directory.

6

The Oshida Runtime is now available as a live interactive demo.

We’ve also published the complete example repository on our demo server so you can explore Oshida directly in the browser without installing anything.

The new landing page explains what Oshida is, why it was built, what can be created with it, and why someone might want to learn it. From there you can explore all examples (so far 351 examples), visit the GitHub repository, and access the other project resources.

Live demo:

7

Arashtad 3D Annotation is now available on WordPress.org!

I’m pleased to announce that Arashtad 3D Annotation has been officially approved and published in the WordPress.org Plugin Directory.

The plugin brings interactive 3D annotation capabilities to WordPress, allowing users to create and publish 3D scenes with annotations directly on their websites.

Plugin page: Arashtad 3D Annotation – WordPress plugin | WordPress.org

This release is part of the broader Arashtad initiative to make WebGL-based 3D technologies more accessible to WordPress users, built on Babylon.js and our ongoing work on reusable 3D web infrastructure.

Thank you to the Babylon.js community for providing a place to share and discuss these developments. Feedback and suggestions are welcome!

1 Like