I’ve been reading this thread ([SOLVED] Curved line rendering - #6 by LeXXik) 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?
Can it be done with js in 3d somehow, and authored using entitties in playcanvas hierarchy being the control points? is this implementable? three.js webgl - geometry - spline extrusion
Or is translating it to 2D space and coordinates helpful?
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?
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?
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?
export a long cylinder tube with skinned bones inside it from Maya or similar, then you can change transforms of those bones to change its shape. Animated textures on top sounds perfect. You could even generate a mesh using function above, and and add bone info to it from code, but that might be bit more tricky.
if you need to animate connection going from A to B, to move to C to D, you could use morphing as well. http://playcanvas.github.io/#graphics/mesh-morph-many.html uses cylinder generated with function mentioned above, and creates morph targets that expand disks out of it.
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.
I do not need to change the lines in realtime no, they stay the same.
So that cylinder creation code could be used to create a cylinder not only with 1 straight segment but along a spline/polyline aswell?
Bones could be useful, would they show up for manipulation in the viewport? or just editable via code?
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
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:
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?)
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?
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.
Perhaps this effect could be made by animating the texture offset on the tube instead. Would that be better from a performance viewpoint?
(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.
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?
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.
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?
However, it seems to work without adding the graphics layer transparent + opaque to the Render order at all, also.
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).
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.