Sonic and Sega Retro Message Board: WebSonic (WebGL, source code released) - Sonic and Sega Retro Message Board

Jump to content

Hey there, Guest!  (Log In · Register) Help
  • 5 Pages +
  • 1
  • 2
  • 3
  • 4
  • Last ►
    Locked
    Locked Forum

WebSonic (WebGL, source code released) Live (Playable) Version and GitHub link inside!

#16 User is offline MarkeyJester 

Posted 07 April 2011 - 11:47 AM

  • Clouded in obscurity.
  • Posts: 1595
  • Joined: 22-July 08
  • Gender:Male
  • Location:Japan
  • Wiki edits:16
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!

#17 User is offline Darkon 

Posted 07 April 2011 - 02:13 PM

  • Posts: 44
  • Joined: 19-January 05
  • Gender:Male
  • Location:UK
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. :/
This post has been edited by Darkon: 07 April 2011 - 02:16 PM

#18 User is offline MarkTheEchidna 

Posted 07 April 2011 - 03:02 PM

  • Posts: 39
  • Joined: 10-September 10
  • Gender:Male
  • Location:Belo Horizonte, Brazil
  • Project:WebSonic
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.
This post has been edited by MarkTheEchidna: 07 April 2011 - 03:02 PM

#19 User is offline Gen 

Posted 07 April 2011 - 05:36 PM

  • This is halloween! This is halloween!
  • Posts: 309
  • Joined: 03-August 06
  • Gender:Male
  • Project: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
Shader {
    Properties {
        _Color ("Diffuse Color", Color) = (1,1,1,1)
        _MainTex ("Albedo", 2D) = "white" {}
        _BumpMap ("Normal Map", 2D) = "bump" {}
    }
    SubShader {
        GLSLVERTPROGRAM
        
        void main() {
            //do vertex stuff
        }
        ENDGLSL
        GLSLFRAGPROGRAM
        //code goes here
        uniform vec4 _Color;
        uniform sampler2D _MainTex;
        uniform sampler2D _BumpMap;
        void main() {
            //do fragment stuff
        }
        ENDGLSL
    }
}


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?
This post has been edited by Gen: 07 April 2011 - 06:03 PM

#20 User is offline MarkTheEchidna 

Posted 07 April 2011 - 08:36 PM

  • Posts: 39
  • Joined: 10-September 10
  • Gender:Male
  • Location:Belo Horizonte, Brazil
  • Project:WebSonic
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)

http://achene.co/WebSonic/

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.
This post has been edited by MarkTheEchidna: 07 April 2011 - 09:01 PM

#21 User is offline Aerosol 

Posted 07 April 2011 - 09:14 PM

  • FML and FU2
  • Posts: 7627
  • Joined: 27-April 08
  • Gender:Male
  • Location:Not where I want to be.
  • Project:Sonic (?): Coming summer of 2055...?
Still the same error for me, but it may still just be my old ass videocard.

#22 User is offline Scripten 

Posted 07 April 2011 - 09:16 PM

  • Posts: 84
  • Joined: 27-March 09
Eh, I've got a fairly new GeForce 440, and it's still not going for me, either. Tried reloading several times, and waited about five minutes each time. Unfortunately, nothing yet.

Very excited to see how this is turning out though!

#23 User is offline DustArma 

Posted 07 April 2011 - 09:22 PM

  • Posts: 1172
  • Joined: 27-February 08
  • Gender:Male
  • Location:Santiago, Chile
  • Project:Learning Python.
Still not working for me, it doesn't even show an error or something.

#24 User is offline MarkTheEchidna 

Posted 07 April 2011 - 09:23 PM

  • Posts: 39
  • Joined: 10-September 10
  • Gender:Male
  • Location:Belo Horizonte, Brazil
  • Project:WebSonic
@AerosolSP: sad.png Unfortunately in your case there isn't much I can do with on the JS side to get it running there...

If you have the drivers that ship along with Windows, downloading the ones from NVIDIA may or may not get it to work. You can also try it on Firefox 4 if you tried it in Chrome, or vice versa.

EDIT: Gosh, I'm surprised with the failure rate of this... Either I'm doing something really wrong or WebGL sucks badly on Windows.
This post has been edited by MarkTheEchidna: 07 April 2011 - 09:25 PM

#25 User is offline DustArma 

Posted 07 April 2011 - 09:42 PM

  • Posts: 1172
  • Joined: 27-February 08
  • Gender:Male
  • Location:Santiago, Chile
  • Project:Learning Python.
So, I just tried with Chrome, same black screen, and no error message, it just stops after loading the sonic.jpg texture.


*EDIT* Chrome just got this:
QUOTE
Error: Nonexistent or unused uniform in the description of shader shader/metal.jsonshader: u_diffuseMapError: Nonexistent or unused uniform in the description of shader shader/metal.jsonshader: u_diffuseMap at http://achene.co/WebSonic/js/GraphicsEngine.js:87:11 at Array.forEach (native) at new (http://achene.co/Web...Engine.js:84:23) at Object.success (http://achene.co/Web...anager.js:80:20) at success (http://achene.co/Web...uery.js:5267:15) at XMLHttpRequest. (http://achene.co/Web...query.js:5207:7)


