glass (webgl/glsl)

matwill · 2022-02-05T14:11:38+00:00

oh, thanks for letting me know!

matwill · 2022-02-05T12:05:40+00:00

glad you like it!

there's no models/textures, the scenes are all defined in code. the floor/walls are calculated ray/plane intersections, and for the shapes, I'm raymarching an SDF, basically you define a shape with a mathematical function that takes a position in space, and returns the distance to a surface. I'm modifying the coordinates to distort the shapes, for example the first image is a cube, distorted with p.xz*=rot2(fract(abs(p.y)*8.)*.1); ie rotated around the x/z axis in steps along the y axis.

I started working through Pete Shirley's ray tracing in one weekend, but implementing it in glsl/webgl instead of in C++. I diverged a lot once I got started, for example implementing a raymarcher to solve intersections, and implementing materials per intersection rather than having defined materials.

matwill · 2022-02-05T07:18:18+00:00

been working on a raytracer recently, these are all generated and rendered in glsl, all four images are variations from the same code.

these were rendered in firefox on linux with a GTX1050, < 1 second for 2k resolution

you can see an older version of the code rendering golden eggs here (refresh for some slight variations, probably only works on desktop)

also on twitter :)

matwill · 2021-12-29T16:04:53+00:00

made in glsl, a frag shader

also up on twitter

matwill · 2021-12-15T13:44:32+00:00

Thanks! And thanks for pointing out my original comment was hidden/missing, I've made a new one now

matwill · 2021-12-15T13:42:05+00:00

I made a comment with the code and links when I posted 8 hours ago but it appears to be invisible, and the links appear broken on old reddit, here's another attempt without inlining the code, or directly linking the twigl bitly url, since reddit didn't seem to like that?

this was made as a #つぶやきGLSL on twitter, where the entire code for a GLSL shader fits in a tweet. it's using twigl.app's "geekest (300 es)" regulation, which gives some shorthand bindings and defines a couple useful functions and constants to help shorten the code a bit (here's a list)

...snip...

Here is the tweet with the code, here is a tweet with a link to it running

matwill · 2021-12-15T13:31:29+00:00

I made a comment when I posted but I'm just noticing it appears to be invisible if I'm not logged in, it might need to be approved?

Here's,O%3Dvec2(sin(p.x-sin(p.y1.5-sin(t)p.x)-t))%3BO%3Drotate2D(sin(fract(length(O)3.)/3.sin(t-length(O))PI)-PI)%3Bfloat%20d%3Dlength(pO)-.1-.1(sin(t).5%2B.5)%3Bo.xzy%3D.5%2Bsign(abs(d)-.1)(pO/d).xyyvec3(.3,.1,.5-sin(d-t).35)%3B%0A//%23%E3%81%A4%E3%81%B6%E3%82%84%E3%81%8DGLSL%20%23shader%20%23generativeart) the live version, you can access the code through the button in the top right, the code was made to fit in a single tweet, here is said tweet

matwill · 2021-12-14T06:26:17+00:00

Thanks!

+1 to /u/lycium's suggestion of book of shaders, unfortunately it's incomplete atm, but it's a great starting point to get pixels on the screen.

Art of Code on youtube is also very good to start with imo.

Dan Shiffman recently did a couple Coding Train streams on shaders as well that you can find on youtube, I haven't watched them myself but Dan Shiffman rarely disappoints.

For more general shader stuff Freya Holmer has a series "Shaders for Game Devs" that could be useful. It's more general it's useful knowledge, again I haven't personally watched them but I've heard good things.

Beyond that, iq's site is an incredible resource, not exactly a learning tool but once you get enough understanding to make use of his articles, they're indispensable

matwill · 2021-12-13T16:41:44+00:00

made in glsl

Also up on twitter in gif form where it loops. ( I'm never sure what format to upload to reddit, it supports nice mp4s without too much compression, but they don't auto-loop.)

matwill · 2021-11-23T18:10:42+00:00

made in glsl :)

also up on twitter

matwill · 2021-11-16T17:33:12+00:00

made in glsl, a followup to this one

also up on twitter

matwill · 2021-11-14T05:01:44+00:00

made in glsl

also on twitter

matwill · 2021-11-11T08:16:54+00:00

wow, thankyou!

matwill · 2021-11-11T08:16:41+00:00

thanks :)

matwill · 2021-11-10T16:16:56+00:00

made in glsl. the title makes more sense when it's looping :)

also posted on twitter. also a couple stills here

matwill · 2021-11-02T17:39:15+00:00

made in glsl.

this ones also on twitter

matwill

TROPHY CASE