javascript - 如何向 WebGL 着色器绘制的圆形/椭圆形添加统一宽度的轮廓(使用边缘/距离抗锯齿绘制)

Question

我使用单个 Quad 和片段着色器在 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 );',                  

'}'

这会创建一个带有黑色轮廓的橙色圆圈，无论大小如何，都可以完美消除锯齿。

但是，一旦我变换四边形(缩放它)以将圆形变成椭圆形，距离计算就会随之变换，导致轮廓也缩放。我的理解是，我需要通过反转它来解释四边形的变换。

我希望即使在四边形变换时，距离也能保持均匀，实际上在整个圆/椭圆周围产生恒定宽度的轮廓。

任何帮助将不胜感激。

Answer 1

问题是，你的片段着色器(FS)现在有点黑匣子(因为代码缺乏信息)。

您的 FS 是为在方形空间内工作而编写的。因此它总是在 x 和 y 大小相同的空间中渲染圆(-1.0；1.0 间隔)。

虽然四边形在外部(在 VS 或其他任何地方)进行转换，但还没有办法在 FS 中反射(reflect)该转换。

为了解决这个问题，我建议将有关缩放的附加信息推送到 FS 中。类似于 Shadertoy在着色器输入中提供:

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

除了这不是屏幕尺寸的分辨率，而是有关四元变换的信息，例如:

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

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

有更多方法可以实现工作解决方案，这取决于您以后想如何使用它(应该可以进行哪些类型的转换等)。所以我只提供基本但最简单的解决方案。