Outline a 3D mesh

[Unwarped]

Hey again.

I was wondering does Pixi3D have a built in way to outline a 3D mesh? I'm trying to outline my animated 3D mesh characters for example when hovering with mouse.
I have succeeding in tinting by changing material.baseColor.

Also does changing colors have a .set() method I can't seem to find it?
For now I'm using:
.material.baseColor[0] = 0; .material.baseColor[1] = 0; .material.baseColor[2] = 1;

Just curious. Many thanks!

[Unwarped]

I just wanted to add:
In 2D I would use this to achieve the outline effect but it makes everything go invisible in 3D.

const outlineFilter = new PIXI.filters.OutlineFilter(2, 0x00FFFF);
this.filters = [outlineFilter];

[jnsmalm]

Hi!

Maybe you have Pixi3D version which doesn't have the color class. If you use the latest version you can do:

material.baseColor = new PIXI3D.Color(0,0,1)
material.baseColor.r = 1

There is a quite easy way to do the outline effect by using PostProcessingSprite (which is almost a regular PixiJS sprite). You render the objects you want to have the outline effect on to the PostProcessingSprite and then add whatever filters you want. Here is an full example (I just changed the mesh-interact example in the repo a bit).

let app = new PIXI.Application({
  backgroundColor: 0xdddddd, resizeTo: window, antialias: true
})
document.body.appendChild(app.view)

PIXI3D.LightingEnvironment.main.lights.push(Object.assign(new PIXI3D.Light(), {
  x: 0, y: 0, z: 3.0, color: new PIXI3D.Color(1, 1, 1), intensity: 15,
}))

class Interactable extends PIXI3D.Container3D {
  constructor(x, y, z, scale, eulerAngles, r, g, b) {
    super()

    this.mesh = this.addChild(PIXI3D.Mesh3D.createCube())
    this.mesh.material.baseColor = new PIXI3D.Color(r, g, b)
    this.mesh.scale.set(scale)
    this.mesh.rotationQuaternion.setEulerAngles(eulerAngles.x, eulerAngles.y, eulerAngles.z)
    this.mesh.position.set(x, y, z)

    // The picking hit area is set to enable picking interaction.
    this.mesh.hitArea = new PIXI3D.PickingHitArea(app.renderer, this.mesh)

    // To enable a mesh to be interacted with, "interactive" needs to be set. In 
    // this case "buttonMode" is also set to have the cursor changed to pointer.
    this.mesh.interactive = true
    this.mesh.buttonMode = true

    this.mesh.on("pointerup", () => { this.mesh.scale.set(scale) })
    this.mesh.on("pointerdown", () => { this.mesh.scale.set(scale * 1.2) })
    this.mesh.on("pointerout", () => { this.mesh.scale.set(scale); app.stage.addChildAt(this, 0) })
    this.mesh.on("pointerover", () => { outlineContainer.addChild(this) })
  }
}

app.stage.addChild(
  new Interactable(0.8, 0.3, 0.5, 0.5, { x: 50, y: 145, z: 45 }, 1, 0.5, 0))
app.stage.addChild(
  new Interactable(1, 1.8, 0, 0.6, { x: 0, y: 45, z: 45 }, 1, 0, 1))
app.stage.addChild(
  new Interactable(-1, 1.5, 0, 0.8, { x: 50, y: 125, z: 115 }, 1, 1, 0))
app.stage.addChild(
  new Interactable(0.8, -1.0, -1.0, 1.5, { x: 40, y: 45, z: 120 }, 0.5, 0.5, 1))
app.stage.addChild(
  new Interactable(-0.7, -1.0, 1.0, 0.4, { x: 240, y: 85, z: 20 }, 1, 0.5, 1))

const outlineContainer = app.stage.addChild(new PIXI.Container())

let postProcessingSprite = app.stage.addChild(
  new PIXI3D.PostProcessingSprite(app.renderer, { objectToRender: outlineContainer }))

postProcessingSprite.filters = [new PIXI.filters.OutlineFilter(5, 0xff00ff)]

[Unwarped]

Thank you jsnmalm for your reply!

Yes I see what you mean about the new PIXI3D.Color(0,0,1). I wasn't sure if I should be doing new each time I wanted to change the color. For now I switched it out for something like this:

function setColor(object, r, g, b) { object.r = r; object.g = g; object.b = b; }

Very cool example! I like how you use the postProcessingSprite to utilize the PIXI 2D filters.

Instead of moving between containers I am using postProcessingSprite.renderObject(selectedModel) which works nicely. Otherwise it draws on top of everything unfortunately. I'm playing around with parenting the postProcessingSprite to the highlighted model itself to get positioning right. Might take some more adjusting still.

Does postProcessingSprite have to be fullscreen? I am using it to render tiny chracter models in an orthographic view 128 x 256 max character pixel size (isometric game prototype).

Again thanks for all of your help.

[jnsmalm]

If you want to place a PostProcessingSprite at the same position as a 3d object you probably want to use Camera.screenToWorld or Camera.worldToScreen methods.

PostProcessingSprite doesn't have to be fullscreen, you can do:
let sprite = new PostProcessingSprite(renderer, {width:128, height:256})
Just note that if the width and height aspect ratio doesn't match the fullscreen aspect ratio, you need to set the aspect of the camera you are using like camera.aspect = 128/256

[Unwarped]

Thanks a lot jnsmalm! I appreciate your help. Keep up the good work with PIXI3D! Really enjoying working with it.