Jump to content

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


Bladetrick
 Share

Recommended Posts

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!

Link to comment
Share on other sites

@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

Link to comment
Share on other sites

@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
};

 

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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