don't click here

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
    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.
    Ubuntu 10.10 x64
    GTX280
     
  6. Sappharad

    Sappharad

    Oldbie
    1,420
    72
    28
    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
    16
    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
    11,200
    601
    93
    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 Banned
    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,553
    56
    28
    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:
    It should work now.
     
  15. DustArma

    DustArma

    Member
    1,346
    10
    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

    that power is yet unknown Oldbie
    1,709
    54
    28
    jazzy nyc
    puella magi chroma magica
    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
  18. DustArma

    DustArma

    Member
    1,346
    10
    18
    Santiago, Chile
    Learning Python.
  19. Overlord

    Overlord

    Now playable in Smash Bros Ultimate Moderator
    19,477
    1,090
    93
    Long-term happiness
    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
    1
    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