BabylonJS MeshLine - a port of THREE.MeshLine

Demos and projects
81

This unfortunatelly doesn’t solve the problem because core/GreasedLineBuilder creates and assigns the material automatically to the mesh based on the pbr: boolean option value, so there will be still a materials package dependency in core. :frowning:

82

@roland Yup I am mostly thinking of recreating your modification of PBR in either material plugin or built in which prevents the need of customPBRMaterial.

Can you point me back at your custom pbr material so that I could see how to migrate it ?

1 Like
83

I will rewrite it as a material plugin then, it seems to be the best choice. I’ve planned to get familiar with the material plugin anyway :sunglasses:

No need to steal your precious time for now. :face_with_monocle:

Thanks!

2 Likes
84

I love the attitude !!! Please do not hesitate to pick at me or @Evgeni_Popov if you need anything !!!

This feature will be awesome !!!

1 Like
85

I already have the material plugin, I upgraded BJS to 5.43.1 and wanted to make some test but this started to happen:

image
image1268×84 22.1 KB

Any clue?

EDIT: and it seems that some React related packages are messing with my Vue code :smiley: :smiley: Investigating…

EDIT2: It seems it started to use canvas from React , wtf… :smiley: It is affecting my previously working code as well

image
image1668×128 30.3 KB

1 Like
86

Ohhhh Huggggge !!!

About the first one, @Evgeni_Popov fixed it today I believe, Let s check if @RaananW can publish a new release Wednesday.

About the second I wonder if the first one does not break it all :slight_smile:

1 Like
87

Dude, my whole project is behaving pretty weirdly :smiley: so maybe it’ll be a good idea to wait until:

and check whether this is not really the case:

Thanks!

88

A new version was released a few hours ago. should be fine now :slight_smile:

3 Likes
89

Hello!

Thank you! The first issue is gone but the second one is still bothering me. Any idea how could the React canvas component get into the Vue JSX page?

90

Sorry, no idea!
But i’ll be help to debug it together with you, if you can share a working branch

1 Like
91

Guys, I was trying to get it working the whole weekend :smiley: but something in the vertex shader is still preventing to render anything :smiley: I’ve tested the material plugin just with the fragment shader, the plugin is in place and it’s affecting the material, I’ve visualized the vertex attributes, they seems to be ok, the uniforms as well but still not a single face is getting rendered. Just wanted to let you know, that I am on it :smiley: but fighting and loosing for now… Just one question. @sebavan @Evgeni_Popov PBRCustomMaterial vs Material plugin on a PBRMaterial, do I have to expect differences on the shaders? My vertex shader is working well with the PBRCustomMaterial but produces nothing with the material plugin + PBRMaterial.

Today I will compare the compiled shaders with both approaches and hopefully I will find the issue :metal:

Thank you!

1 Like
92

Thank you, this is very kind of you! :metal: However I will try my old trick at first to create a new project and copy the files one by one from the existing one to the ‘virgin’ one. I am pretty sure I can catch the moment where the problem pops up (I’ve upgraded not just BabylonJS but Node as well so only God knows what is really causing the problem). Anyway, is there a programmer’s god out there? :smiley:

1 Like
93

No, the shader code should be the same.

Perhaps this part of the document can help you identify your problem?

1 Like
94

@roland do not hesitate to share a repro if you need us to have a look

2 Likes
95

i have a Vue project with same issue. there is an express server that uses react server rendering in same project… React is expecting “className”. At least on my side the errors can be safely ignored - i should probably spend some time looking into it!! :smile: does not look Babylon specific though…

1 Like
96

Thanks! I’ve read the docs a few times even before I started coding to get familiar with the plugin system. The good news is that I’ve found the problem (thanks to Spector.JS) - I was not setting one of the ubo’s correctly and now it renders almost good, I am just missing env reflections wtf (EDIT: Seems everything except emissive - normals issue?) :smiley: Working on it.

@sebavan

EDIT: confirmed - now there is an issue with how the PBRCustomMaterial generates shaders and how the material plugin placed on a PBRMaterial generates the shaders if there are no normals provided with the mesh. It’s different. I believe I need to set some outputs in my vertex shader and it will finally start shining :smiley:

3 Likes
97

Got it :slight_smile:

vPositionW, vNormalW

98

@sebavan @RaananW @Evgeni_Popov

Hi there!

So I fixed all the shader related issues in the material plugin back then but I ran into another issue.

You can create a GreasedLine instance like this:

    const mesh = GreasedLineBuilder.CreateGreasedLine(
      'lines',
      {
        points: line,
        pbr: true
      },
      scene
    );

The pbr parameter indicates what material type will the mesh use.

If I need the standard GreasedLineMaterial I do this when creating the mesh:

      mesh.material = new GreasedLineMaterial(
        name,
        scene,
        initialMaterialParameters
      );

If I am after pbr I do this:

      const material = new PBRMaterial(name, scene);

      const plugin = new GreasedLinePBRPluginMaterial(
        material,
        scene,
        initialMaterialParameters
      );

      mesh.material = material;

Now the problem

Later I can access the material on the mesh and change it’s custom properties easily for the standard material type for example:

const material = mesh.material as GreasedLineMaterial;
material.setLineVisibility(0.4);

But in case of PBR:

const material = mesh.material // this will be always PBRMaterial with a plugin on it
material.setLineVisibility(0.4); // this method is on the plugin class not on the PBRMaterial obviously

What is the recommended way to access the plugin on a material? Just to store the plugin for example like this


material.greasedLinePlugin = plugin; // add, so we can access this later
mesh.material = material;

// later

mesh.material?.greasedLinePlugin?.setLineVisibility(0.4);

or do this (should be confusing to alter the material itself)

MaterialPluginManager.getPlugin(instance.material)?.setLineVisibility(0.4);

or create GreasedLinePBRMaterial which extends the PBRMaterial and holds the custom properties and assign this material to the mesh. Put my plugin on this material and creste custom material property setters (forwarders) like this:

public setLineVisibility(lineVisibility: number) {
    MaterialPluginManager.getPlugin(this)?.setLineVisibility(lineVisibility);
}

What’s your opinion?

Thanks a lot!

R. :vulcan_salute:

99

I would suggest something like @Evgeni_Popov did maybe Decals: Add Decal Map support by Popov72 · Pull Request #13562 · BabylonJS/Babylon.js · GitHub ? basically the plugin can extend the material definition when in use ?

1 Like
100

Actually, thank you for your progress, but you still have to work on it. The difference between this effect and three.js is huge