WebGL water scene | Hacker News Reader

WebGL water scene

c1.goote.ch

344 pointssvenfaw112 comments

Open articleView on HN

We made this almost three years ago, way before we had our tool and platform (Goo Create).

I'm surprised it still runs :)

The character uses more joints than some mobiles can handle (those with a vertex uniform limit of 128).

Actually, this is the one we made three years ago: http://labs.gooengine.com/pearl-boy/

The one linked to was a quick remake in Create...

The old one is much smoother on my laptop (first gen Intel HD Graphics) than the remake.

On my laptop it's smoother in Firefox than it is in Chrome and both are much better than Safari. It might be your browser ;-)

Nice! That one allows for under-water (diving) rather than just above water.

Well, actually it doesn't, at least on my computer. The diving mode is simply black here.

You can row right through the floating boxes.

The engine is open source btw! https://github.com/GooTechnologies/goojs

You guys should more prominently make note of that on your website. I already crossed it off as another proprietary unreal/unity and moved on until I luckily read this comment.

Very very true! We will do that. Thanks!

Done! Much clearer now, I think.

The audio is really choppy on Google Chrome 46.0.2490.86 m and a little warbly although not choppy on FireFox 35.0. Otherwise, still a pretty nifty demo.

In the original version we made three years ago, you can also go swim under water (click symbol bottom right): http://labs.gooengine.com/pearl-boy/

Couldn't get the swimming to work on my Nexus unfortunately. Tapping on the icon of the boy with flippers did nothing. Cool demo otherwise!

darn! but yeah it's very old so might be broken on some systems :)

http://goocreate.com/ looks pretty cool - just signed up.

Check out the forum at forum.goocreate.com and let us know what you think. We are looking for ways to improve the platform to make it easier for people to use and more open too.

Hey, I have a quick UI suggestion that might help with on-boarding:

In the create new UI, the name field needs to be more obvious. Since the template thumbnails command so much immediate attention, it took me a minute to figure out what was wrong when I was trying to create a canvas and the blue button at the bottom was disabled.

Indeed. We are in the process of adopting more of a google docs flow to document creation. This would mean having the templates right in your dashboard and then getting sent directly into the scene when selecting a template. You can always give a name to your scene at a later time. Thank you for the feedback :)

Great feedback! Thanks!

One thing that i've seen a couple of times now with these types of demos is that the animation is pretty smooth, but the music / sound is stuttering and noisy. Anyone has that as well? I'm using Chrome on a pretty beefy (16GB) MacBook Pro.

Yup. Choppy sound for me in Chrome w/ 16 GB MacBook Pro, too.

Same here. Reminds me of glitches typical of apps using a too small mixing buffer (in an attempt to run with a low latency?)

Runs smooth here on 8GB ram and a generic video card, playing a video on MPV at the same time, Ubuntu 15.10 Wily ...

Sound stutters on my PC which is pretty respectable. 16GB ram, Geforce 780 TI, i7-4790 3.6 GHz, Ubuntu.

Stutters on both Firefox and Chrome.

Audio very badly stutters here under Firefox on a reasonable spec Win 8.1 PC - 3.6GHz i3-4160 dual core, GTX 970, 16GB RAM. Not an award winning spec system, but for single threaded maximised games (most) it's more than decent. ;)

Nope, no problems with music or sound. Google Chrome Canary on desktop PC, Windows 8.1, NVIDIA audio device (HDMI).

How is it with Safari?

Much better: smooth animation and smooth audio, with Safari 9.0.1 on a mid-2014 15" Retina MacBook Pro.

With Chrome 46.0.2490.86, the animation is smooth, but the audio is stuttering quickly and noisily.

Choppy on Firefox Developer Edition too.

No stuttering or anything on Chromium 46 (Arch Linux on a Dell Inspiron 15 w/ 8GB ram & i3).

16 GB 2015 MBP retina here, Google Chrome. Both audio and visuals work perfectly.

Think it's a Chrome thing, Safari is fine.

Works fine on my Firefox 42 (Linux desktop)

works pretty well on a samsung laptop, with FF42, no audio issues at all :-)

O.o This is exactly what I needed to keep me going in the final stretch of this computer graphics course I am taking. Final in 2 days, was starting to feel study-fatigue, but am now reinvigorated!

This is one use of our tech that we never thought about... webgl for relaxation and inspiration :)

Can someone please tell me why I should be excited about these demos? Am I not just seeing an OpenGL wrapper in the browser?

Because it runs in any browser, even mobile ones and requires basically 0 time for compilation and no plugins as opposed to unity, unreal or other engines.

On some mobile ones.

One thing that is regular on WebGL demos is that it is always a mixed experience on my devices ranging from Android 4.3 to 5.0.

All are from Samsung and Asus.

Native demos work 100% without hiccups.

