Raycasting Engine Programming
This course will teach you how to create a complete raycasting engine from scratch. We'll use an algorithm similar to the one used in Wolfenstein 3D. The final project will be coded using both JavaScript and C. It will implement player movement, 2D map view, 3D wall projection, textured walls, sprites, and other optimization techniques.
More
This course will be divided in two important parts:
1. The first part of the course uses JavaScript to cover the theory and the math behind the raycasting algorithm. JavaScript is a simple high-level scripting language that helps us not get too distracted with implementation details.
2. The second part of the course uses the C programming language to implement a compiled version of our raycaster, including textured walls and sprites. We'll also use C to discuss important optimization and performance aspects of our code.
The tools you'll need
You'll need a web browser that can run JavaScript and a small C compiler. All these tools are cross-platform, so you can follow along with either Windows, macOS, or Linux!
The Wolfenstein 3D raycasting algorithm we'll learn is heavily based on trigonometry, so make sure you have pen and paper ready for the lectures. I will make sure we review and understand every formula we find along the way!
Watch Online Raycasting Engine Programming
# | Title | Duration |
---|---|---|
1 | Introduction and Learning Outcomes | 12:19 |
2 | How to Take this Course | 02:59 |
3 | An Overview of the Raycasting Algorithm | 06:37 |
4 | Raycasting or Raytracing? | 07:10 |
5 | Raycasting Limitations | 03:11 |
6 | A Review of Degrees and Radians | 11:27 |
7 | A Review of Sine Cosine and Tangent | 16:44 |
8 | Defining the 2D Map Grid | 07:55 |
9 | Coding the Map Class | 16:54 |
10 | Player Movement | 06:33 |
11 | Coding the Player Movement | 23:13 |
12 | Coding the Map Collision | 10:18 |
13 | Defining the Field of View | 08:18 |
14 | Coding the Field of View Ray Increments | 16:32 |
15 | Finding Wall Hit | 07:49 |
16 | Finding Horizontal Intersections | 22:46 |
17 | Finding Vertical Intersections | 08:14 |
18 | Coding X-intercept and Y-intercept | 27:18 |
19 | Coding the Horizontal Wall Intersection | 12:10 |
20 | Coding the Vertical Intersection | 25:52 |
21 | Fixing the Intersection Offset Error | 07:41 |
22 | Orientation as Angles or Vectors? | 03:47 |
23 | Wall Projection | 06:50 |
24 | Finding the Wall Strip Height | 12:20 |
25 | Visualizing the Minimap | 06:03 |
26 | Coding the Wall Rendering | 15:24 |
27 | Fixing the Fishbowl Distortion | 13:32 |
28 | Implementing Wall Shading by Depth | 05:28 |
29 | Bright/Dark Wall Sides | 11:18 |
30 | First Steps in C | 12:29 |
31 | Working with Makefile | 13:56 |
32 | Installing Visual Studio and SDL on Windows | 14:46 |
33 | Creating a SDL Window | 22:00 |
34 | SDL Rendering and Event Polling | 12:24 |
35 | Rendering SDL Rectangles | 07:14 |
36 | Game Loop Overview | 06:32 |
37 | Coding a Fixed Time Step Game Loop | 09:51 |
38 | SDL Delay | 08:13 |
39 | Drawing the Map with SDL | 18:58 |
40 | Player Movement and SDL Events | 15:24 |
41 | Implementing Wall Collision in C | 03:46 |
42 | Ray Struct and FOV | 10:06 |
43 | Translating the Horizontal Intersection to C | 16:32 |
44 | Translating the Vertical Intersection to C | 17:07 |
45 | Rendering Rays | 09:08 |
46 | The Color Buffer | 27:48 |
47 | Color Buffer Implementation | 17:06 |
48 | Freeing Allocated Resources | 05:20 |
49 | Creating the Wall Projection | 17:38 |
50 | Exercise: Ceiling & Floor Solid Colors | 01:08 |
51 | Ceiling & Floor Solid Color Implementation | 02:02 |
52 | Representing Textures | 11:11 |
53 | Creating a Texture Programmatically | 08:12 |
54 | Mapping Textures to Wall | 07:26 |
55 | Implementing Wall Texturing | 20:25 |
56 | Multiple Textures | 07:26 |
57 | Multiple Texture Code | 14:53 |
58 | Fixed Size Data Types | 06:57 |
59 | Using Fixed Size Integer Types | 02:55 |
60 | Libraries to Decode PNG Files | 11:57 |
61 | Loading External PNG Files | 35:26 |
62 | Activity: Field of View Distortion | 05:31 |
63 | Understanding the Angle Increment Distortion | 11:53 |
64 | Coding the Angle Increment Distortion Fix | 08:12 |
65 | Full Screen Window | 28:28 |
66 | Refactoring the Graphics File | 36:22 |
67 | Drawing Filled Rectangles | 02:49 |
68 | Refactoring the Map File | 20:24 |
69 | Refactoring the Ray and Player File | 19:43 |
70 | The Line Equation | 15:18 |
71 | Rasterizing Lines | 22:25 |
72 | Coding the DDA Line Algorithm | 05:05 |
73 | Refactoring the Wall Projection File | 10:20 |
74 | Creating a Type Definition for Color Values | 07:11 |
75 | Sending Parameters by Reference | 04:53 |
76 | Refactoring the Ray-Facing Code | 06:42 |
77 | Wall Texture Color Intensity | 07:46 |
78 | Coding the Texture Color Intensity | 05:52 |
79 | Raycasting Sprites | 06:17 |
80 | Sprite Type Definition | 04:07 |
81 | Coding the Sprite Typedef | 24:57 |
82 | Rendering Sprites in the Minimap | 05:01 |
83 | Identifying Visible Sprites | 05:02 |
84 | Coding the Visible Sprites | 08:40 |
85 | Finding the Sprite Distance | 06:21 |
86 | Normalizing Player Rotation Angle | 04:51 |
87 | Calculating the Sprite Projection Height | 12:48 |
88 | Calculating the Sprite X Position | 04:15 |
89 | Sprite Rectangle Position in the Screen | 09:10 |
90 | Displaying Textured Sprites | 16:44 |
91 | Activity: Sorting Sprites | 02:27 |
92 | Sorting Sprites by Distance | 04:38 |
93 | Sprites Behind Walls | 06:12 |
94 | Fixing the Sprite Fishbowl Distortion | 03:30 |
95 | Concluding our Raycasting Implementation | 06:28 |
96 | Notes on Look-up Tables | 10:13 |