by wwwtyro on 9/27/21, 10:48 PM with 41 comments
by slavik81 on 9/28/21, 5:59 AM
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.
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.
by dahart on 9/28/21, 12:11 AM
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.)
https://www.iquilezles.org/www/articles/distfunctions/distfu...
by cloud9193 on 9/28/21, 12:41 AM
"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.
https://medium.com/@kennethlinzj/curvature-continuity-5a1c4c...
A good 99 Percent Invisible podcast on this:
https://99percentinvisible.org/article/circling-square-desig...
by AceJohnny2 on 9/28/21, 12:15 AM
https://www.folklore.org/StoryView.py?story=Round_Rects_Are_...
by Const-me on 9/28/21, 2:31 AM
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.
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:
float3 midpoint = ( v1 + v2 ) * 0.5;
float3 rv = (midpoint - sphereCenter).normalize();
midpoint = sphereCenter + rv * sphereRadius;
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.
by jmiskovic on 9/28/21, 7:16 AM
To me it produces more pleasant resulting mesh, which gets important with fewer subdivisions. Here's what it looks like: https://i.imgur.com/o3RFfZx.mp4
But the criticisms from slavik81 still applies, it produces long triangles with insufficient surface information for the flat parts.
by jez on 9/27/21, 11:43 PM
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!
by a-nikolaev on 9/28/21, 3:20 AM
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.
by jcun4128 on 9/28/21, 9:53 AM
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.
by jonplackett on 9/28/21, 8:02 AM
by swayvil on 9/27/21, 11:42 PM