Is there a way to use the Babylon.AssetsManager to load textures?

[Bladetrick]

Hello!

I looked through the documentation but wasn't quite sure if I missed how I might load textures for my model.   Perhaps I could do this using the TextureAssetTask or ImageAssetTask?  Basically, I was wondering if there was a way to accomplish this:

BABYLON.SceneLoader.ImportMesh("space_frig", "Assets/", "gate.babylon", scene, function (newMeshes, particleSystems) {
                meshPlayer = newMeshes[0];
                meshPlayer.position.y = 2;
                //meshPlayer.receiveShadows = true;
                //shadowGenerator.getShadowMap().renderList.push(meshPlayer);

                meshPlayer.checkCollisions = true;
                meshPlayer.ellipsoid = new BABYLON.Vector3(1, 1, 1);
                meshPlayer.ellipsoidOffset = new BABYLON.Vector3(0, 0, 0);

                meshPlayer.scaling.x = meshPlayer.scaling.y = meshPlayer.scaling.z = 0.3;

                meshPlayer.material.diffuseTexture = shipTexture;
                meshPlayer.material.bumpTexture = new BABYLON.Texture('Assets/gate_bump.png', scene);
                meshPlayer.material.specularTexture = new BABYLON.Texture('Assets/gate_specular.png', scene);
                meshPlayer.material.emissiveTexture = new BABYLON.Texture('Assets/gate_illumination.png', scene);
            });

using the AssetsManager.  Are there any playground samples readily available?

Thank you for the assistance!

[V!nc3r]

Is the doc not enough precise for your needs? http://doc.babylonjs.com/how_to/how_to_use_assetsmanager

And about your example, if you use a 3D modeler to export your .babylon file, the simpliest way is to directly apply your textures on your materials, they will be loaded by default.

[Bladetrick]

Ignore me!  I found this right after I posted

http://www.babylonjs-playground.com/#SXEV7#1

thank you for your time, though

[V!nc3r]

You made me playing with the assets manager  ?

I put my playground here in case someones wants to see how to disable the loading screen for the assetsManager (useful for unlucky people with shitty internet connections): http://www.babylonjs-playground.com/#R6F9BC#6

(the info is on the doc anyway)

[dbawel]

@V!nc3r

You beat me to it! I guess I don't need to build a PG scene now.? But perhaps this code snippet will provide an example just loading images,,, or whatever you wish.

Quote

 

    var loader = new BABYLON.AssetsManager(scene);

//Load textures for GUI
    var toLoad = [
        {name : "bgnd_color", src : "./textures/bgnd_color.png" },
        {name : "color_picker", src : "./textures/color_picker.png" },
        {name : "brush_size_icon", src : "./textures/brush_size_icon.png" },
        {name : "increase_brush", src : "./textures/increase_brush.png" },
        {name : "decrease_brush", src : "./textures/decrease_brush.png" },
        {name : "eraser", src : "./textures/eraser.png" },
        {name : "video_slate", src : "./textures/video_slate.png" },
        {name : "button_d", src : "./textures/3d_icon.png" },
        {name : "frame_start", src : "./textures/frame_start.png" },
        {name : "frame_end", src : "./textures/frame_end.png" },
        {name : "video_pause", src : "./textures/video_pause.png" },
        {name : "video_play", src : "./textures/video_play.png" },
        {name : "button_play", src : "./textures/button_play.png" },
        {name : "button_pause", src : "./textures/button_pause.png" },
        {name : "button_rev", src : "./textures/button_rev.png" },
        {name : "button_fwd", src : "./textures/button_fwd.png" },
        {name : "button_notes", src : "./textures/session_notes.png" },
        {name : "button_slider1", src : "./textures/slider1.png" },
        {name : "button_slider2", src : "./textures/slider2.png" },
        {name : "admin_button", src : "./textures/admin_button.png" },
        {name : "console_button", src : "./textures/console_button.png" },
        {name : "s_notes_button", src : "./textures/s_notes.png" },
        {name : "m_list_button", src : "./textures/m_list.png" },
        {name : "login_button", src : "./textures/login_button.png" },
        {name : "about_button", src : "./textures/about_button.png" },
        {name : "erase_all", src : "./textures/erase_all_button.png" },
        {name : "brush_size", src : "./textures/brush_size.png" },
        {name : "undo_icon", src : "./textures/undo_icon.png" },
        {name : "redo_icon", src : "./textures/redo_icon.png" },
        {name : "dummy_image", src : "./textures/dummy_image.png" },
        {name : "dummy_image_2", src : "./textures/dummy_image_2.png" },

    ];

    toLoad.forEach(function(obj) {
        var img = loader.addTextureTask(obj.name, obj.src);
        img.onSuccess = function(t) {
            assets[t.name] = t.texture;
        };
    });

    loader.onFinish = function() {

//ACTIONS/EVENTS HERE

   };

 

