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.
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).
@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.
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.
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.
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.
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.
Good luck in your pursuit. Hope you find an acceptable solution.
EDIT
Yet more ways to quad grid a sphere.
Take a cube, grided like this
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.