Coding Challenge #112: 3D Rendering with Rotation and Projection

Показать описание

References:

Videos:

Related Coding Challenges:

Timestamps:
0:00 Introducing today's topic: 3D rendering in 2D
2:08 Let's begin coding!
7:50 Add a projection matrix
12:00 Add a rotation matrix
18:02 Make a cube with 8 points
20:41 Normalize the cube
21:45 Connect the edges
28:09 Add perspective projection
31:36 Conclusion and next steps

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

#3drendering #projectionmatrix #perspectiveprojection #rotationmatrix #processing

Рекомендации по теме

Комментарии

19:00 technically the light source is infinitely far away
19:43 applying the X matrix to the PVector, then applying the Y and Z matrixes is the same as applying a single XYZ matrix. This XYZ is made matmultipling Z with Y and then the result with X. The order matters.
Graphically Z×(Y×(X×V)) == (Z×Y×X)×V

cicciobombo

I really felt the need to learn how to create 3D from scratch for the sake of my own sanity, so thank you again.

ThankYouESM

The way this guy speaks and gestures had me on the edge of my seat throughout the video

hemaangs

I've been a professional developer for like, 3 years now, but this dude is still too much fun and I wish I had found him in college.

wheellan

Not the hero we deserve, but the hero we need

cmanshopdopler

Here is a python version for everyone :P
Make sure you have gasp and numpy

from gasp import *
import numpy as np

#Settings
back = color.BLACK
dot = color.WHITE
linec = color.GRAY
scale = 200
timestep = 0.05
distance = 2

#Dont mess with the ones below

centerx = 0
centery = 0

angle = 0

points = np.array([

[-0.5, -0.5, -0.5],
[0.5, -0.5, -0.5],
[0.5, 0.5, -0.5],
[-0.5, 0.5, -0.5],

[-0.5, -0.5, 0.5],
[0.5, -0.5, 0.5],
[0.5, 0.5, 0.5],
[-0.5, 0.5, 0.5]

])

def draw():

rotationZ = np.array([ #These have to be inside the function because angle will still static when initiailzing.

[np.cos(angle), -np.sin(angle), 0],
[np.sin(angle), np.cos(angle), 0],
[0, 0, 1]

])

rotationX = np.array([

[1, 0, 0],
[0, np.cos(angle), -np.sin(angle)],
[0, np.sin(angle), np.cos(angle)],

])

rotationY = np.array([

[np.cos(angle), 0, -np.sin(angle)],
[0, 1, 0],
[np.sin(angle), 0, np.cos(angle)]

])

projected = []

for v in points:
rotatedY = np.matmul(rotationY, v)
rotatedX = np.matmul(rotationX, rotatedY)
rotatedZ = np.matmul(rotationZ, rotatedX)

z = 1 / (distance - rotatedZ[2])
projection = np.array([

[z, 0, 0],
[0, z, 0]

])

projected2d = np.matmul(projection, rotatedZ)
projected2d = projected2d * scale
point(projected2d[0], projected2d[1])

for i in range(4):
connect(i, (i + 1) % 4, projected)
connect(i + 4, ((i + 1) % 4) + 4, projected)
connect(i, i + 4, projected)

def createWindow():
begin_graphics(width=800, height=600, title="3D Renderer", background=back)
return 400, 300

def point(x, y):
Circle((x + centerx, y + centery), 2, True, dot, 5)

def connect(i, j, points):
a = points[i]
b = points[j]
Line((a[0] + centerx, a[1] + centery), (b[0] + centerx, b[1] + centery), linec)

def clear():
clear_screen()

centerX, centerY = createWindow()
centerx = centerX
centery = centerY

while True:
draw()
time.sleep(timestep)
clear()
angle = angle + 0.1

beastbomber

"I'm going to reward myself with a piece of space melon"
This is the future :P

azyfloof

Coding Challenge for you, Daniel: Create a 2D maze (as in your maze challenge), then render it in first person perspective using points and lines as in this challenge. Let the user walk around in it with keyboard clicks and mouse looking.

I attempted this years ago in Visual Basic 6.0, without knowing any of this matrix math. It nearly broke my brain.

kevnar

the explanation and the analogy with the shadow were just amazing

gathorn

Yes! Thank you Dan, you're making me so happy with these videos! :D

franeklubi

Exactly the type of information I've been searching for -- thanks for taking the time to make this and explain everything! I'll create something epic in the future with this power

lidestudios

This video inspired me to code my own 3D modelisation software for my final school project. So thank you so much!

lefantastique

Shoot, now I'm hyped to try implement this myself... Well, here goes my night

nvadot

I've been working in 3d game development for nearly 2 years now, and still I learn a lot from your videos! Your work here is a real goldmine, and really accessible to future generations of coders. That's awesome.

ArthurCousseau