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
    I use [] most of the time (it's easier, less error prone), but occasionally I'll mutate existing ones, even try to reuse across animation frames. But it's rare that I need to push performance that much.
    Jack Kutilek
    @jackkutilek
    hi there! is there a way to use regl in a js module without npm/webpack? having trouble using a plain es6 import
    Greg Fagan
    @gregfagan
    https://github.com/regl-project/regl#standalone-script-tag
    it's not packaged as an ES module, but after loading the script on the page you should be able to use the global constructor from your module
    Amit Patel
    @redblobgames
    I haven't gotten it working as an es6 import yet but I use the script tag version often.
    https://www.npmjs.com/package/esinstall can convert many packages into es6 modules
    Amit Patel
    @redblobgames
    Jack Kutilek
    @jackkutilek
    thanks! i've been using the script tag for now, just decided that was good enough
    kev zettler
    @kevzettler

    Can someone explain the math in this example to me?
    https://github.com/regl-project/regl/blob/gh-pages/example/texture.js

    specifically the gl_Position = vec4(1.0 - 2.0 * position, 0, 1);

    I don't get what this magic 1.0-2.0* position is doing

    Amit Patel
    @redblobgames
    The position coordinate system is usually -1 to +1, but the texture coordinate system is 0 to 1
    I think they're starting with position being 0 to 1
    So 1.0 - 2.0 * position becomes 1 - 2 X 0 = 1 when position is 0, or 1 - 2 X 1 = -1 when position is 1.
    So they turn the range 0 to 1 into +1 to -1
    It's a trick to avoid having to put in both the screen position (-1 to +1) and the texture uv (0 to 1) in separate attributes. I think it only works in the simplest case, when you want to draw the texture to the screen.
    And they're inverting it, because texture 0 = top 1 = bottom, but on screen -1 = bottom +1 = top
    But they invert both x and y which means this texture is flipped left/right I think!
    I think it would be better not to invert it here, but instead use flipY when loading the texture.
    Mikola Lysenko
    @mikolalysenko
    yeah
    its a bit messy, could make it simpler
    kev zettler
    @kevzettler
    thanks @redblobgames great explanation. much appreciated
    Julian Scheid
    @jscheid
    Hi, regl looks amazing! Do I understand correctly that it generates code at runtime (and presumably evals it)? If so, is there also a way to do AOT compilation, for quicker startup and to avoid issues with CSP?
    Specifically I'm wondering if it could be integrated with vite (rollup)
    Mikola Lysenko
    @mikolalysenko
    jscheid: yeah
    for the ahead of time code generation, it's not been explored but i'd be open to adding this
    the main problem is finding a nice way to support it
    Julian Scheid
    @jscheid
    yeah I've had a look at the code, it might be a bit hairy...
    Julian Scheid
    @jscheid
    (it looks [at first glance] like it would need quite a bit of reorganizing to accommodate this feature)
    Mikola Lysenko
    @mikolalysenko
    yes, i think it's not easy
    i can help set this up, but the main issue is figuring out how to do the ahead-of-time code generation
    i think you can probably isolate the code generation stuff and if you can feed it purely static arguments it should be able to do the rest on its own
    also the codegen is deterministic so you could just memoize it ahead of time if you don't care about bloating your js size
    Aron Gabor
    @ashnur
    https://oakes.github.io/iglu/ going to try this with regl. Anyone taking bets on my chances for success?
    Amit Patel
    @redblobgames
    I think your chances of success are high!
    Mikola Lysenko
    @mikolalysenko
    could be interesting
    Aron Gabor
    @ashnur
    it's difficult, every guide and tutorial uses a different version, so I get | ERROR: unsupported shader version :)
    guess I need to learn much more about different versions of shaders
    Aron Gabor
    @ashnur
    How can I make sure I have all the debug features enabled if I am not using browserify?
    Matt Lockyer
    @mattlockyer
    wondering how to do something similar to preserveDrawingBuffer: true (from threejs) in regl, so that you can use canvas.toDataUrl(...)?
    Mikola Lysenko
    @mikolalysenko
    you can just set preserveDrawingBuffer in the context creation flags
    ashnur: you can directly include the library
    if you manually specify the input file it should work
    Max Bittker
    @MaxBittker
    localhost_9966_.png
    I am drawing on an html canvas using some canvas APIs (looks sharp), then constructing a regl texture from that canvas and passing it to a fragment shader where i use texture2D... it works except it comes out super jaggy (bottom image)
    does anyone recognize this problem and you could you suggest what I might want to investigate? right now the texture has all default parameters... do you think this is an interpolation thing?
    my shader is just gl_FragColor = texture2D(tex, uv);
    Max Bittker
    @MaxBittker
    sorry, i've solved it :) the canvas i was rendering to was the wrong size
    Max Bittker
    @MaxBittker
    but might be a cool visual effect to revisit in the future :P
    Amit Patel
    @redblobgames
    :-)
    Max Bittker
    @MaxBittker
    If anyone else is into this aesthetic, I wanted to share this video I LOVE of someone showing off their jpeg-compression shader (also just makes me happy to see people excited about sharing graphics): https://twitter.com/ompuco/status/1334402098750869507?s=20
    Mikola Lysenko
    @mikolalysenko
    you could break the image into blocks and then do a dct/thresholding pass
    Nick Matantsev
    @unframework
    i looooved that shader by Ompuco - and especially the fact that they actually followed the JPEG algorithm and glitched it, rather than e.g. approximating via blur/posterization/whatever