Assigning colours to lines/curves in Speckle Web Viewer

Hi All,

I’m relatively new to the Speckle world. So far Im super intrigued with what it can achieve.

I’m wondering if Speckle is able to assign colour properties to lines/curves received from Grasshopper?

I imported a bunch of lines with their corresponding network analysis colour properties. For some reason, it wouldn’t display the colour on the web viewer.

Not sure if Im doing something wrong?

Any help would be much appreciated.

Many thanks,
Sid

Hi @Siddharth12, it’s not you - it’s us! We’ve heavily optimised things in the viewer for solid “things” but we didn’t have time to roll the same things out for line-based objects.

One (inefficient) solution would be to pipe those curves out (maybe with some easier-on-the-vertex-count-method that does not use circles), and set properties to those extrusions - then things will be able to get nicely coloured.

Thanks @dimitrie for your reply!

Just out of curiosity, will Speckle be rolling out viewing properties for line-based objects anytime soon?

I work heavily with large-scale networks and piping each segment would probably render in crashing. See attached ex of a small file I was able to put on Speckle. It’ll be great if I could also see the network analysis colours to further my cause of web visualization.

Any thoughts are much appreciated.

Sid

2 Likes

Hi @Siddharth12 - looks quite complex, and we can’t wait to make it look even more nice :sweat_smile: We hate to put timing on things, but :crossed_fingers: for 2 months from now.

We’re tracking this here.

1 Like

As a PS, if you’re willing, we’d be happy to give it a go to “pipe” some of those lines if you’ll share a simplified model/defintion with us. Right now, solids are displayed 1000x more efficiently in our viewer than line-based geometry, so i’m actually almost sure it would work :smiley:

Hi @dimitrie Thank you for opening up the issue. Look forward to it being rolled out soon.

In the meantime, I tried piping the curves to mesh for an example network. Works, but unfortunately the colour scheme changes from Grasshopper to Speckle. Is that an internal issue? See attached…
Speckle colours

Original GH colours

Sorry, just being pedantic at this point haha.

Also attached the GH file with internalised data, for your reference.

Speckle_Networks.gh (46.8 KB)

Let me know your thoughts…

Many thanks,
Sid

1 Like

Hi Sid! no worries, looks nice! No worries about the pedantism - it’s legit.

We default to the trendy pink-blue gradient in the frontend, but actually it can be customised :slight_smile: We didn’t add this yet in the frontend, as it would’ve been quite a bit of extra legwork with allowing people to choose colours, etc.

Nevertheless, this is relevant when you want to colour things by arbitrary numeric props - which seems the case from your screenshot.

We’ve got a tutorial on how to set specific materials to objects from gh:

Maybe it can help!

Hi Dimitrie!

I see. Thank you for the information and the following tutorial. I’d actually followed that tutorial to learn how to add colours before.

Anyway, will look forward to the line-object properties update in the near future.

Thanks,
Sid

Ah, then something went wrong - and i think i spotted it. The property should be renderMaterial, not renderingMaterial - maybe it’s a quick fix?

1 Like

Sorry, Dimitrie! By “property” do you mean the component to use in GH? I’ve used the following component in GH to create the material.

image

And set the materialdiffuse in Speckle to show the colours.
image

Is there a step I’m missing?

Sid

1 Like

The property on the speckle object should be named renderMaterial instead of material, and then it will be picked up automatically and used.

The last step that you did is not needed. It is another feature that colors objects in the scene dynamically at viewing time based on any property. (in this case, it colored based on the numeric property material.diffuse, which is the int32 representation of a color - it was not decoded as a color and it just mapped the values on a gradient)

1 Like