Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

framebuffer copy coordinates #2

Open
ghost opened this issue Oct 7, 2016 · 1 comment
Open

framebuffer copy coordinates #2

ghost opened this issue Oct 7, 2016 · 1 comment
Labels

Comments

@ghost
Copy link

ghost commented Oct 7, 2016

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'
  })
})
@ghost ghost changed the title framebuffer copy framebuffer copy coordinates Oct 7, 2016
@mikolalysenko
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant