3d surface images

[SMcNeill]

@MasterGy Hey MasterGy, how about you do us the world's simplest tutorial in 3d graphics.  Let's say we have a 2d graphic of a 3x3 grid, which would produce the floor layout to a square room.  Can you show us how you'd turn that 2D "map" into a series of cubes which would be placed across the screen in various points?

The Square starting at (0,0) (top,left) would be placed independently to the top, left of the screen, so we could see how that (0,0)-(1,0)-(1,1)-(0,1) series of 4 coordinates would turn into the X/Y/Z of 3 dimensional space.  Let the user hit the space bar, and then do the same thing for the to the square next to it, which would be from (1,0)-(2,0)-(2,1)-(1,1), and how that translates to 3D space.

Personally, I think something as simple as that would make a GREAT breakthrough point for a lot of folks with 3D graphics.  Once people understand how to get those 3D coordinates, then rotation and such can be added, but going from the 4 2-D points to the 8 3-D points, (I think it's 8 of them, isn't it, for a cube?) is probably the hardest point for people to get sorted out.

Honestly, I'd love for us to have a whole series of 3D related tutorials, where one new concept is added at a time, without it all overwhelming the users all at once, but I also realize others might not have the time to devote to such a number of posts.  A post for 2D to 3D.  A post for adding rotation on the cubes after that.  A post for static cube, but the "player" moving around the cube/grid itself.  A post for adding textures via maptriangle so we don't just have plain line walls, ceilings and floors.  And finally, a post for detecting collision in that 3D plane...

It's probably more than anyone would want to sit and work up, one after the other, but a fellow can dream can't he?  Especially around Christmas time? 

I have already tried many times how to make the 3D thing as understandable as possible.
That's why I made this:
https://qb64phoenix.com/forum/showthread.php?tid=896

I didn't overcomplicate it on purpose, I just included the essentials.

Indeed, good documentation would be useful.

3d is not very complicated, it's just very hard to explain. you are right, it should be made visually understandable. I'm happy to help. Unfortunately, I don't understand what you meant by the 3x3 cubes, even though I've read it many times. Please write it again.

Let's see if this helps to explain the 3x3 grid type concept:

Code: (Select All)

Dim Grid(1 To 3, 1 To 3) 'a 2d grid to hold a map
'This would be the basic grid layout for the outer walls.  (Think of just a box around the 3x3 area.)
' _ _ _ '
'|    |'
'|    |'
'|_ _ _|'


'Start with the outerwall itself, as above.  (Ignore those spaced gaps above, as they're just placeholders for my inner lines, as below.)
'Then showcase how to draw one cube inside that 3x3 grid at a time.
'Top Left:

' _ _ _ '
'|_|  |'
'|    |'
'|_ _ _|'


'Top Middle:
' _ _ _ '
'| |_| |'
'|    |'
'|_ _ _|'

'Top Right:
' _ _ _ '
'|  |_|'
'|    |'
'|_ _ _|'

'And so on for the middle row and then the bottom row.

DefLng A-Z
Screen _NewImage(800, 600, 32)
$Color:32

For y = 0 To 2
    For x = 0 To 2
        DrawCube x, y, x + 1, y + 1
        Sleep
        Cls
    Next
Next



Sub DrawCube (px1, py1, px2, py2) 'passed x1, passed y1, passed x2, passed y2
    X_Left_Limit = 100 'Our drawing area here is from 100,100 to 500,500 **FOR THE FLOOR**
    X_Right_Limit = 500 'Walls are 100 pixels tall, so we're actually drawing from 100,0 to 500,500.
    Y_Top_Limit = 100
    Y_Bottom_Limit = 500
    X_Size = X_Right_Limit - X_Left_Limit '400 wide draw area
    Y_Size = Y_Bottom_Limit - Y_Top_Limit '400 tall draw area

    GridWidth = 3: GridHeight = 3 'how much of the grid that we're displaying at a time -- a 3x3 grid


    X_Line_Size = X_Size / GridWidth
    Y_Line_Size = Y_Size / GridHeight
    Z_Line_Size = 100 'The height of our "walls".

    'The front side is easy:
    x1 = px1 * X_Line_Size + X_Left_Limit
    x2 = px2 * X_Line_Size + X_Left_Limit
    y1 = py1 * Y_Line_Size + Y_Top_Limit
    y2 = py2 * Y_Line_Size + Y_Top_Limit


    'Line (x1, y1)-(x2, y1), Red 'top line of floor
    'Line (x2, y1)-(x2, y2), Red 'right side of floor
    'Line (x2, y2)-(x1, y2), Red 'bottom side of floor
    'Line (x1, y2)-(x1, y1), Red 'left side of floor
    Line (x1, y1)-(x2, y2), Red, BF 'the whole floor at once. :P
    'The top would just be:
    z = Z_Line_Size

    'Line (x1, y1 - z)-(x2, y1 - z), Blue 'top line of floor
    'Line (x2, y1 - z)-(x2, y2 - z), Blue 'right side of floor
    'Line (x2, y2 - z)-(x1, y2 - z), Blue 'bottom side of floor
    'Line (x1, y2 - z)-(x1, y1 - z), Blue 'left side of floor
    Line (x1, y1 - z)-(x2, y2 - z), Blue, BF 'The whole top at once. :P
End Sub

Now, this is just looking directly onto the "cube", so all we can see from our perspective here is the front side and the top.  <-- This, I think, would be the place to start a series of tutorials for 3D graphics.  Get folks used to the concept of "Well, you know where the floor is going to be, the top is just -z pixels above that!"  Once you have your floor and your top, it's rather easy to take those 8 coordinates and imagine where each "face" or side of the cube is going to be after that.

The next part here would be to introduce rotation of the whole area, by say 45 degrees.  Then you can show 3 sides of the cube at a time -- top, front, and left/right side, depending on direction of rotation.  Start with just that static value of 45 degree rotation, introduce it into the code by itself, and pinpoint where it'd go and what it'd look like in relation to everything. 

The next tutorial after that would be to actually introduce a variable for the rotation.  Let the user use the left/right arrow keys to rotate the angle from -60degrees to +60degrees or so, just to showcase how the front side turns from left to right.

If you can kind of see what I'm thinking here, for a series of slow introductions to 3D?  Just one building block at a time, until folks can finally build a whole 3d house which they could walk through with the keyboard and admire.