我对网页设计/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();