如何解决如何将Regl / WebGL画布放入HTML div容器中
我对网页设计/ javascript等还很陌生,因此请原谅新手水平的知识。
我正在使用Regl开发一些数据可视化,以Jim Vallandingham和Peter Beshai的出色作品为起点在屏幕上显示大量点。我曾经使用过D3.js,所以希望以类似的方式使用它。
我已经能够将Regl / webGL可视化生成为全屏画布,没有问题,但是我接下来要做的是将画布放入html容器中(与D3.js SVG相同可以插入到一个容器中),这样我就可以用html文本等包围。最终,我想尝试构建一个包含此viz的滚动文字。
因此,在下面的示例中,我希望将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,1);
}`,// attributes
attributes: {
position: [
[-1,0],[0,-1],[1,1]
]
},// uniforms
uniforms: {
color: [1,1]
},// vertex count
count: 3
})
drawTriangle();
myFiddle:https://jsfiddle.net/joe_wretham/26xrw3pL/2/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。