WebSonic (WebGL, source code released)

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

  1. Gen

    Gen

    This is halloween! This is halloween! Member
    309
    0
    0
    The Mobius Engine
    <!--quoteo(post=576905:date=Apr 8 2011, 04:13 PM:name=MarkTheEchidna)--><div class='quotetop'>QUOTE (MarkTheEchidna @ Apr 8 2011, 04:13 PM) <a href="index.php?act=findpost&pid=576905">[​IMG]</a></div><div class='quotemain'><!--quotec-->@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.<!--QuoteEnd--></div><!--QuoteEEnd-->
    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.
     
  2. 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:

    [​IMG]

    Looks better in motion, so give it a try.
     
  3. Azu

    Azu

    I must be stupid. Member
    This is awesome. I've been wondering what happened to this when you suddenly disappear. I wish I could make levels for this though.
     
  4. Gen

    Gen

    This is halloween! This is halloween! Member
    309
    0
    0
    The Mobius Engine
    I went ahead and forked your repo. I'm gonna see if I can get some fancypants rendering stuff going on.
     
  5. Dr. Kylstein

    Dr. Kylstein

    Member
    86
    0
    6
    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.
    <!--QuoteBegin-Google Chrome+--><div class='quotetop'>QUOTE (Google Chrome)</div><div class='quotemain'><!--QuoteEBegin-->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 <a href="http://achene.co/WebSonic/js/GraphicsEngine.js:96:11" target="_blank">http://achene.co/WebSonic/js/GraphicsEngine.js:96:11</a> 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)<!--QuoteEnd--></div><!--QuoteEEnd-->
    Ubuntu 10.10 x64
    GTX280
     
  6. Sappharad

    Sappharad

    Oldbie
    1,389
    65
    28
    <!--quoteo(post=578247:date=Apr 14 2011, 02:20 PM:name=Dr. Kylstein)--><div class='quotetop'>QUOTE (Dr. Kylstein @ Apr 14 2011, 02:20 PM) <a href="index.php?act=findpost&pid=578247">[​IMG]</a></div><div class='quotemain'><!--quotec-->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<!--QuoteEnd--></div><!--QuoteEEnd-->
    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.
     
  7. Miles Prower

    Miles Prower

    Renard Oldbie
    698
    0
    16
    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):
    1. 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):
    1. 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
     
  8. Rolken

    Rolken

    Tech Member
    This topic has hit Hacker News this morning, btw. Incredible work.
     
  9. dsrb

    dsrb

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

    Aerosol

    Not here. Moderator
    10,836
    202
    43
    Not where I want to be.
    Sonic (?): Coming summer of 2055...?
    [​IMG]

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

    Lobotomy

    35% Cognac Misfit
    4,394
    1
    0
    Traverse City
    Project: Matter/Energy
    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?
     
  12. 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.
     
  13. Yuzu

    Yuzu

    Member
    2,389
    2
    18
    Works fine for me on:
    Windows 7 x86
    Google Chrome latest version
    ATI Radeon HD 3200
     
  14. 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:
    <!--quoteo--><div class='quotetop'>QUOTE </div><div class='quotemain'><!--quotec-->Error: Nonexistent or unused uniform in the description of shader<!--QuoteEnd--></div><!--QuoteEEnd-->
    It should work now.
     
  15. DustArma

    DustArma

    Member
    1,308
    1
    18
    Santiago, Chile
    Learning Python.
    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?
     
  16. plushifoxed

    plushifoxed

    hey, adora Oldbie
    1,687
    41
    28
    hell (chicago (same difference))
    photography, webdev, college, being a massive gay
    <!--quoteo(post=583394:date=May 1 2011, 04:13 PM:name=DustArma)--><div class='quotetop'>QUOTE (DustArma @ May 1 2011, 04:13 PM) <a href="index.php?act=findpost&pid=583394">[​IMG]</a></div><div class='quotemain'><!--quotec-->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?<!--QuoteEnd--></div><!--QuoteEEnd-->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.
     
  17. ICEknight

    ICEknight

    Researcher Researcher
    How odd, I keep getting a "connection reset" when trying to access <a href="http://www.achene.co/WebSonic/" target="_blank">http://www.achene.co/WebSonic/</a>. =\
     
  18. DustArma

    DustArma

    Member
    1,308
    1
    18
    Santiago, Chile
    Learning Python.
    <!--quoteo(post=583984:date=May 3 2011, 08:47 AM:name=ICEknight)--><div class='quotetop'>QUOTE (ICEknight @ May 3 2011, 08:47 AM) <a href="index.php?act=findpost&pid=583984">[​IMG]</a></div><div class='quotemain'><!--quotec-->How odd, I keep getting a "connection reset" when trying to access <a href="http://www.achene.co/WebSonic/" target="_blank">http://www.achene.co/WebSonic/</a>. =\<!--QuoteEnd--></div><!--QuoteEEnd-->
    Try using the other link.
    <a href="http://coreh.github.com/WebSonic/" target="_blank">http://coreh.github.com/WebSonic/</a>
     
  19. Overlord

    Overlord

    Now playable in Smash Bros Ultimate Moderator
    18,301
    400
    63
    Berkshire, England
    Learning Cymraeg
    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.
     
  20. HighFrictionZone

    HighFrictionZone

    Hi. Member
    855
    0
    16
    Katy, Texas
    Nothing
    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