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. 反转问题并考虑负空间可能是一种解决方案。还是以上图为例子,如果我们用多个矩形和圆弧就能够表示出同样的边界,只不过内部变成了外部。但这限制了图形的变化,比较适用于固定的场景。例如在一个房间里面。
相关推荐
xiangshangdemayi3 天前
WebGL系列教程八(GLSL着色器基础语法)
webgl·基础·shader·着色器·语法·glsl
wjs04063 天前
WebGL入门:将3D世界带入网页的魔法
javascript·3d·webgl·前端开发
xiangshangdemayi3 天前
WebGL系列教程六(纹理映射与立方体贴图)
webgl·贴图·uv·立方体·纹理坐标·纹理映射
refineiks6 天前
three.js使用3DTilesRendererJS加载3d tiles数据
前端·3d·图形渲染·webgl
Ian10258 天前
Three.js new THREE.TextureLoader()纹理贴图使用png图片显示为黑色
前端·javascript·webgl·three.js·贴图·三维
常城10 天前
解决TMP_InputField 在WebGL(抖音)上不能唤起虚拟键盘,不能使用手机内置输入法的问题
webgl
DSLMing12 天前
微信小程序webgl 显示图片
微信小程序·小程序·webgl
GISer_Jing12 天前
Cesium加载高速公路样式线图层和利用CSS撰写高速公路样式
前端·css·webgl
gisDuo14 天前
WebGIS与WebGL是什么,两者之间的关系?
java·前端·vue.js·arcgis·信息可视化·echarts·webgl
gisDuo14 天前
【GIS开发小课堂】vue3+Cesium.js三维WebGIS项目实战(一)
java·开发语言·javascript·arcgis·web3·ecmascript·webgl