@Temechon helped me on this forum 3 years ago now... he helped me allot with managing assets and GUI elements using his bGUI.js extension.?

DB

[inteja]

@dbawel Thanks this was useful.

It inspired me to play around (probably a bit too much) with what you posted and I came up with the following TS which (I think) allows generic asset loading and eliminates excess typing and redundancy (folder path and asset type to load are derived from filename). I need to test this thoroughly yet but it might be useful to some. Maybe others can expand on it.

let assetsManager = new BABYLON.AssetsManager(this._scene);
let assetsToLoad = [
    { name: "bgnd_color",      filename: "bgnd_color.png" },
    { name: "color_picker",    filename: "color_picker.png" },
    { name: "brush_size_icon", filename: "brush_size_icon.png" },
    { name: "increase_brush",  filename: "increase_brush.png" },
    { name: "decrease_brush",  filename: "decrease_brush.png" },
];
let assets = [];
assetsToLoad.forEach((obj) => {
    let assetTask;
    let fileExtension = obj.filename.split('.').pop().toLowerCase();
    switch(fileExtension) {
        case "png":
        case "jpg":
        case "jpeg":
        case "gif":
            assetTask = assetsManager.addTextureTask(obj.name, './images/' + obj.filename);
            break;
        case "dds":
            assetTask = assetsManager.addCubeTextureTask(obj.name, './images/' + obj.filename);
            break;
        case "hdr":
            assetTask = assetsManager.addHDRCubeTextureTask(obj.name, './images/' + obj.filename, 512);
            break;
        case "mp3":
        case "wav":
            assetTask = assetsManager.addBinaryFileTask(obj.name, './sounds/' + obj.filename);
            break;
        case "babylon":
        case "gltf":
        case "obj":
            assetTask = assetsManager.addMeshTask(obj.name, "", "", './models/' + obj.filename)
            break;
        case "json":
        case "txt":
            assetTask = assetsManager.addTextFileTask(obj.name, './data/' + obj.filename);
            break;
        default:
            console.log('Error loading asset "' + obj.name + '". Unrecognized file extension "' + fileExtension + '"');
            break;
    }
    assetTask.onSuccess = (task) => {
        switch(task.constructor) {
            case BABYLON.TextureAssetTask:
            case BABYLON.CubeTextureAssetTask:
            case BABYLON.HDRCubeTextureAssetTask:
                assets[task.name] = task.texture;
                break;
            case BABYLON.BinaryFileAssetTask:
                assets[task.name] = task.data;
                break;
            case BABYLON.MeshAssetTask:
                assets[task.name] = task.loadedMeshes;
                break;
            case BABYLON.TextFileAssetTask:
                assets[task.name] = task.text;
                break;
            default:
                console.log('Error loading asset "' + task.name + '". Unrecognized AssetManager task type.');
                break;
        }
    };
    assetTask.onError = (task, message, exception) => {
        console.log(message, exception);
    };
});
assetsManager.onProgress = (remainingCount, totalCount, lastFinishedTask) => {
    this._engine.loadingUIText = 'Loaded ' + remainingCount + ' of ' + totalCount + ' assets.';
};
assetsManager.onFinish = () => {
    // ACTIONS/EVENTS HERE
};

 

[dbawel]

@inteja

Certainly another approach to solve specific needs. I should have conformed my sample to ES6 before posting; I just didn't have time.

Cheers,

DB

[Bladetrick]

haha, love this community..  I thought it was over and came back cause i saw the extra posts.  Amazing stuff, guys.  Thank you all.

[Guest]

We never give up