don't click here

WebSonic (WebGL, source code released)

Discussion in 'Fangaming Discussion' started by MarkTheEchidna, Apr 7, 2011.

  1. Hey guys, I've been missing from this forum for some time. IRL stuff, basically. On September last year, I showcased a video of a 3D Sonic engine I was working with. (

    Today, I'm releasing the source code for that engine under the MIT license.

    What I didn't tell anyone back then was that the engine was written completely in javascript, and that it was running natively inside Google Chrome, thanks to WebGL! So, surprise! Everyone with a reasonably new video card should be able to run this on Windows, Linux or Mac OS X, without installing anything other than a browser. :-D

    As the engine is nothing but a Web page, I thought WebSonic was an appropriate name.

    "Live" Version:

    Crossposting from github: (

    Grab the source here: - Enjoy!

    I was thinking that if we could get this to a more playable state, (with levels and enemies and whatnot) and if we could host it somewhere to whoever wanted to play, it would be mighty cool.
  2. Sappharad


    This is really awesome, it runs great on my 3 year old machine.

    Why no direct link to play it? I've uploaded it to my server, but I won't link unless you say it's okay.

    Edit: Thanks. Here's my mirror: ---snip---
    (User note: There's about 6MB of data here, so if you have a slow connection you're probably better off downloading his source from Github)

    Edit 2: Link removed, since you're updating frequently. Thanks for providing a live copy.
  3. Namo


    take a screenshot of your heart Member
    I remember seeing this a long time ago and was impressed.
  4. I was a bit concerned with hosting a live version on github pages due to bandwidth use, since the Sonic model has 5MB. But nah, I figure that shouldn't be an issue for them, so:

    Anyway, sonicblur, feel free to mirror/link to your copy. :-)
  5. Aerosol


    Not here. Moderator
    Not where I want to be.
    Sonic (?): Coming summer of 2055...?
    It's down mate. Bummer.
  6. :-( The github pages feature seems to be very unstable for some reason. I'm hosting it somewhere else:

    This one should work.
  7. Aerosol


    Not here. Moderator
    Not where I want to be.
    Sonic (?): Coming summer of 2055...?
    I must not have the latest Chrome. All I see is the hud and the rest is just black.
  8. That's unusual. Chrome usually auto updates in a matter of days from the release.

    Perhaps you didn't leave enough time for the page to load? It can take some time depending on your connection and server load.
  9. Aerosol


    Not here. Moderator
    Not where I want to be.
    Sonic (?): Coming summer of 2055...?
    I just clicked it again. I'll let it load for a while and see what happens.
  10. If that still doesn't work, check out the console. Srsly, right click the page then click "Inspect Element", go to the Console Tab. Perhaps your video card is unsupported for WebGL?
  11. Aerosol


    Not here. Moderator
    Not where I want to be.
    Sonic (?): Coming summer of 2055...?
    "Uncaught Error: Could not initialize WebGL. Are you running a modern browser with WebGL enabled?"

  12. Aerosol


    Not here. Moderator
    Not where I want to be.
    Sonic (?): Coming summer of 2055...?
    I'm running an 8500GT so I'm inclined to agree. Aw well :(
  13. Dr. Kylstein

    Dr. Kylstein

    I get the black screen too.
    google-chrome-beta 11.0.696.34-r80286 (stable)
    Ubuntu 10.10

    If you think it would help, I can switch to Chrome versions 10 (stable) or 12 (unstable).
  14. DustArma


    Santiago, Chile
    Learning Python.
    HUD with black screen, running Firefox 4.0, AMD/ATi HD 4830, Windows 7.
  15. MarkeyJester


    Original, No substitute Resident Jester
    I get a black screen also.

    If it's any consolation, I must admit seeing that video has made me smile, I like the fact that you have shadow and lighting, all smooth and clean too, the physics seem fine also. Nothing more I can say at this point though, sorry, but nice work!
  16. Darkon


    It won't show here either on Firefox or Chrome, running an ATI HD5770 with the latest drivers.

    Shame, was looking forward to trying it after watching the video. :/
  17. I think I figured what's going on. The graphics card drivers are optimizing away a unused GLSL variable on a shader, but the engine is trying to set its value anyway. That didn't happen with me because my video card is a cheap Intel GMA; the driver probably isn't as sophisticated as ATI's or Nvidia's.

    I'll patch it as soon as I get home.
  18. Gen


    This is halloween! This is halloween! Member
    The Mobius Engine
    After poking around your code a bit, I was curious; why not just use straight GLSL instead of encoding shaders into JSON? IMO, it'd make more sense to just load the straight GLSL instead of encoding it in JSON. If the goal is to make it easier to create shaders for, I'd recommend taking the approach Unity takes; wherein you basically define shaders and their properties through easily readable blocks; I.e.
    Code (Text):
    1. Shader {
    2.     Properties {
    3.         _Color ("Diffuse Color", Color) = (1,1,1,1)
    4.         _MainTex ("Albedo", 2D) = "white" {}
    5.         _BumpMap ("Normal Map", 2D) = "bump" {}
    6.     }
    7.     SubShader {
    8.         GLSLVERTPROGRAM
    10.         void main() {
    11.             //do vertex stuff
    12.         }
    13.         ENDGLSL
    14.         GLSLFRAGPROGRAM
    15.         //code goes here
    16.         uniform vec4 _Color;
    17.         uniform sampler2D _MainTex;
    18.         uniform sampler2D _BumpMap;
    19.         void main() {
    20.             //do fragment stuff
    21.         }
    22.         ENDGLSL
    23.     }
    24. }
    Edit: Ah, after poking through your renderer code, I think I get why it's more beneficial given the design of it. So you're effectively grabbing what uniforms and attributes are used in the shader through the equivalent definitions within the JSON its self, and setting them only as needed (or so I'm guessing based on a quick peek at your code).

    Now for a different question: I'm going through alot of your shader code, and curious about the overall process of them. I noticed that you're effectively taking the light direction unrotated, and applying it to the meshes in what I'm assuming is world space. I assume you haven't factored in normal mapping yet?
  19. I think the error is fixed now. I've also added a more descriptive message, so if it isn't fixed, it should be much easier to track it down.

    If you had problems before, because of that bug, try it now: (Remember to Ctrl+F5 / Cmd+Shift+R to get a clean version from the server, without caching)

    Edit: @Gen, woah, that looks pretty. If parsing something like this ends up not being too hard (it probably isn't), I might add it instead of JSON.

    Regarding the uniforms and stuff, yep, that's correct. About the shader code: I had almost no experience with shaders, so pretty much everything I did was by trial and error... I probably got something wrong with the lighting coordinates then. And I didn't add normal mapping 'cause I was to lazy to implement tangent calculation.