[SOLVED] OutlineRenderer and morphInstance

Help & Support
,
1

I write an app with PlayCanvas for viewport, where I need to put some procedural objects on the scene, mainly just with dynamic size. My first approach was to use shape keys and glb files, then manipulate them with morphInstance. It works fine for simple rendering, but it looks like OutlineRenderer was ignoring it:

image
image522×785 59.6 KB

The black model (PC monitor) is rendered correctly, but the outline is from the small base object, where morph keys are equal to 0 (I use shape keys where 0 means 10cm, 1 means 110cm, easy to calculate and manipulate).

How I init the Outline Renderer (it’s wrapped with Vue.js):

const outlineLayer = new pc.Layer({ name: 'Outline' });
app.scene.layers.push(outlineLayer);
const outlineRenderer = new pc.OutlineRenderer(app, outlineLayer);

watch(() => scene.selected, (selected) => {
	outlineRenderer.removeAllEntities();
	for (const entity of selected) {
		outlineRenderer.addEntity(toRaw(entity) as pc.Entity, new pc.Color(0, 1, 1, 0.1));
	}
}, { immediate: true });

app.on('update', () => {
	const immediateLayer = props.app.scene.layers.getLayerByName('Immediate')!;
	outlineRenderer!.frameUpdate(camera, immediateLayer, false);
});

And how I modify the shape keys:


screen.model!.asset = containerAsset.resource.model!;
const meshInstances = screen.model!.meshInstances;

watch(() => props.item, (data) => {
	// some code, providing weights
	(meshInstances ?? []).forEach((meshInstance) => {
		if (meshInstance.morphInstance) {
			const morphInstance = meshInstance.morphInstance;
			morphInstance.setWeight('display_width', weight[0]);
			morphInstance.setWeight('display_height', weight[1]);
		}
	});
}, { immediate: true });

It looks like meshInstances wasn’t used to render the outline

What can I do with that? Will I need to take a different approach with dynamic sizes with 9-segment objects? Actual animation?

2

I see the problem here, and will try to fix it:

3

fix here, we should be releasing it in the next few days

4

Thanks, I don’t know why I wasn’t looking for it there, just googled it and found nothing.

5

@ Jakub_Konieczny
Is the OutlineRenderer-Object a new build in Outline-Renderer?
Does it work on all devices without any performance issues?
I have seen this. What’s the difference?
Or in other words: What’s best practice to show outlines?

6

Is this an Engine V2 feature?
Can’t find any hint in the docs.
And can’t find OutlineRenderer in the pc-Object.
I’m confused.

7

Here’s the example using the outline-renderer: PlayCanvas Examples

The script itself is here:
the functionality is part of the engine, see how the example creates it from the script: const outlineRenderer = new pc.OutlineRenderer(app);

8

Thanks.
Sorry, that’s over my head.

Started a new thread here.