12 ms·

Procedurally generating a rounded box mesh

• swayvil 5y ago
  Sweet geometry. Messing with the 2 sliders tool there, it strongly reminds me of the geometry generated by Chaikin or Split Tweak curve smoothing.
• jez 5y ago
  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. 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!
  • corysama 5y ago
    The book https://www.realtimerendering.com/ https://www.realtimerendering.com/ is a great introduction. And, that site links several other great books that are available as free and legal downloads.
  • diffuse_l 5y ago
    See here: [1][2] for something that might get you started. Have fun! [1] https://github.com/stackgl/shader-school https://github.com/stackgl/shader-school [2] https://github.com/stackgl/webgl-workshop https://github.com/stackgl/webgl-workshop
  • dahart 5y ago
    I wish I’d had that too. I’ve told several graphics prof friends of mine they should do a whole course using ShaderToy. None have yet, but I’m pretty sure there are such graphics classes out there. I also love doing graphics stuff in Python and in Processing and similar environments - for precisely the same reason, that you get to make pictures without having to muck through C++ and devices and all kinds of low-level details. One of my faves, that I’ve used to create quite a few published book illustrations is called “NodeBox” - it has a GUI version but I loved the older pure Python API. Somewhere in-between is JavaScript - it’s not quite as easy as NodeBox or ShaderToy, it’s not a sandbox necessarily, but it’s pretty damn easy to setup your own sandbox from scratch, you can do amazing amounts of graphics right in the browser with very little setup and very few low level details.
• dahart 5y ago
  Such a nice job on the visuals and interactive components! It takes a lot of work to craft a post like that. 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/distfunctions.htm https://www.iquilezles.org/www/articles/distfunctions/distfu...
  • wnkrshm 5y ago
    SDFs are nice but to make a nice triangle mesh, you'll have to sample points on the isosurface, by geodesic distance.
    • dahart 5y ago
      True! Yes, and this is a good summary of how the 2d anti-aliasing I mentioned works. Of course SDFs aren’t the only alternative to a mesh-free rounded box, there’s also ray-rounded box intersection. I think IQ has one of those too?
      • danwills 5y ago
        I agree it's utterly astounding what can be done with 'analytic' (ie 'vector' vs 'rasterized') SDFs, (and different ray-intersection/marching methods too) and what IQ does and how much he shares the actual code and ideas just fills me with gratitude every time I read/watch! Cheers for the link above, i'm definitely gonna have a play with some of those functions!
        • high_byte 5y ago
          I'm still looking for my jaw after his painting with math girl
    • 5y ago
• AceJohnny2 5y ago
  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: https://www.folklore.org/StoryView.py?story=Round_Rects_Are_Everywhere.txt https://www.folklore.org/StoryView.py?story=Round_Rects_Are_...
  • wwwtyro 5y ago
    Thanks!
• cloud9193 5y ago
  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. "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-5a1c4ce9455a https://medium.com/@kennethlinzj/curvature-continuity-5a1c4c... A good 99 Percent Invisible podcast on this: https://99percentinvisible.org/article/circling-square-designing-squircles-instead-rounded-rectangles/ https://99percentinvisible.org/article/circling-square-desig...
  • simias 5y ago
    I find it vaguely amusing that the author (and apparently yourself) claim that using simply rounded corners would be a "lack of care and detail". I mean if you prefer Apple's fancier corners then great, but shaming a manufacturer for using a perfectly serviceable rounded corner is a bit much IMO.
    • nielsbot 5y ago
      To quote Charles and Ray Eames: “The details are not the details; they make the product”.
      • simias 5y ago
        For sure, but what details matter is often subjective. I've looked around my desk and surely the vast majority of the objects here use the simpler rounded corner but I really fail to see how it's bad craftsmanship. If anything I'd argue that for professional appliances the circular corners convey a less organic, more industrial look that feels, to me, more suitable. But then again, I enjoy brutalist architecture, so you can probably safely discard my opinion.
  • xixixao 5y ago
    If you’re looking for “smoothness”, check out my treatise on the Euler spiral: https://xixixao.github.io/euler-spiral-explanation/ https://xixixao.github.io/euler-spiral-explanation/
• Const-me 5y ago
  Here's a better way. 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; Unlike the OP's code, will result in uniform triangle density of the mesh. 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.
• a-nikolaev 5y ago
  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? 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.
  • danwills 5y ago
    It sounds like there's more than one sense of what "procedural generation" means - to me it means basically generation by algorithm (or some kind of automated setup) rather than by hand or 'manual' generation (like painting a picture). Where I work there's lots of use of SideFX Houdini, and we regularly talk about how "procedural" any given setup is, where "more procedural" means either that it has a 'seed' that can be randomised, to generate an infinite number of varieties, or (more importantly) the setup is more capable of working with new versions of input assets (a new version of animation or a different 3d model, say), whilst still robustly producing a correct-enough result. It sounds like gp might mean this sense, but you've got something more formal in mind?
    • a-nikolaev 5y ago
      Okay, yeah, I agree that the more important part in procedural generation is to be able to produce a large population of interesting artifacts. The means to get there can involve more or less randomness (it can be a small seed input, a set of parameters, or a random sequence of numbers). Even something like Mandelbrot or Julia sets (or similar fractals) are fully deterministic algorithms, but the choice of the position and scale (quite a small initial input) is sufficient to generate a large variety of interesting results => procedural generation. The procedure must be making some kind of sequence of choices that leads to a set of diverging final outcomes. The choices can be prescribed by some kind of input value, or determined by a PRNG of the generation procedure itself (also actually a deterministic sequence). However, not everything made by a computed program should be called "procedurally generated". Word docs are not a result of procedural generation. Arithmetic operators and sorting algorithms are not procedural generation techniques by themselves (although they can be used in procedural generation as building blocks).
• slavik81 5y ago
  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. 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.
  • throwaway_2047 5y ago
    By generic function, do you mean the catmull clark subdivision?
    • slavik81 5y ago
      That would be one example of such a function, yes. Libraries like IGL or OpenSubdiv can help you to implement more, too.
  • iainmerrick 5y ago
    Having long, thin triangles or big differences in triangle area will often create problems when vertex properties are interpolated across the face. That can definitely be a problem in general, but is it likely to crop up in this case? Those long triangles are flat so the normal is constant. Neither 2D nor 3D texture coordinates will have too much distortion. And if it was a problem, you could fix it by scaling back the optimization, no? 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. Yes, you’re right about that. I think this is still interesting and useful from the perspective of understanding how to build a basic mesh programmatically. And sometimes it’s easier to crank something out in a brute-force way like this than to figure out how to combine your general-purpose tools in just the right way.
• jmiskovic 5y ago
  I like this method better: https://prideout.net/blog/octasphere/ https://prideout.net/blog/octasphere/ 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 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.
  • iainmerrick 5y ago
    Isn’t that exactly the same method? (Still a useful link, though, as it’s a great writeup from a slightly different perspective) Edit to add: doh, you’re right! I was too quick on the draw. Cube versus octahedron.
• jonplackett 5y ago
  Does anyone still draw rectangles as described in the linked anecdote? Or is it not worth the added performance now we have faster processors
• jcun4128 5y ago
  I guess touch is still something to think about (trying to move that 3D box) 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.