Three-Dimensional Projects - Scratch Wiki (2024)

This article has links to websites or programs outside of Scratch and Wikipedia. Remember to stay safe while using the internet, as we cannot guarantee the safety of other websites.

"3D" redirects here.For the suggestion of a 3-dimensional stage, see List of Officially Rejected Suggestions#3D Scratch.

Three-Dimensional or 3D refers to Euclidean space with three dimensions - length, width, and height.^[1] Scratch does not provide tools for displaying, creating, or manipulating 3D graphics; however, Scratch does provide blocks for 2D sprite movement, sprite resizing, pen drawing, math functions, lists and more. Many (if not all) 3D rendering methods can be recreated with Scratch blocks.

Creating the illusion of 3D in Scratch can be a challenge, requiring advanced algorithms or programs. There exists also simpler methods, such as a basic raycaster.

Differences in the Third Dimension

When computers render graphics, mainly the graphics processing unit, rendering a 3D object, landscape, or environment takes a lot more processing power than a 2D environment. This is because 3D graphics take up space (not as in storage space but the geometric property) while a 2D environment takes up a plane. Space has depth, so the processor has to perform various algorithms to create the illusion of a 3D environment on a 2D screen. Due to these algorithms and larger objects needed to render, 3D projects on Scratch typically lag more than 2D projects.

In addition, some 2D graphics are pre-rendered meaning the instructions for how to create the graphics were already carried out or pre-coded rather than the graphics card having to render the graphics anew. Rendering is the process of creating an array of coloured pixels based on a set of instructions, such as in Scratch's vector graphics. Displaying is taking what was rendered and sending it off to a monitor to be seen. Because 2D graphics are seen from one perspective, they can be pre-rendered as bitmap images, but 3D graphics can be viewed at thousands of different angles and must follow instructions for rendering the graphics. One of the common instruction engines used to render 3D graphics is Blender.

3D Methods Used in Scratch

There are many Scratch projects that use one or more of following methods to display 3D graphics. These can generally be placed into two groups: Ray-based and miscellaneous. They will then be ordered by dificulty.

Miscellaneous

Rasterization

Rasterization, or rasterisation, is an extremely popular method outside of Scratch that nearly all 3D games use. It involves splitting a 3D scene into a number of polygons and using various transformation matrices to transform each polygon onto the screen. It will then loop through each pixel on the screen to find what polygon the pixel represents and color it respectively. Scratch is unable to do calculations for each pixel on the screen fast enough, so this technique is not commonly used on Scratch.

Examples

• projects:368430133
• projects:560149534

Painter's algorithm

The painter's algorithm is the method of splitting a 3D scene into a number of polygons and filling them in order of furthest to closest rather than using a pixel-by-pixel depth buffering scan technique that rasterization uses. It is faster than rasterization due to it taking significantly less calculations, and for this reason it is used in many Scratch games.

Examples

• projects:56781780
• projects:10143939
• projects:567954397

3D Projection

3d projection in Scratch can be done with this code:

