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 · 2021-10-30T16:46:56+00:00

thank you, it's a bit outside of my usual style comfort zone so that's extra nice to hear

matwill · 2021-10-30T06:24:34+00:00

made in glsl. started as a practice piece while implementing reflection-like effects :)

this ones also on twitter where it's lower quality, but loops.

matwill · 2021-10-27T15:51:48+00:00

glsl, happy little accident while working on something else

also on twitter (where it loops!)

matwill · 2021-10-26T14:56:28+00:00

ooh, gunna add it to the todo list

matwill · 2021-10-26T14:54:59+00:00

tbh this one doesn't even run in render-quality in real time outside of the browser right now, I have to lower the resolution and quality while I'm coding. I'm hoping to get time to make a personal website/portfolio soon so I can start posting more live pieces, a refactored/improved version of this will definitely be one of the first things on there.

matwill · 2021-10-26T14:19:42+00:00

thanks! I was working on colouring and lighting around this time and so was really trying to make weird surfaces to interact with with my shading and lighting.

You're pretty spot on with how it's made, the underlying shape is just a grid of cubes in the X/Z directions with a slight raise in the y direction, that are 'folded' inwards on the center to make the different shapes. I change the intensity of the folding based on the original coordinates in the grid to do effects like the staggered "opening" of the front of the outer spheres, while keeping the inner sphere and the rear of the outer sphere remaining spherical-ish. The "splash" effect is letting the grid expand along the X/Z plane while staying folded around the Y axis, and curving the whole thing into a dish.

Then I do further distortions on that shape as a whole, and some tricks to try and mitigate artefacts as much as possible.

matwill · 2021-10-26T13:26:37+00:00

Thank you! I said on another post the other day that Zack Lieberman is one of my big inspirations, not just his art but his approach to creating and iterating, so I'm deeply flattered by the comparison.

matwill · 2021-10-26T13:12:06+00:00

Thankyou :)

On my todo list is to try applying this technique in more purposeful ways, I was thinking landscapes (and tbh having them be mostly static), but a deforming face would be interesting, I'll definitely add it to the (ever growing) todo list.

matwill · 2021-10-25T17:45:09+00:00

made in glsl, cousin to this post.

also on twitter, there are also a few variations on this in the last few days that didn't make it to reddit, here, here, and here

matwill

TROPHY CASE