Procedural 3D mesh technology in a 64kB intro
This text is the sequel to our sequence on the making of H – Immersion (see the demo on YouTube). You’ll be able to learn the primary and the second elements right here: A dive into the making of Immersion ; Texturing a 64kB intro.
Within the earlier half, we noticed how textures are generated in H – Immersion. This time, we’ll take a look at one other vital instrument for measurement coding: procedural geometry.
Extra particularly, since our rendering makes use of conventional polygons, we wrote a procedural mesh generator. We’ll see how with just a few nicely chosen strategies, it’s attainable to create quite a lot of shapes, or make a viewer imagine we did.
First, Cubes
Once we began making demos, the 64kB restrict felt intimidating. We didn’t know something about procedural mesh technology, and we already had lots to do with the rendering, the digital camera, the textures, the story… nicely, with every little thing. So in our first demo, B – Incubation, we took the early choice to skip 3D modeling altogether. As a substitute, we selected to make use of solely cubes and designed the demo round this idea.
That is an instance of how a technical constraint can grow to be a inventive problem, and drive us to search for new concepts and do one thing surprising. In all of our 64kB intros, the scale limitation impacts the design, generally in small and surprising methods: we’re continually in search of tips, code reuse, and workarounds to evade this barrier.
Revolution!
After this primary 64kB, it was time to introduce procedural meshes eventually! For F – Felix’s Workshop, we carried out some rudimentary mesh technology. The demo obtained good suggestions, however the code might be easier than what many individuals count on.
If you happen to pay shut consideration to the picture beneath, you would possibly discover that there are solely two sorts of shapes utilized by all geometry. Some parts, just like the desk, the shelf and the wall, are made by assembling deformed cubes. The remaining have assorted shapes, however are all kind of cylindrical. Certainly we constructed them utilizing surfaces of revolution.
The thought is to attract simple splines, then rotate them round an axis to create 3D fashions. Right here is the spline we used to create pawns on a chessboard.
The numbers on the left are 2D coordinates of an inventory of management factors. We interpolate between the factors utilizing Catmull-Rom splines. Catmull-Rom is a pleasant algorithm first printed in 1974, which Iñigo Quilez details and recommends. The form on the best is the consequence (after symmetry) of making use of the method on the record of factors.
As soon as achieved, we are able to convert the info to 3D by creating faces alongside the spline. With little variation we are able to additionally create different chess items. Right here’s the ultimate consequence.
What number of bytes do we’d like for this? Not too many, particularly if you reuse the method in plenty of methods all through the demo. If we saved every quantity on one byte, we would wish lower than 40 bytes of knowledge to symbolize the pawn… and this doesn’t take note of the compression step.
If you happen to take a look at the source code for the chessboard, you’ll discover that we really use a floating-point sort to retailer these integers between 0 and 255. These 32-bit floats use 4 bytes every. Is it a waste of bytes? Not fairly: as mentioned within the earlier paragraph, this system is compressed. If you happen to test the binary representation of these floats, you’ll see they’re very related and finish with a bunch of 0s. The compression instrument (kkrunchy) will pack this effectively, and it may be smaller than if we tried to be good.
Going additional, delta encoding may enhance compression charges, but it surely solely turns into helpful when there’s sufficient information to retailer. There’s extra to say about floats, and we’ve touched the subject earlier than within the article Making floating point numbers smaller.
Extending and mixing
Within the scene above, discover how the drum has distinct faces. Our perform lets us management the variety of faces to generate, so not every little thing must be completely round. For instance, the pencil on the desk is hexagonal.
Within the background of the chess scene, even the white decoration on the high of the fireside is made with this system: it’s constructed as a sharp octogonal form. Then the central half is elongated alongside one axis, leading to a big form with beveled corners. We cannot solely elongate the form alongside an axis, but additionally generate it alongside a curve. That is how the prepare ramp is made, with its path described by one other spline.
If you happen to watch once more Felix’s Workshop, you may see how every little thing comes both from a revolution or from a dice. We create a variety of objects simply by combining these two primitives.
Rising Cubes
Combining and deforming easy cubes additionally has a whole lot of potential. For the vegetation in H – Immersion, we began from a cuboid, and deformed it a bit. Then we made many copies of the mesh positioned vertically round an imaginary axis, with random measurement and orientation. This creates one thing that vaguely seems like a plant. We repeat, once more with random parameters, to create extra of them:
This seems very tough and also you’re in all probability anticipating to learn what the following steps are to refine the form. There aren’t any: that is the ultimate mesh. We didn’t even create a customized texture for it. As a substitute, we simply utilized the bottom texture on that mesh!
However in the course of the demo, the impact works nicely sufficient due to the rendering, the lights and shadows, and a easy however convincing animation. The modifying additionally helps lots: the shapes and actions set the temper, however the viewer doesn’t have time to note the small print earlier than the digital camera strikes on. Generally evoking a form with a correct temper is more practical than painstakingly modeling it.
Extruding Cubes
In some unspecified time in the future, we needed to have extra complicated meshes. As common, we began from our beloved dice and determined to change it. Merely deforming a dice will nonetheless end in.. nicely, a cuboid. So we wanted one thing extra. Enters extrusion: we choose a face, and extrude it. This operation will create a brand new face, which we are able to pull from the thing, resize, or rework in any manner we like.
We iterate a number of occasions, to create the form we would like. Every extrusion will add extra particulars. The result’s usually low poly, however we use the Catmull-Clark subdivision algorithm to clean the consequence out. This strategy was impressed by the Qoob modeling tool.
What we’ve described is strictly what we did to generate the small statues used as adorning props in a number of locations in the course of the demo:
Because it’s all procedural technology, we are able to cross arguments to the perform. These arguments can management some angles for the legs, arms, and many others. Write a loop producing plenty of statues with random parameters, et voilà! You will have sufficient variation, in order that it doesn’t get visually boring.
We additionally created two statues with hard-coded parameters, for higher outcomes. Right here is the way it takes care of making use of textures and lighting.
And naturally, statues are reused: we’ve additionally put variations of these on high of a fountain created with a revolution floor.
Marching Cubes
Within the temple, we needed to point out a colossal statue of Poseidon seating on its throne. The method used for the small statues was too tough for a mannequin that might have extra focus. Poseidon is big and we needed extra particulars. The demo has a whole lot of content material and becoming every little thing was a problem. After a whole lot of measurement optimization work, we managed to get round one spare kilobyte. We determined to make use of it to get a greater mannequin for Poseidon.
To take action, we used a totally completely different method than what we’ve seen thus far: implicit floor expressed with signed-distance fields (SDF). It is a method very talked-about in 4kB intros, often used with the ray marching algorithm to generate the consequence, and carried out as a screenspace shader. However since our rendering relies on meshes, we generated a polygon mesh by evaluating the SDF perform with a marching cube algorithm as a substitute of ray marching. We constructed the humanoid form as a sequence of segments, with slightly little bit of tweaking to provide it an natural look.
On the best, the normals estimated from the triangle mesh reveal the sampling grid, however cover the construction and provides a fascinating tough trying form.
There was solely a lot element we may afford, to not point out that modeling people is tough and persons are superb at recognizing points in human-like fashions. We used to our benefit the low decision of the generated mesh. It seems that evaluating the normals on the ultimate mesh (versus deducing them from the SDF perform) creates seen artifacts: the floor is stuffed with clean creases and edges. This very tough look can provide kind of a sculpture look. We used lighting and cinematographic strategies on high of that to trick the viewer into filling the small print. Within the ultimate shot, the statue appears extra detailed than it really is.
On-line Cubes
In inventive actions, it’s usually essential to iterate rapidly on a design. You can not do every little thing proper from the primary attempt, so you should simply make adjustments, iterate, discover, see what works.
In some unspecified time in the future, we put our mesh generator on an internet server, simply like we did with the textures. The webpage had a textarea the place we may write C++ code. Once we clicked on a button, it compiled the code on the server and returned the mesh in a JSON format. The webpage displayed the consequence with three.js, in order that we may view and rotate the mannequin with the mouse. Similar to in Shadertoy, this allowed us to rapidly attempt concepts, share them with the staff, fork and tweak different fashions.
We later moved to a special resolution, C++ recompilation, which we talked about in the first part.
Conclusion
Mesh technology is arguably tougher to design and extra concerned to implement than texture technology. When textures are simply flat surfaces, meshes have completely different topologies, which provides a brand new layer of complexity.
However like with textures, the only constructing blocks can provide a variety of prospects to discover, so long as it’s attainable to mix them in numerous methods. A couple of easy parts used creatively can provide a variety of shapes.
Furthermore, as we’ve seen with at the least two examples, the facility of suggestion can play an vital half and change modeling work that might be tedious and even unimaginable to do with the accessible constructing blocks.
Utilizing each of those observations can go a great distance, as we hope to have demonstrated. The trick is to search out the best stability between modeling work and expressiveness.