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. 反转问题并考虑负空间可能是一种解决方案。还是以上图为例子,如果我们用多个矩形和圆弧就能够表示出同样的边界,只不过内部变成了外部。但这限制了图形的变化,比较适用于固定的场景。例如在一个房间里面。
相关推荐
哈市雪花7 小时前
图像处理 之 凸包和最小外围轮廓生成
图像处理·人工智能·图形学·最小外围轮廓·最小外包
小彭努力中14 小时前
138. CSS3DRenderer渲染HTML标签
前端·深度学习·3d·webgl·three.js
优雅永不过时·18 小时前
three.js实现地球 外部扫描的着色器
前端·javascript·webgl·three.js·着色器
汪洪墩1 天前
【Mars3d】实现这个地图能靠左,不居中的样式效果
前端·javascript·vue.js·3d·webgl·cesium
allenjiao2 天前
webgl threejs 云渲染(服务器渲染、后端渲染)解决方案
webgl·云渲染·threejs·服务器渲染·后端渲染·云流化·三维云渲染
踏实探索2 天前
OpenLayers教程12_WebGL自定义着色器:实现高级渲染效果
前端·arcgis·vue·webgl·着色器
EasyNTS3 天前
H.265流媒体播放器EasyPlayer.js网页直播/点播播放器WebGL: CONTEXT_LOST_WEBGL错误引发的原因
javascript·webgl·h.265
那年那棵树4 天前
【Cesium】自定义材质,添加带有方向的滚动路线
vue·webgl·材质
优雅永不过时·7 天前
Three.js 原生 实现 react-three-fiber drei 的 磨砂反射的效果
前端·javascript·react.js·webgl·threejs·three
皮皮陶10 天前
Unity WebGL交互通信
unity·交互·webgl