.seastorm, my last WebGL artwork

seastorm_gif

Hey folks, after one year of learning Javascript, Three.js and WebGL I was able to convert one of my artworks made in Processing to run real time right in the browser.

Not sure about the phone compatibility (tested on my Xiaomi Mi Mix 3 with latest Chrome web browser and it works smoothly, but not on Firefox and native browser).

Very helpful the example on GPGPU in the three.js examples.

The basic sketch is based on the a Flow Field (Thanks to Daniel Shiffman tutorial to make it in Processing).

You can see it live here: http://bit.ly/2N39NW1
More info about the artwork: http://bit.ly/2NvXr7Q

Any feedback is very appreciated!

11 Likes

Looks very meditative. I’m not sure if the grid is intentional or not, but it is very visible.

2 Likes

I like it! Nice effect. I cannot decide completely whether it is a sea storm or a wolf fur storm, though. :joy:

I recommend getting rid of the white margins, for full immersion. Typically, you will get some results by setting the container style to {position:absolute,top:0,left:0,width:100vw,height:100vh} and body.style.overflow="hidden";

2 Likes

wow, amazing, I like it.

2 Likes

Thanks for the feedback. Actually the grid effect should not be so visible (if you check the GIF I shared in my post the grid is not there). Could you please tell me your screen resolution?

@EliasHasle in the style.css file there are already that options, indeed I don’t have white borders. :thinking:

You are right. The white borders are an artifact within the canvas. They disappear when I refresh the page with full screen (but that makes the grid much more visible). My browser is Google Chrome.

Here is a maximized window view (yes, I know that’s a lot of tabs):

Here is a full screen view:

I understand why: The background plane was smaller than the rendering “frame” of the particles, so the background was not getting cleared and at some point was white.

Should be fixed, in the case you have the possibility to test it again would be very helpful!

PS: That’s a normal flow in Chrome with hundreds of tabs :smile:

EDIT: I see that you also have the “grid” effect. Strange!

I have that “grid effect”, using both GTX 1060 (Win10) and built-in Intel graphics (Win7).

Just tested on Chrome mobile with my HTC U11 EYEs, the grid is very visible.
It’s very nice !

feels like a some optimization could be possible. it feels it coud be a bit more fluid… can you try to speed up a bit the flow (maybe 1.5x)

Thank you everyone for the feedback, I finally managed to fix the “grid” effect (was a bad combination of max force and the flowfield grid resolution).

I will upload as soon as I will have time!

@Jay_E I will give it a try, maybe increasing a bit the maximum speed of particles could do the trick!

2 Likes

Great job Kesson, I hope this will not be your last WebGL artwork. I look forward to seeing the next one!

1 Like

:+1::+1::+1::muscle:
Let us know when you have the next version. cheers