It didn't stop the loading process however, that still stopped after loading sonic.jpg.
This post has been edited by DustArma: 07 April 2011 - 09:44 PM

#26 User is offline MarkTheEchidna 

Posted 07 April 2011 - 09:53 PM

  • Posts: 39
  • Joined: 10-September 10
  • Gender:Male
  • Location:Belo Horizonte, Brazil
  • Project:WebSonic
Yay! thanks DustArma. Now I know which shader was the culprit. (shader/metal.jsonshader)

I was doing something really stupid. (Assigning a value to gl_FragColor right at the end) The GLSL compiler of your driver was optimizing away all my uniforms, since they weren't being used at all. I should work now. Ctrl+F5 and see if it works.

I added back the logs/errors to the hud, just so they're more visible.

#27 User is offline DustArma 

Posted 07 April 2011 - 09:58 PM

  • Posts: 1172
  • Joined: 27-February 08
  • Gender:Male
  • Location:Santiago, Chile
  • Project:Learning Python.
QUOTE (MarkTheEchidna @ Apr 7 2011, 10:53 PM)
Yay! thanks DustArma. Now I know which shader was the culprit. (shader/metal.jsonshader)

I was doing something really stupid. (Assigning a value to gl_FragColor right at the end) The GLSL compiler of your driver was optimizing away all my uniforms, since they weren't being used at all. I should work now. Ctrl+F5 and see if it works.

I added back the logs/errors to the hud, just so they're more visible.


And it works, great job eng101.png , gonna play around with it now.

*EDIT* Works much better on chrome than firefox, it's all stuttery on the fox. *EDIT*

*EDIT2* Noticed the slope physics, however Sonic can run up any slope, even a completely vertical wall if you hold the button, though he just barely moves.*EDIT2*

*EDIT3* *EDIT3*

Noticed that slope quirk.
This post has been edited by DustArma: 07 April 2011 - 10:31 PM

#28 User is offline Aerosol 

Posted 07 April 2011 - 10:17 PM

  • FML and FU2
  • Posts: 7627
  • Joined: 27-April 08
  • Gender:Male
  • Location:Not where I want to be.
  • Project:Sonic (?): Coming summer of 2055...?
Hurm. It works in Firefox 4. Choppy though.

Good stuff Mark :D

#29 User is offline DustArma 

Posted 07 April 2011 - 10:32 PM

  • Posts: 1172
  • Joined: 27-February 08
  • Gender:Male
  • Location:Santiago, Chile
  • Project:Learning Python.
QUOTE (AerosolSP @ Apr 7 2011, 11:17 PM)
Hurm. It works in Firefox 4. Choppy though.

Good stuff Mark :D


Try it on Chrome, I had 15 FPS and a lot of stuttering on FF and 50+FPS smooth on Chrome.
This post has been edited by DustArma: 07 April 2011 - 10:32 PM

#30 User is offline Gen 

Posted 08 April 2011 - 04:55 AM

  • This is halloween! This is halloween!
  • Posts: 309
  • Joined: 03-August 06
  • Gender:Male
  • Project:The Mobius Engine
@MarkTheEchidna: Tangent-space normal mapping is mostly a simple operation. The hardest part about it, is effectively writing everything to function in tangent space instead of world space. The basic math in GLSL speak using the per-vertex light direction (assuming model space coordinates) is:
CODE
mat3 rotation = mat3(a_tangnet, cross(a_tangnet, gl_normal), a_normal);
vec3 rotatedVal = rotation * u_lightDirection;

GLSL will take care of the matrix multiplication required to rotate your vector into tangent-space. For world space to tangent space, the only difference is instead of an object space normal, you use a world space normal. Please note however, it's best that you only use either world space or object space normals with the accompanying world or object space vectors. Otherwise, you'll get incorrect results every time.

Another solution, is to transform your tangent space normal map into world space in your fragment program, and just apply all of your operations from there:

Fragment program
CODE
varying vec3 v_worldNormal;
varying vec3 v_tangent;
varying vec3 v_bitangent;
//assume the usual varies here such as texcoords and the like
uniform sampler2D u_normalMap;

void main() {
    vec3 normal = texture2D(u_normalMap, v_texcoord.xy) * 2 - 1; //need to unpack our normal map to the -1 to 1 range before we can use it
    normal = v_tangent * normal.x + v_bitangent * normal.y + v_worldNormal * normal.z; //convert our tangent space normal to world space
    gl_FragColor = dot(normal, vec3(0.0, 1.0, 0.0)); //accumulate lighting from above in world space
}


Something to be wary of however, conversion of tangent space normals to world space isn't the most performance savvy operation in the world, and given that most people in the community are likely still stuck with only Shader Model 2 capable hardware, you're likely to want to avoid converting to world space normals too much.

EDIT: Come to think of it, you could actually use render targets to effectively composite the scene together a lá deferred rendering, while staying well within SM2 constraints (which for reference, SM2 supports about 64 fragment instructions, vs. SM3's roughly 512).
This post has been edited by Gen: 08 April 2011 - 06:57 AM

  • 5 Pages +
  • 1
  • 2
  • 3
  • 4
  • Last ►
    Locked
    Locked Forum

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users