.seastorm, my last WebGL artwork

Showcase
1

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
2

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

image
image.jpg1049Ă—528 582 KB

2 Likes
3

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
4

wow, amazing, I like it.

2 Likes
5

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:

6

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

image
image1920Ă—1080 1.4 MB

Here is a full screen view:

image
image1920Ă—1080 1.73 MB

7

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!

8

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

9

Screenshot_20191101-182413
Screenshot_20191101-182413.jpg1080Ă—2160 1.79 MB

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

10

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)

11

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
12

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

1 Like
13

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