html 使用Vega-lite和WebGL渲染100000点

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 使用Vega-lite和WebGL渲染100000点相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<meta charset="utf-8">

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/vega/build/vega.min.js" charset="utf-8"></script>
<script src="https://unpkg.com/vega-webgl-renderer/build/vega-webgl-renderer.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-beta.3/vega-lite.js"></script>

    
<div id="vis"></div>

<script>
  var numPoints = 100000;
  var pointWidth = 4;
  var width = 800;
  var height = 800;

  // create initial set of points
  var rng = d3.randomNormal(0, 0.15);
  var dataPoints = d3.range(numPoints).map(i => ({
    x: (rng() * width) + (width / 2),
    y: (rng() * height) + (height / 2),
    c: Math.random(),
  }));

  console.log(dataPoints.length);

  var scatterJson = {
    "width" : 500,
    "height": 500,
    "data": {
      "values": dataPoints
    },
    "mark": "circle",
    "encoding": {
      "x": {"field": "x", "type": "Q", "axis": null},
      "y": {"field": "y", "type": "Q", "axis": null},
      "color": {"field": "c", "type": "Q", "legend": null},
    },
    "config": {
      "background": "black",
    }
  }


  var vgSpec = vl.compile(scatterJson).spec;
  var view = new vega.View(vega.parse(vgSpec))
    .initialize(document.querySelector('#vis'))
    .renderer('webgl')
    .run();

 
</script>

以上是关于html 使用Vega-lite和WebGL渲染100000点的主要内容，如果未能解决你的问题，请参考以下文章

使用 altair / vega-lite / vega-embed 控制画布大小

WebGL的颜色渲染-渲染一张DEM(数字高程模型)

求助WebGL 中渲染器问题

WebGL编程指南pdf

Webgl/Threejs 学习及实践总结