regl-project / multi-regl

Multiplex a regl instance across different DOM elements
https://regl-project.github.io/multi-regl/index.html
22 stars 7 forks source link

framebuffer copy coordinates #2

Open ghost opened 7 years ago

ghost commented 7 years ago

I can't get the text demo in regl/example/text.js to work properly under multi-regl, which is the crux of another demo I'm working on based on this technique. The coordinates of the copied framebuffer seem to be based on the page canvas, not the custom canvas:

var canvas = document.body.appendChild(document.createElement('canvas'))
canvas.style.display = 'block'
canvas.style.margin = 'auto'
canvas.style.height = '300px'
//const regl = require('regl')(canvas) // <-- works
const regl = require('multi-regl')()(canvas) // <-- does not work
const vectorizeText = require('vectorize-text')
const perspective = require('gl-mat4/perspective')
const lookAt = require('gl-mat4/lookAt')

const textMesh = vectorizeText('hello regl!', {
  textAlign: 'center',
  textBaseline: 'middle'
})

const feedBackTexture = regl.texture({
  copy: true,
  min: 'linear',
  mag: 'linear'
})

const drawFeedback = regl({
  frag: `
  precision mediump float;
  uniform sampler2D texture;
  uniform float t;
  varying vec2 uv;
  void main () {
    vec2 warp = uv + 0.01 * sin(t) * vec2(0.5 - uv.y, uv.x - 0.5)
      - 0.01 * (uv - 0.5);
    gl_FragColor = vec4(0.98 * texture2D(texture, warp).rgb, 1);
  }`,

  vert: `
  precision mediump float;
  attribute vec2 position;
  varying vec2 uv;
  void main () {
    uv = position;
    gl_Position = vec4(2.0 * position - 1.0, 0, 1);
  }`,

  attributes: {
    position: [-2, 0, 0, -2, 2, 2]
  },

  uniforms: {
    texture: feedBackTexture,
    t: ({tick}) => 0.001 * tick
  },

  depth: {enable: false},

  count: 3
})

const drawText = regl({
  frag: `
  precision mediump float;
  uniform float t;
  void main () {
    gl_FragColor = vec4(
      1.0 + cos(2.0 * t),
      1.0 + cos(2.1 * t + 1.0),
      1.0 + cos(2.2 * t + 2.0),
      1);
  }`,

  vert: `
  attribute vec2 position;
  uniform mat4 projection, view;
  void main () {
    gl_Position = projection * view * vec4(position, 0, 1);
  }`,

  attributes: {
    position: textMesh.positions
  },

  elements: textMesh.edges,

  uniforms: {
    t: ({tick}) => 0.01 * tick,

    view: ({tick}) => {
      const t = 0.01 * tick
      return lookAt([],
        [5 * Math.sin(t), 0, -5 * Math.cos(t)],
        [0, 0, 0],
        [0, -1, 0])
    },

    projection: ({viewportWidth, viewportHeight}) =>
      perspective([],
        Math.PI / 4,
        viewportWidth / viewportHeight,
        0.01,
        1000)
  },

  depth: {enable: false}
})

regl.frame(() => {
  drawFeedback()
  drawText()
  feedBackTexture({
    copy: true,
    min: 'linear',
    mag: 'linear'
  })
})
mikolalysenko commented 7 years ago

Yeah, that's a bug. multi-regl should capture this and wrap texture copies appropriately.