I don't think you can ever expect the same level of quality and performance that you get with a native program that gets specifically compiled for a certain platform, and sometimes written specifically for it. With WebGL it is just JS, and with GooCreate you can make really cool scenes that can include interactivity (with state machine and no coding or with custom scripts) and then just press publish and have it available for millions of people... no need to compile for several minutes for each different platform and no need for huge downloads.

I have been forced to take the battery out as a way to kill webgl pages on my mobile devices, due to the way they hogged the CPU.

Nice idea, execution is still lacking on mobile.

Just like you have to kill any native app for mobile, even though a native app is obviously much more efficient. I think you are missing the point a bit... it is not about making the most performant or visually impressive thing out there. It is about how easy it is to make something that looks good, performs acceptably and runs pretty much everywhere with basically zero effort in terms of porting.

Except your description only applies to desktop class machines.

I am not missing the point, as 99% of the WebGL demos I see being thrown around don't run out of the box on mobile devices that most people have, as you imply.

On mobile, though, it's total!y non interactive. I can see a guy in a boat and that's it. It's like quakelive, except you can play quakelive against loads of people, not just stare at the title screen.

In the original old version there is a joystick for controlling the boat: labs.gooengine.com/pearl-boy/

Except, that technically speaking what we are viewing at has been available on desktop for years. There is nothing cutting-edge about this demo, except that it's in a different shell.

I just don't quite understand why everyone is getting so excited about individual demos.

You can play games with graphics as advanced as this without the effort and security risk of installing something.

GooCreate's renderer is based upon ThreeJS, which is a high level library upon of WebGL (which is essentially OpenGL in the browser.)

Actually it's based on our own engine, Goo Engine, also open source: https://github.com/GooTechnologies/goojs

But yeah, still essentially OpenGL in the browser :)

I wrote a bunch of ThreeJS and I see code I wrote in your Goo Engine. You also have the ThreeJS license in your license:

https://github.com/GooTechnologies/goojs/blob/master/COPYING...

"GooCreate's renderer is based upon ThreeJS". With that I thought you meant that our tool (Goo Create) was built on three.js which it is not. Yes a subset of a few files in the engine contains some code from other open source libraries. Mostly it is a derivative of my previous open source (Java) engines Ardor3D/jMonkeyEngine and new code.

" a subset of a few files in the engine contains some code from other open source libraries"

The code that is ThreeJS derived includes most of the 3D engine classes including:

The main Renderer class (!). As well as the Texture, Camera, RenderTarget, ShaderLib, ShaderBuilder, EventTarget classes. Also the majority of the stuff in the /math, /lights, /pass directories.

GooEngine's renderer (not game engine) was clearly forked from ThreeJS some time ago and diverged (significantly in some places and for the better) but the lineage is clear.

You are right Ben! The rendeder contains a bunch! (Still a subset of the engine like i said)

Hail open source! :)

Runs smoothly on a 4s, so color me impressed.

There seems to be an issue with the rendering of the character though

http://imgur.com/dRe76Kc

Same, acceptably smooth on my core 2 duo L7500 (no dGPU). Diffract me impressed too.

Very smooth on this Core 2 Duo P8400 2.26Ghz in Chrome on Linux Mint 17.2, integrated Intel graphics.

Edit: P8400 is a 7 year old CPU and L7500 is 8 year sold. Good to see we're getting some mileage of 'em.

These cpu are still quite potent, I only wish I could solder a tiny opengl3 gpu on them just so they don't have to deal with fancy guis and videos.

Cool - you can move around with WASD.

That's a beautiful scene, by the way. I just hope someone comes to rescue the poor kid soon.

It would be really nice to make a game of sorts out of it :)

I'm not sure that the water is meant to be inside the boat, but still great work !

This really reminds me of the Introduction to Monkey Island 3: https://www.youtube.com/watch?v=mL0086T-u6A

The audio is fine if that tab is not active but distorts when I switch to it. Otherwise very, very smooth.

I am experiencing this behavior as well. It's pretty odd, since I didn't think WebGL would affect the audio (outside of increased CPU load).

Looks very nice apart from some minor details like water going through the boat. And runs very smoothly on my old Linux laptop with a built-in graphics card.

you really think the water in the boat is not intentional?

.. yes

Or maybe not intentional, but too hard to fix. I imagine if the water in the boat was intentional, it'd have totally different looking characteristics (a puddle looks totally different from water in a deep ocean, even if it's the same material). It'd be a pain not to get it in the boat.

There's a few ways I can think of to address it, but none of them would be easy:

1.) dynamically tessellate all the water geometry on the outskirts of the boat not to intersect (slow and complicated!)

2.) do some sort of stencil rendering to ensure the interior of the boat doesn't render the water (similar to how stencil shadows work). Also complicated!

3.) Render the hull of the boat only to the depth buffer (no colors rendered), and use multiple passes to make sure the water doesn't clip into the boat.

There's probably quite a few other ways I haven't thought of, but it's definitely not an easy problem.

