Exporting to GLTF & GLB

Maybe I'm approaching this from the wrong angle.

I need to be able to place a png onto a section of the van. ( A cutout sticker in the real world).

It needs to be a png with transparent background so we just see the image and no border.

When exported to GLB I need the 'sticker' to be seen.

Cheers

Steve Warburton
 
Do you mind sending it over or post a link to the whole case/mesh+image material?
I´m under the impression there are some more steps needed - regarding the mapping of the logo for instance.
If you place a cut out decal as a PNG onto existing geometry you´ll get holes surrounding the decal unless you use some node trickery for combining/compositing.

Cheers
Frank
 
I unwrapped the portion for the decal, exported UVs to PDF - opened in image editor and placed Logo onto - give a background colour - and export to 1k texture. Made a new material - added texture and drag it onto polygon selection.
With this set-up exported to gltf and voilá - there you have it:
ogoDecalGltf.jpg

No baking needed.
Didn´t care much about the background color.
Can´t upload mesh+decal because it´s 2,7MB in size now.
Decal is here:
Logo Decal.png

and UVs look like this:
DecalUVs.jpg


Cheers
Frank
 
Last edited:
Hey Tonio. What are your reservations with Babylon.js? I am currently trying to decide upon a WebGL framework to learn as my experiments exporting gLTF elements to PowerPoint had a few stumbling blocks (no environment lighting, bad aliasing on some edges, currently only supported animation is skinning, very little control over the animations). I initially looked into PowerPoint as so many of my clients use it and I figured that would be the easiest most direct way of introducing 3d into their materials.

From what I read so far Babylon.js is easier to get started with than Three.js and has more consistent development (i.e. more unified - no "dead-end" packages or outdated unsupported code).

I am looking at Three.js, Babylon.js and maybe even Blend4Web. I only want to showcase cosmetic & beauty products which would have a minimal amount of animation. But they need to look very polished.

I am also looking for a framework that allows easy integration of 2d elements and animation, such as text that can appear with the products or a simple interactive interface that would allow users to navigate to different product positions and have relevant information animate in.
 
Hi Guys,

I managed to get the library working within AppStudio.

www.toolfolks.com/babylon4

I haven't done any serious animations but the scene is exported direct form cheetah3d and click on the blue dinosaur and its animation fires up. Press stop animation and they all stop. Click on the plane and its animation starts.

This works okay on IOS & Android web and Android via phone gap.

I'll let you know as I get further advanced....

Let me know if you need any help


Code: 
var scene;
var engine;
var meshesForAnimation;
var box;
var jet;
var dinoRed;
var dinoBlue;
var jet1;
// event listner for pick event

window.addEventListener("click", function () {
   // We try to pick an object
   var pickResult = scene.pick(scene.pointerX, scene.pointerY);
   if (pickResult.hit) {
            if( pickResult.pickedMesh.parent.name == 'dinoBlue' ) {
            //alert('blueClicked');
            dinoBlue.play(true)};
             if( pickResult.pickedMesh.parent.name == 'jet' ) {
            //alert('blueClicked');
            jet1.play(true)};
           // impact.position.x = pickResult.pickedPoint.x;
          //  impact.position.y = pickResult.pickedPoint.y;
          //alert(pickResult.pickedMesh.parent.name);
          console.log(pickResult.pickedPoint.x + '  picked ' + pickResult.pickedMesh.parent.name) ;
         //   console.log(pickResult.pickedPoint.x + '  picked ' + pickResult.pickedMesh['parent']);
}
})

doSomeInitWork=function(){
        // get the canvas DOM element
            var canvas = document.getElementById('renderCanvas');

            // load the 3D engine
            engine = new BABYLON.Engine(canvas, true);

            // createScene function that creates and return the scene
            var createScene = function(){
                // create a basic BJS Scene object
                scene = new BABYLON.Scene(engine);

                // create a FreeCamera, and set its position to (x:0, y:5, z:-10)
                //var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);
                // var box = BABYLON.Mesh.CreateBox('Box',1,0,scene);
                // glb or gltf exports the animation. Can we trigger this
 //               jet = BABYLON.SceneLoader.Append("", "models/jet1.gltf", scene, function (scene) {
    // do something with the scene
//});
                box = BABYLON.SceneLoader.Append("", "models/kidHouse1.gltf", scene, function (scene) {
    // do something with the scene
        // get the list of animations
    dinoRed = scene.animationGroups[0];
    dinoBlue = scene.animationGroups[1];
    jet1 = scene.animationGroups[2];
});

                // var camera = new BABYLON.UniversalCamera("UniversalCamera", new BABYLON.Vector3(0, 0, box.position), scene);
                 var camera = new BABYLON.ArcRotateCamera('arcCamera1', BABYLON.Tools.ToRadians(135),BABYLON.Tools.ToRadians(45),10.0,box.position, scene);
                // target the camera to scene origin
                camera.setTarget(BABYLON.Vector3.Zero());
                //camera.lowerRadiusLimit =2;  // how close to zoom in
                //camera.upperRadiusLimit = 50;  // how far away we can zoom out
                camera.wheelPrecision = 100;
                //camera.collisionRadius = new BABYLON.Vector3(0.5, 0.5, 0.5)
                //scene.collisionsEnabled = true;
               // camera.checkCollisions = true;
               // box.checkCollisions = true;
                // attach the camera to the canvas
                camera.attachControl(canvas, false);

                // create a basic light, aiming 0,1,0 - meaning, to the sky
                var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);

                // create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation
               // var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);

                // move the sphere upward 1/2 of its height
                //sphere.position.y = 1;

                // create a built-in "ground" shape;
                var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);
                //  create an action or pick
                pickResult = scene.pick(scene.pointerX, scene.pointerY);
                // return the created scene
                return scene;
            }

            // call the createScene function
            scene = createScene();

            // run the render loop
            engine.runRenderLoop(function(){
                scene.render();
            });

            // the canvas/window resize event handler
            window.addEventListener('resize', function(){
                engine.resize();
            });
}



