I've written my fair share of this sort of code, but it's a very painful way to create geometry. I don't mean to be discouraging. I just did way too much of this myself, and I regret how much time I spent on custom primatives.<p>A 3D artist would probably create something like this by cutting the mesh and applying Catmull-Clark subdivision (assuming they didn't have a proper bevel tool). If you have a library of generic mesh manipulation functions lying around, the programmatic way and the artists' way would likely be the same. Creating those generic functions is a lot of work but it pays off fairly quickly. You need generic functions eventually anyway, to create more complex shapes.<p>It's also worth noting that the optimized mesh has some unfortunate drawbacks. Mesh properties are generally only stored on the vertex, and are interpolated across the attached faces. Having long, thin triangles or big differences in triangle area will often create problems when vertex properties are interpolated across the face. So, you may need to break those big faces into multiple triangles anyway.
Such a nice job on the visuals and interactive components! It takes a lot of work to craft a post like that.<p>I think it’s worth mentioning the ray marching (signed distance field) method for creating rounded boxes, because of how surprisingly simple it is - a single subtraction added to the sharp-cornered box does the trick. Even more fun, and relevant to the Apple story, it works exactly the same in 2d, and it can be used to anti-alias your 2d rounded boxes beautifully! (Useful if you want to render dynamic-radius rounded corners in real-time.)<p><a href="https://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm" rel="nofollow">https://www.iquilezles.org/www/articles/distfunctions/distfu...</a>
A small but crucial detail that sets Apple apart from almost everyone else in both digital and physical design is the use of curvature continuity.<p>"Posers" use G1 continuity, Apple uses G2 at a minimum if not G3. More complex math but smoother corners and surfaces. There's actually no 'radii' on Apple products.<p><a href="https://medium.com/@kennethlinzj/curvature-continuity-5a1c4ce9455a" rel="nofollow">https://medium.com/@kennethlinzj/curvature-continuity-5a1c4c...</a><p>A good 99 Percent Invisible podcast on this:<p><a href="https://99percentinvisible.org/article/circling-square-designing-squircles-instead-rounded-rectangles/" rel="nofollow">https://99percentinvisible.org/article/circling-square-desig...</a>
A better reference to Apple's rounded corners than BGR's blogspam (linked in TFA) is straight from the source at folklore.org, from Apple early employee Andy Hertzfeld himself:<p><a href="https://www.folklore.org/StoryView.py?story=Round_Rects_Are_Everywhere.txt" rel="nofollow">https://www.folklore.org/StoryView.py?story=Round_Rects_Are_...</a>
Here's a better way.<p>Start with a mesh with 24 vertices which results in the cube with all vertices and all edges cut with planes. Each vertex of the original cube becomes a triangle.<p>Then iteratively split edges in half, projecting the split points onto the desired surface. The algorithm only needs to split edges near the vertices of the original cube, so the split+project step is like this:<p><pre><code> float3 midpoint = ( v1 + v2 ) * 0.5;
float3 rv = (midpoint - sphereCenter).normalize();
midpoint = sphereCenter + rv * sphereRadius;
</code></pre>
Unlike the OP's code, will result in uniform triangle density of the mesh.<p>That's how people are usually generating good quality spherical meshes: start with icosahedron, then a few iterations of splitting edges in half + reprojecting back to the sphere.
I like this method better: <a href="https://prideout.net/blog/octasphere/" rel="nofollow">https://prideout.net/blog/octasphere/</a><p>To me it produces more pleasant resulting mesh, which gets important with fewer subdivisions. Here's what it looks like: <a href="https://i.imgur.com/o3RFfZx.mp4" rel="nofollow">https://i.imgur.com/o3RFfZx.mp4</a><p>But the criticisms from slavik81 still applies, it produces long triangles with insufficient surface information for the flat parts.
It's articles like this that actually get me interested in learning computer graphics. When I took graphics in college, I spent half my time debugging weird C++ build problems and the other half of the time trying to get X windows to forward over SSH from the school shared Linux machines to my personal laptop.<p>It would have been *so cool* to have had a course that could focus on just the neat graphics algorithms like this by having WebGL sandboxes for both the lecture notes and maybe even the homeworks!
Very nice visuals, but "procedural generation" does not seem to be the right term for this code. Maybe it should be called an "algorithmic technique" instead, or something like that?<p>Procedural generation normally is a randomized process that does not try to get an optimal solution. Instead, it typically aims to be a generator for a large diverse population of "interesting" outcomes, where "interesting" is often a subjective metric, but does not really have to be.
I guess touch is still something to think about (trying to move that 3D box)<p>Cool website. 3D is so cool, I struggled with it using 3js but it's neat. The basic cube rotation tutorial/camera rendering pane... I hope to get into this stuff again.