Svelte3, Sapper, BabylonJS?

Questions
1

I am guessing that the reason is rather obvious for why there are no results when searching here for “svelte”.

I like the small footprint of Svelte compared to React, but BabylonJS is built in TypeScript, which I don’t believe Svelte utilizes whatsoever.

Do any implementations of BabylonJS using Svelte3 currently exist? Possibly with Sapper involved for SSR? I have looked around for some but can’t find any.

3 Likes
2

We develop Babylon.js in TS but it is a JavaScript framework when you use it so it should not be a problem to use it with any UI framework

I do not know svelte but I see no problem for it to use bjs :slight_smile:

3

I haven’t had any experience with Sapper but I have played around with Svelte. Now I haven’t tried this but if I were to implement BJS into Svelte this is what I would do:

Write your Svelte app as normal, create a component (maybe derived from a canvas element) that initialises your BJS app once it’s mounted to the DOM. This way you can write your BJS app completely separate from your Svelte app. Perhaps something like this:

<script>
    import { MyGame } from './my-game-module'

	let canvasElement;
	let game;
	function mount() {
		game = new MyGame(canvasElement); //This assumes your game class constructor initialises a BJS engine inside
	}
</script>

<canvas bind:this={canvasElement} use:mount></canvas>

For interactions between Svelte and BJS I’d use a Svelte store which would allow you to define a standard interface that actions in the game can trigger and use.

2 Likes
4

Hi @DisownedWheat,

I’m trying to integrate a BJS plain javascript file into a svelte project. I try to embed my script in a class but it doesn’t work. Would you have an example of what your MyGame file would look like ?

Thanks a lot.

5

I made it and it is actually very easy you just need to add your code in the onMount function and bind your canvas to a variable. Something like this :

<script>
    import * as BABYLON from 'babylonjs';
    import { onMount } from 'svelte';

    onMount(() => {
        engine = new BABYLON.Engine(myCanvas, true);
        scene = new BABYLON.Scene(engine);

       // .... rest of your code
 
        engine.runRenderLoop(function(){
            scene.render();
        });
    });
</script>
<style>
    canvas {
         ...
    }
}
</style>
<canvas bind:this={myCanvas}/>

Hope this will help.

4 Likes
6

Thanks @16ar! I’ve started looking at Svelte + Sapper + TypeScript too.

7

I made a couple of github repos showing how you can combine Babylon and Svelte, feel free to clone and/or fork them:

3 Likes
8

Awesome, thanks @DisownedWheat

9

Hey @DisownedWheat,

I’ve taken your BabylonJS-Svelte-TS repo and took it one notch further with some modern bundling, linting & CSS support:
https://github.com/DanKomorny/bjs-gltf-viewer

Working on a custom implementation of a gLTF viewer I want to use with several services I’m building. Has still some bugs, but it works locally with Svelte’s hot reloading which I find incredibly helpful with the general Babylon productivity.

3 Likes
10

Wow @DisownedWheat, @16ar, @DanKomorny; awesome to see how far a simple question can push things! From what I understand, Svelte is still very much “roll your own” when implementing certain things so I’m still on the fence about using it in production. The way this thread has gone really inspires me to jump into some tinkering of my own.