ShaderJoy —— 基于 SDF 实现均匀粗细的椭圆环（三种方法）【GLSL】

最新推荐文章于 2025-07-03 10:29:44 发布

ShaderJoy

最新推荐文章于 2025-07-03 10:29:44 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： ShaderJoy —— Shader 实例详解【重制版】文章标签： OpenGL

本文链接：https://blog.youkuaiyun.com/panda1234lee/article/details/52304056

ShaderJoy —— Shader 实例详解【重制版】同时被 2 个专栏收录

161 篇文章 ¥119.90 ¥299.90

订阅专栏

Shader

48 篇文章

订阅专栏

该博客介绍了如何使用GLSL在片元着色器中通过SDF（Signed Distance Field）技术，实现均匀粗细的椭圆环。文章通过效果对比和算法原理解析，展示了利用距离估计法解决像素到图形等值面距离不一致的问题，提供了ellipse1、ellipse2和ellipse4三种方法的代码示例和图形效果，强调了ellipse2和ellipse4虽非严格椭圆但层间距离接近相等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果对比

算法原理

在片元着色器中渲染程序图形时常常会遇到一种特别的现象，比如从渲染一个圆变为渲染一个椭圆，像素到图形等值面的距离无法被保存，因此它的厚度不是一个常数，如下图第 2 区间所示。所以需要通过“距离估计”——通过除以它的梯度模值，来生成一个常数的厚度，如下图 1、3、4 区间所示部分所示。

了解其他信息——iq老师的理论课：Distance Estimation

GLSL代码：

// Created by inigo quilez - iq/2013
// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

//

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ShaderJoy

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

ShaderJoy —— “基于 SDF 的简单图形”的实现【GLSL】

ShaderJoy 的兴趣技术杂货铺

09-15

3740

RoundedBox: 效果图： ShaderToy代码及算法注释： // Created by inigo quilez - iq/2015 // License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. // signed distance to a 2D ro

ShaderJoy —— 五种超实用的 GLSL 函数代码（二）

ShaderJoy 的兴趣技术杂货铺

12-13

1866

当我们标准化一个高斯分布的向量，我们得到一个均匀随机的单位向量【相对均匀】。换句话说，它创建的矩阵除了对角线之外都是零，对角线上的值就是你传入的值。该函数找到直线上最接近 p 点的点，然后返回到 p 点的距离。这是通过把这个点投影到直线上，然后截断它的投影，使它在端点之间。我们所做的是将两个 int 值放入一个特殊的多项式函数中，然后将其转换为浮点数，并将结果映射到 (- 1,1) 的范围内。假设我们直接将一个方框中的向量映射到一个球面上的向量，我们会得到的是。没有它，我们得到的值就不是随机的。

参与评论您还未登录，请先登录后发表或查看评论

glsl-sdf-box

06-14

glsl-sdf-box 用于生成框的 GLSL SDF 函数。确定点与原点处长方体表面之间的距离。最初来自。用法 float box(vec3 position, vec3 dimensions) 返回具有给定dimensions集的position和原点框之间的有符号距离。例如，要在光线追踪着色器中绘制一个 2x2x2 的盒子： #pragma glslify : box = require('glsl - sdf - box') vec2 doModel( vec3 p) { float dist = box(p, vec3 ( 2.0 )); float id = 1.0 ; return vec2 (dist, id); } 贡献有关详细信息，请参阅。执照麻省理工学院。有关详细信息，请参阅。

SDF(Signed-distance-field: 有向距离场)WebGL GLSL(2)

weixin_30951743的博客

09-25

188

请见: https://blog.youkuaiyun.com/vily_lei/article/details/82844353 有兴趣一起多交流. 转载于:https://www.cnblogs.com/vilyLei/articles/9703216.html

ShaderGraph节点解析(118):距离节点（Distance Node）详解

最新发布

分享知识，拥抱变化

07-03

982

摘要： Unity ShaderGraph中的Distance节点用于计算两向量间的欧几里得距离，支持标量至float4的输入，输出非负直线距离。其核心特性包括非负性、对称性和几何意义，适用于雾化效果（基于距离的透明度渐变）、碰撞检测（阈值判断）、径向渐变（颜色控制）及SDF（距离场建模）。优化技巧包括使用距离平方避免开方运算、高维向量处理（如忽略w分量）及值域映射。对比曼哈顿距离，欧几里得距离更精确但计算成本较高。该节点是空间分析、实时渲染和物理模拟的基础工具，还可拓展至噪声调制和光线追踪等高级应用。

shader 画圆，椭圆

qq_39503511的博客

01-31

1353

