数据美学！不可思议的 3D 云图热力效果，谁说 HTML5 不能实现？

2023-09-06 12:23:14

很多人对于数据分析的第一反应是枯燥无味、冰冷无比的表格和图表。其实并非如此，数据蕴藏价值，但数据的价值需要用 IT 技术去发现、探索。可视化可以帮助人更好的去分析数据，信息的质量很大程度上依赖于其呈现方式。在数据分析上，热力图无疑是一种很好的方式。在很多行业中都有着广泛的应用。最近刚好项目中需要用到 3D 热力图的效果展示。网上搜了相关资料，发现大多都是基于 WebGL 来实现的，这大大加大了开发难度和学习成本。有没有什么办法，只用 HTML5 和 CSS3 就能实现呢？以下就和大家来分享一下。

一、HTML5 Canvas 介绍

HTML5 Canvas 是一个用于在网页上绘制图形的 API。它是一种强大的工具，可用于创建各种各样的图形，包括线条、形状、图像和文本。

二、CSS3 3D 变换

CSS3 3D 变换允许您将元素在三个维度上进行变换。这可以用于创建各种各样的 3D 效果，包括旋转、缩放和平移。

三、将两者结合

将 HTML5 Canvas 和 CSS3 3D 变换结合起来，就可以创建出各种各样的 3D 图形。例如，您可以创建一个 3D 热力图，该热力图可以显示数据在三个维度上的分布情况。

四、具体实现步骤

首先，我们需要创建一个 HTML5 Canvas 元素。

<canvas id="canvas" width="500px" height="500px"></canvas>

接下来，我们需要创建一个 WebGL 上下文。

const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");

然后，我们需要创建一个 WebGL 着色器程序。

const vertexShaderSource = `
  attribute vec3 position;
  attribute vec3 color;
  varying vec3 vColor;
  void main() {
    vColor = color;
    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
  }
`;

const fragmentShaderSource = `
  precision mediump float;
  varying vec3 vColor;
  void main() {
    gl_FragColor = vec4(vColor, 1.0);
  }
`;

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

接下来，我们需要创建一个 WebGL 缓冲区对象。

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [
  -1.0, -1.0, 1.0,
  1.0, -1.0, 1.0,
  1.0, 1.0, 1.0,
  -1.0, 1.0, 1.0,

  -1.0, -1.0, -1.0,
  1.0, -1.0, -1.0,
  1.0, 1.0, -1.0,
  -1.0, 1.0, -1.0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

const colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
const colors = [
  1.0, 0.0, 0.0,
  1.0, 0.0, 0.0,
  1.0, 0.0, 0.0,
  1.0, 0.0, 0.0,

  0.0, 1.0, 0.0,
  0.0, 1.0, 0.0,
  0.0, 1.0, 0.0,
  0.0, 1.0, 0.0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

接下来，我们需要设置 WebGL 渲染状态。

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);

接下来，我们需要绘制 WebGL 图形。

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

gl.useProgram(program);

gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positionLocation = gl.getAttribLocation(program, "position");
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionLocation);

gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
const colorLocation = gl.getAttribLocation(program, "color");
gl.vertexAttribPointer(colorLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(colorLocation);

gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
gl.drawArrays(gl.TRIANGLE_STRIP, 4, 4);