The process of coloring individual parts of a .gltf as in example

Questions
1

In the babylon examples I found this very interesting example piece. How is it possible to change colors part by part of this models (.gltf)? Is it the UV that is been colored individually? if yes, the design of each dress has to be created as a separate model? or is it an image that gets coloured (e.g. svg)? This is very exciting and I’d like to explore this technique to create something for the students of our school. I’d like to know the process in been able to color part by part of a model (.gltf).

2

Basically it’s just texture switching.

But the example you’re showing above use base64 image, 'cause I supposed it’s generating on the fly new textures from a template, allowing coloring only some predefined parts on this texture

UzaOVZb.jpg1550×659 174 KB

here, the red area was colored above the default blue one

1 Like
3

Thank you very much for your comment. :slightly_smiling_face: This is a good starting point. That answers my question so I marked this post as solved.

4

@Vinc3r I went through the docs and loaded a .gltf - That’s all good. Then I tried replacing the texture but something is wrong and I am not sure why. Can you please tell me what am I doing wrong.

I uploaded the same .gltf in to babylon playground and I was able to chnage the textture of the image. ( Display Inspector(located at right-bottom) > Textures (located at left-center) > Replace Texture button (located at right-center)). So I believe the fault is in my code.

load .gltf to baylonjs (v4.0)

 var canvas = document.getElementById("renderCanvas");
 var engine = new BABYLON.Engine(canvas, true);
 var scene = new BABYLON.Scene(engine);

  var createScene = function() {
    var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2,  Math.PI / 4, 5, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);

    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

    BABYLON.SceneLoader.AppendAsync("assets/model/", "sample-model.gltf", scene).then(function (scene) {
        scene.createDefaultCameraOrLight(true, true, true); 
     }); 
     return scene;
  };
  var scene = createScene();
  engine.runRenderLoop(function () {
        if (scene) {
            scene.render();
        }
    });

Below is the function I am having trouble

function changeTexture(){
     var mat = new BABYLON.StandardMaterial("mat", scene);
     var texture = new BABYLON.Texture("assets/img/imgNew.png", scene);
     mat.diffuseTexture = texture;
     mesh.material = mat;
}

Since this post is solved I will open a new thread asking this question. Hope someone will help… I am really enthusiastic about creating something similar…

5

On your changeTexture() you have a mesh variable which is not declared & set.

6

@Vinc3r I see.

I saw few examples and those variables are refereed to elements which was created. like this.

var yellowSphere = BABYLON.Mesh.CreateSphere("yellowSphere", 16, 1.5, scene);

But when a model is already rendered to the canvas and I’m trying to change the texture using a new function, I’m not understanding to which should var mesh be set to?

If I do
var mesh = BABYLON.SceneLoader.AppendAsync("assets/model/", "sample-model.gltf", scene).then(function (scene) {

still I might have problems because var mesh is defined inside of createScene()?

7

I think you should target a specific mesh, like

function changeTexture(mesh){
     var mat = new BABYLON.StandardMaterial("mat", scene);
     var texture = new BABYLON.Texture("assets/img/imgNew.png", scene);
     mat.diffuseTexture = texture;
     mesh.material = mat;
}
var mesh = scene.getMeshByName("myWonderfulMesh");
changeTexture(mesh)

Note that you can also switch texture directly into the existing material if needed:

var texture1 = new BABYLON.Texture("texture1.png", scene);
var texture2 = new BABYLON.Texture("texture2.png", scene);
var material = scene.getMaterialByName("myWonderfulMaterial");
function changeTexture(id){
    switch(id){
        case 1:
            material.diffuseTexture = texture1;
            break;
        case 2:
            material.diffuseTexture = texture2;
    }
}
changeTexture(2);
3 Likes
8

Thanks once again… that worked. :smiley: