How to Create a Sphere with Only Edges

Hello,

I’ve spent several hours trying to find the desired outcome, but I couldn’t find it anymore, so I’m asking here…

This is the desired result.

I want to place the camera in the center of this mesh and look out from the inside. Also, the sphere should rotate.

This is the first result.


The code is very cleanly designed, but there is a diagonal line in the middle, which is not the design I want.

This is the second solution.


I got the design I wanted, but the mesh is managed separately, so rotation is not possible.

What I want is to use MeshBuilder Sphere to create concise code that achieves the desired design and can rotate.

1 Like

Two ideas.

  1. Create a sphere in blender that only uses square faces instead of triangles and then use the wireframe rendering method.

  2. Use your custom mesh code but with the linesytem meshbuilder that will create a single mesh from your points matrix that you can rotate and transform normally.

1 Like

Hello :slight_smile:

It’s because OpenGL is using only triangles, and the current Wireframe Shader is drawing them as is.

Then it’s a perfect match for a nice Node Material Editor game ! :grin:


Modulo on Y coordinates, applied on a LessThan boolean :



Then do the same but instead of the Y coord, take the horizontal angle.
This is acheived easily using the arctan2 function along with X and Z coordinates, applied as well on a LessThan boolean :



Finally, merge both in a MAX node :


Here is the Node Material if you want to edit
And here is the Playground loading this custom material

++
Tricotou

9 Likes

awesome…

Example model of wireframe model exported with blender.

Babylon.js Playground (babylonjs.com)

The .obj is used only because it is better embedded in the Playground.

Steps in blender:
Edit Mode => Select All => Delete faces only => Check Export loose edges in export screen => Export.

3 Likes

how about this way?

		const sphere3 = MeshBuilder.CreateSphere('sphere', { segments: 8, diameter: 2 }, scene);
		sphere3.position = new Vector3(0, 0, 0);
		sphere3.enableEdgesRendering(0.9999);
		sphere3.edgesWidth = 2; 
		sphere3.edgesColor = new Color4(1, 1, 0, 1); 

it is bad trick?

Use GreasedLineTools with GreasedLine. This way you can utilize all the available features of it as variable colors, widths, textures, PBR material, etc…

https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/param/greased_line

PBR example:

4 Likes

Always making it pretty @roland !!!

1 Like

Thank you @sebavan ! :heart_eyes_cat: