How can I change the opacity of a 3d model?

Help & Support
1

Guys I am trying to change the opacity of a 3d legacy model to make it look fully transparent, but it’s not working.

I tried

mymodel.model.meshInstances[0].material.opacity = 1; mymodel.model.meshInstances[0].material.update();

and

mymodel.model.meshInstances[0].material.opacity = 0; mymodel.model.meshInstances[0].material.update();

nothing happens…in fact, the opacity property isn’t even recognized by the editor.

2

Hi @Marks,

That’s correct (your 2nd code block), you also need to set the blend type to something.

For example:

const material = mymodel.model.meshInstances[0].material;
material.blendType = pc.BLEND_NORMAL;
material.opacity = 0;
material.update();
2 Likes
3

It doesn’t work…the model is still completely visible ;_;

1 Like
4

Here, seems to work on a test project:

https://playcanvas.com/editor/scene/1283595

5

Works fine in a test project: https://playcanvas.com/editor/scene/1283596 (press 1 to opacity 0)

1 Like
6

It’s not working with the model I have…

image
image621×716 21.7 KB

image

if I change the opacity to 0 it works in the editor…not from code…

7

Does it have more than one mesh instance? If so, you need to loop through all the mesh instances.

8

it has 2 mesh instances, I tried setting both like this

FishModel.model.meshInstances[0].material.blendType = pc.BLEND_NORMAL;

            FishModel.model.meshInstances[0].material.opacity = 0;

            FishModel.model.meshInstances[0].material.update();

            FishModel.model.meshInstances[1].material.blendType = pc.BLEND_NORMAL;

            FishModel.model.meshInstances[1].material.opacity = 0;

            FishModel.model.meshInstances[1].material.update();

it doesn’t work ;_;

9

Can you share a repro project?

10

I am not sure what happened…I got it working now. It wasn’t working inside a settimeout…weird…anyways, thanks. How can I make a quick tween to fade in from 0 to 1 now?

11

A quick question regarding the opacity change via setMaterial:
I’m setting the opacity
entity.render.meshInstances[0].material.setParameter('material_opacity', 0.5);
and it works well (ofc blendType is pc.BLEND_NORMAL).

But setting opacity on an entity does change the opacity on all other entites that use the same material.
Is it supposed behavior? As far as I remeber, setParameter would only affect that particular entity? Or am I wrong and I should use material.clone() on each entity?

12

Yes, that is expected behaviour as they are all sharing the same material.

This method updates the shader uniforms which is considered private API at this stage so may change/break with an engine release.

I would use setParameter only if you need batching support.

1 Like
13

I guess it’s something like this: mymodel.tween(FishModel.model.meshInstances[0].material.opacity).to(1) ? But I need to call update as well, how?

14

@yaustar how can I tween the opacity? My code is not working. Thanks!

15

In that case, as @Marks mentioned above, if I’d like to tween the opacity from 0 to 1, should I call material update in each frame?
material.opacity = currentTweenValue;
material.update();

Doesn’t it create additional overhead by reloading the shader every frame? I’ve been always thinking setParameter is much more fast way to do the same job :slight_smile:

16

@Igor that’s a good point. No material.update() will not recompile the shader if it’s not required, but yes it has an overhead if you are calling it per frame.

I’d suggest you use setParameter for something like that, much like this example project does:

https://developer.playcanvas.com/en/tutorials/fading-objects-in-and-out/

1 Like
17

@Marks to tween a single value you need to use a different structure, check the example on the playcanvas-tween repo on how to do that:

// some object with a property called 'value'
var data = {
    value: 0
};

// create a new tween using pc.Application#tween
// passing another object as the target. Any properties
// that are common between the target and the source object
// will be tweened
app.tween(data).to({value: 1}, 1.0, pc.BackOut);
1 Like
18

For example:

const dataWrapper = { opacity: 0 };
this.app.tween(dataWrapper)
    .to({opacity: 1.0}, 1.0, pc.Linear)
    .on('update', () => {
          //entity is your entity, be aware of using render or model components
          entity.render.meshInstances.forEach(mi => {
               mi.material.opacity = dataWrapper.opacity;
               mi.material.update();
           })  
     })
     .start();
3 Likes
19

What’s weird is that after doing the animation I can’t control the opacity anymore. Even if I set to 0 and call update, it won’t work.

20

Hi @Marks,

Based on the issues you’ve described so far, it sounds like you’re running into a scope issue when attempting to tween the opacity. This also explains why it didn’t work for you inside of a timeout. Could you post the code you’re using to tween the opacity?

1 Like