Change the glossiness but with asset loaded by url

Help & Support
1

Hey!

I asked a question a short time ago, to be able to change the glossiness at runtime depending on whether there was one or not.

So on this project it works perfectly when I setup the glossiness myself in the editor but when I use my scripts to download the glossiness from a url, the script doesn’t work anymore.

my script to get an image from url is :

var LoadVersoGloss = pc.createScript('loadVersoGloss');
LoadVersoGloss.attributes.add('loadingScreenEntitys', { type: 'entity' });

// initialize code called once per entity
LoadVersoGloss.prototype.initialize = function() {
        this.app.assets.loadFromUrl(this.getFileFromUser(), "texture", function (err, asset) {

        /** @type {pc.StandardMaterial} */
        var verso = this.entity.render.meshInstances[0].material;

        verso.glossMap = asset.resource;
        // if(verso.glossMap){

        //   verso.shininess = 80; 
        // }else{
        //   verso.shininess = 0; 
        // }
        // verso.update();

       
    }.bind(this));
    
};

// update code called every frame
LoadVersoGloss.prototype.getFileFromUser = function(dt) {
  return "https://raw.githubusercontent.com/Xora123/Img/master/rgh2-recto.png";
};

and the script to set up the glossiness at runtime by yaustar :

var SetGlossinessTo0WhenNoTexture = pc.createScript('setGlossinessTo0WhenNoTexture');

// initialize code called once per entity
SetGlossinessTo0WhenNoTexture.prototype.initialize = function() {
    if (this.entity.render) {
        const materialAssets = this.entity.render.materialAssets;
        for (let i = 0; i < materialAssets.length; ++i) {
            let asset = materialAssets[i];

            // Workaround if the materialAssets are asset ids
            if (typeof(asset) === 'number') {
                asset = this.app.assets.get(asset);
            }

            /** @type {pc.StandardMaterial} */
            const material = asset.resource;
         
            if (!material.glossMap) {
                material.shininess = 0;
                material.update();
            }
        }
    }
};

// update code called every frame
SetGlossinessTo0WhenNoTexture.prototype.update = function(dt) {

};

I put you the link of the project: PlayCanvas 3D HTML5 Game Engine

Thanks.

2

Hi @Xora,

If I set shininess to 100 it works with your remote texture:

image
image3256×1125 302 KB

3

Yes ! But i have to make an if inside this scripts.

Sometimes I will upload a diffuse without glossiness, so if there is none, then I have to set the shineness to 0;

I am using the build version of the project.

Basically I have my object with 2 scripts, one that downloads the diffuse and the other the glossiness from png that I uploaded in a folder.

But sometimes i only upload a diffuse, when i’m in that case i have to put the glossiness to 0 or i have a bad render with the lights.

4

There are two maps/textures, one for glossiness and one for diffuse.

How do you know if a user only uploads just a diffuse and how do you know when they upload glossiness as well?

What you have to do is have a single script that knows whether or not the user has uploaded a glossiness texture/map and adjust the shininess according. You can’t do this with two separate scripts.

1 Like
5

Ok, I’m new to code, so what I did is two scripts, as said above, and so if the user only uploads a texture, , there’s an error with my 2nd script in the console, but I still see this texture on my object, so in my head it was fine aha.

6

Maybe I can create two scenes per object, one with diffuse + glossiness and one with diffuse without glossiness and let the choice to the user, but since I already have 10 scenes, I didn’t find it very practical, but if I have to go through it I will do it

7

I tried something like this to see if there is glossiness or not

var LoadRectoGloss = pc.createScript('loadRectoGloss');

// initialize code called once per entity
LoadRectoGloss.prototype.initialize = function () {
    this.app.assets.loadFromUrl(this.getFileFromUser(), "texture", function (err, asset) {

        var recto = this.entity.render.meshInstances[1].material;

        recto.glossMap = asset.resource;

        if (recto.glossMap) {

            recto.shininess = 80;
        } else {
            recto.shininess = 0;
        }
        recto.update();

    }.bind(this));

};

// update code called every frame
LoadRectoGloss.prototype.getFileFromUser = function (dt) {
    const queryString = window.location.search;
    console.log(queryString);

    var url_string = window.location.href

    var url = new URL(url_string);

    var c = url.searchParams.get("token");

    var b = url.searchParams.get("startScene");

    console.log(c);

    var url = (`texture/${b}-${c}-recto-texture-rgh-2.png`);
 

    $.get(url)
    .done(function() { 
        console.log("it work!")
        return url

    }).fail(function() { 
        console.log("bug")
    
        return "templates/transparent.png"
    })
};
![error|690x177](upload://oGTNz09JEyU7yfTo54ZsgYLMjxF.png)

So if i can tcheck , i can just setup the shininess if there is a glossiness.

but i got this error in my console so i don’t know

error
error698×180 30.3 KB

8

In this code, you are always setting a glossmap

image
image746×178 7.23 KB

So the material shininess is always going to be 80 so I don’t understand your logic here.

9

Yes because it’s the script for load the glossMap , but yeah my method probably sucks.

I have to think again my script!