SDF(Ray March)
关注
分享
扫一扫
sdf技术相关的用例和知识
含影
高交互性3D内容生产/协作，
跨平台3D引擎，
跨平台渲染引擎，
高性能计算
展开
-
SDF(Signed-distance-field: 有向距离场)(13): 形体变形方法(WebGL实现)：Displacement(置换)
Demo:http://www.artvily.com/sdf?sample=codeDemo&clip=displaceExampleDisplacement(置换), 是"变形" 相关操作非常重要的工具，它使用一个因子(可能是个sdf或者其他函数)对一个sdf函数造成影像，可以加也可以乘。上图可以看到几种基本的变形结果。我的理解是:Displacement(置换),就是把一...原创 2018-10-09 12:57:35 · 691 阅读 · 1 评论 -
SDF(Signed-distance-field: 有向距离场)(12): Shadow And AO(WebGL实现)增强立体感
Demo1:http://www.artvily.com/sdf?sample=codeDemo&clip=shadowAndAO3Demo2:http://www.artvily.com/sdf?sample=codeDemo&clip=shadowAndAO2AO(Ambient Occlusion) 中文翻译为环境遮蔽， 这个功能可以在渲染中有效增强立体感。可...原创 2018-10-08 13:18:29 · 1056 阅读 · 1 评论 -
SDF(Signed-distance-field: 有向距离场)(11): 阴影(WebGL实现)
Demo:http://www.artvily.com/sdf?sample=codeDemo&clip=shadow01Thanks very much:http://www.iquilezles.org/www/articles/rmshadows/rmshadows.htm在常见的3D渲染引擎中，阴影一般都会用shadowmap, 这样可以尽可能的优先利用硬件资源。而S...原创 2018-10-08 12:42:06 · 1413 阅读 · 1 评论 -
SDF(Signed-distance-field: 有向距离场)(10): 海面波动效果
Demo:http://www.artvily.com/sample?sample=sdfStep09distortion6波动的原理就是在距离震源相应的距离上有相应的振幅，而且是依据距离周期性的变化，一般就用cos或者sin函数来计算这个周期性，而参数就是距离震源的值。...原创 2018-10-01 21:35:36 · 896 阅读 · 0 评论 -
SDF(Signed-distance-field: 有向距离场)(9): 构建SDF空间模型六个重要基石
A.Transform(一般的缩放旋转平移以及旋转中心的更改)B.距离场函数及相应的变体(我把距离场函数描述的空间区域叫做距离场空间分布函数)C.Reapeat(某个区域或者整个空间重复某部分场函数计算)D.过渡/混合(Blend)（用于一个场函数描述的空间与另一个有过渡的衔接）E.布尔运算(交集，合并，差)F.Displace(置换)(以一个空间作为另外一个空间计算的因子)SDF: 这六个...原创 2018-09-30 16:33:20 · 2513 阅读 · 0 评论 -
SDF(Signed-distance-field: 有向距离场)(8): 距离场函数-基于CUBE计算方式产生的若干变体B
SDF非常好玩的地方之一就是通过距离场函数的实现来实现空间分布函数，这样可以创造神奇的空间几何体造型。这个样例就是通过变换CUBE的距离场函数，来实现其各种各异的变形，下面的demo只是展示了另一种变体(改变cube的计算方式生成的Cube变体)。但是要注意细节几何形状在整个形体体积的比例，如果比例太大可能会出现撕裂破碎等情况，原因是SDF的检测机制在边界条件之外无法正常执行。Demo1:ht...原创 2018-09-30 14:16:57 · 1788 阅读 · 0 评论 -
SDF(Signed-distance-field: 有向距离场)(7): 距离场函数-基于CUBE计算方式产生的若干变体A
SDF非常好玩的地方之一就是通过距离场函数的实现来实现空间分布函数，这样可以创造神奇的空间几何体造型。这个样例就是通过变换CUBE的距离场函数，来实现其各种各异的变形，下面的demo只是展示了基本的变体(改变cube的计算方式生成的Cube变体)。Demo1:http://www.artvily.com/sample?sample=sdfStep09distortion3效果图:...原创 2018-09-29 10:01:03 · 4844 阅读 · 0 评论 -
SDF(Signed-distance-field: 有向距离场)(6): 空间复制(repeat)(生成大规模显示对象)
Demo1:http://www.artvily.com/sample?sample=sdfStep09distortionDemo2:http://www.artvily.com/sample?sample=sdfStep09distortion2通过这种方式和SDF独有的计算方式可以绝对轻松的"制造"非常大规模的"显示对象",效果图如下:...原创 2018-09-28 19:20:27 · 1258 阅读 · 0 评论 -
SDF(Signed-distance-field: 有向距离场)(5): 缩放-旋转-平移(复杂组合变换)
Demo1:http://www.artvily.com/sample?sample=sdfStep08TransformDemo2:http://www.artvily.com/sample?sample=sdfStep08Transform2Demo中包括设置旋转中心，父级变换对子集变换的影响等。...原创 2018-09-28 19:11:02 · 1054 阅读 · 0 评论 -
SDF(Signed-distance-field: 有向距离场)(4): 缩放-旋转-平移(源码和Demo)
Demo1:http://www.artvily.com/sample?sample=sdfStep08TransformDemo2:http://www.artvily.com/sample?sample=sdfStep07Thanks very much:https://www.shadertoy.com/view/4tcGDr下面是欧拉角形式的旋转代码:void rot...原创 2018-09-27 21:00:55 · 1252 阅读 · 0 评论 -
SDF(Signed-distance-field: 有向距离场)(3): 空间划分原理(源码解释)
下面这是SDF常用的三个函数:// intersect(求交)vec2 mult(vec2 tA, vec2 tB) { if(tA.x > tB.x) return tA; return tB;}// union(合并)vec2 add(vec2 tA, vec2 tB) { if(tA.x < tB.x) return tA; retu...原创 2018-09-26 18:53:27 · 10921 阅读 · 0 评论 -
SDF(Signed-distance-field: 有向距离场)WebGL GLSL(2)
Demo:http://www.artvily.com/sample?sample=sdfStep04Demo:http://www.artvily.com/sample?sample=sdfStep04athanks very much: https://www.shadertoy.com/view/MttGz7SDF空间计算的方法非常有意思，有兴趣的朋友一起交流...原创 2018-09-25 20:13:58 · 1223 阅读 · 1 评论