Блог

Главная - Вопросы по программированию - Как я могу поместить холст Regl / WebGL в контейнер HTML div

Как я могу поместить холст Regl / WebGL в контейнер HTML div

#javascript #html #d3.js #webgl #regl

#javascript #HTML #d3.js #webgl #regl

Вопрос:

Я очень новичок в веб-дизайне / javascript и т.д., Поэтому, пожалуйста, простите знания уровня новичка.

Я разрабатываю некоторые визуализации данных с использованием Regl для отображения большого количества точек на экране, используя фантастическую работу Джима Валландингема и Питера Бешая в качестве отправной точки. Я использовал D3.js немного поэтому надеялся использовать это аналогичным образом.

Я смог без проблем сгенерировать визуализацию Regl / WebGL в виде полноэкранного холста, но что я хотел бы сделать дальше, так это поместить холст в контейнер html (таким же образом, что и D3.js SVG можно вставить в контейнер), чтобы я мог окружать html-текстом и т.д. В конечном счете, я хотел бы попытаться создать фрагмент scrollytelling, включающий это, а именно.

Итак, в приведенном ниже примере я бы хотел, чтобы холст Regl / WebGL был прикреплен к html-контейнеру «div» и изменен в соответствии с размерами 400×300 пикселей. Я понятия не имею, как это сделать, хотя нет команды для прикрепления холста к элементу html в соответствии с D3.

Кто-нибудь может помочь? Заранее спасибо

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();

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

Комментарии:

1. Почему бы просто не поместить вашу скрипку в фрагмент ?

2. Вы можете найти это полезным, хотя оно не основано на «regl». Также # 2 и # 3 на этой странице

Ответ №1:

Извините, что кому-то потребовалось так много времени, чтобы ответить на ваш вопрос! Вот как запустить Regl в браузере canvas, на простом примере файла 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/regl@2.1.0/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();

вывод браузера:

введите описание изображения здесь