How to create CURVES and Lines in Playcanvas?

Help & Support
#1

Hello,

I am trying to create lines in my project. I created a sandbox to learn how to do it.

LINE
I used the app.renderLine() to create a straight line, but:

  1. I have to put the code in the method .update() otherwise I would not see any line.
    It means that my line is being created every second?
  2. I tried different types: LINEBATCH_WORLD, pc.LINEBATCH_OVERLAY, … but did not see any difference.
    Am I doing right?
  3. Can I change the width of the line?

CURVES
There is a pc.Curve But Is there any example?
I would like to make a curve between 2 points with different angles. I really did not understand how to do it.
Sorry, I am not used to it.

Any help would be appreciated.
regards

PROJECT
https://playcanvas.com/project/438593/overview/sandbox
and the script is TestLine.js

#2

app.renderLine() is mostly for debugging purposes. The way I have done lines in 3D space before is to use a standard box or cylinder and position + scale it accordingly to change length and thickness.

Curves in 3D space is basically be lots of lines. There are ways of using pc.Curve to do so, here is a sample where we have a camera follow a spline path using the pc.Curve to deal with the interpolation between key points.

Drawing a curve would be similar except you would be drawing lines between interpolated points on the curve.

#3

pc.Curve - is single value over time interpolation between keys. It has nothing to do with rendering.
renderLine - is simple debugging purpose feature. WebGL does not consistently provide different width of lines across all platforms. Most platforms support only 1px width.

To make lines - use procedural geometry. Read up in sources and around the places of how to generate procedural geometry.

#4

Hi Max!

Thanks for the explanation.
I have used a cylinder to create lines.
https://playcanvas.com/editor/scene/366841

I will try to check steven answer… because I would like to create a line bended.

thanks for the answer.

#5

Hello steven,

Thanks for your reply.
I will try to create a curve line using your example.
As I am not used to geometry concepts … I believe it will be hard for me.
But I will try.

I will come back to this post if I succedd or not :slight_smile:

thanks again

ps: this is the project I want to use a curve line: https://playcanvas.com/editor/scene/366841