d3.js 如何将Regl/WebGL画布放入HTML div容器

zmeyuzjn 于 11个月前发布在其他

关注(0)|答案(1)|浏览(91)

我对网页设计/JavaScript等非常陌生，所以请原谅新手水平的知识。
我正在使用Regl开发一些数据可视化，以Jim Vallandingham和Peter Beshai的出色工作为起点，在屏幕上显示大量的点。我使用了一点D3.js，所以希望以类似的方式使用它。
我已经能够生成Regl/webGL可视化作为一个全屏画布没有任何问题，但我想做的下一步是把画布到一个html容器（以同样的方式，D3.js SVG可以插入到一个容器），这样我就可以用html文本等包围最终我想尝试构建一个滚动片结合这个可视化。
因此，在下面的例子中，我想将Regl/webGL画布附加到“div”html容器，并调整大小以适应400 x300 px的尺寸。我不知道如何做到这一点，因为没有命令将画布附加到html元素。
有人能帮忙吗？先谢了
超文本标记语言：

<!DOCTYPE html>
<script src="https://npmcdn.com/[email protected]/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();

型
myFiddle：https://jsfiddle.net/joe_wretham/26xrw3pL/2/

d3.js

来源：https://stackoverflow.com/questions/63707397/how-can-i-put-a-regl-webgl-canvas-into-a-html-div-container

1条答案

按热度按时间

yrdbyhpb1#

很抱歉这么长时间才有人回答你的问题！下面是如何在浏览器画布中运行Regl，有一个简单的html和JavaScript文件的例子。

basic.html

<!DOCTYPE html>
<title>Simple regl Triangle Example in Canvas</title>

<body style="background-color:black;">
  <br><br><br>
 <center> <canvas id="myCanvas" width="400" height="400"></canvas> </center>

  <script src="https://npmcdn.com/[email protected]/dist/regl.js"></script>
  <script src="basic.js"></script>

</body>

字符串

basic.js

var regl = createREGL(document.getElementById('myCanvas'));

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
})
regl.clear({color:[1,1,1,1]})
drawTriangle();

型

浏览器输出：

x1c 0d1x的数据

赞(0）回复(0）举报 11个月前

我来回答

d3.js 如何将Regl/WebGL画布放入HTML div容器

1条答案

相关问题

热门标签

最新问答