Unity Terrain Splatmap Playground

This Candyland Demo Playground was generated using Babylon Toolkit - Pro Edition 7.0.0 R1 (HAVOK)

It supports all the extra systems I had to create to be able export and re-create a Unity like Terrain System in BabylonJS.

The demo candyland.gltf is loaded along with a demo player character. You can smoothly walk, run, jump, etc… and traverse the terrain. It has several painted texture
layers showing my extra Unity like splatmap system to render up to 64 painted texture layers with terrain collision

9 Likes

First off, this looks awesome.

Am I understanding it correctly that you made everything in Unity, then use the Babylon Toolkit to port everything over and then it can be used in Babylon? Are there any cons to using this (speed/performance/size) or where does this stand compared to an Unity webGL build?

Yes, everything like the the terrain and player were setup in unity, exported as an interactive gltf (scripted logic is in the scene file via metadata).

Then we create a stand web project using babylon.js… the interactive scene is loaded and various elements, scripts, terrain setups, etc… are handled by the Babylon Toolkit GLTF Parser… and Voila … Your BabylonJS (native scene) exported from Unity with all the bells and whistles the Babylon Toolkit provides

So technically you could quite easily import this into Unity → Babylon:
https://ogracian.github.io/ECM2_DEMO/

And how does this work with networking, do you have to do this in Unity as well or do you expose something when you are importing the logic from Unity?

There is no Unity logic exported. The scene is exported as gltf. The toolkit also stores metadata it needs to RE-CREATE the logic using BabylonJS code… regular typescript.

This is impressive! :heart_eyes_cat:

What are the benefits of creating the scene in Unity and export it to babylon.js? I don’t want to be a prick and disregard your work, technologically this is absolutely insane :heart: :muscle: , but this scene can be easily created in babylon.js w/o Unity and the 100MB+ asset it had to download.

Dunno that this scene is 100+MB. Only transfer about 50MB over network for me. And the demo is to show using the Unity Ecosystem to create a gltf. Mainly using Unity Terrain Builder with 7 different terrain textures that were splatted to paint the detail you see on the terrain, export a robot character using the Unity Starter asset with animation controller and blend tree animations smoothly transition walk, run, jump, falling and multiple landing animations… All with V2 havok physics for the terrain and a dynamic character controller for player movement. And all the OUT-THE-BOX and not even typing one single line of code for anything including the complex physics setup using Pro Class script components.

As the playground shows… its all easily loaded as with asset manager or any other
babylon scene loading functions. Then of course you can add what ever logic you like using script components.

So its really about how you wanna build your game. I prefer to use the Unity Eco System And Tooling to create interactive gltf files and use script components to achieve the Unity style game mechanics for not things like Terrain Building, but lightmap baking, character animation, recast navigation mesh generation, detour path navigation, auto lod, all the unity colliders including wheel colliders for raycast vehicle. You can setup entire open worlds or very large cities with thousands of building and road colliders. Then export all that as an interactive gltf with all that pre-built functionality that you load into your project, no matter if use my scene viewer or your own project.

The following Unity Starter Asset Playground show an example of how to use this interactive gltf in your own project. By loading a main level with all the fixings, lighting, skybox, environment, fog, etc. And a player character with two very powerful components on it. A UNITY.CharacterController and a UNITY.AnimationState component. We then at runtime attach a 3RD Person Player Controller to show that you can do this from your own code, and use the demo asset to place whatever type player controller script to handle the overall movement of your character:

