WebSonic (WebGL, source code released)

Gen · Apr 9, 2011

MarkTheEchidna said:

@DustArma: Whoah, that's quite severe. Hadn't seen the video.

@Chimpo: That's most likely the game trying to invert a singular matrix. Sylvester (the math lib I used) returns null on errors like this, hence the error "Cannot call method 'transpose' of null". The singular matrix was generated likely due to numeric instability inside Sylvester itself. I'll add a sanity check to make sure this doesn't happen again.

@Gen Wait, so specular and albedo are vec3? I thought they were float, and had r,g,b components stored along with them. Makes much more sense now.
Click to expand...

Our light buffer consists of this:
RGB: Light
A: Specular highlight

Storing our specular highlight in our alpha channel makes sense, since in a traditional forward renderer, the specular highlight would be a float multiplied against a specular map at a later stage anyways.

So we basically just multiply the light (RGB) against the albedo (which we'll assume is vec3), and the specular highlight (A) against our specular map (which can either be float or vec3, depending on if you want to use an extra texture or the alpha of an existing texture), then add the two resulting specular and diffuse components together.

Another nifty trick you could do, since we're storing our specular exponent for the deferred renderer in its own channel, then later multiplying by 128 within the fragment shader, you could actually use the alpha of your specular map to influence the specular highlight's exponent; therefore giving you a specular exponent map.

MarkTheEchidna · Apr 9, 2011

Ha, that would allow for some kickass galvanized metal and ice effects.

Update: I've implemented layers of objects, so skyboxes are now a possibility. I've added an animated sky shader, simulating cloud formation and movement. Check it out:

Looks better in motion, so give it a try.

Azu · Apr 9, 2011

This is awesome. I've been wondering what happened to this when you suddenly disappear. I wish I could make levels for this though.

Gen · Apr 9, 2011

I went ahead and forked your repo. I'm gonna see if I can get some fancypants rendering stuff going on.

Dr. Kylstein · Apr 14, 2011

This still doesn't work for me on Firefox 3 or Chrome 11. Chrome gives this error, but it seems to carry on only to give pages full of warnings and still not work.

Google Chrome said:

Error: Nonexistent or unused uniform in the description of shader shader/sky.jsonshader: u_normalCameraViewError: Nonexistent or unused uniform in the description of shader shader/sky.jsonshader: u_normalCameraView at http://achene.co/WebSonic/js/GraphicsEngine.js:96:11 at Array.forEach (native) at new (http://achene.co/WebSonic/js/GraphicsEngine.js:93:23) at Object.success (http://achene.co/WebSonic/js/ResourceManager.js:80:20) at success (http://achene.co/WebSonic/lib/jquery.js:5267:15) at XMLHttpRequest. (http://achene.co/WebSonic/lib/jquery.js:5207:7)
Click to expand...

Ubuntu 10.10 x64
GTX280

Sappharad · Apr 15, 2011

Dr. Kylstein said:

This still doesn't work for me on Firefox 3 or Chrome 11. Chrome gives this error, but it seems to carry on only to give pages full of warnings and still not work.
Ubuntu 10.10 x64
GTX280
Click to expand...

There's your problem.
WebGL is not enabled by default in Linux builds of Chrome. (And I don't think Firefox 3 even supported it, upgrade to 4)

You might be able to enable it in Chrome by launching with "--enable-webgl —in-process-webgl" arguments.

Miles Prower · Apr 18, 2011

Can't run it either in Firefox 6.0a1 (Nightly) or Chromium 10.0.648.133 (77742) - all I get is the HUD and a black screen.

OS : Ubuntu 10.04
GPU : Nvidia 8500GS with proprietary drivers

Error shown in Chromium :

Code (Text):

Error: Nonexistent or unused uniform in the description of shader shader/sky.jsonshader: u_normalCameraViewError: Nonexistent or unused uniform in the description of shader shader/sky.jsonshader: u_normalCameraView at http://achene.co/WebSonic/js/GraphicsEngine.js:96:11 at Array.forEach (native) at new (http://achene.co/WebSonic/js/GraphicsEngine.js:93:23) at Object.success (http://achene.co/WebSonic/js/ResourceManager.js:80:20) at success (http://achene.co/WebSonic/lib/jquery.js:5267:15) at XMLHttpRequest. (http://achene.co/WebSonic/lib/jquery.js:5207:7)

Error in Firefox :

Code (Text):

Error: Nonexistent or unused uniform in the description of shader shader/sky.jsonshader: u_normalCameraView("u_normalCameraView",1,[object Array])@http://achene.co/WebSonic/js/GraphicsEngine.js:96 ([object Object],"shader/sky.jsonshader")@http://achene.co/WebSonic/js/GraphicsEngine.js:93 ([object Object],"success",[object XMLHttpRequest])@http://achene.co/WebSonic/js/ResourceManager.js:80 success()@http://achene.co/WebSonic/lib/jquery.js:5267 ([object Event])@http://achene.co/WebSonic/lib/jquery.js:5207

Rolken · Apr 22, 2011

This topic has hit Hacker News this morning, btw. Incredible work.

dsrb · Apr 22, 2011

That must be why "247 User(s) are reading this topic (244 Guests [3 Members] and 0 Anonymous Users)"!

Aerosol · Apr 22, 2011

I was able to walk Sonic up this wall. Just saiyan.

Lobotomy · Apr 22, 2011

This is fantastic! It really shows some promise, but it's a bitch and a half to get Sonic to turn more than 90 degrees. Is there any way to tween animations in WebGL, or is that something done in other software?

MarkTheEchidna · Apr 23, 2011

Having this featured on Hacker News was a very pleasant surprise. :-) Haha, the topic got 12,000 views in a few hours.

I've fixed a minor bug on the shader code for the clouds. It's hard to get the shaders working everywhere, since different hardware seems to deal with GLSL differently.

Regarding the controls: I was kinda anal about them on the FAQ. Do you guys have suggestions on better control schemes?

Regarding the animations: Yup, it's possible to implement it. Shouldn't be hard, either: Just send the previous and current vertex positions to the shader as attributes, and the interpolation factor as an uniform. Then use the simple math (alpha * V1 + (1-alpha) * V2) to work out the interpolated positions. Implementing bone based animation might be a bit harder. :-(

Regarding walking on walls: lol I need to fix that.

Yuzu · Apr 23, 2011

Works fine for me on:
Windows 7 x86
Google Chrome latest version
ATI Radeon HD 3200

MarkTheEchidna · Apr 24, 2011

I've made the shader error handling less draconian now. Missing uniforms/attributes now issue a warning instead of an error.

If it didn't work before for you with an error like:

Error: Nonexistent or unused uniform in the description of shader
Click to expand...

It should work now.

DustArma · May 1, 2011

So, apparently Firefox 4 for Android supports WebGL, I'd try running this on my phone but it has an ARM6 CPU, Firefox 4 requires at least an ARM7 CPU.

Could someone with an ARM7 Android phone try to run this?

plushifoxed · May 2, 2011

DustArma said:

So, apparently Firefox 4 for Android supports WebGL, I'd try running this on my phone but it has an ARM6 CPU, Firefox 4 requires at least an ARM7 CPU.

Could someone with an ARM7 Android phone try to run this?
Click to expand...

There used to be an ARM6 development version of Firefox 4 Mobile, but apparently they gave up on it and removed it from the site. Shame, really.

ICEknight · May 3, 2011

How odd, I keep getting a "connection reset" when trying to access http://www.achene.co/WebSonic/. =\

DustArma · May 3, 2011

ICEknight said:

How odd, I keep getting a "connection reset" when trying to access http://www.achene.co/WebSonic/. =\
Click to expand...

Try using the other link.
http://coreh.github.com/WebSonic/

Overlord · May 3, 2011

Which incidentally now I'm on Firefox 4 I can finally have a play with. =P Very impressive stuff! You'd never have seen this sort of thing coming browser-native even a few years ago.

HighFrictionZone · May 4, 2011

Does not work on Firefox 4 on android. Error: Error compiling vertex shader.
Oh well. The dream of a web-based 3d sonic game on my mobile phone will have to wait another day.

Edit: But on the PC, works great under Chrome

WebSonic (WebGL, source code released)

Useful Searches