Javascript 如何向WebGL着色器绘制的圆/椭圆（使用边/距离抗锯齿绘制）添加等宽轮廓

我在

WebGL

中使用单个四边形和片段着色器绘制圆/椭圆，以便以独立于分辨率的方式绘制它们（边距离抗锯齿）

以下是我当前使用的片段着色器：

'#extension GL_OES_standard_derivatives : enable',
'precision mediump float;',
'varying vec2 coord;',
'vec4 circleColor = vec4(1.0, 0.5, 0.0, 1.0);',
'vec4 outlineColor = vec4(0.0, 0.0, 0.0, 1.0);',

'uniform float strokeWidth;',          
'float outerEdgeCenter = 0.5 - strokeWidth;',

'void main(void){',

      'float dx = 0.5 - coord.x;',
      'float dy = 0.5 - coord.y;',
      'float distance = sqrt(dx*dx + dy*dy);',

      'float delta = fwidth(distance);',
      'float alpha = 1.0 - smoothstep(0.45 - delta, 0.45, distance);',
      'float stroke = 1.0 - smoothstep(outerEdgeCenter - delta, outerEdgeCenter + delta, distance);',

      'gl_FragColor = vec4( mix(outlineColor.rgb, circleColor.rgb, stroke), alpha );',                  

'}'

这将创建一个带有黑色轮廓的橙色圆圈，无论大小，该圆圈都具有完美的抗锯齿效果

但是，当我变换四边形（缩放它）以将圆变成椭圆时，

距离

计算将随之变换，从而使轮廓也进行缩放。我的理解是，我需要通过反转来解释四边形的变换

我想让

距离

即使在变换四边形时也保持一致，实际上在整个圆/椭圆周围生成一个恒定宽度的轮廓

---

非常感谢您的帮助。

问题是，您的片段着色器（FS）现在有点像黑匣子（因为代码缺少信息）

您的FS被编写为在正方形空间内工作。所以它总是在空间中渲染圆，其中

x

和

y

的大小相同（-1.0；1.0间隔）

虽然quad在外部（在VS或其他任何地方）进行转换，但目前还无法在FS中反映该转换

为了解决这个问题，我建议在FS中加入关于缩放的附加信息。类似于在着色器输入中提供的内容：

uniform vec3 iResolution; // viewport resolution (in pixels)

除此之外，这不是屏幕大小的分辨率，而是关于四元变换的信息，例如：

varying vec2 trans;
// where value (1.0, 1.0) mean no transformation

然后可以使用此值计算不同的笔划。我宁愿为当前笔划计算唯一的dx和dy值，而不是反转变换

---

有更多的方法来实现有效的解决方案，这取决于您以后想如何使用它（应该可以进行哪些类型的转换等）。因此，我只介绍了基本但最简单的解决方案。

谢谢，我想我理解你的意思。假设我已经通过了椭圆的宽度和高度。我该如何计算笔划呢？如果你改为推高推宽，而不是从外部转换，那么现在就不同了。您真的必须决定您想要什么：在片段着色器中绘制椭圆和自定义形状？还是从外部进行转换？问题开始变得越来越大。如果你想使用片段着色器，我强烈推荐shadertoy。它比webgl更小，更容易理解。这个演示我写的权利可以给你一些提示：对不起，我应该更清楚。如果我输入宽度/高度，我肯定可以通过计算texelSizes-（1.0/宽度）和（1.0/高度）计算出比例。我只是不确定如何将其应用于中风。谢谢，我将看一看您的shadertoy演示。：）