Svelte-Babylon WIP (Use Babylon in markup, A-Frame style)

code example:

<BabylonEngine>
	<BabylonScene>
		<BabylonCamera position={new BABYLON.Vector3(0, 5, -10)} target={BABYLON.Vector3.Zero()} />
		<BabylonHemisphericLight direction={new BABYLON.Vector3(0, 1, 0)} intensity={0.7} />
		<!-- Below is two-way binding between spherePosition and position -->
		<BabylonSphere bind:position={spherePosition} options={{ diameter: 2, segments: 32 }} />
		<BabylonGround options={{ width: 6, height: 6 }} />
	</BabylonScene>
</BabylonEngine>

Live playaround REPL

The idea is to let you declaratively define Babylon scene and entities, with potential for prefab-like components. The best thing about Svelte is Reactive Programming… Just use your objects where you want, whether in markup or confined to scripts and not have to worry about updates. I have some cleaning up to do before it’s ready to be published. Svelte components are a given, and I could theoretically export to Web Components so anyone could use Babylon like they would A-Frame regardless of their framework.

video demonstration:

6 Likes

Very cool @rogueyoshi ! Love Svelte. Love Babylon. Perfect combo.

1 Like

@rogueyoshi do you think this would be a viable, performant approach to creating a game level editor, with a reactive svelte UI and svelte Babylon components - adding/removing and changing properties of game entities?

I’m wondering how well it would scale or whether there’d be a better approach.

1 Like

@inteja That’s an interesting idea. You could probably easily serialize it all. But first the base engine stuff has to be ported over for Svelte, so components for all the entity types, or possibly a generic entity component that you can pass stuff into could suffice too.

1 Like

This is coooool :slight_smile: @RaananW might love this one

2 Likes

Amazing! Thanks for sharing

Can’t wait to try it myself :slight_smile:

2 Likes

First version with ported starter code is done. Over the weekend and beyond I’ll be continually adding to it for what my work project requires. PRs are welcome.

1 Like

Made a Svelte REPL post too. You can tinker with it live like the Babylon Playground:

2 Likes

That’s really nice! I never used Svetle, but it seems very readable and makes a lot of sense to me :slight_smile:

How long does it take to implement such a component? If I want to use different types of meshes, will I need to implement the components for them, or is there some form of shortcut (for example always bind position)?

Similarly to A-Frame’s ECS Components, Svelte has Svelte Actions. The plan is to make reusable Actions for stuff that is shared across entity types (position, material, etc.). This will need some forward thinking for implementation to avoid pigeonholing. For now, I’m just directly exposing props as needed and adding Reactive Statements for props to assign them to the Babylon entity (or run the related function).

EDIT: having problems with my post link limitations. Can’t link to the Svelte docs on the subjects. Added the links to that PR though. Apparently my posts are getting flagged as spam?

EDIT2: anyways for now, you can duplicate one of the entity components, and simply export the props you want and just create reactive "$: " statements to do what you want with them automatically as changed. It’s on the TODO to add boilerplate for making your own.