0

我对网页设计/javascript等非常陌生,所以请原谅菜鸟级别的知识。

我正在使用 Regl 开发一些数据可视化,以使用 Jim Vallandingham 和 Peter Beshai 的出色工作作为起点,在屏幕上显示大量点。我已经使用了一点 D3.js,所以希望以类似的方式使用它。

我已经能够毫无问题地将 Regl/webGL 可视化生成为全屏画布,但接下来我想做的是将画布放入 html 容器中(与可以插入 D3.js SVG 的方式相同)到容器中),以便我可以用 html 文本等包围。最终,我想尝试构建一个包含这个可视化的滚动条。

因此,在下面的示例中,我希望将 Regl/webGL 画布附加到“div”html 容器并调整大小以适应 400x300px 尺寸。我不知道该怎么做,因为没有根据 D3 将画布附加到 html 元素的命令。

任何人都可以帮忙吗?提前致谢

HTML:

<!DOCTYPE html>
<script src="https://npmcdn.com/regl@1.3.0/dist/regl.js"></script>
<div id="div" width="400" height="300"></div>

JS:

var regl = createREGL();

var drawTriangle = regl({

  // fragment shader
  frag: `
precision mediump float;
uniform vec4 color;
void main () {
gl_FragColor = color;
}`,

  // vertex shader
  vert: `
precision mediump float;
attribute vec2 position;
void main () {
gl_Position = vec4(position, 0, 1);
}`,

  // attributes
  attributes: {
    position: [
      [-1, 0],
      [0, -1],
      [1, 1]
    ]
  },

  // uniforms
  uniforms: {
    color: [1, 0, 0, 1]
  },

  // vertex count
  count: 3
})

drawTriangle();

我的小提琴:https ://jsfiddle.net/joe_wretham/26xrw3pL/2/

4

0 回答 0