[SOLVED] Render line on front

Hi guys,

is there a way for the line to be in front of all objects usando o app.renderLine()?

Hi @vgupgrade,

You can assign a different than the default/world layer to your line that renders on top of everything. That can be the UI layer as well.

// Render a 1-unit long white line into the world layer
var start = new pc.Vec3(0, 0, 0);
var end = new pc.Vec3(1, 0, 0);
var color = new pc.Color(1, 1, 1);
var worldLayer = app.scene.layers.getLayerById(pc.LAYERID_UI);
app.renderLine(start, end, color, {
    layer: uiLayer
1 Like

did not work :frowning: , and all buttons are gone.

var LineCreate = pc.createScript('lineCreate');

LineCreate.attributes.add('line', {
    type: 'boolean',
    title: 'Line status',
    default: false

LineCreate.attributes.add('targetFrom', {
    type: 'entity',
    title: 'Target From',

LineCreate.attributes.add('targetTo', {
    type: 'entity',
    title: 'Target To',

// initialize code called once per entity
LineCreate.prototype.initialize = function() {
    this.lineColor  = new pc.Color(1,1,1);
    this.worldLayer = pc.app.scene.layers.getLayerById(pc.LAYERID_UI);

// update code called every frame
LineCreate.prototype.update = function(dt) {
        this.app.renderLine(this.targetTo.getPosition(), this.targetFrom.getPosition(), this.lineColor,{
            layer: this.worldLayer


You are right, I gave it a try on a new project and I am getting the same behavior. @mvaligursky and idea how line rendering is handled here?

In general renderLine() is considered an API meant for debugging primarly. Normally you would be creating lines using the new Mesh API.

Check this post for more info:

I have a PR on this being fixed (one of the bugs mentions this)

But we’re still discussing API changes, so this is not finished yet.

At the moment, if you add line to a layer, it simply removes everything from the layer.
Workaround is to create a new layer that sits on top, which is only used to render lines.

1 Like

That makes sense, sadly it doesn’t seem to work as well:

:frowning: I added a new layer, but it insists on staying behind,.
where am I wrong?

try depthTest this way (and whichever layer)

app.renderLine(start, end, color, {
    layer: uiLayer,
    depthTest: true

Setting depthTest: false has the desired effect, many thanks @mvaligursky.

    var start = new pc.Vec3(-2, 0.5, 0);
    var end = new pc.Vec3(2, 0.5, 0);
    var color = new pc.Color(1, 0.5, 0.0);
    this.app.renderLine(start, end, color, {
        layer: this.app.scene.layers.getLayerByName('Lines'),
        depthTest: false


Hi guyssssss, thanks.

Hi @vgupgrade! Please don’t share a link without explanation. Your link doesn’t seem to work and leads to a blank page. I have therefore removed the link.