Jump to content

Need light advice, best way to load and texture in files?


Recommended Posts

Hey I am coming from three.js and have been working with Babylon on and off for about a month.

We are making a 3D model viewer and are interested in using PBRMaterials because they really make the models look amazing.

I am trying to figure out the best way to let users choose a model, have that model loaded, the textures loaded, then apply the textures as PBRMaterials to the model.

There seems to be A LOT of ways to approach this and was wondering someone could just give me some light advice on how they would do this?

I was converting the models and textures to Babylon files using the FBX converter and also the OBJ importer, but those try to set up materials automatically.  

I have been looking at using the AssetManager.  Perhaps converting JUST the mesh to FBX, then convert to .babylon, load the babylon file in, load the textures in, then create PBRMaterials out of the textures and apply them to the mesh.

Would this be a good approach?  Any examples out there that might help me?  Thanks!

Link to comment
Share on other sites

Well one thing I am having a bit of trouble with is how to load a model then apply a texture...it makes sense to me on paper but can't seem to get it working...this is what I've tried:

var model;
var assetsManager = new BABYLON.AssetsManager(scene);
var meshTask = assetsManager.addMeshTask("skull task", "", "./", "models/skull/skull.babylon");
meshTask.onSuccess = function(task){
    model = task.loadedMeshes[0];
var textureTask = assetsManager.addTextureTask("image task", "models/skull/elongated_skull_D.png");
textureTask.onSuccess = function(task) {
    model.material.diffuseTexture = task.texture;

Getting: Uncaught TypeError: Cannot set property 'diffuseTexture' of null

Link to comment
Share on other sites

Okay little confused.  So I have a .babylon file that includes textures and the AssetLoader automatically loads the textures it seems.  However, I tried manipulating the textures and it's not working:

var meshTask = assetsManager.addMeshTask("skull task", "", "./", "models/skull/elongated_skull.babylon");
meshTask.onSuccess = function(task){
    model = task.loadedMeshes[0];
    console.log(model.material); //returning null

Any ideas?

Link to comment
Share on other sites

I rarely use a .babylon & never used AssetManager, but was having an issue with multiple meshes, head / eyes / eye lashes / teeth/ tongue / hair, showing up before everything was ready.  Looked interesting to see eyes / teeth flash briefly, but not very professional.   I used a scene.executeWhenReady() to launch my render loop, so nothing shows till all are ready.

scene.executeWhenReady(function() {
    engine.runRenderLoop(function () { scene.render(); });
    recorder = QI.AudioRecorder.getInstance(resetPhonemeControls);

I do know if waiting till everything is done defeats the purpose of an asset manager, cause I do not know what its purpose is.  Might not you just submit all your tasks, specifying only on errors, then just put your material assignment / start your render loop inside the executeWhenReady?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...