Rendering lines in 3D space

Hi,

I need to visualise a data flow between entities in my 3D miniworld project. Possibly along the lines of this:


image
image

I’ve been reading this thread ([SOLVED] Curved line rendering) and tested the Bezier.js test that uses renderLine by @will, seems ok. However, I do need more flexibility, like adjusting line thickness, perhaps adding a glow, animating a small light effect along the curve etc.

What are my options here?

  1. Can it be done with js in 3d somehow, and authored using entitties in playcanvas hierarchy being the control points? is this implementable? https://threejs.org/examples/webgl_geometry_extrude_splines.html
  2. Or is translating it to 2D space and coordinates helpful?
  3. Or should I just have it modeled in 3D content package and imported as FBX, and animate the texture etc.

Anyone else dealt with this issue and have a thought on what road to take?

best regads

Björn

You would like need to generate your own line mesh for this unfortunately. We do have an API to create meshes dynamically (http://playcanvas.github.io/#graphics/mesh-generation.html).

The out-of-focus blur post effect would be difficult to acheive. Three.JS does it pretty with “cinematic camera” out of the box, but in PlayCanvas you either have to write that post effect yourself or use Leonidas’ post effect. His effect works pretty well, but I haven’t seen anyone acheive that effect in PlayCanvas with good performance.

The DOF-effect is not part of what I’m after here though, that just happened to be in those pictures. I’m more after visualizing an information flow between nodes somehow, in 3D.

@yaustar, line mesh you say, I see. That example you posted creates the floor mesh dynamically and deforms it aswell it seems?

The example I posted was for mesh generation which can be used to create a line mesh and/or a cylinder based on an array of points.

I see. I assume there are neal performance gains from doing it that way, compared to modeling those meshes in let’s say Cinema4D and importing them? perhaps combined with animated an empty node along the spline, bring that animation in via FBX and attaching a billboard plane with emissive halo/glow texture?

There are few options here. Do you need to animation those lines (move their positions each frame) or not?

If you need this to run on PC or with not large number of connections (100 or so), I’d go for option 2, if you need tons of these, option 1 could be done much more performant.

5 Likes

Ok cool, thanks for that elaboration!

I do not need to change the lines in realtime no, they stay the same.

  1. So that cylinder creation code could be used to create a cylinder not only with 1 straight segment but along a spline/polyline aswell?

  2. Bones could be useful, would they show up for manipulation in the viewport? or just editable via code?

  3. That morph stuff looks awesome. I’m thinking perhaps it could be made so that my “splinewrapped” cylinder could have a lump moving along it much like a cartoon giraffe would have along it’s throat/neck after swallowing something too big, or a snake with pig inside if you know what I mean :smile:

I started of my experiment by importing some tubes from C4D, and then I animated a node along one of them. In playcanvas I then tried attaching an entity to that animated node. Looks ok for a first test.

Some questions on this:

  1. What are the performance difference if I animate a mesh/sphere/something along the path compared to a single plane with a billboard script making it lookAt the camera? (how does it scale if we’re talking 20 of these lines?)
  2. I shaded it using the physical shader from the editor with an emitter color, but set opacity to Screen. Is this an ok optimized way, or should I use another shader for these semitransparent flat things?
  3. The duration of this animation is 3 seconds. I’m not sure how to change that. I have 50 frames in the C4D project, the animation spans over the first 25 of those and the FPS is set to 25 in C4D. What governs this value of 3 seconds? I tried increasing changins all those parameters in C4D but still ended up with 3s.
  4. Perhaps this effect could be made by animating the texture offset on the tube instead. Would that be better from a performance viewpoint?

image

(This should run on both mobile and pc in the end. )

if all you need s about 20 of these lines, I’d go 3d meshes … you can even model them in Maya and just export them as meshes and bring them in, that’d be fast on mobile as well. Physical shader should be ok as well. Scrolling texture is super cheap, so use that if possible.

Not sure about the animation issues.

1 Like

Thanks! I’ve tried using Tween library with this code and a Mask texture for the opacity:

image

this.app
.tween(material.opacityMapOffset)
.to(new pc.Vec2(0,1), this.duration, pc.QuinticInOut)
.loop(true)
.on('update', function () {
    material.update();
    })
.start();
    

2020-09-14_16-15-23

Works like a charm. Should I be worried updating the material every frame like that? Offset has no effect if I don’t though.

One more question: Those titles/captions are made using the UI Text element and an Image element. They seem to affect the depth in conjunction with the data flow splines in a not so nice way. How can this be remedied?

2 Likes

Are they on the UI layer? If so, you may need to either move them to a layer that renders before the power lines or move the power lines to a layer that renders last.

2 Likes

Thanks @yaustar, I hadn’t even considered layers. Wasn’t too familiar with the feature at all.

I had to move the Titles from UI to the World layer AND create a new Graphics layer where I put the splines. I also added both Opaque and Transparent option to Render order chapter in Settings. Does that make sense?
image

image

However, it seems to work without adding the graphics layer transparent + opaque to the Render order at all, also.

As long as the Titles are will not be transparent in some way, it be fine on the World layer as the opaque layer gets rendered before the transparent.

Hmm, they are slightly transparent.

You may get some issues based on the camera angle and the order that they get rendered. Looking at the example GIF, you may want to render the lines last (Lines layer opaque after Skybox opaque. Lines layer transparent after World transparent).

gah. I’m going mad here. I can’t get my lines to appear anymore. I’m trying this:

Graphic Titles moved to World layer (both background and text UI entity)
Lines Model (fbx/json) moved to DataLines layer.

Looks good in Editor: image

Lines not even visible in Launch: image

Render order:

image

Have they been disabled, moved, scaled at runtime?

If you revert your changes, do they re-appear?

I’m not moving them or anything like that. I’m only adding a material and animating the opacity texture of that material. But even when I disable that script, and just add a basic transparent material and Blend mode Alpha, they do not appear when placed on the DataLines layer. Only if I place them on World layer aswell (or exclusively), they appear.

Is the layer added to the camera to render?

1 Like

hah. NOW it is :smiley: :man_facepalming:

image

Thanks :wink:

1 Like