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
  • Last ►
    Locked
    Locked Forum

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

#1 User is offline MarkTheEchidna 

Posted 06 April 2011 - 09:58 PM

  • Posts: 39
  • Joined: 10-September 10
  • Gender:Male
  • Location:Belo Horizonte, Brazil
  • Project:WebSonic
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. (http://forums.sonicretro.org/index.php?sho...=0&p=504173)



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:

http://achene.co/WebSonic/

Crossposting from github: (https://github.com/Coreh/WebSonic)

QUOTE
WebSonic Engine - WebGL Sonic the Hedgehog Game Engine

This is a Sonic engine I showcased on Sonic Retro last year. (2010)

It's written on javascript, and makes use of the WebGL canvas API of HTML5 to
draw its graphics.

To play it, you'll need a modern browser with WebGL support (Firefox 4.0 and
Chrome 10.0 are good enough) and a semi-decent graphics card. Just fire up
`index.html` and you're ready to go.

Keep in mind that to run it locally in Chrome, without a Web server, you'll
need to launch the browser with the `--allow-file-access-from-files` command
line flag.

Introduction

I was planning on a bigger release for this project, with finished levels and
gameplay, but couldn't get it done due to time constraints. This perfectly
usable piece of code had been sitting on my hard drive for months untouched,
which is totally unfair, so I figured it was a good idea to release it for
other people to tinker with it.

This Engine is a more or less accurate implementation of the algorithms on the
[Sonic Physics Guide](http://info.sonicret...c_Physics_Guide),
generalized to ℝ³. Some subtle adaptions had to be made, since the original
Sonic engine used height maps for collisions, (I couldn't afford to do that
here) used a strange fixed point encoding for numbers, (I couldn't bother to
use something other than JS's `Number`) and had like, only two dimensions to
worry about.

My goal here was to make it "feel" almost exactly as the original Sonic games,
if you only walked left and right and hit jump. I think I've accomplished that
goal.

Beware: The engine code is really messy, hacky and poorly documented.
Sorry, I didn't have enough free time to refactor/clean it up. You might also
find code doing something stupid as far as WebGL is concerned, since I wrote
this engine as a learning exercise for WebGL.

Controls

CODE

[Q][W] - Rotate Camera
[S] - Look Up
[X] - Jump [^]
[ Spacebar - Crouch Down ] [<][V][>] - Move

Spindash = Crouch Dowm + Jump


Technical Info

- The engine uses simple JSON wrappers for GLSL fragment and vector shaders.
That seemed like a pretty good idea at the time, but is now one aspect of the
engine I'm not completely happy about.

- Textures are regular PNG or JPEG (or even SVG!) images loaded by the browser.

- Meshes are stored on a custom JSON based format. (Yeah I know, using ASCII
for binary data is kind of stupid, but it's easier to load.) Animations are
vertex-based. (Yeah I know.) The source code of a simple converter
from Quake's `md3` files to this custom format is included under `tools/`.
You'll need to compile it with a C compiler to use it.

- Sylvester is used for Matrix and Vector math. It's probably going to be
slow by today's standards, specially if compared to something using
`Float32Array`s, but it's only used on non-critical sections of the code.

- Maps are tile-based! We have 128x128x128 tiles, as you would expect from a
Sonic engine. :-) The JSON format used should be self-descriptive.

- Objects can be indexed spatially using a grid, to allow for greater
performance when having lots of objects.

- The only form of collision checking available is ray-triangle intersection.

- Check the Web Inspector / Web Console of your browser for (not-so)
interesting debug messages.

- The camera is always aligned to one of eight axes in relation to the player:

CODE
\ | /
\|/
-----+-----
/|\
/ | \


This is very important, as it allows the player to move with great precision
on a 3D environment using only the arrow keys.

FAQ

The control scheme sucks!

*This is not really a question*. Anyway, I like it this way. Feel free to
change it on the source.

Can I play this with a Joystick?

As of 2011, natively, no. You can use something like JoyToKey if you want it
*that bad*. Expect that to change as progress is done by WHATWG and browser
implementors with the HTML living standard's `<device>` tag.

Known Bugs/Issues

- The matrix inversion algorithm used is numerically unstable. This is actually
a Sylvester issue, and might result in wrong lighting on the models when
they're rotated to specific angles.

- Post-processing effects were *super slow*, and are commented out.

- There's something very wrong with my shadow math. It currently depends on the
camera position, and will break if you change the camera distance, FoV or
orientation on any axis other than Y.

Cool ideas if you have free time

Easy


- Edit the current test level!
- Make a new level!
- Change/add more textures!

Medium

- Implement new objects!
- Add sound/music support!

Hard

- Add customizable control schemes!
- Change the shader format to something more reasonable!
- Add support for binary 3d model formats!
- Refactor/clean up the code!
- Fix the shadow code!
- Implement bone-based animation!
- Optimize/enhance post-processing code.
- Make a level editor!
- Implement online multiplayer using something like Socket.IO! (This one is
pretty cool)

Near-impossible

- Make a finished game out of this ;D


Grab the source here:

https://github.com/Coreh/WebSonic - 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.
This post has been edited by MarkTheEchidna: 07 April 2011 - 09:15 AM

#2 User is offline sonicblur 

Posted 06 April 2011 - 10:52 PM

  • Posts: 746
  • Joined: 18-February 08
  • Gender:Male
  • Wiki edits:6
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.
This post has been edited by sonicblur: 07 April 2011 - 10:59 PM

#3 User is offline Namo 

Posted 07 April 2011 - 04:45 AM

  • take a screenshot of your heart
  • Posts: 2912
  • Joined: 02-August 09
  • Gender:Male
  • Project:dynamicite.org
I remember seeing this a long time ago and was impressed.

#4 User is offline MarkTheEchidna 

Posted 07 April 2011 - 07:49 AM

  • Posts: 39
  • Joined: 10-September 10
  • Gender:Male
  • Location:Belo Horizonte, Brazil
  • Project:WebSonic
QUOTE (sonicblur @ Apr 7 2011, 12:52 AM)
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.


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: http://coreh.github.com/WebSonic/

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

#5 User is offline Aerosol 

Posted 07 April 2011 - 08:26 AM

  • FML and FU2
  • Posts: 6981
  • Joined: 27-April 08
  • Gender:Male
  • Location:Not where I want to be.
  • Project:Sonic (?): Coming summer of 2055...?
It's down mate. Bummer.

#6 User is offline MarkTheEchidna 

Posted 07 April 2011 - 09:14 AM

  • Posts: 39
  • Joined: 10-September 10
  • Gender:Male
  • Location:Belo Horizonte, Brazil
  • Project:WebSonic
:-( The github pages feature seems to be very unstable for some reason. I'm hosting it somewhere else:

http://achene.co/WebSonic/

This one should work.

#7 User is offline Aerosol 

Posted 07 April 2011 - 09:47 AM

  • FML and FU2
  • Posts: 6981
  • Joined: 27-April 08
  • Gender:Male
  • Location:Not where I want to be.
  • Project: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 User is offline MarkTheEchidna 

Posted 07 April 2011 - 10:04 AM

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

Posted 07 April 2011 - 10:08 AM

  • FML and FU2
  • Posts: 6981
  • Joined: 27-April 08
  • Gender:Male
  • Location:Not where I want to be.
  • Project:Sonic (?): Coming summer of 2055...?
I just clicked it again. I'll let it load for a while and see what happens.

#10 User is offline MarkTheEchidna 

Posted 07 April 2011 - 10:14 AM

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

Posted 07 April 2011 - 10:19 AM

  • FML and FU2
  • Posts: 6981
  • Joined: 27-April 08
  • Gender:Male
  • Location:Not where I want to be.
  • Project:Sonic (?): Coming summer of 2055...?
"Uncaught Error: Could not initialize WebGL. Are you running a modern browser with WebGL enabled?"

Eh?

#12 User is offline MarkTheEchidna 

Posted 07 April 2011 - 10:31 AM

  • Posts: 39
  • Joined: 10-September 10
  • Gender:Male
  • Location:Belo Horizonte, Brazil
  • Project:WebSonic
Ok, that's almost certainly a video card compability issue. sad.png

http://blog.chromium.org/2011/03/gpu-accel...ld-drivers.html

#13 User is offline Aerosol 

Posted 07 April 2011 - 10:36 AM

  • FML and FU2
  • Posts: 6981
  • Joined: 27-April 08
  • Gender:Male
  • Location:Not where I want to be.
  • Project:Sonic (?): Coming summer of 2055...?
I'm running an 8500GT so I'm inclined to agree. Aw well sad.png

#14 User is offline Dr. Kylstein 

Posted 07 April 2011 - 11:00 AM

  • Posts: 84
  • Joined: 05-June 08
  • Gender:Not Telling
I get the black screen too.
QUOTE (Console)
Uncaught Error: Nonexistent or unused uniform in shader description: u_normalCameraView GraphicsEngine.js:87
google-chrome-beta 11.0.696.34-r80286 (stable)
Ubuntu 10.10
GTX280

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

#15 User is offline DustArma 

Posted 07 April 2011 - 11:26 AM

  • Posts: 1154
  • Joined: 27-February 08
  • Gender:Male
  • Location:Santiago, Chile
  • Project:Learning Python.
HUD with black screen, running Firefox 4.0, AMD/ATi HD 4830, Windows 7.
This post has been edited by DustArma: 07 April 2011 - 11:27 AM

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

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