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

198,630
0
Published 2018-08-21
Can I draw and rotate a 3D cube using Processing's 2D renderer with just some math?!?! Yes! Watch to learn more about rotation and projection matrices along with perspective and orthographic projection! Code: thecodingtrain.com/challenges/112-3d-rendering-wit…

🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/sketches/r8l8XXD2A

🎥 Previous video:    • Coding Challenge #111: Animated Sprites  
🎥 Next video:    • Coding Challenge #113: 4D Hypercube (...  
🎥 All videos:    • Coding Challenges  

References:
💾 Matrix Multiplication: matrixmultiplication.xyz/
🗄 Rotation Matrix on Wikipedia: en.wikipedia.org/wiki/Rotation_matrix
🗄 3D Projection on Wikipedia: en.wikipedia.org/wiki/3D_projection

Videos:
🚂 Matrix Math:    • 10.6: Neural Networks: Matrix Math Pa...  
🚂 Matrix Multiplication for 3D Rendering:    • Matrix Multiplication for 3D Rendering  
🔴 Coding Train Live 148.1:    • Coding Train Live #148.1: 3D Renderin...  

Related Coding Challenges:
🚂 #26 3D Supershapes:    • Coding Challenge #26: 3D Supershapes  
🚂 #113 4D Hypercube (aka 'Tesseract'):    • Coding Challenge #113: 4D Hypercube (...  
🚂 #142 Rubik's Cube:    • Coding Challenge #142: Rubik's Cube P...  

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

🚂 Website: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: github.com/CodingTrain/Suggestion-Box
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
💖 Membership: youtube.com/thecodingtrain/join
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: twitter.com/thecodingtrain
📸 Instagram: www.instagram.com/the.coding.train/

🎥 Coding Challenges:    • Coding Challenges  
🎥 Intro to Programming:    • Start learning here!  

🔗 p5.js: p5js.org/
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org/

📄 Code of Conduct: github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecodingtrain.com/issues/n…

#3drendering #projectionmatrix #perspectiveprojection #rotationmatrix #processing

All Comments (21)
  • @cicciobombo7496
    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
  • @ThankYouESM
    I really felt the need to learn how to create 3D from scratch for the sake of my own sanity, so thank you again.
  • @hemaangs3024
    The way this guy speaks and gestures had me on the edge of my seat throughout the video
  • @wheellan
    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.
  • @azyfloof
    "I'm going to reward myself with a piece of space melon" This is the future :P
  • @beastbomber2316
    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]) projected.append(projected2d) 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
  • @gathorn
    the explanation and the analogy with the shadow were just amazing
  • @morto360
    AMAZING!!!! If somebody asked me to do this, I wouldnt even dare to try since I thought is super complex... had no idea it can be so easy!!
  • @lidestudios5094
    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
  • @franeklubi
    Yes! Thank you Dan, you're making me so happy with these videos! :D
  • @Jianju69
    You're so good-natured that you make coding fun.
  • @lefantastique59
    This video inspired me to code my own 3D modelisation software for my final school project. So thank you so much!
  • @kevnar
    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.
  • @nvadot1633
    Shoot, now I'm hyped to try implement this myself... Well, here goes my night
  • @ArthurCousseau
    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.
  • @woobie5649
    This a best explanation i've seen in youtube about this theme. Thank you so much <3
  • @oeq57
    Was doing this at work today, came back to your video for reference. Thanks Dan :D
  • First nice and easy explanation of 3D rendering I see in my life. Thanks !!!