define go to (x:: custom-arg) (y:: custom-arg) (z:: custom-arg) (rc_x:: custom-arg) (rc_y:: custom-arg) (rc_z:: custom-arg) (r_x:: custom-arg) (r_y:: custom-arg) (r_z:: custom-arg) (cam_x:: custom-arg) (cam_y:: custom-arg) (cam_z:: custom-arg) (fs:: custom-arg)go to x: ((((((((x:: custom-arg) - (rc_x:: custom-arg)) * ([cos v] of (r_y:: custom-arg))) - (((z:: custom-arg) - (rc_z:: custom-arg)) * ([sin v] of (r_y:: custom-arg)))) * ([cos v] of (r_z:: custom-arg))) - (((((y:: custom-arg) - (rc_y:: custom-arg)) * ([cos v] of (r_x:: custom-arg))) - (((((x:: custom-arg) - (rc_x:: custom-arg)) * ([sin v] of (r_y:: custom-arg))) + (((z:: custom-arg) - (rc_z:: custom-arg)) * ([cos v] of (r_y:: custom-arg)))) * ([sin v] of (r_x:: custom-arg)))) * ([sin v] of (r_z:: custom-arg)))) - (cam_x:: custom-arg)) * ((fs:: custom-arg) / ((fs:: custom-arg) + (((((y:: custom-arg) - (rc_y:: custom-arg)) * ([sin v] of (r_x:: custom-arg))) + (((((x:: custom-arg) - (rc_x:: custom-arg)) * ([sin v] of (r_y:: custom-arg))) + (((z:: custom-arg) - (rc_z:: custom-arg)) * ([cos v] of (r_y:: custom-arg)))) * ([cos v] of (r_x:: custom-arg)))) - (cam_z:: custom-arg))))) y: ((((((((x:: custom-arg) - (rc_x:: custom-arg)) * ([cos v] of (r_y:: custom-arg))) - (((z:: custom-arg) - (rc_z:: custom-arg)) * ([sin v] of (r_y:: custom-arg)))) * ([sin v] of (r_z:: custom-arg))) + (((((y:: custom-arg) - (rc_y:: custom-arg)) * ([cos v] of (r_x:: custom-arg))) - (((((x:: custom-arg) - (rc_x:: custom-arg)) * ([sin v] of (r_y:: custom-arg))) + (((z:: custom-arg) - (rc_z:: custom-arg)) * ([cos v] of (r_y:: custom-arg)))) * ([sin v] of (r_x:: custom-arg)))) * ([cos v] of (r_z:: custom-arg)))) - (cam_y:: custom-arg)) * ((fs:: custom-arg) / ((fs:: custom-arg) + (((((y:: custom-arg) - (rc_y:: custom-arg)) * ([sin v] of (r_x:: custom-arg))) + (((((x:: custom-arg) - (rc_x:: custom-arg)) * ([sin v] of (r_y:: custom-arg))) + (((z:: custom-arg) - (rc_z:: custom-arg)) * ([cos v] of (r_y:: custom-arg)))) * ([cos v] of (r_x:: custom-arg)))) - (cam_z:: custom-arg)))))

"3D projection is any method of mapping three-dimensional points to a two-dimensional plane."^[2]

3D projection allows projects to define an x,y,z location for a sprite, then place it on the screen. This method has been used to draw 3D objects using lists and the pen blocks.

Sprites can be resized based on the distance from the camera/viewer. This method can work very fast in Scratch, making it more ideal for games.

Lines can also be drawn between the projected points to create wireframe 3D renderings.

Perspective is usually used, but there are simpler projections, such as the orthographic projections, that are also used. It can be built using trigonometry and the perspective formula or with quaternions.

Examples

• projects:129124
• https://turbowarp.org/182441
• projects:769041
• studios:202972 (tutorial)
• projects:11343265 (quaternions)

(projects:799909 this project explains 3D projection math.)

Exporting from 3D Programs

Creating a 3D Object in a 3D Graphics Program, then saving it as a Wavefront (.obj) file. The lines and vertices are taken from the object file, and imported into 2 lists.

For every pair of number in the lines list, it will use the respective X, Y, and Z variables and draws a line using 3D projection (see above).

The camera is rotatable according to the mouse x and y.

Although the script is complicated, some users have just provided the script and allowed anyone to change the list values to get their object.

Examples

• projects:1678269
• projects:1696281

Pre-rendered Graphics

Images created with 3D programs like Blender or Google SketchUp are imported as costumes in a sprite. Costumes portraying different angles of the object are switched quickly to make the object appear to rotate. This is sometimes referred to as the "Donkey Kong country" approach because of that game being one of the first games to do pre-rendered 3D.^{[citation needed]}

Examples

• projects:127846
• projects:130395
• projects:402835020

Sliced 3D method

Main article: Animating a 3D Object

This is the 2^nd simplest method in Scratch. It works by stacking or stamping 2D sprites, starting from the bottom up, offset up slightly for each layer. This set of drawings can be rotated to rotate the 3D object. As well as changing Y to make this image, the X can also be changed instead to create a "flip" effect instead of a rotating one. This method can be expanded to create a top-down scroller, in which each layer of the 3D structures is characterized by slowly increasing sizes and faster movement relative to their distance to the camera (see 2.5D).

Examples

• projects:317618182
• projects:371464
• projects:491826
• projects:1927107(Tutorial)
• projects:130266640^{[dead link]} (Tutorial)

Non-rotating Method

This is the simplest method in Scratch. It works by using size for the z position and does not rotate. It has an illusion that makes the sprites look like they are rotating but they are not. When a sprite touches 1 side, it goes to the other side (not touching it) and if a sprite touches the other side, it goes to the first side (again, not touching it).

Examples

• projects:11980904

Ray-Based

Path tracing

