2D SDF运算2: 逻辑运算

逻辑运算

SDF很神奇的一点,他是支持逻辑运算的。两个一维数值min/max的比较,竟然能变成二维图形,三位几何体的逻辑运算,感觉就像是人类以三维之躯进入了四维空间。 逻辑运算主要有合并(Union)、减法(Subtraction)、交集(Intersection)和异或(XOR). 公式非常简单

以下是对这些操作的几何解释:

opUnion

java 复制代码
1float opUnion( float d1, float d2 )
2{
3    return min(d1,d2);
4}

几何意义:这个操作返回两个几何体中任一点到它们的最近点的距离。在两个几何体的合并中,任意一点到合并体的距离等于该点到两个几何体的距离中的较小者。因此,这个函数通过计算min(d1,d2)返回两个几何体的合并。

opSubtraction

java 复制代码
1float opSubtraction( float d1, float d2 )
2{
3    return max(-d1,d2);
4}

几何意义:当你从一个几何体中减去另一个时,所有在第二个几何体内的点都变成了在结果几何体外的点,这通过取d1的负值来实现(在SDF中,负值表示在内部)。这个操作返回所有点中对于结果几何体来说,"最外面"点的距离,max(-d1,d2)确保了所有在减数几何体内部的点都被正确处理。

opIntersection

java 复制代码
1float opIntersection( float d1, float d2 )
2{
3    return max(d1,d2);
4}

几何意义:交集操作返回两个几何体共有部分中任意一点到边界的距离。在交集中,点到结果几何体的距离等于该点到两个几何体距离中的较大者。原因在于,只有当这个点同时在两个几何体的内部时,它才属于交集部分,这通过max(d1,d2)来确保。

opXor

python 复制代码
1float opXor(float d1, float d2 )
2{
3    return max(min(d1,d2),-max(d1,d2));
4}

几何意义:异或操作产生一个只包含两个几何体非共享部分的结果。换句话说,它包含属于第一个但不属于第二个几何体的部分,以及属于第二个但不属于第一个几何体的部分。这个函数通过首先查找两个几何体中较近的一个(min(d1,d2)),然后将其与两者中较远者的负值(-max(d1,d2))进行比较。

Interior 问题解决

这里主要是理解IQ这篇文章,iquilezles.org/articles/in... 上图是由两个四边形和一个圆形使用OpUnion构建的混合图形,可以注意到在内部这个图形的距离场是错误的。理论上使用SDF模型复杂形状有两种方法:组合基本形状或设计新公式。但是使用min()和max()操作符不一定能产生正确的SDF

  1. 尤其是在内部区域。但有时候其实内部区域是用不到的,所以这个错误可以忽略,
  2. 另外从上图可以看出,在图形中心错的更加离谱.. 在实践中,min()函数引入的伪影主要存在于形状的深处,如果仅接触表面的孤立位置。 由于中心差分方法通常会在小范围内对表面进行采样,因此当存在误差时,它们很少且很小。 这个问题通常可以忽略不计。
  3. 反转问题并考虑负空间可能是一种解决方案。还是以上图为例子,如果我们用多个矩形和圆弧就能够表示出同样的边界,只不过内部变成了外部。但这限制了图形的变化,比较适用于固定的场景。例如在一个房间里面。
相关推荐
大松鼠君18 小时前
轿车3D展示
前端·webgl·three.js
伶俜monster1 天前
UV 法向量实验室:Threejs 纹理与光照炼金术
前端·webgl·three.js
xhload3d1 天前
智能网联汽车云控平台 | 图扑数字孪生
3d·gis·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·车联网·智慧交通·智能网联·汽车云控
三木前端3 天前
像设计师一样处理图像,只需几行 JavaScript 代码!
前端·javascript·webgl
XZen4 天前
Shadertoy转传统技术实现程序化星球纹理
图形学
伶俜monster5 天前
模型苏醒计划:Threejs 让静态模型「叛逆」起来
前端·webgl·three.js
DragonBallSuper7 天前
在Cesium中使用ThreeJs材质(不是场景融合哦)
webgl·材质·threejs·cesium·可视化渲染
GISBox11 天前
PLY格式文件如何转换成3DTiles格式——使用GISBox软件实现高效转换
arcgis·信息可视化·node.js·gis·webgl·cesium
李斯维11 天前
深度解析 Android Matrix 变换(二):组合变换 pre、post
android·canvas·图形学
XZen13 天前
DeepSeek + 码上掘金 学习shadertoy之 —— Catmull-Rom样条插值
javascript·webgl·计算机图形学