Load a 3d model and copy an existing material onto it then apply diffuse texture

Help & Support
1

Why am I getting this error?

WebGL: INVALID_VALUE: uniform1iv: no array
WebGL: too many errors, no more errors will be reported to the console for this context.

This is the code that is generating the error from playcanvas-stable.min.js

 if (a.autoRender || a.renderNextFrame)
                    a.render(),
                    a.renderNextFrame = !1;// Specifically this line

I am exporting a project which contains several simple entities called apple_entity or orange_entity for example which have a physical material or a phong applied to it called apple_material and I then run this on my local server with my own UI I am building with Vue.

When I use the code below to load either a high/low poly 3d apple model and apply the material to it I get the above error message and sometimes the model will load and other times it will not. I am exporting the 3d json model from PlayCanvas and creating the material using the online GUI so I would have hoped that this would work reliably but it is not.

The following works in some scenarios but in others i get the above error or the diffuse texture does not load correctly.

var modelName = "apple";
(function loadModel(){
    // (1)Load 3d model
    var URL = "./files/assets/models/"+modelName+".json";
    var modelAsset = new pc.Asset(modelName, "model", {
        url: URL
    });

    pc.app.assets.load( modelAsset );
    modelAsset.ready(function(){
        pc.app.assets.add(modelAsset);
        // Create the entity called apple
        var appleEntity = new pc.Entity(modelName);
        appleEntity.addComponent('model');
        appleEntity.model.asset = modelAsset;
        pc.app.root.addChild(appleEntity);
        transferMaterial();
    };
}());

function transferMaterial(){
    // (2) Copy the material from a simple plane that already exists in the playcanvas scene called apple_placeholder
    var localModel = pc.app.root.findByName(modelName);
    // This placeHolderMaterial is created with the online Playcanvas gui as a plane with the material that I want to use attached to it
    var placeHolderMaterial = pc.app.root.findByName(modelName+"_placeholder");
        // Then simply transfer the material into the "apple"
        localModel.model.meshInstances[0].material = placeHolderMaterial.model.meshInstances[0].material;
        localModel.model.meshInstances[0].material.update();
        loadTexture();
}

function loadTexture(){
    // (3) Add diffuse texture
    var imageDiffuse = new Image();
    var texture = new pc.Texture();

    //  When texture has loaded
    imageDiffuse.onload = function () {
        var localModel = pc.app.root.findByName(modelName);
        localModel.model.meshInstances[0].material.diffuseMap = texture;
        localModel.model.meshInstances[0].material.update();
    };

    //imageDiffuse.crossOrigin = "anonymous";
    texture.setSource(imageDiffuse);
    imageDiffuse.src = "./files/assets/models/"+modelName+"-diffuse-low.jpg";
}

Does anyone know how to reliably:

  1. Load a 3d.json model into playcanvas scene
  2. Copy a material from an object that already exists in the playcanvas space and use it on the newly created 3d.json object.
  3. Apply a diffuse texture to this material.
2

The webgl errors start to occur right after the line.

pc.app.root.addChild(appleEntity);

And for some reason, when a material or a texture is applied afterwards, sometimes it cancels out that error after 2 errors are printed. I am guessing that I am not loading the 3d model correctly or not fully initialising it in the way that the engine wants it to be done.

3

I’ve done it in the past like this: https://playcanvas.com/editor/scene/547080

4

Your example code does not seem to work … try using that code in my test scene from chrome console.

https://launch.playcanvas.com/582730?debug=true

var URL = 'https://raw.githubusercontent.com/yaustar/3dmodel-Playcanvas/master/Gas%20Station.json';


    pc.app.assets.loadFromUrl(URL, "model", function (err, asset) {
        var entity = new pc.Entity();
        entity.addComponent("model");
        entity.model.model = asset.resource;
        pc.app.root.addChild(entity);
    });

The entity does not appear to be named either, so how could it be accessed with something like this:

var gasStation = pc.app.root.findByName("gasStation");
5

Odd, the code works fine for me in the console. Here is a video with a minor change to add a name to the entity when created: https://www.dropbox.com/s/imik6a501kft0x0/GasStationDemo.mov?dl=0

6

I must have had a network issue as it is indeed working now with the playcanvas project link above …

It’s interesting that the loadFromUrl on your github file goes off and makes 6 xhr requests.

Gas%20Station.mapping.json
Material439.json
Material408.json
gas%20stationdiffusemap.jpeg
tolldo2.jpeg

However that code does not work in my offline project with neither your example file nor a simple apple.json file I have exported from Playcanvas editor.
I get all sorts of errors.

7

What errors do you get from the model load? Can you zip up a minimal version? When you say offline, is it completely offline or are you running it from a local server?