What is the easiest way to make a scalable product configurator using Babylon?

Questions
1

After a lot of searching and experimenting with frameworks I finally decided to settle with babylon - because this community is amazing. I’m extremely new to all of this (even programming in general) and I am looking for tips on how I would go about creating a configurator using Babylon.

There is an example in the playground but going through it feels like its very much complicated. As I understand model-viewer has an option to toggle between material variants inside a glTF file, and I understand we can view this inside the Inspector.

My question is - is this component available outside the inspector? If not, are there any other templates that I can use?

2

Hi and welcome to our Community,
It’s great to hear that you chose our favorite toy for your project :child: I think you made the right choice :grin:

However, creating a configurator for your first project (and without in-depth knowledge of code) is a bold move :sweat_smile: You should make ready for some learning because I’m afraid you will have many questions and things you will need a solution for :student:

May be start with clarifying a couple of things:

  1. The babylon.js ‘viewer’ is a ‘helper’ (module or feature) of the babylon.js framework. Originally created to quickly view or display simple 3D scenes/meshes, its main use (outside of testing purpose) has become to provide a simple integration of the canvas in a website. You should read the doc to understand the options that are available when using the viewer externally (or in your website). So, the short answer is YES, you can use the viewer in your project. But then, speaking about a configurator, the viewer will likely not provide with your requirements :cry:

  2. The babylon.js ‘Inspector’ is a tool. More precisely, it’s essentially a ‘development tool’. The Inspector is great to investigate a scene, view all parameters, assert the content, test parameters, check on scene content, performance,etc and also offers some useful tools for capture and stuff. I believe using the Inspector is a great way to better understand what’s happening in the scene (especially when you are new to the framework). And the other short answer is ‘YES’, you can activate the inspector in your own scene/script. To do so, simply add this line:

scene.debugLayer.show();

With that said, the inspector is not a tool ment as ‘a template for a configurator’. It’s not really something you want to show to the end-user of your project.

Which probably raises your third question (I’m anticipating here :wink:), which would likely be: “Are there any templates to create a configurator/editor”. As far as I know (and I know only little :grimacing: :grin:) I believe not. On the other hand, if there was such template, giving the complexity and diversity of what could be an ‘editor’ or ‘configurator’ it would again likely not match your needs/requirements/design.

The good news is: there are plenty of examples, demos and samples around. If you know where you are heading and what you are looking for, you will have 90% chances to find something similar you can study, work from or even build on. And for the remaining 10%, as you said, our Community is packed with very smart and empathetic people that will certainly give you a hand and/or explain.

As for me and my suggestion today following your first post, I would advise you start splitting your work time in 1) learning about the framework (learn to create a scene, import meshes and asset, modify them, interact with them using a GUI…) 2) create the requirements for your project. What it needs to have, what would be ‘nice to have’, how it should work, what is should look like and how the user can interact with it.

Not sure if any of this is helpful? (I hope it is). It’s hard to give an accurate response to a general question such as this one. If you are not satisfied with my answer (or the later answers that might come in), try to be a bit more ‘specific’.

Meanwhile, again a warm welcome to the community and, have a great day :sunglasses:

2 Likes
3

you truly are the best, and this has been the best answer I’ve got.

See, I was under the impression that I could just import the inspector and switch off what I didn’t want and create a configurator :smiley: … but like you’ve eloquently put - its pretty much not that simple.

But, correct me if I am wrong, if I wanted to say make a 3D model-viewer that included just an animation playback tool, could I use the inspector for this? Are these features of the inspector available separately?

4

the majority of the work for creating a scalable configurator is not even babylonjs related. Its web stack related. Do you have any experience creating websites than consume dynamic data?

5

Everything that’s in the Inspector is done by code, means you can do it. And most of it (taken separetely) is fairly simple and straight forward. It’s only the addition of features, their rules and dependancy that can turn it into something complex (eventually very complex).

6

no, the inspector is not engineered for production deployment in any form. Its a developer tool.

Building a viewer that just loads models and gets the list of animations and allows you to pick one and play it is not to difficult but I would not call that a configurator.

1 Like
7

No, but I’m not looking to create a fully featureed one that integrates with its own dedicated backed. Its more like a demo piece - load a model, change its texture. I guess scalable was a wrong choice of word.

8

ok got you , as I mentioned above a model viewer playing animations or just choosing textures for materials is not too difficult and there are enough playground examples to help you with that.

Even without a backend , programming toward the notion of scalable is always good , but honestly if its just going to be a few textures and you dont expect to add more later , just hard code and inline all the paths pointing to your resources etc

2 Likes
9

There are already examples in this very forum on how to allow user to upload a texture and apply it to an existing model. As said, try to be more specific. Eventually create a post for each single topic/question (unless it is all related/imbricated). Use an explicit title for your post such as ‘how to let user upload a texture and apply to model’ (it’s an example, don’t post this one! the answer is already in the forum along with a playground). Before posting, make a search using keywords (I.E. upload + texture + editor). If you cannot find the answer, create your post.

And BTW, if you haven’t done yet, discover ‘The Playground’. It’s one of the most important feature of BJS where you can instant test your code and share it (with us :wink:) It’s the best way to test your code and the best way to obtain help from the Team and the other users.

10

duly noted :slight_smile: !

11

@EXT-OWL Maybe an example can be helpful to get you a basic idea? Because, if I read your requirements right, there is not too much code involved on the Babylon side.

This is from prototyping.html (no production). It loads a model, plays an animation. You can rotate around the camera. If you wanted to change the texture, piece of cake.

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<script src="./lib/Babylon/Babylon.min.js"></script>	
		<script src="./lib/Babylon/Babylonjs.loaders.min.js"></script>	
		<script src="./lib/Babylon/Babylonjs.materials.min.js"></script>					
	</head>
	
	<body>
    <canvas id="renderCanvas" touch-action="none"></canvas>

    <script type="module">	
		async function game() {	
			const canvas = document.getElementById("renderCanvas");
			const engine = new BABYLON.Engine(canvas, true);
			const scene = new BABYLON.Scene(engine);

			const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));
			camera.attachControl(canvas, true);
			camera.target.set(-0.33, 0.57, 0.31);

			const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
			const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 20, height: 20 }, scene);

			const assetsManager = new BABYLON.AssetsManager(scene);
			assetsManager.addMeshTask("Actor", "", "./assets/", "HumanoidDefault__f291.glb")

			assetsManager.onFinish = async function(tasks) {
				const actorRoot = tasks[0].loadedMeshes[0];
				const actorMesh = tasks[0].loadedMeshes[1];
				const someAnimation = tasks[0].loadedAnimationGroups[56];
			
				someAnimation.play(); 
				
				actorMesh.material.albedoTexture = reassignTexture();
	
				//scene.debugLayer.show();
			}		

			assetsManager.load();

			engine.runRenderLoop(function () {
				scene.render();
			});	
		}	
		game();	
    </script>
	</body>
</html>