class Playground {
    public static async CreateScene(engine: BABYLON.Engine, canvas: HTMLCanvasElement): Promise<BABYLON.Scene> {
        // This initializes the babylon.toolkit.js runtime and the default unity.playground.js project script bundle
        await UNITY.SceneManager.InitializePlayground(engine, { showDefaultLoadingScreen: true, hideLoadingUIWithEngine: false });

        // This creates a basic babylon scene object (non-mesh)
        var scene = new BABYLON.Scene(engine);

        // This creates and positions a debug camera (non-mesh)
        var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
        camera.setTarget(BABYLON.Vector3.Zero());
        camera.attachControl(canvas, true);

        // This creates ambient light, aiming 0,1,0 - to the sky (non-mesh)
        var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
        light.intensity = 0.8;

        // This enables the havok physics engine
        globalThis.HKP = new BABYLON.HavokPlugin();
        scene.enablePhysics(new BABYLON.Vector3(0,-9.81,0), globalThis.HKP);
        
        // This loads the sample scene & player armature exported from a unity starter assets project
        // https://assetstore.unity.com/packages/essentials/starter-assets-character-controllers-urp-267961
        const assetsManager:BABYLON.AssetsManager = new BABYLON.AssetsManager(scene);
        assetsManager.addMeshTask("samplescene", null, UNITY.SceneManager.PlaygroundRepo, "samplescene.gltf");
        assetsManager.addMeshTask("playerarmature", null, UNITY.SceneManager.PlaygroundRepo, "playerarmature.gltf");
        await UNITY.SceneManager.LoadRuntimeAssets(assetsManager, ["samplescene.gltf", "playerarmature.gltf"], ()=> Playground.OnSceneReady(scene));

        return scene;
    }

    private static OnSceneReady(scene:BABYLON.Scene):void {
        // This get the play armature transform node from scene hierarchy
        const player = scene.getNodeByName("PlayerArmature") as BABYLON.TransformNode;

        // This instantiates a third person player controller script component from the babylon toolkit starter content package
        const controller = new PROJECT.ThirdPersonPlayerController(player, scene, { arrowKeyRotation: true, smoothMotionSpeed:true, smoothChangeRate: 25.0 });
        controller.enableInput = true;
        controller.attachCamera = true;
        controller.boomPosition.set(0, 0, -5);
        controller.moveSpeed = 5.335;
        controller.walkSpeed = 2.0;
        controller.jumpSpeed = 12.0;
        UNITY.SceneManager.AttachScriptComponent(controller, "PROJECT.ThirdPersonPlayerController");
        
        // This finally hides the playground screen loader
        UNITY.SceneManager.HideLoadingScreen(engine);
        UNITY.SceneManager.FocusRenderCanvas(scene);
    }
}

Anyways, sorry about the long winded response. But in short, you use the toolkit to make interactive gltf files that you load in your normal project. How interactive you make it is your choice. Can be an entire game or levels and individual assets. Its up to you.

But I cant see any other Game IDE for BabylonJS that lets do all that. I use it every day for work (most of which is under NDA so I cant show demos of the project without written permission from the client). But here is an older prototype that MVRK Dev Team including @Pryme8 made with the toolkit. MVRK Racer

Note: the networking server is down so stick to solo play. My newer shit way better quality. just cant show it right now

1 Like

I can confidently say after learning to use it, the BJS Toolkit is the most powerful tool for scene creation that users have at their disposal.

3 Likes

Some more toolkit usage:

1 Like

Now I got a better understanding what might be happening under the hood :slight_smile: Thank you and Kudos! :muscle:

@MackeyK24 I’d like to ask a question. I was working in Unity years ago before I switched to babylon.js and I liked the lightmap/ao generated by Unity a lot. They’re so much different from AOs which we generate in Blender nowadays. Do you think it could be possible to import our model from Blender (fbx export), generate the lightmaps and export the mesh to a format directly usable with babylon.js? If so, can it be automated, scripted somehow?

Thanks!

I’ve to try it out then!!

Yes you can do that. That is a very normal worlflow. Our Unity Technical Artist starts out in Maya. Gets the scene fleshed out there. Then brings into Unity and the lighting is setup, Materials, Skyboxes, Global Environment, Local Reflection Probes and Baked Lightmaps.

Then the toolkit exports everything out as GLTF with a bit of extra Unity Metadata. My babylon.toolkit.js runtime has the GLTF Parsers that run when you load that GLTF and that is were the Magic Happens :slight_smile:

But I do not have any sort of unattended automated export. You must export the scene and or any individual assets using the various export options

1 Like

Yo @roland … Checkout the built in compression support for webp compressed textures and gzipped gltf scene files