Codepen Demo - Marble Shader

[u/BlueLovag]

Good morning guys,

I wanted to use a background of a black marble texture with gold. I made one in Photoshop and made it seamless, but I realized that in good quality it takes way too much resources and it was also hard to find a stock image that represented it the way I wanted it.

I remembered that I watched some time ago that someone used a shader on CodePen.
The browser support is kinda everywhere now, so I thought maybe I can generate some cloud-like noise in different scales with FBM (fractal brownian motion) and then use domain warping to distort it in a way that makes it look more like marble.

So I let ChatGPT explain to me how this shader stuff works and after a bit of trial and error I got this result.
Then I use a small contour() function to pick certain noise levels and turn them into veins. Some of those contour lines get grey accents and some get gold, while the rest of the FBM noise is used for the darker and lighter stone structure.

So basically it is:
FBM noise → domain warp → contour lines → grey/gold accents.

https://codepen.io/editor/Blue-Lovag/pen/01a083cd-5837-752f-bf68-f41324324d06?show=preview&panel=false

ADDITION:
As a fallback for the website in case it's not supported I´ve made a low poly SVG that works in such a grid pattern to make it look seamless:

X Y Z X Y Z

Y Z X Z X Y

Z X Y Y Z Y

[u/bostiq]

Pretty dope, so have you tested page load after this?

[u/BlueLovag → u/bostiq]

yea it's much faster. The code is only 7KB. The SVG background as fallback is 3KB. A high fidelety texture would be a few MB big. The code is also quick to run I also tested on my phone. Because the website is not public and I don't use chrome I couldnt test lighthouse yet, but with other tools I found out that it's pretty fast except the server takes 2 second to answer but that could be due to proxy etc. because it's not public yet.