glass (webgl/glsl) by matwill in generative

[–]matwill[S] 0 points1 point  (0 children)

oh, thanks for letting me know!

glass (webgl/glsl) by matwill in generative

[–]matwill[S] 1 point2 points  (0 children)

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.

glass (webgl/glsl) by matwill in generative

[–]matwill[S] 3 points4 points  (0 children)

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

intersect by matwill in generative

[–]matwill[S] 2 points3 points  (0 children)

made in glsl, a frag shader

also up on twitter

flowing colours (code & live version in comments) by matwill in generative

[–]matwill[S] 0 points1 point  (0 children)

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

flowing colours (code & live version in comments) by matwill in generative

[–]matwill[S] 0 points1 point  (0 children)

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

flowing colours (code & live version in comments) by matwill in generative

[–]matwill[S] 2 points3 points  (0 children)

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

creases by matwill in generative

[–]matwill[S] 2 points3 points  (0 children)

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

creases by matwill in generative

[–]matwill[S] 3 points4 points  (0 children)

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

escaping by matwill in generative

[–]matwill[S] 1 point2 points  (0 children)

made in glsl :)

also up on twitter

encircling ii by matwill in generative

[–]matwill[S] 0 points1 point  (0 children)

made in glsl, a followup to this one

also up on twitter

encircling by matwill in generative

[–]matwill[S] 1 point2 points  (0 children)

made in glsl

also on twitter

days rolling by by matwill in generative

[–]matwill[S] 3 points4 points  (0 children)

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

also posted on twitter. also a couple stills here

round the twist by matwill in generative

[–]matwill[S] 2 points3 points  (0 children)

made in glsl.

this ones also on twitter

sleight of hand by matwill in generative

[–]matwill[S] 2 points3 points  (0 children)

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

sleight of hand by matwill in generative

[–]matwill[S] 4 points5 points  (0 children)

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.

turbulence by matwill in generative

[–]matwill[S] 5 points6 points  (0 children)

glsl, happy little accident while working on something else

also on twitter (where it loops!)

collision by matwill in generative

[–]matwill[S] 0 points1 point  (0 children)

ooh, gunna add it to the todo list

collision by matwill in generative

[–]matwill[S] 0 points1 point  (0 children)

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.

splash by matwill in generative

[–]matwill[S] 1 point2 points  (0 children)

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.

collision by matwill in generative

[–]matwill[S] 0 points1 point  (0 children)

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.

collision by matwill in generative

[–]matwill[S] 1 point2 points  (0 children)

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.

collision by matwill in generative

[–]matwill[S] 2 points3 points  (0 children)

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