btnGetBabylonJS.onclick=function(){
    $.getScript("https://preview.babylonjs.com/babylon.js", function( data, textStatus, jqxhr) {
  console.log( data ); // Data returned
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );
}); 
}

btngetBabylonLoader.onclick=function(){
    $.getScript( "https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js", function( data, textStatus, jqxhr ) {
  console.log( data ); // Data returned
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );
});
}

btnGetPepJS.onclick=function(){
   $.getScript( "https://code.jquery.com/pep/0.4.1/pep.js", function( data, textStatus, jqxhr ) {
  console.log( data ); // Data returned
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );
});
}

btnRunCode.onclick=function(){
    doSomeInitWork();
}



Form1.onshow=function(){
   doSomeInitWork();
  
}

//"animations":[{"name":"Take1","channels":[{"sampler":0,"target":{"path":"translation","node":62}},{"sampler":1,"target":{"path":"scale","node":62}},{"sampler":2,"target":{"path":"rotation","node":62}}],"samplers":[{"input":248,"interpolation":"LINEAR","output":249},{"input":248,"interpolation":"LINEAR","output":250},{"input":248,"interpolation":"LINEAR","output":251}]},{"name":"Take2","channels":[{"sampler":0,"target":{"path":"translation","node":61}},{"sampler":1,"target":{"path":"scale","node":61}},{"sampler":2,"target":{"path":"rotation","node":61}}]


btnCreateAnim.onclick=function(){
scene.stopAllAnimations();
}

btnPlayAnim.onclick=function(){
      console.log(scene.animationGroups);
       // alert('button clicked');

    dinoRed.play(true);

    dinoBlue.play(true);

    jet1.play(true);

}
 
I’ve played with both three.js and Babylon.js and am rather more impressed with three.js but can’t really say much with authority. Haven’t tried blend4web.

The workflow from cheerah3d.js to three.js is pretty straightforward (I posted an example a while back).

Combining 2d and 3d is easy — it’s a web page — as long as you don’t want your UI embedded in the scene (text in WebGL scenes is problematic).

Oh, here’s my example:

http://bindinator.com/#source=threejs.component.html

This has a lot more code than @classic12’s post but it’s doing things like walking the scene graph to modify materials and moving lights in response to the user and playing an animation.

There’s a simpler Babylon demo on the same page but I didn’t like the feel of babylon’s API.
 
classic12 said:
You may want everything in UV1. What you can do is either copy the UVs from UV2 to UV1 at this point
Click to expand...

How exactly does one "copy the UVs from UV2 to UV1". I'm having a heck of a time with this. Baking textures for export in FBX format is way harder than I anticipated.

If I jump through all the hoops mentioned, I can get the baked texture into UV2, but then it doesn't import properly when exported as FBX. Any help would be appreciated. It's just not obvious to me how to copy UVs from 2 to 1.

EDIT: Actually, even though the baked texture looks good in C3D in the editor viewport, it does not render that way. Instead, it renders UV1, which basically looks like the square UV map - i.e. ugly. How do I get C3D to render using UV2 - or better yet, copy UV2 to UV1 so that it will [presumably] export and import properly in FBX format.
 
Last edited:
Shotster said:
How exactly does one "copy the UVs from UV2 to UV1".
Click to expand...

Ok, I discovered that you must bake to UV1 on a "fresh" mesh. Apparently, if you bake to UV2, there is no "turning back". Subsequent attempts to bake to UV1 result in a borked texture. I guess there's no way to reset/clear the UV coords once baked - nor a built-in way to copy from UV2 to UV1. :confused:
 
You must log in or register to reply here.
Back
Top