Directorio de artículos
prefacio
Un gráfico de anillos es un gráfico circular o semicircular que se divide en diferentes sectores, cada sector representa una parte de los datos. Este tipo de gráfico se usa a menudo para mostrar proporciones o porcentajes relativos de datos, especialmente para cuota de mercado, datos demográficos, etc. Los gráficos de anillos generalmente se hacen en forma de gráficos circulares, pero hay un agujero adicional en el medio, por lo que también se denominan "gráficos de anillos".
1. Anillo gráfico
1. Análisis de la función de distancia
La función de distancia calcula la distancia euclidiana entre dos puntos en un espacio bidimensional. En este caso específico, se usa para calcular la distancia entre la coordenada del fragmento actual (dada por gl_PointCoord) y el punto (0.5,0.5).
Esto es útil al crear formas circulares o anulares, ya que podemos determinar si un segmento está dentro o fuera de un radio determinado comparando la distancia del segmento desde el centro hasta el radio deseado. En WebGL, podemos usar este cálculo para crear sombreadores de fragmentos que dibujan formas circulares o circulares, como anillos o discos.
GLSL ES proporciona el análisis de variables integrado correspondiente:
- gl_FragCoord representa las coordenadas de la ventana del fragmento
- gl_PointCoord indica las coordenadas del fragmento dentro del punto dibujado (rango [0.0, 1.0])
2. Distancia entre dos puntos en el espacio 2D/3D
1. bidimensional
En el espacio bidimensional, la distancia euclidiana entre dos puntos (x1, y1) y (x2, y2) se puede calcular mediante la siguiente fórmula:
distance = sqrt((x2 - x1)^2 + (y2 - y1)^2)
donde sqrt representa la notación de raíz cuadrada. Esta fórmula también se puede escribir como:
distance = sqrt(pow(x2 - x1, 2) + pow(y2 - y1, 2))
Entre ellas, la función pow representa una operación de potencia, y pow(a, b) es igual a la b potencia de a.
2. Tridimensional
En el espacio tridimensional, dos puntos ( x 1 , y 1 , z 1 ) (x_1, y_1, z_1)( X1,y1,z1)和( x 2 , y 2 , z 2 ) (x_2, y_2, z_2)( X2,y2,z2) se puede calcular mediante la siguiente fórmula:
re = ( x 2 − x 1 ) 2 + ( y 2 − y 1 ) 2 + ( z 2 − z 1 ) 2 re = \sqrt{(x_2 - x_1)^2 + (y_2 - y_1)^2 + ( z_2 - z_1)^2}d=( X2−X1)2+( y2−y1)2+( z2−z1)2
Entre ellos, ddd representa la distancia entre dos puntos.
3. Caso
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/index.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400">
此浏览器不支持canvas
</canvas>
</body>
</html>
<script>
const ctx = document.getElementById('canvas')
const gl = ctx.getContext('webgl')
// 创建着色器源码
const VERTEX_SHADER_SOURCE = `
void main() {
gl_Position = vec4(0.0,0.0,0.0,1.0);
gl_PointSize = 200.0;
}
`; // 顶点着色器
const FRAGMENT_SHADER_SOURCE = `
precision lowp float;
// float distanceSelf(vec3 a, vec3 b) {
// float x = a.x - b.x;
// float y = a.y - b.y;
// float z = a.z - b.z;
//
// float v = x * x + y * y + z * z;
//
// return sqrt(v);
// }
float distanceSelf(vec2 a, vec2 b) {
float x = a.x - b.x;
float y = a.y - b.y;
float v = x * x + y * y;
return sqrt(v);
}
void main() {
// 计算距离
// float dis = distance(gl_PointCoord, vec2(0.5,0.5));
float dis = distanceSelf(gl_PointCoord, vec2(0.5,0.5));
if (dis > 0.5 || (dis < 0.4 && dis > 0.3) || dis < 0.2) {
discard;
}
gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}
`; // 片元着色器
const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)
gl.drawArrays(gl.POINTS, 0, 1);
</script>