The easiest way I can think of would be to render the boat first, then render an invisible depth-only polygon at the top of the boat (that, together with the boat hull, encloses the displaced water volume), and then render the water. This doesn't add much complexity. You already have to draw the water in a pass after the boat because the water is translucent when the view angle is steep enough.

The water in the boat doesn't look like water in the bottom of a boat should look. It's clearly just the surrounding showing through and would be work to fix.

Pretty sure that it's not intentional by the look of the waves that go through the side of the boat.

And that you can see the reflection of the boat inside itself.

Smooth on my Kubuntu AMD Radeon 7670M. You can move the boat about with the wasd keys, if you didn't know.

Laggy sound on GTX 860M, maybe it's a problem with my sound card ? Anyone else experiencing this issue?

Yeah, sound was not smooth on my system too (750 Ti)

the water level penetrates the boat?

A way to fix this would be to render the boat and the water separately then merge the two images, but that feature may not be available on the engine that they're using for this simulation (goocreate.com)

Should not be hard to do at all. The engine is open source on github btw: https://github.com/GooTechnologies/goojs

This could be done much simplier by masking the boat with stencil buffer.

Smooth on a nexus 5x

Doesn't work on my iPhone 6

Works great on my iPhone 5s

Choppy for me with a Nvidia GTS 450 (proprietary drivers) on Fedora 23. Every part of the massively long pipeline from HTML to DVI has to be perfect to get smooth playback. It seems we are some way away from reaching that yet.

Smooth on my Intel (HD Graphics 5500 / Broadwell, 2015) graphics. Nvidia's GTS 450 is 5 years old, so I don't think "we are some ways away" is necessarily true, but it is of course still very wasteful.

It is 5 years old, but is able to render scenes far more complex than the on on this page natively.

Smooth for me on Intel HD4000, open source drivers, current Ubuntu.

Smooth for me on IntelHD3000, open source drivers, Linux Mint 17.2 :)

Is the music original?

Yes

I like it. Do you have a YouTube channel or something?

There is a vimeo channel but hasn't been updated with cool videos in a while. We need to fill up the youtube and vimeo channels for sure. https://vimeo.com/gootechnologies

Love the track featured here http://labs.gooengine.com/pearl-boy/indexBelow.html

Very few "WebGL" sites do any 3D. Mostly, they're just doing pans, zooms, canned 2D animations, and layers. I've been looking at galleries of WebGL sites. Other than demos, very few do anything you couldn't do in Flash.

3D in the browser has been here before, in VRML 97, Web3D, and Shockwave Flash. It's never caught on. The technology is great, but nobody cares.

There's now Web3D in the browser using WebGL.[1] (Web3D is just VRML 97 with XML syntax.) Nobody uses this.

[1] http://www.x3dom.org

Well, you can do full 3D modeling, editing, animation as well cloud rendering in the browser using http://clara.io -- it is like Blender/3DS Max in the browser. We've got +140K users, +400K scenes (100K of which are public.) People do use this stuff.

I have to strongly disagree. Did you look at the showcases in Goo Create's landing page?

http://goocreate.com/showcase/case/suissemania/ http://goocreate.com/showcase/case/mountains-of-mouthness/ http://goocreate.com/showcase/case/nike-phenomenal-shot/ http://goocreate.com/showcase/case/skazka/ http://goocreate.com/showcase/case/thomson-reuters/

secret message? https://i.sli.mg/QHY5wH.png

This is inspiring.

Come on! Let me get into those clouds!

Runs pretty fine on Opera on a LG L70.

Seems to have some issues on the latest build of Chrome if the tab has focus. Really cool otherwise!

Please put the date in the title if you're going to post old content.

I want to row so bad.. :-)

In real life or in the scene? If you use this one you can row with WASD: http://labs.gooengine.com/pearl-boy/

Just found out. I feel silly. Noticed there is no collision detection with the boxes though.

Yep, no collisions. The demo was made some 2-3 years ago and it surfaced here on HN yesterday for some reason. Back then we didn't have physics support in the Goo Engine. Now we have Cannon.js fully integrated into it (in fact the creator of Cannon.js works with us and has been tweaking it to work well with Goo Create and the Goo Engine).

Horray, music_autoplay=1. I remember Myspace.

Cool demo, but like 99% of the rest of the world, listen to music while i browse so almost instant-closed out when music blasted out.

I agree with your point, but I doubt your statistic..I think it's probably the other way around. That is, probably 99% of the world's web browsing population is not actively listening to music.

Either way, music should never auto-play.

Good effort, but when I hold shift he doesn't row faster ;)

the boat is clearly broken

It's a demo. So, yeah ...

And a very old one too. Look at the website for some really cool looking projects: goocreate.com

Two speaking mountains reading aloud random Twitter messages oO Strangest thing I've seen today http://www.mountainsofmouthness.com/

That is one of my favorite ones. It was awesome to see the guys making it having fun with it and giving them the tools they needed to do it.

Not the mountains I thought you were meaning. :p

Reply on news.ycombinator.com