Javascript 当显示器屏幕分辨率为'；时，如何绘制圆而不是椭圆；t广场？

我正在使用WebGL，我试图剪掉我正在画的东西来画一个圆，但现在它正在画一个椭圆。这是我的片段着色器：

void main() {
  vec4 c = vec4((u_matrix * vec3(u_center, 1)).xy, 0, 1); // center

  float r = .25; // radius

  bool withinRadius = pow(v_pos.x - c.x, 2.) + pow(v_pos.y - c.y, 2.) < r * r;

  if (!withinRadius) { discard; }

  gl_FragColor = vec4(1, 1, 1, 1);
}

void main（）{
vec4 c=vec4（（u_矩阵*vec3（u_中心，1））.xy，0，1）；//中心
浮点r=.25；//半径
半径内的布尔=功率（v_位置x-c.x，2.）+功率（v_位置y-c.y，2.）

---

我认为问题在于，因为我的屏幕尺寸是1920x1200，所以从-1.0到+1.0的水平剪辑空间比从-1.0到+1.0的垂直剪辑空间宽。我认为解决方案可能涉及规范化剪辑空间，使其成为正方形，但我不确定如何做到这一点，也不确定推荐的处理方法是什么。您通常如何处理这种情况？

您必须从圆心到碎片缩放向量的x或y分量。向片段着色器添加一个非形式变量或常量，该着色器保存画布的纵横比（

aspect=width/height

）或分辨率，并按纵横比缩放向量的

x

分量：

均匀vec2u\u分辨率；
void main（）
{
浮动纵横比=u_分辨率.x/u_分辨率.y；
vec4 c=vec4（（u_矩阵*vec3（u_中心，1））.xy，0，1）；//中心
浮点r=.25；//半径
vec2 dist_vec=（v_pos.xy-c.xy）*vec2（纵横比，1.0）；
if（点（距离向量，距离向量）>r*r）
丢弃；
gl_FragColor=vec4（1,1,1,1）；
}

注意，我已经使用了计算的平方：

dot（va，vb）=va.x*vb.x+va.y*vb.y

fragCoord-屏幕上像素的系统常数

（）

iResolution—您必须自行传输的屏幕分辨率

中心-（0.5）

---

嘿，谢谢，这很有效！我唯一需要改变的是，我必须做

方面

的

canvas.height/canvas.width

而不是

canvas.width/canvas.height

，然后画一个圆圈。我还得研究一下你用

dot

等做的其他更改，以确保我明白这一点。再次感谢@RyanPeschel对不起我的错。当然，它必须按纵横比而不是1/aspect进行缩放。啊，太好了，这一变化使它可以使用

宽度/高度

。干杯@RyanPeschel我添加了一个关于点积的简要说明。

vec2 uv = fragCoord/iResolution.xy;

// fixe
    uv.x -= center;
    uv.x *= iResolution.x / iResolution.y;
    uv.x += center;
//

float color = length(uv-vec2(0.5));

color = smoothstep(0.46,0.47,color);