## Where communities thrive

• Join over 1.5M+ people
• Join over 100K+ communities
• Free without limits
• Create your own community
##### Activity
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
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);
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
Alberto
@nkint
hei! this seems an interesting project: https://github.com/caa1211/webOAcard
http://caa1211.github.io/webOAcard/?m=castle
do anyone know any similar project? or some reference about the math behind this?
Mikola Lysenko
@mikolalysenko
i used to make those kinds of things when i was a kid
i think you just cut out a parallelogram at the right distance and fold it
then they glue on some stuff on the front to make whatever shape
ayshvab
@ayshvab
Hi, maybe someone has an example of how to draw an isometric grid ?
Amit Patel
@redblobgames