TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Procedurally generating a rounded box mesh

121 点作者 wwwtyro超过 3 年前

11 条评论

slavik81超过 3 年前
I&#x27;ve written my fair share of this sort of code, but it&#x27;s a very painful way to create geometry. I don&#x27;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&#x27;t have a proper bevel tool). If you have a library of generic mesh manipulation functions lying around, the programmatic way and the artists&#x27; 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&#x27;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.
评论 #28681217 未加载
评论 #28680682 未加载
dahart超过 3 年前
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:&#x2F;&#x2F;www.iquilezles.org&#x2F;www&#x2F;articles&#x2F;distfunctions&#x2F;distfunctions.htm" rel="nofollow">https:&#x2F;&#x2F;www.iquilezles.org&#x2F;www&#x2F;articles&#x2F;distfunctions&#x2F;distfu...</a>
评论 #28677775 未加载
cloud9193超过 3 年前
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>&quot;Posers&quot; use G1 continuity, Apple uses G2 at a minimum if not G3. More complex math but smoother corners and surfaces. There&#x27;s actually no &#x27;radii&#x27; on Apple products.<p><a href="https:&#x2F;&#x2F;medium.com&#x2F;@kennethlinzj&#x2F;curvature-continuity-5a1c4ce9455a" rel="nofollow">https:&#x2F;&#x2F;medium.com&#x2F;@kennethlinzj&#x2F;curvature-continuity-5a1c4c...</a><p>A good 99 Percent Invisible podcast on this:<p><a href="https:&#x2F;&#x2F;99percentinvisible.org&#x2F;article&#x2F;circling-square-designing-squircles-instead-rounded-rectangles&#x2F;" rel="nofollow">https:&#x2F;&#x2F;99percentinvisible.org&#x2F;article&#x2F;circling-square-desig...</a>
评论 #28680215 未加载
评论 #28679627 未加载
评论 #28679801 未加载
评论 #28678047 未加载
评论 #28682716 未加载
AceJohnny2超过 3 年前
A better reference to Apple&#x27;s rounded corners than BGR&#x27;s blogspam (linked in TFA) is straight from the source at folklore.org, from Apple early employee Andy Hertzfeld himself:<p><a href="https:&#x2F;&#x2F;www.folklore.org&#x2F;StoryView.py?story=Round_Rects_Are_Everywhere.txt" rel="nofollow">https:&#x2F;&#x2F;www.folklore.org&#x2F;StoryView.py?story=Round_Rects_Are_...</a>
评论 #28677828 未加载
Const-me超过 3 年前
Here&#x27;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&#x27;s code, will result in uniform triangle density of the mesh.<p>That&#x27;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.
jmiskovic超过 3 年前
I like this method better: <a href="https:&#x2F;&#x2F;prideout.net&#x2F;blog&#x2F;octasphere&#x2F;" rel="nofollow">https:&#x2F;&#x2F;prideout.net&#x2F;blog&#x2F;octasphere&#x2F;</a><p>To me it produces more pleasant resulting mesh, which gets important with fewer subdivisions. Here&#x27;s what it looks like: <a href="https:&#x2F;&#x2F;i.imgur.com&#x2F;o3RFfZx.mp4" rel="nofollow">https:&#x2F;&#x2F;i.imgur.com&#x2F;o3RFfZx.mp4</a><p>But the criticisms from slavik81 still applies, it produces long triangles with insufficient surface information for the flat parts.
评论 #28681143 未加载
jez超过 3 年前
It&#x27;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!
评论 #28677647 未加载
评论 #28680451 未加载
评论 #28684312 未加载
a-nikolaev超过 3 年前
Very nice visuals, but &quot;procedural generation&quot; does not seem to be the right term for this code. Maybe it should be called an &quot;algorithmic technique&quot; 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 &quot;interesting&quot; outcomes, where &quot;interesting&quot; is often a subjective metric, but does not really have to be.
评论 #28680888 未加载
评论 #28679769 未加载
jcun4128超过 3 年前
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&#x27;s neat. The basic cube rotation tutorial&#x2F;camera rendering pane... I hope to get into this stuff again.
jonplackett超过 3 年前
Does anyone still draw rectangles as described in the linked anecdote? Or is it not worth the added performance now we have faster processors
swayvil超过 3 年前
Sweet geometry. Messing with the 2 sliders tool there, it strongly reminds me of the geometry generated by Chaikin or Split Tweak curve smoothing.