前言

一个环状图是一个圆形或半圆形图，它被划分成不同的扇形，每个扇形表示数据的一部分。这种图表常用于展示数据的相对比例或百分比，尤其适用于展示市场份额，人口统计数据等。环状图通常采用饼图的形式制作，只是多了一个中间空洞，所以又称为“圆环图”。

一、图形环状

1.distance函数解析

distance函数在二维空间中计算两点之间的欧几里得距离。在这种特定情况下，它用于计算当前片段坐标（由gl_PointCoord给出）与点（0.5,0.5）之间的距离。

这在创建圆形或环形形状时很有用，因为我们可以通过将片段距离中心和所需半径进行比较来确定片段是否位于给定半径内或外。在WebGL中，我们可以使用此计算来创建绘制圆形或环形形状（如环或盘）的片段着色器。

GLSL ES提供了相应内置变量解析：

gl_FragCoord表示片元的窗口坐标
gl_PointCoord表示片元在被绘制的点内的坐标（范围为[0.0, 1.0]）

在这里插入图片描述

2.二维/三维空间两点间距离

1、二维

在二维空间中，两点(x1, y1)和(x2, y2)之间的欧几里得距离可以通过以下公式计算：

distance = sqrt((x2 - x1)^2 + (y2 - y1)^2)

其中sqrt表示平方根符号。这个公式也可以写为：

distance = sqrt(pow(x2 - x1, 2) + pow(y2 - y1, 2))

其中pow函数表示幂运算，pow(a, b)等于a的b次方。

2、三维
在三维空间中，两点 $x_1, y_1, z_1)$ 和 $x_2, y_2, z_2)$ 之间的距离可以使用以下公式计算：

$\sqrt{(x_2 - x_1)^2 + (y_2 - y_1)^2 + (z_2 - z_1)^2}$

其中， $d$ 表示两点之间的距离。

3.案例

<!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>

在这里插入图片描述

【愚公系列】2023年08月 WEBGL专题-2D特效-图形环状

文章目录

前言

一、图形环状

1.distance函数解析

2.二维/三维空间两点间距离

3.案例

猜你喜欢