SDF(Signed-distance-field: 有向距离场)(13): 形体变形方法(WebGL实现)：Displacement(置换)

已于 2023-05-25 09:34:41 修改
阅读量581 收藏
点赞数
分类专栏： glsl/hlsl 图形图像与几何算法 SDF(Ray March) 文章标签： webgl 3d
于 2018-10-09 12:57:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vily_lei/article/details/82980665
版权

Demo: Rendering & Art

Displacement(置换), 是"变形" 相关操作非常重要的工具，它使用一个因子(可能是个sdf或者其他函数)对一个sdf函数造成影像，可以加也可以乘。上图可以看到几种基本的变形结果。我的理解是: Displacement(置换),就是把一个"空间"作为另外一个"空间"计算的因子, 来构造更复杂的空间。细节请见: SDF(Signed-distance-field: 有向距离场)(9): 构建SDF空间模型六个重要基石_含影的博客-CSDN博客

含影
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
sdf-polygon-2d:在二维空间中对多边形的有符号距离场进行采样
06-10
sdf-polygon-2d 在二维空间中对多边形的有符号距离场进行采样 安装 npm install sdf-polygon-2d 用 var createSDF = require('sdf-polygon-2d'); var points = [ [-10, -10], [-10, 10], [ 10, 10], [ 10, -10] ]; // pass an array of polygons, including polygons with holes var sample = createSDF([points]); console.log(sample(0, 0)) // -10 console.log(sample({ x: 10, y: 0 })) // 0 console.log(sample([20, 0])) // 10 更多示例 执照
msdf-c：纯C多通道有符号距离场发生器
02-04
msdf-c：纯C多通道有符号距离场发生器
glsl-sdf-normal:获取有符号距离场内某个位置的法向量
06-16
glsl-sdf-正常 获取有符号距离场内某个位置的法线向量。 用法 getNormal = require(glsl-sdf-normal, <map>) 将getNormal函数加载到着色器中。 注意使用这个模块时需要定义map 。 vec2 map(vec3 position) 您的有符号距离函数，负责定义场景中的实体形状。 接受position ，并返回一个vec2 – 有关更多指导，请参阅 :) vec2 doModel( vec3 p); #pragma glslify : getNormal = require('glsl - sdf - normal', map = doModel) vec2 doModel( vec3 position) { float radius = 1.0 ; float dist = length (position)
目标检测-深度学习算法总结（从R-CNN到......最新..........)
weixin_44474718的博客
04-20 8062
版权声明：本文为博主原创文章，未经博主允许不得转载。 仅作为个人笔记： ● R-CNN（2013.11）：二阶基础 ● OverFeat：（2014） 主要特征：集成的处理识别（Recognition）、定位（Localization）、检测（Detection）三个问题，做到一个网络解决所有问题。并且通过一个卷积网络，实现对输入支持多尺度（multiscale）、滑动窗口的变换。学习FCN、...
距离场引导扭曲+TPS扭曲实现高质量服装迁移——附demo
智云视图的博客
01-10 2156
【前言】 还记得很久之前我写过一个妆容迁移的文章，传送门在这里： 智云视图：提取妆容特征矩阵的妆容迁移——附demo5https://zhuanlan.zhihu.com/p/426474467 上回写了妆容迁移，这回我们来写服装迁移，也就是所谓的虚拟试穿。 以下解读与见解均为我的个人理解，要是我有哪里曲解了，造成了不必要的麻烦，可以联系我删除文章，也可以在评论区留言，我进行修改。也欢迎大家在评论区进行交流，要是有什么有意思的paper也可以留言，我抽空看一下也可以写一些。正文内容中的“作者”二字，
有符号距离场原理及实现源码
新缸中之脑
02-09 2646
有符号距离场(SDF：Signed Distance Field) 是距离场的一种变体，它在 3D(2D) 空间中将位置映射到其到最近平面（边缘）的距离。距离场在图像处理、物理学和计算机图形学等许多研究中都有应用。在计算机图形的上下文中，距离场通常是有符号的，表示某个位置是否在网格内。 在计算机图形学和游戏开发中，SDF 显示出极大的通用性，它可以用于碰撞测试、网格表示、光线追踪等。此外，人们发现它在使用光线追踪渲染场景时也有一些好处（即, ray-marching) 算法——几乎不需要额外成本就可以产生像
SDF+Alpha Blending 抗锯齿
weixin_52292298的博客
03-20 2266
在用Easyx的普通绘图函数circle画圆、线等图形是时会产生锯齿，影响观感， 故下面用SDF和alpha blending算法进行抗锯齿。 //SDF+alpha blending COLORREF mix_color(COLORREF bg, COLORREF color, double alpha) { COLORREF result; result = RGB(GetRValue(bg) * (1 - alpha) + GetRValue(color) * alpha, G.
SDF！这特效牛不牛？
奎特尔星球
05-18 1429
什么是SDFSDF(Signed Distance Field)，有向距离场，用于表示空间中各点距离物体表面的距离。SDF技术已经被应用于字体渲染、Ray Marching、物理引擎等领...
SDF(Signed-distance-field: 有向距离场)(8): 距离场函数-基于CUBE计算方式产生的若干变体B
vily_lei的专栏
09-30 1663
SDF非常好玩的地方之一就是通过距离场函数的实现来实现空间分布函数，这样可以创造神奇的空间几何体造型。这个样例就是通过变换CUBE的距离场函数，来实现其各种各异的变形，下面的demo只是展示了另一种变体(改变cube的计算方式生成的Cube变体)。但是要注意细节几何形状在整个形体体积的比例，如果比例太大可能会出现撕裂破碎等情况，原因是SDF的检测机制在边界条件之外无法正常执行。 Demo1:ht...
shader编程-2D基本图形SDF(有向距离场)介绍与使用（WebGL-Shader开发基础05）
点燃火柴的博客
11-21 5066
shader编程-2D基本图形SDF有向距离场介绍与使用1. 有向距离场介绍2. SDF绘制圆3. SDF绘制矩形4. SDF绘制线段 1. 有向距离场介绍 有向距离场，英文名Signed Distance Field，简称SDF，把空间中与物体表面的距离进行采样，使用负值表示物体内部，使用正值表示物体外部，与物体的表面的距离为0，大于0，小于0和等于0区分物体的区域，你很快可以联想到之前使用的step函数和smoothstep函数，是的，通过与这两个函数的配合，就可以像前面样绘制图形了 2. SDF绘制圆
WebGL2SDFText：具有顶点位移着色器的WebGL 2签名距离字体渲染器
02-05
WebGL 2签名距离字体渲染器 WebGL 2签名距离字体渲染器是一个WebGL 2演示，它演示了如何使用现代图形技术在OpenGL中渲染文本。 自动字体网格生成包含.fnt到.json转换器计划功能！ 字体网格生成器上的更多选项可以...
sdf-test:符号距离场（SDF）光线跟踪和光线行进的实验
04-29
SDF测试符号距离场（SDF）光线跟踪和光线行进的实验 这是我在C ++中制作高质量的半真实感raytracer的尝试。 我将GLM用作数学库，将SDL用作窗口库。 它在大约24小时内被黑了，所以不要指望有漂亮的代码。 但是在我的...
2021年认证杯SPSSPRO杯数学建模A题(第一阶段)医学图像的配准全过程文档及程序
weixin_43292788的博客
11-17 731
2021年认证杯SPSSPRO杯(第一阶段)数学建模A题 医学图像的配准。
使用深度学习进行基于图像的三维重建的最新综述
小白学视觉
02-22 1733
点击上方“小白学视觉”，选择加"星标"或“置顶”重磅干货，第一时间送达仅用于学术分享，若侵权请联系删除本文回顾了关于特定物体（如人脸）的近期研究。一些重要论文性能的分析和比较，总结了这一领域的现有问题并讨论未来研究的方向。本文是深度学习做三维重建的一篇综述对自2015年以来本领域的149个方法做详尽的回顾深入分析深度学习三维重建的各个方面，包括训练集，网络架构选择以及重建结果，训练技巧和应用场景总...
从0到1，反距离加权IDW(Inverse Distance Weighted Interpolation) 插值变形算法
年轻即出发，
11-22 3390
论文： Image Warping with Scattered Image Warping with Scattered Data Interpolation 算法思路： 算法优缺点： 优点：实现简单，cpu实现，gpu实现都友好 缺点：速度与点的个数，图片长，宽，这3个指标成正比，点个数越多，速度越慢，图片越大速度越慢。如果点太少，形变会不平滑。 应用场景： 大脸，瘦脸，大眼，等任何形变场景 基本实现： 好处，更容易结合公式看清原理，缺点，速度很慢。 class IDW(o
自动驾驶自主避障概况
sinat_52032317的博客
02-27 7161
自主避障功能的实现主要依赖于运动规划模块和定位与建图模块。自主避障模块接收由运动规划模块计算出的轨迹、定位模块所提供的车辆位置信息以及建图模块提供的地图信息，对轨迹进行适当的调整，并在必要时改变它（通常是降低速度），最后将该调整结束的轨迹传给控制模块进行车辆控制，以达到避障的功能。
有向距离场(SDF)在Shader中的简单应用
qq_41841073的博客
12-04 1994
SDF， 全称Signed Distance Filed，就是有符号的距离区域 看下简单的例子，一个圆型区域 那么我们定义一个距离场函数： float sdfCircle(vec2 tex, vec2 center, float dis) { return -length(vec2(tex - center)) + dis; } 传入的参数分别是：当前像素点坐标， 圆心坐标，半径，函数的返回值是一个有正负的浮点数，通俗点说就是在园内的区域返回的是一个正值，大小是离原边界的距离；而在圆外面的区域
有号距离场(SDF)
llsansun的博客
08-09 6344
什么是有号距离场(SDF)？ 有号距离场(SDF)是指建立一个空间场，这个空间场中每个像素或体素记录自己与周围像素或体素的距离，如果在物体内，则距离位负，如果是在外面则记录相差的距离，在边上刚好位0 在2D上的演示如下 原图： SDF 简而言之他是一个记录空间距离的信息。 SDF能做什么？ 1.高清文字（TMP） 2.形变动画 3.序列帧动画柔和过度 4.碰撞检测 5.软阴影 6.环境遮蔽（AO） TMP： 用过TMP的人可能会有印象，..
rayleigh and mie scattering(瑞利散射和米氏散射或着叫粗粒散射)相关
热门推荐
vily_lei的专栏
01-23 1万+
一般把粒子的直径与入射光波波长相当的微粒所造成的散射称为米散射, 米散射适合于任何粒子尺度， 只是当微粒直径相对于光波波长而言很小时用瑞利散射(米散射的结果可简化为瑞利散射)， 很大时用弗朗和费衍射理论可近似解决问题。 米散射的特点是与波长无关，对各波长的散射能力相同，例如大气较浑浊时，大气中悬浮很多尘粒设液滴， 这时的散射使天空呈灰白色。 用米散射计算模型能广泛描述任何尺度的球状粒子的散射特点。...
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");有哪些格式
最新发布
12-21
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); 是一个用于格式化日期的类，它可以将日期对象转换为指定格式的字符串，也可以将字符串解析为日期对象。以下是一些常用的日期格式： 1. yyyy-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值