Pathtracing is a subset of ray tracing that creates paths of light based on physical properties of the materials the rays intersect, and computes a final result for each pixel using the Rendering Equation. These paths are generated randomly, due to the fact that the integral in the rendering equation does not have an explicit solution, and has to be solved with Monte-Carlo integration. The use of randomness is what causes noise in path tracing^[3]. The number of paths is the number of samples, and the increase in samples reduces noise in the image and converges it to the true result. The use of randomness also allows effects like depth of field and anti-aliasing. In practice, pathtracers also have global illumination, which is the indirect bouncing of light. Pathtracing is slower than raytracing, but is more realistic. Pathtracing is also what is used to render CGI and 3D animated movies. A common misconception is that the use of Monte-Carlo integration makes a raytracer a pathtracer; this is not the case, as a pathtracer needs to create random light paths based off of material properties. A standard raytracer with Monte-Carlo integration would be classifed as a distributed raytracer.

Examples

• projects:425020125
• projects:429641890

Raytracing

"In computer graphics, ray tracing is a technique for generating an image by tracing the path of light through pixels in an image plane and simulating the effects of its encounters with virtual objects."^[4]. Note that this term is also used to describe high graphical capabilities and or intense graphics.^{[citation needed]}

Although it is usually realtime in lower-level languages and is able to be realtime on Scratch, it can still be very slow. However, it can recreate natural effects like reflection, shading, and shadows. This complex technique is usually used in demoscene and films and TV shows using computer-generated imagery (CGI).

Examples

• projects:4123
• projects:53171
• projects:334732
• projects:39385 (this project has tutorials that explain the math of the ray tracer)
• projects:377006401(this project teaches how to make a basic raytracer.)
• projects:474378205
• projects:562667655

Ray marching

Ray marching is a similar method to raytracing, but instead of jumping to objects using math it marches the ray forward until it intersects with the object. Raymarchers are slower than raytracers for the same number of objects due to the time it takes for a ray to meet it's target. It is sometimes also called volume raycasting. The basic raymarching algorithm works by first estimating the closest distance, moving the ray that distance, and repeating the process over and over until the ray intersects with the object. While raytracing uses math to make the ray teleport to the object, raymarching uses math to move the ray until it hits the object. Because of this, ray marching is faster at rendering fractals such as Menger Sponges, because they have good distance estimates. If Raytracing was used, it would have to check when and if it would intersect with a bunch of the basic shape that make up the fractal (like cubes for the sponge). The reason it needs to march is because the distance estimator is not directional.

Examples

• projects:397929034
• projects:393071327
• projects:450795944
• projects:398988087 (this project teaches how to make a basic raymarcher)
• projects:404180855
• projects:560595569
• projects:565112050 (showcases various objects that can be made with raymarchers)

Photon Mapping

Photon mapping is a ray-based technique that is usually used in conjunction with another ray-based technique. It works by shooting rays from the light source (photons) into the scene, which is used to help create subsurface scattering and caustics.

Examples

• projects:502004625
• projects:498554851
• projects:486891879

Ray casting

Main article: Raycaster

"Ray casting ... can be thought of as an abridged, and significantly faster, version of the ray tracing algorithm."^[5]

This method was used in early 3D games like Wolfenstein 3D to get fast, real-time performance out of slow computers. Raycasting is faster because it only goes at 2d. It represents the distance using height.

Examples

• projects:130490
• projects:1135568

Implementation

Some users want a 3D editor to be implemented into Scratch. The Scratch Team has rejected this suggestion, stating that it would make Scratch confusing for beginners.^[6] Some users argue the point, saying that to make it less confusing, it could be restricted to only Scratchers,^[7] or saying that there could be two separate editors,^[8] but the suggestion remains rejected.^[6]

3.5D projects

People have managed to create 3.5d wireframe projects, usually they are tesseracts, a type of 4-dimensional cube. However, it is impossible to project an actual 4D object to a 2D screen, so the 3.5D projects are really 3D.

Examples

• projects:490874694

2.5D projects

2.5D projects are projects which use 2D graphics in 3D-like environments. They are more performant and easier to create than 3D projects. Methods include cloning, stamping, and mouse locating. This term also applies to projects in which use 3D models but use them in 2D way.^[9]

2.5D is commonly used in video games, particularly due to their simplicity. Examples include LittleBigPlanet and Crash Bandicoot.

Examples

• projects:47495082
• projects:49070106
• projects:49037596
• projects:116098387 (Isometric)
• projects:86207995 (Clone based tutorial)

See Also

• Two Dimensional Objects
• BeetleBlocks
• 3D Wireframes
• 3D Patterns

You can create one of these! A tutorial is available here.

References