shader 画圆，椭圆概述概述记录一下如何使用shader来画圆 let shader = { vs: ` varying vec2 v_uv; void main() { v_uv = uv; gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 ); } `, fs: ` varyi

GLSL SDF Primitives 使用教程

gitblog_01125的博客

08-30

480

GLSL SDF Primitives 使用教程项目介绍 GLSL SDF Primitives 是一个由 Mark Lundin 开发的开源库，专门用于提供一系列距离场（Signed Distance Field）基础形状函数，这在光线行进（ray marching）和几何建模中非常有用。该库设计用于 GLSL（OpenGL Shading Language），非常适合实时图形渲染和基于着色器...

glsl-sdf-sphere:用于生成球体的 GLSL SDF 函数

06-14

glsl-sdf-球体用于生成球体的 GLSL SDF 函数。确定点与原点处球体表面之间的距离。用法 float sphere(vec3 position, float radius) 返回position与原点处给定radius的球体之间的有符号距离。例如，要在光线跟踪着色器中绘制一个球体： #pragma glslify : sphere = require('glsl - sdf - sphere') vec2 doModel( vec3 p) { float id = 1.0 ; float radius = 0.5 ; float dist = sphere(p, radius); return vec2 (dist, id); } 请注意，在这种情况下，您可以通过偏移position向量来移动球体，例如： uniform flo

ShaderJoy —— 纯 shader 实现立方体绕任意轴旋转（四元数）【GLSL】

ShaderJoy 的兴趣技术杂货铺

02-20

1788

效果图球面线性插值旋转的效果简单线性插值旋转的效果基础知识四元数是什么呢？简单来说，四元数本质上是一种高阶复数，是一个四维空间，相对于复数的二维空间。一个复数由实部和虚部组成，即，i 是虚数单位，有。而四元数其实和我们学到的这种是类似的，不同的是，它的虚部包含了三个虚数单位，i、j、k，即一个四元数可以表示为。我们现在已知一个四元数可以表示为，现在就来回答这样一个简单的式子是怎么和三维旋转结合在一起的。为了方便，我们下面使用，其中 v 是向量，w 是实...

ShaderJoy —— “雪花飞舞 ”的实现【GLSL】

ShaderJoy 的兴趣技术杂货铺

10-22

6086

效果图：是不是有点 “落雪无声掩尘嚣”的感觉~ GLSL 代码： // ------------------- #define _SnowflakeAmount 400 // 雪花数 #define _BlizardFactor 0.25 // 风的大小 #define fragCoord gl_FragCoord #define fragColor gl...

ShaderJoy —— 最简单的软阴影（SoftShadow）实现【GLSL】

ShaderJoy 的兴趣技术杂货铺

02-21

2077

效果图关键思路解析要实现阴影最核心的思想：就是要从场景中各个物体上的点朝着光线的方向进行 Raymarching，如果经过 SDF 测试以后，发现有阻挡，则我们可知该像素是位于阴影区域的；软阴影的效果，则在其基础之上考虑了那些虽然不在阴影区域，但很接近的像素，然后根据其离光线的距离来控制虚化的程度，实际关键代码如下 /// @note 软阴影，朝着光的方向 ray marching /// @param p 三维空间中的点 /// @param l 光的方向 float ..

glsl-ruler:用于调试光线跟踪的SDF的帮助器模块

05-14

glsl-ruler 受启发的调试光线跟踪SDF的帮助器模块在上的。感谢 :sparkles: 用法 trace = require(glsl-ruler/trace, <map>, <steps>) 当前， glsl-ruler需要代表您处理光线跟踪–它使用与非常相似的API进行。有关更多详细信息，请查看该项目的文档。 vec3 trace(vec3 ro, vec3 rd) 在此之间的关键区别glsl-ruler/trace和glsl-raytrace的是，而不是返回vec2 ， trace会返回一个vec3与对应的元素：从map函数的光线跟踪中检索的有符号距离值与标尺平面合并。用于向表面分配ID的第二个属性。如果射线撞击飞机，则该-1.0 。从仅map函数的光线跟踪中检索的有符号距离值。然后，您可以使用它为飞机着色。 color = require(glsl-color)

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)

ShaderJoy —— “动态网格”的实现【GLSL】

ShaderJoy 的兴趣技术杂货铺

01-04

1812

效果预览参考自https://blog.youkuaiyun.com/Kennethdroid/article/details/103335598 我对代码进行了简化和解析。首先让我们来看一下实际效果：动态网格效果图代码和具体解析上图中区间即 [maxSize, gridSize - maxSize] coord：由于是取模运算 mod，什么 coord 表示任意网...

GLSL 简介

weixin_30487701的博客

11-01

397

GLSL-OpenGL Shading Language也称作GLslang，是一个以C语言为基础的高阶着色语言。它是由OpenGL ARB所建立，提供开发者对绘图管线更多的直接控制，而无需使用汇编语言或硬件规格语言。目录 [隐藏] 1背景2详细资料 2.1资料类型2.2运算...

ShaderJoy —— 多物体 Raymarching （图形拼接 + 地面投影）入门【GLSL】

ShaderJoy 的兴趣技术杂货铺

09-13

4282

效果图： GLSL代码及注释 #define EDGE_WIDTH 0.15 #define RAYMARCH_ITERATIONS 40 #define SHADOW_ITERATIONS 50 #define SHADOW_STEP 1.0 #define SHADOW_SMOOTHNESS 256.0 #define SHADOW_DARKNESS 0.75 unif...

SDF+Alpha Blending 抗锯齿

weixin_52292298的博客

03-20

2944

在用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.

glsl-sdf-primitives 项目推荐

gitblog_00982的博客

12-23

287

glsl-sdf-primitives 项目推荐 1. 项目基础介绍和主要编程语言 glsl-sdf-primitives 是一个开源项目，专注于提供一系列用于光线追踪的距离场（Signed Distance Field, SDF）基本几何形状的实现。该项目的主要编程语言是 GLSL（OpenGL Shading Language），这是一种专门用于编写图形着色器的语言，广泛应用于3D图形渲染和实...

2D基本图形的Sign Distance Function (SDF)详解（上）

ShaderJoy —— 基于 SDF 实现均匀粗细的椭圆环（三种方法） 【GLSL】

效果对比

算法原理

ShaderJoy —— 基于 SDF 实现均匀粗细的椭圆环（三种方法）【GLSL】