Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Amit Patel
    @redblobgames
    twgl is a bit smaller, at 50k, compared to picogl at 67k or regl around 90k
    twgl is from the author of https://webgl2fundamentals.org/ and he's also made useful things like webgl-lint and webgl-memory and webgl-capture
    Micah
    @micahscopes
    picogl is looking like it hits a sweet spot right now
    ojack
    @ojack:matrix.org
    [m]
    Is there a way to only use a part of an image or video as a texture? As far as I can tell, passing width, height, x, and y to the texture function has no effect on images and videos
    Ricky Reusser
    @rreusser
    @ojack:matrix.org I had to convince myself that I'd get the half-pixel offsets just right, so here's a notebook that transforms the texture sampling coordinate to accomplish this: https://observablehq.com/@rreusser/sampling-a-partial-image-in-webgl
    1 reply
    turns out you don't have to care about half-pixels in order to get the extents just right.
    Of course it's kind of wasteful to only sample part of the texture, but nothing in the webgl API jumps out as supporting a partial image/video: https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texImage2D
    meh.
    @meh
    if I have a uniform that is a regl.texture built from a typed array coming from a prop, is it expected to update the texture/buffer on every draw call?
    because it seems not to do that
    Ricky Reusser
    @rreusser
    @meh it will not automatically update the texture. To do that, you can manually call texture.subimage: https://github.com/regl-project/regl/blob/master/API.md#texture-subimage
    I'm not 100% sure your setup, but one thing definitely not to do is uniforms: { texture: (ctx, props) => regl.texture(props.textureData) }, as this will instantiate a new texture on every frame (without destroying previous textures?) and so will be very slow
    Jeff Huber
    @jeffreyhuber_twitter
    is it possible to pass a buffer to a fragment shader? for example, i have a face buffer, [0,1,2,3,4,5...], and I wanted to pass a buffer that represents selected state [false, false, false, true, true, true...]. i could hack this by using a selected buffer the same length as the vertex buffer and passing it through the vertex shader, but that seems unideal for a bunch of reasons. am i missing something? is this possible?
    Ricky Reusser
    @rreusser
    @jeffreyhuber_twitter :wave: one approach might be to use (or just implement from scratch; it's a straightforward operation) something like this: https://github.com/hughsk/unindex-mesh
    an indexed mesh passes vertices once and then uses elements to reuse the same vertex in multiple triangles. an unindexed mesh just duplicates 'em all so that every three vertices make a new triangle. then you could pass
    vertices = [[ v0, v1, v2 ], [ v3, v4, v5 ], [ v6, v7, v8 ]]
    selected = [[1, 1, 1], [0, 0, 0], [1, 1, 1]]
    Jeff Huber
    @jeffreyhuber_twitter
    hi ricky! @rreusser :) :wave: -- going to process this
    Ricky Reusser
    @rreusser
    it's pretty obviously wasteful, but unless someone has a clever idea, I think it's the only way. With an indexed mesh you can only really interpolate by vertex, not by face.
    Jeff Huber
    @jeffreyhuber_twitter
    with some more googling, it seems generating a texture is the other way?
    Ricky Reusser
    @rreusser
    hmm, interesting…
    in other words, I think the only way to get buffer data into a fragment shader is via a varying, and unless you have the same value at all three faces, that varying won't be constant across the face (you want to select faces, no?). If you want the varying to be constant, you just have to construct every face from three independent vertices and pass an identical selected value for each corner.
    Jeff Huber
    @jeffreyhuber_twitter
    i think this is related: https://stackoverflow.com/questions/7954927/passing-a-list-of-values-to-fragment-shader, though not sure which/what of this is implemented in webgl
    Ricky Reusser
    @rreusser
    (oh, I think geometry shaders also address this, but not in WebGL)
    Jeff Huber
    @jeffreyhuber_twitter
    right
    in my very specific case im rendering disconnected "meshes" as one mesh (maybe unideal)
    so maybe a varying would work... since it is guaranteed to be consistent.
    Screen Shot 2022-05-25 at 3.31.41 PM.png
    a visual
    Ricky Reusser
    @rreusser
    ah, yeah, as long as they're disjoint, then you can pass a parallel list of 1/0 via a varying
    Jeff Huber
    @jeffreyhuber_twitter
    sweet, ill try that!
    ty :)
    Ricky Reusser
    @rreusser
    the problem is where two triangles meet. because of how vertex interpolation works, you can't get a different value onto two adjacent faces unless you just duplicate all the vertices and make them effectively disjoint
    Jeff Huber
    @jeffreyhuber_twitter
    right, totally makes sense
    Ricky Reusser
    @rreusser
    but yeah, now I see. you could totally sample from a texture rather than a varying if random access were a requirement
    if you don't need random access, then a varying is probably easier
    Jeff Huber
    @jeffreyhuber_twitter
    i ran into something similar for the color buffer... i ended up created a buffer the same length as the vertex buffer and passing it through the vertex shader to the fragment shader . worked...
    yeah - random not necessary
    Ricky Reusser
    @rreusser
    (just be sure to use buffer.subdata() to update the isSelected buffer and not create or reinitialize the buffer. it's much faster)
    Jeff Huber
    @jeffreyhuber_twitter
    great tip, thank you!
    Ricky Reusser
    @rreusser
    miss y'all. have been busy and have totally failed to schedule something and get myself over to SF to catch up. hope things are good!
    Jeff Huber
    @jeffreyhuber_twitter
    likewise!! let's catch up soon! :)
    Max Bittker
    @MaxBittker
    does anyone have working code for regl -> gif ?
    i'm experiencing something weird where I seem to only be able to use a regl context once, and can export a single frame
    but after that i get stale data
    it works if i wastefully make one regl context per frame of my gif but i'm confused!
    (using preserveDrawingBuffer: true)
    Max Bittker
    @MaxBittker
    maybe I'm not clearing correctly, and there's something to be done with regl.clear, depth buffer, or stencil (?)
    Max Bittker
    @MaxBittker
    I think my problem was the clearing! seems to work now :)
    Jeff Huber
    @jeffreyhuber_twitter
    I am sure this is a dumb question... how would one sample a regl texture from js (not the shader)?
    Ricky Reusser
    @rreusser
    you can read pixels: https://github.com/regl-project/regl/blob/master/API.md#reading-pixels
    tex = regl.texture()
    fbo = regl.framebuffer({texture: tex})
    …
    x = new Uint8Array(width * height * 4)
    fbo.use(() => regl.read(x))
    or you can read a smaller block if you just need a pixel or two.
    Garrett Walker
    @garrlker

    First chance I've had to mess with regl thanks to the holidays slowing work down a bit.
    tldr; I made an audio visualizer in regl and piped my guitar audio interface into it.

    This works thanks to many random snippets I found here from @rreusser and @mikolalysenko