Creating quad sphere

Hi, I need to create a quad sphere with a given size (amount of lines each surface has)

I’d like it to be a mesh, but it would be nice if I could have just a texture (material) of it.

I was trying to create it in such an amazing NME, but I don’t know how to do it. Thanks

EDIT: added example

1 Like

Hello! and welcome to the community!
So you want to generate a texture with quads on it and apply to a sphere?

Can you maybe drop a simple sketch of what you need?

1 Like

Updated, check it out pls

I see! @PatrickRyan should be able to help with his magic mind ;D

Ideally why not doing it with Blender or a DCC tools? That would be far easier

@Dominux, I made a very simple start to a node material for you to learn how to get started. This is what the material looks like on the polysphere:

And it is completely configurable with parameters exposed on the material:

The one important part of the setup is UVing the sphere, which you can see has each face in it’s own normalized range of UV space:

This part is important because it is how we are separating the colors for each of the “sides” by changing the color based on the U coordinate of a particular pixel. We do this with a series of conditional nodes changing the color at each full unit in the U coordinates:

The squares are created simply by setting an integer for the number of squares you want on a “side” and then using a cos block to create a black to white ramp which we then use a smooth step on to create the thickness of the gap in between the squares:

Like I said, this is just the start of the shader. The whole thing is unlit right now, so you will need to bring in lighting nodes for either blinn/phong or PBR lighting. You will also want to create normal detail out of the gaps between the squares as well as add some surface detail to the squares. But this should get you started along that path. Let me know if you have any questions.

7 Likes

Woooooooow

Didn’t expect someone to create it from scratch just for my needs. I mean even it’s easier for you than for me but it’s done job anyway

And you also told me a lot about how it works and what I may need to do next. Unbelievable help, thank you!

1 Like

Didn’t expect to get here so deep help and you to create such similar material. My intentation was creating a spherical goban (game table for the go game). And another thing I need is to interact with the goban by putting stones on points (on lines intersactions), like in original game. But neither by going through the docs about meshes or trying to find any field that stores it’s vertices data in the mesh object I didn’t get info like their coordinates or maybe even their refs to be able to bind new meshes to them.

Below I have my image from Blender. But I can’t use a static mesh/material because I’d like to give players ability to choose the field size (how much lines they wanna have). So, it must be dynamically.

Could you advice me how to put stones on the right places by clicking on it (the same, by debugging I got that it’s possible to track user’s interactions to only mesh)? I saw, that kinda event has coordinates, but I don’t know whether they are a world’s ones or coordinates in the mesh surface. As far as I know for my purposes I need to know at least world’s coordinates and the normal (how to spin a stone around it’s own xyz to make it looks like it’s just located right on the goban surface).

1 Like

@Dominux, there are a few ways to do this, but you will need to determine which trade offs are most important to you. If this is a game board that is always the same (I believe a goban has specific dimensions and number of intersections, but I may be wrong) then the easiest solve is to create your sphere in a DCC tool (blender for example) with null transforms (called empty in Blender) placed in every legal position around your sphere. The null transform is a position, scale, and rotation so it can hold a direction that points along the normal of the surface. Then you simply need to make the placed piece a child of the appropriate null transform and the position and rotation should be taken care of.

If you truly need to dynamically change the number of intersections available, then the DCC route won’t be feasible unless you want to make one mesh for each potential configuration. In that sense, if you are using the shader to set the number of squares, then you will likely need to convert UV space to world space. Since you know the interval of the number of squares in UV space, you can figure out the UV position of every intersection quite easily. Then you need to convert that UV coordinate to a world coordinate using something akin to How to convert pixel/UV coordinates to World Space? - Unity Answers. This is in C#, but you should be able to convert easily to js/ts since it’s pretty straightforward.

You would then need the normal from the mesh at that world position, which you may need to do a ray cast to get. You could simply do this when the player tries to place a piece and cast a along the vector toward the nearest intersection world position and then pick the collided mesh and return the normal at that point. Depending on how you want the UX to feel, it could diverge down a couple of paths like showing the user a legal position for a move by ghosting in a piece as they mouse over an intersection or not showing them anything until they click to place. In each scenario, you would need a slightly different method of when to ray cast or if you should set up the entire board first or ray cast as needed.

I will also kick this back to @Deltakosh at this point for his opinion on either UV to world space or when to ray cast since he would also be a great source for guidance here.

1 Like

Yes, I had the same idea about using a static 3d-objects/materials already created and choosing them accordingly to a player’s choice. But I prefer dynamic ones for obvious reasons, even tho they require more time to create.

1 Like

Here is a more basic approach to your problem, which I found interesting. The PG can stand some optimisation and made more suitable for your use case but I hope it gives you some ideas. I think you should be able to follow the construction. If not ask away.

Click on a cell to place a cylinder.

It is made by mapping a gridded box onto a sphere.

Set boxSize and gridSize on lines 189 and 190

3 Likes

@JohnK Could it be changed to put stones onto vertices instead of faces?

Of the top of my head you could adjust the texture so the lines went through the center of the faces. Won’t have chance to do anything for a week or so.

Or knowing a faceId you can work out the vertex positions and do it that way.

How to do it? I mean where to look at in the docs or examples maybe?

Or knowing which facet triangle, look up in indices and then positions

1 Like

Basically your playground is a polygon, not a sphere.

I mean on low grid size it has so sharp edges

Is there a way to make it a sphere?

Every vertex lies on a sphere by design. Polygons are 2D, polyhedra are 3D.

I do understand that it is not a sphere divided into grid lines like this

however I was following the images in this topic.

Having looked into it further the mathematics of evenly distributing points on a sphere is complicated and hence so is dividing a sphere into a quad grid.

The above PG divides the sphere into near equally distributed points using a simple method and surrounds the points with a circle rather than a quad.

This is from extremeLearning

Further maths of distribution on a sphere here

Good luck in your pursuit. Hope you find an acceptable solution.

EDIT

Yet more ways to quad grid a sphere.

  1. Take a cube, grided like this

image

and map to a sphere so that the white grid lines form horizontal and vertical circles around the sphere and the vertical sides of the cube lie along lines of longitude, you get the following grided sphere

2: Same cube but this time vertical white lines on cube sides and vertical sides are mapped to lines of longitude and lines on top form arcs of vertical circles

Both PG need optimising in terms of code and I have no idea how you would create a texture to form the lines. Just examples of alternative gridding.

1 Like