Bladetrick

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

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
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

Share this post


Link to post
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
};

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.