Where communities thrive

Join over 1.5M+ people
Join over 100K+ communities
Free without limits
Create your own community

Explore more communities

mikolalysenko/regl

Declarative stateless rendering for WebGL

People

Repo info

Activity

Greg Fagan

@gregfagan

ah, it worked when I changed it from tex(data) to tex.subimage(data)

Greg Fagan

@gregfagan

@redblobgames do you use the API as-is, or wrap it to be pure/immutable? I know for performance reasons it's better to mutate the data in place, but I'm not sure how much it matters for the kind of projects I do, and a functional API is easier to use

Amit Patel

@redblobgames

glmatrix offers both — if you pass in [] as the first argument, you get back new values, or if you pass in an existing matrix/vector it mutates in place

Greg Fagan

@gregfagan

ah okay yeah that makes sense, I was doing vec2.add(vec2.create(), a, b) but just using [] would be less typing

do you usually do the former or the latter?

(create new values/mutate existing ones)

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

Or you might try https://www.skypack.dev/view/regl

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

Mikola Lysenko

@mikolalysenko

http://www.cs.cmu.edu/~kmcrane/Projects/CEPS/index.html

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

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);

Chat via Matrix