css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Exploring shaders, noise and fbm. The result is scary.

This Pen is a fork, but the parent Pen is now private.


  1. Outstanding effect! The level of detail is just superb.

    Don't forget to set canvas { display: block; } to prevent issues in iOS Safari in particular! Also: spewing is misspelled :-)

  2. @shshaw Thank you very much! fixed the text. I didn't know about the iOS issue, so thanks for pointing it out!

  3. Ooh, pretty AF.

  4. Awesome effect, but getting crazy low framerates on Nexus 6P, which runs other WebGL at 60fps. No idea why yet but if I find the issue I will let you know.

  5. No luck sourcing the issue as of yet. I stripped down a lot of it. I suspect it'll be to do with the shader/vertex logic though. I am a completely n00b there so unable to look into it further. Thanks for the awesome effect otherwise!

  6. @ctrlplusb That's probably due to the complexity of the shader indeed. There are a few recursive functions that make it pretty heavy and not optimised for mobile. Thanks for trying, and thanks for the kind words!

  7. @ctrlplusb it's the vertex shader, lines 128 - 131 in the fbm function; try commenting those out for improved performance.

    @Yakudoo what if you pre-computed the noise into a texture by sampling a random noise field in a big circle (for looping) at page load? Here's a gif of what i mean

  8. This is just insane...

  9. @clindsey good idea, it would save a lot of performance I guess. I'll give it a try.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.