How to make a slanted cube using vertices

Questions
1

how to make a slated cube like minecraft water side

https://playground.babylonjs.com/#9LGXGJ#2

example

2

Well first hello and welcome!!
Just FYI, Minecraft is actually using babylonjs :wink:
https://classic.minecraft.net/

From this very forum:

1 Like
3

its nice good luck

4

@Amine_Assine … did you have question?

Are you ASKING how to make water slide voxel?

I see no question marks in your post or title, but you ARE talking in “Questions” forum.

It seems… each “water voxel” needs to analyze what type of non-water voxel… is on ALL sides and UNDER where water should be placed.

It seems… to properly “shape” a water voxel, the program must study the “environment” AFTER the mouse click.

Sometimes the water must be a STEEP angle, and sometimes a shallow angle. Sometimes water must turn FULL corner, sometimes HALF corner, sometimes go straight.

(Although not invented yet, sometimes the water must “go-around” a rock/stump/pole in river.) :slight_smile:

So, it seems that building/placing a water voxel… is a “dynamic” (smart/AI) operation. After the click-to-place, the “under-structures” (steepness and run-distance) and “side-structures” (straight, turns, width, etc) of the neighboring NON-water… must be carefully measured.

After the “sub-structures” of the water-slide “step” is precisely studied by the computer/program… THEN the proper water shape can be created by the computer/program… and placed atop/within the containment sub-structure.

What I mean by “containment sub-structure” is… the “banks” and “river bed” that the water is to travel-thru or travel-across. The computer/program must know the shape (drop-angles & turn-angles) of the “river bed” or water-slide “frame”… and THEN it can properly build the correct water shape for THAT portion.

It seems like this activity would be a challenging programming task. In real life, the water follows the precise shape and contours of the water container. This is how the water sets its geometric shape.

Yes, the water mesh shape can be (and is) done with mesh vertices, but only done AFTER the water’s container is precisely measured and well known.

https://www.google.com/search?q=minecraft+water+slide&source=lnms&tbm=isch

See, some slides are steep, some non-steep, sometimes curved, sometimes straight, sometimes narrow, sometimes wide, sometimes water is deep, sometimes shallow, sometimes even a waterfall.

Each “step” of the water slide or river… is “custom made” AFTER testing the shape/style of the water’s container/slide-frame/riverbed.

You will need to be a good programmer, I think. There seems to me no easy/simple way.

Water is a “coating” over blocks, and blocks can be MANY/ANY shape(s), so the water must ALSO be many/any shape(s). In a way of speaking, the water shape must be “smart”. It must carefully study its container, and then create itself exactly correct for the container.

Babylon “rays” might be able to “3d-scan” the shape/contour(s) of the container where the water will be placed. First the click, then the program scans (shoots/casts many rays), then program gathers all info from the ray-casts, and THEN… the program knows how to shape/place the water. Complex work, perhaps.

It might be wise to carefully web-study “ray casting” and its MANY uses for computing.

These things are my opinions and guesses. I am not sure if you wanted my opinion, but I say it. :slight_smile: I am not an expert.

I’m not sure if you are asking a question, or perhaps trying to teach us/others how to do it. I THINK you are asking how to do it, though. I think a simple answer is… IT IS VERY DIFFICULT, but certainly quite possible. Stay tuned… perhaps more comments will come soon.

5

Probably the simplest way is with extrude polygon, eg Babylon.js Playground

6

closes thing i found but i can get it to slant down like minecraft water
https://playground.babylonjs.com/#3CZLNK#5

7

I think i figured it out
https://playground.babylonjs.com/#3CZLNK#6

1 Like
8

did it ok how do remove the bottom part lol
https://playground.babylonjs.com/#3CZLNK#7

1 Like
9

Hi again, AA.

You don’t NEED TO start with a box. You can do plotting… from/onto a “blank mesh”:

https://www.babylonjs-playground.com/#1UHFAP#266

The entire #1UHFAP “series” of playgrounds (all 266 of them) are mostly examples of free-plotting.

Here’s another in that series. https://www.babylonjs-playground.com/#1UHFAP#60

Build any shape. No need to start-with a (standard) BJS 24-vertex box. Many of these examples… are 8-vertex… perhaps better performance and easier to plot-with and play-with. You may want to learn the difference between “flat shaded” and “smooth shaded” rendering.

I think “flat shaded” requires more vertices, and that is why default BJS boxes are 24 vertices. I am no expert. Three vertices at each corner of box… means there can/will be 3 lighting-normals at each corner, too. Three (3) lighting-normals at each corner… is required… in order to make the three box-sides that intersect at the corner… different colors (differently shaded). Having all three sides of the box that intersect at a corner… each be different colors/shades… is what causes the “flat shaded look”.

Badly explained… sorry. Only one lighting-normal is allowed per vertex point, so we place 3 vertex at same corner-place… so we can have 3 lighting-normals there, and then we can accomplish flat-shaded. Without having 3 vertices at the box corner, flat-shading is impossible, and only smooth-shading is possible. (some examples here)

Look at the edge between point #1 and #2… here. See how it is difficult to “see” that edge? It is because it is smooth-shaded-rendered. If it were flat-shaded-rendered, the color on each side of that edge… would be somewhat different… and our eyes could see/clarify the edge… better.

Anyway, these are good playgrounds to experiment-with 3D plotting. Yours is fun/good, too. You made wise-use of GUI 2d vertex labels… nice job! I used a different method… with the “boxify” function. GUI 2d had not yet been invented/programmed when I created boxify() long ago. :slight_smile: Have fun!