Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Mikola Lysenko
    @mikolalysenko
    there are a few catches though since all the contexts are shared you need the same framebuffer and extension status for them
    guillaume-leo
    @guillaume-leo
    I forgot to say thank you Ricky for your help. And also congratulation for your Observable Profile, I really enjoyed you boids gpu :)
    吴桐
    @Phlicess
    Is there any plan to merge this feature?
    regl-project/regl#591
    Mikola Lysenko
    @mikolalysenko
    I haven't reviewed it yet, I can take a look
    Amit Patel
    @redblobgames
    multi-regl and copying webgl to 2d canvases seem like reasonable workarounds, but I found a simpler one: split the page up into smaller ones that each have at most 8 diagrams 🤷‍♂️
    Mikola Lysenko
    @mikolalysenko
    hahaha
    吴桐
    @Phlicess
    @mikolalysenko thx!When will the new version be released? please..
    Mikola Lysenko
    @mikolalysenko
    its out now
    吴桐
    @Phlicess
    @mikolalysenko ok! thx~
    阿豪
    @ahaoboy
    image.png
    image.png
    How can I achieve mask use regl? I find some blog, but I can't understand... o(╥﹏╥)o
    http://www.jiazhengblog.com/blog/2016/04/05/2941/
    https://observablehq.com/@spattana/stenciling-example
    阿豪
    @ahaoboy
    this is my code, but it not work ...
    Is there a simple example use regl?
    import createRegl from "regl";
    export default (canvas: HTMLCanvasElement) => {
      const gl = canvas.getContext("webgl", {
        antialias: true,
        stencil: true,
      })!;
      const regl = createRegl({ gl });
      regl.clear({
        color: [0, 0, 0, 1],
        depth: 1,
        stencil: 1,
      });
      const draw1 = regl({
        frag: `
        precision mediump float;
        varying vec4 color;
        void main() {
          gl_FragColor = color;
        }`,
        vert: `
        precision mediump float;
        attribute vec2 position;
        attribute vec4 inColor;
         varying vec4 color;
        void main() {
          color=inColor;
          gl_Position = vec4(position, 0, 1);
        }`,
        attributes: {
          position: [
            [0, 1],
            [-1, -1],
            [1, -1],
          ].map((i) => i.map((j) => j / 2)),
          inColor: [
            [1, 0, 0, 1],
            [1, 0, 0, 1],
            [1, 0, 0, 1],
          ],
        },
        elements: [[0, 1, 2]],
      });
      const draw2 = regl({
        frag: `
        precision mediump float;
        varying vec4 color;
        void main() {
          gl_FragColor = color;
        }`,
        vert: `
        precision mediump float;
        attribute vec2 position;
        attribute vec4 inColor;
         varying vec4 color;
        void main() {
          color=inColor;
          gl_Position = vec4(position, 0, 1);
        }`,
    
        attributes: {
          position: [
            [0, -1],
            [-1, 1],
            [1, 1],
          ].map((i) => i.map((j) => j / 2)),
          inColor: [
            [1, 1, 0, 1],
            [1, 1, 0, 1],
            [1, 1, 0, 1],
          ],
        },
        elements: [[0, 1, 2]],
      });
      const drawMask = regl({
        stencil: {
          enable: true,
          mask: 0xff,
          func: {
            cmp: "always",
            ref: 1,
            mask: 0xff,
          },
          op: {
            fail: "replace",
            zfail: "replace",
            zpass: "replace",
          },
        },
        colorMask: [false, false, false, false],
        depth: {
          enable: true,
          mask: false,
        },
      });
      const drawStenciled = regl({
        stencil: {
          enable: true,
          mask: 0xff,
          func: {
            cmp: "equal",
            ref: 1,
            mask: 0xff,
          },
        },
        blend: {
          enable: true,
        },
      });
      drawMask(() => {
        draw1();
      });
      drawStenciled(() => {
        draw2();
      });
    };
    Mathieu CAROFF
    @mathieucaroff
    Hello there, I'm interested in comments explaining in more details how the double-framebuffer/texture technique of the game of life example works in the examples
    I understand that we render alternatively from one to the other buffer at each tick, but I do not understand what setupQuad() does, and why we need two regl()-s ; why things cannot be done with only one regl()
    Ricky Reusser
    @rreusser
    regl.frame(() => {
      setupQuad(() => {
        regl.draw()
        updateLife()
      })
    })
    To describe the parts above:
    • regl.frame sets up a loop that executes every frame
    • setupQuad invokes the command created above. The command includes a vertex and fragment shader as well as attribute data
    • If invoked alone or with just an object of props, setupQuad(...) would actually invoke the draw command. However, since it's invoked with a callback, its state is applied and the callback is run, but no actual draw command is issued.
    • In an regl-project/regl#596, regl.draw() is a way around that which does explicitly issue setupQuad's draw command even though it has a callback.
    • Finally, updateLife is called. Since it only has a fragment shader and framebuffer, it uses all other state from the setupQuad command (vertex shader, attributes, primitive, etc).
    Mathieu CAROFF
    @mathieucaroff
    Thank you Ricky Reusser for your explanations. They help me a lot understand how the example works, as well as what to look into the documentation to further my understanding of it. It also makes me feel welcomed and accompanied in my learning of regl
    Ricky Reusser
    @rreusser
    @mathieucaroff No problem! Don't hesitate to ask questions!
    @ahaoboy Here's your code copied into a codepen: https://codepen.io/rsreusser/pen/wvoXYPv?editors=1010 Is it possible to clarify the expected result?
    I see a diamond if I clear the stencil to 0 at the top, but I wasn't certain if that's what I was looking for or not
    kev zettler
    @kevzettler
    I have published a new major version of react-regl@4.0.0 that introduces a new novel 'deferred' interface. This enables you to pass traditional regl draw commands seamlessly as react components like:
    import React from 'react'
    import regl, { ReglFrame } from 'react-regl';
    
    const Triangle = regl({
      vert: `
        precision mediump float;
        attribute vec2 position;
        void main () {
          gl_Position = vec4(position, 0, 1);
        }`,
      frag:`
        precision mediump float;
        uniform vec4 color;
        void main () {
          gl_FragColor = color;
        }`,
      attributes:{
        position: [
          [-1, 0],
          [0, -1],
          [1, 1]
        ]
      },
      uniforms:{
        color: regl.prop('color')
      },
      count: 3
    });
    
    const App = () => {
      return (
        <ReglFrame>
          <Triangle color={[1, 0, 0, 1]} />
        </ReglFrame>
      );
    };
    
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    );
    I am using this in http://crashgiants.io/ to render the same regl draw commands in react contexts and in traditional "raw regl" rendering
    This update also moves the project to typescript
    Mikola Lysenko
    @mikolalysenko
    nice!
    Tom Hutman
    @ath92
    Awesome! That's a very ergonomic API
    Mikola Lysenko
    @mikolalysenko
    oh shit, I messed up by merging a bad pr and publishign it
    I'm going to revert the uniform array changes
    sorry everyone, been very hectic and I made a mistake
    Rezmason
    @Rezmason
    Hi folks, I haven't been here in a while but I just got an email from a researcher about repository health and regl :-| Am I the only one?
    Ricky Reusser
    @rreusser
    @Rezmason Is it clear through which platform they were inquiring? I didn't get anything, though I'm just a glorified passerby. Feels like regl could use a faq section which addresses the fact that it's very much alive and doesn't intend to expand indefinitely.
    Fu Zhen
    @fuzhenn
    sorry, my bad : (, didn't test enough for the uniform array pr
    阿豪
    @ahaoboy
    @rreusser thx, It's my mistake, I forget set stencil flag...
    Leo Accounts
    @leoccnts_gitlab
    @rreusser It's amazing how often I'm learning about something and see you did an implementation before. I've been exploring rendering implicit surfaces with Monte Carlo techniques and found this from you https://www.shadertoy.com/view/wdffWj. I was wondering if you could get me started in reimplementing this in regl? I'm still fairly new to shaders and am having a bit of trouble with the translation. It's for this sort of task https://fab.cba.mit.edu/classes/865.18/people/Amira/Mods_Axis/index_frep.html
    adnan wahab
    @adnan-wahab
    i feel like the world really needs a regl-network-graph library with 1st class support for transitions, animated arcs, zoom, panning, tooltips, labels, and offline layout calculations or webworkers
    adnan wahab
    @adnan-wahab
    Actually I have a question. If one were to design such a library, would you prefer to have 2D only but lots of features or 3D but less features...?
    Ricky Reusser
    @rreusser
    @adnan-wahab I think there are a lot of different use cases, but I had really good luck with gephi: https://gephi.org/
    I had just enough data (which wasn't a lot) that basically the only constraint for me was that the the library have good enough algorithms to untangle the layout. I couldn't find a js library that really nailed that, making any nicer UI features not very useful. But again, that may be very specific to particular cases.
    @leoccnts_gitlab this doesn't do multi-pass and it's not regl, but this might be a nice template for a shadertoy-like interface: https://observablehq.com/@mbostock/shader
    Matthew Turk
    @matthewturk
    I was using regl.party today in class to teach about WebGL/OpenGL and some of the students were getting mixed content http/https warnings, and it wasn't able to load for them. (Not all the students had this issue.) Has anyone else run into this?
    Amit Patel
    @redblobgames
    I used to see that a while back but no longer do
    adnan wahab
    @adnan-wahab
    does anyone know a good example of using offscreen rendering to pick objects? (i'm trying to 'pick' points in pointclouds and cubes.. not sure if a raycaster would be better but seems not)
    Amit Patel
    @redblobgames
    Long long ago in a galaxy far far away I rendered each object in a different color to an offscreen canvas, and then picking objects meant looking up which color was at the mouse pointer. But I kind of assumed people didn't do that anymore.
    1 reply
    Mikola Lysenko
    @mikolalysenko
    matthewturk: that's not good!
    I need to update the dns records
    adnan wahab
    @adnan-wahab
    has anyone seen a bug where you render stuff to an FBO offscreen, then render that fbo to screen, and it works for one frame, but if you mouse over the canvas it disappears
    weird when i dont clear the screen it like blends and bleeds everywhere. but if i do clear it, the background eats my pointcloud... but only on the second frame :o
    omg it works when i clear the depth buffer before drawing to FBO wowwww amazing so cool
    John Wilkinson
    @jcwilk
    anyone run into an issue where using a "float" (32 bit) texture in a framebuffer on mobile seems to result in a "half float" (16 bit) texture, but when run on a desktop it correctly uses the full 32 bits? changing it to "half float" makes it the same behavior on both. tried checking webglreport.com and didn't see any differences in float, half float, or general precision metrics. may very well be doing something wrong, I'm a bit new to webgl stuff, but figured I'd see if there might possibly be a known issue there either with mobile browser webgl implementations, mobile graphics cards, or regl