在片段着色器中绘制椭圆曲线
我想在webgl中绘制一条平滑的曲线，所以我尝试在顶点着色器中绘制一个矩形，并在归一化大小和大小参数中将位置发送到片段着色器，这是正方形的真实大小
in vec2 Position;
in vec2 Size;
out vec2 vPosition;
out vec2 vSize;
void main() {
vSize = Size;
vPosition = Position
gl_Position = Position * Size
}当大小=宽度，正方形的高度和每个顶点和position = [ -1 , -1 , -1 , 1 , 1 , -1 , 1 , 1 , ]都相等时，我的矩形将以2*宽，2*高绘制，但我可以在片段着色器中使用2*2正方形进行几何操作，该正方形经过归一化，但我在片段着色器中绘制椭圆(或使用此大小的圆)时遇到问题，当我想创建带有厚度参数的中空圆时，它在水平方向和垂直方向上的厚度不同，我知道这是因为我在水平方向和垂直方向(2，2)使用相同的大小，但在显示中它们是不同的，这就是问题所在
正如你所看到的，所有的厚度都不是一样的。
我想要一个几何公式来计算每个方向的厚度，然后我可以画一个中空的椭圆。
提前谢谢。很抱歉我的英语不好
回答 2
Stack Overflow用户
发布于 2018-07-18 21:16:36
如果将繁重的数学计算放在碎片着色器中，则速度会很慢。技巧可能是使用一个在视觉上可以接受的近似值。
你的问题是在垂直轴和水平轴上厚度是不同的。如果当前点的半径大于1且小于radiusMin，则需要丢弃碎片。将uniWidth和uniHeight设置为矩形的大小。*当y为空时，在水平轴上，radiusMin = 1.0 - BORDER / uniWidth。*当x为null时，在垂直轴上，radiusMin = 1.0 -边界/ uniHeight。
诀窍是使用mix()函数在这两个半径之间进行插值。看看我下面的例子，让你相信结果并不是那么糟糕。
以下是执行此类计算的片段着色器：
precision mediump float;
uniform float uniWidth;
uniform float uniHeight;
varying vec2 varCoords;
const float BORDER = 32.0;
void main() {
float x = varCoords.x;
float y = varCoords.y;
float radius = x * x + y * y;
if( radius > 1.0 ) discard;
radius = sqrt( radius );
float radiusH = 1.0 - BORDER / uniWidth;
float radiusV = 1.0 - BORDER / uniHeight;
float radiusAverage = (radiusH + radiusV) * 0.5;
float minRadius = 0.0;
x = abs( x );
y = abs( y );
if( x > y ) {
minRadius = mix( radiusH, radiusAverage, y / x );
}
else {
minRadius = mix( radiusV, radiusAverage, x / y );
}
if( radius < minRadius ) discard;
gl_FragColor = vec4(1, .5, 0, 1);
}这里有一个活生生的例子：https://jsfiddle.net/7rh2eog1/5/
Stack Overflow用户
发布于 2018-07-18 23:38:49
有一个隐式公式，x和y在中空椭圆的蓝色区域，带有厚度参数，因为我们知道厚度和视图的大小，我们可以制作两个椭圆，其中size1 = size -vec2(厚度)和size2 = Size +vec2(厚度)，然后length(位置/大小1)< 1.0
https://stackoverflow.com/questions/51384738
复制相似问题
腾讯云开发者
