Hacker News new | comments | ask | show | jobs | submit login
MineCraftWebGL (danielribeiro.github.com)
170 points by jnazario on July 16, 2012 | hide | past | web | favorite | 57 comments

Pretty cool but another thing missing from this is the dynamic lighting. If you make an enclosed space it's just as bright inside as daylight. The lighting in minecraft is simple but extremely effective. Here's a nice demo/test from Notch from when he was working on that:


I like Minecraft Classic's binary lighting, personally. Slightly darker if shadowed, full brightness if not.

If only there were an API for mouse capturing.

Is there any reason why it couldn't work if it were implemented like full screen mode (displaying a message telling the user to press escape to reclaim the mouse)?

Edit: Actually it looks like this is being worked on after all – http://dvcs.w3.org/hg/pointerlock/raw-file/default/index.htm...

This exists in Firefox as of 14, currently in Aurora, so this will be in a stable release in a few weeks.

It also exists in recent Chrome versions, however it seems to be disabled by default for some reason, but you can enable it in the flags menu.

No reason why this cool site can't use it on those browsers, there are lots of demos on the web that do. Mouse lock is very important.

> This exists in Firefox as of 14, currently in Aurora, so this will be in a stable release in a few weeks.

Firefox 14 is scheduled for release on Tuesday.[1]

[1] https://wiki.mozilla.org/RapidRelease/Calendar#Future_branch...

Even better ;) Thanks for the correction!

No problem. I looked it up last week because I thought this was the release that was going to have the new fix for add-on-related memory leaks[1], but it turns out that's not coming until Firefox 15 next month.

[1] http://news.softpedia.com/news/Firefox-15-to-Fix-All-Common-...

> It also exists in recent Chrome versions, however it seems to be disabled by default for some reason

It's enabled at least for the Chrome Store/NaCl apps, since it did that to me for Bastion and/or From Dust.

The reason would be security-related, as usual. I take it you deal with the clickjacking potential, and the potential for deliberate annoyances?

Fullscreen also has security issues, more in fact, I believe? And it is not behind a flag. Also, mouse lock is enabled in Chrome in NaCl apps, but not HTML5 ones. So I am not clear on what's going on there.

Yeah, it does exist and is usable in current versions of Chrome if you change the flag for it. I'm not sure if the Chrome version of the API is what the final one will be though, since it seems to differ somewhat from the version documented on MDN: https://developer.mozilla.org/en/API/Pointer_Lock_API

Still it would probably be fairly easy to add support for it to this and replace the annoying click-drag camera movement when possible.

I just implemented that in a fork: https://github.com/danielribeiro/WebGLCraft/

Only works in Chrome for now, if you enable it in chrome://flags. You don't even need to be in full-screen mode, at least on the latest version.

Pull request is here: https://github.com/danielribeiro/WebGLCraft/pull/1

Oops. That first link should be https://github.com/ricardobeat/WebGLCraft/

Page at http://ricardobeat.github.com/WebGLCraft/, press C to enable mouse lock. Aiming doesn't work very well...

Seriously, what the hell is the point of even creating something like webgl if a key feature for immersion is kept out?

It's like building a car starting with the frame.

God speed to whoever is fighting the good fight on those frigging w3c boards.

As mentioned above, this feature does in fact exist.

Ah, wrote before the edit.

It's tiring to see that WASD is always used to control movement, regardless of keyboard layout. On a French keyboard, this is how WASD is laid out: http://en.wikipedia.org/wiki/File:KB_France.svg

Needless to say that it is highly impractical… Why not bind the arrow keys?

The arrow keys are usually at the right of the keyboard, next to the mouse, which makes playing with two hands awkward. You also need to move the hand on the keyboard to push pretty much any other key, which makes it difficult to do other actions (reload, open inventory, sprint, etc.)

Of course the better solution is to give the player the choice...

> You also need to move the hand on the keyboard to push pretty much any other key

- cost of binding arrow keys: ~0

- benefit to non-wasd compatible layouts: ∞

(did you know that my keyboard can actually move to where arrow keys are comfortably used, or that left-handed and right-handed-who-use-their-mouse-on-the-left-because-it-makes-sense-with-a-numpad-and-makes-RSI-bearable people exist? ;-)

The main reason is there are no keys around the arrows, making it useless for many games. The layout issue is completely different thing.

Sure, it makes sense in some cases, but not for most casual gamers (due to using a laptop, limited desk space, being right-handed with the mouse, etc.)

Binding both the arrows and WASD is a good idea.

> The arrow keys are usually at the right of the keyboard, next to the mouse

Usually yes, but not if you're using your left hand for the mouse as I've recently switched to do. At a bare minimum both WASD and arrow keys should be enabled.

But yes, reconfigurability is by far the best solution.

Alt+shift will make you happy ;)

Very, very nice! Possible feature: would it be possible to generate unique individual links a la pastebin?

Just a "generate link button" that stored all the current values of the variables and spit out a link like:

Though I suppose for pastebin et al. those are just database links. There is too much data here to store it in the actual url string itself :(

Maybe just an export/import to json button then?

I would use this, like, immediately to share designs and pattern ideas with friends.

Also possible tweak: I just built a very tall tower and jumped off. But it doesn't quite "feel" like Minecraft gravity over long distances. The acceleration or maybe just the terminal velocity feel too slow.

Random bit of maths, given if you want compatibility with older IE's you're limited to around 2000 characters in the fragment string. Assuming you base 64 encode to generate valid urls, you can only fit an 8x8x8 grid into the fragment string.

If you wanted to generate the same terrain, then you could save a particular seed for the random function which could be appended to the url.

That wouldn't include all the player made modifications to the terrain but it would give people the same world.

How would you generate which seed to use?

The seed could be generated using the default random function of your platform without specifying the seed (the default seed is likely based on some timestamp component).

You would then take the value the default random function gives you and feed it into the overloaded constructor which allows you to specify the seed.

That way you could still record the seed's value which was used to generate your terrain.

But the terrain wasn't generated using an rng, it was generated by the user placing and deleting blocks.

If you read my first comment in this thread, I stated that by recording the seed it would allow you to save the terrain generated by the game not any modifications or alterations a user added to it with their own block placement.

This is used frequently in Minecraft for players to share interesting maps which have randomly generated.

Sorry, I misunderstood.

Really nice looking impl in JS, though I'd add that doing perlin noise over a limited grid is a pretty limited subset of what Minecraft does.

Minecraft's terrain generator does a couple of passes (last I read about this, things may have changed) that generates cave systems, the surface level topography, forests, etc. http://notch.tumblr.com/post/3746989361/terrain-generation-p...

Still, definitely a cool project.

Yeah this is a very limited subset of what Minecraft does and arguably the implemented bits are the low hanging fruit. I wrote a "game" in my teens that covers this functionality, though in C++ not JS on a browser.

It makes me sad when cool things like this don't support keyboard layouts other than QWERTY

Someone who goes out of their way to learn other keyboard layouts should probably go the extra step in having a way to map keys for stuff like this.

This is a terribly ignorant statement. Plenty of people live outside of English-speaking countries where different keyboard layouts are used.

I apologize, the context made me think along the lines of Dvorak.

EDIT: Even so, most OSes now make it relatively easy to switch layouts based on country, so I feel as though my point still stands.

"most OSes now make it relatively easy to switch layouts"

The problem is that the physical layout is unchanged, so you need to memorize the keys...

If you have to look at your keyboard to write things that is unefficient anyway? I never look at my keyboard unless I have to type some weird character that is never normally used.

That's an extremely simplistic look at the problem. The issue isn't looking at the keyboard, it's the extra mental effort of doing the keymapping every time you run into a new application which has stupid defaults that don't take alternative layouts into account.

That is true. Wouldn't mapping specific keys (physical, on the keyboard) to actions/events better than mapping actions to the characters pressed? I thought that was how things worked now.

Nobody using Dvorak will want WASD as movement controls for a game for example, but they will most likely want to use the same keys, right?

The closest semantics I found were the location hints: https://developer.mozilla.org/en/DOM/KeyboardEvent#Key_locat...

The problem is, only the keyboard hardware knows where the keys are physically located. The OS knows the layout and could probably expose the QWERTY-equivalent keys, which would be sufficient for not-too-exotic keyboards, but I don't know if that is available to applications in a way that is sufficiently portable for browsers to expose it.

Chromium seems to expose this to Pepper plugins; here is the bug for making it an experimental js api: https://code.google.com/p/chromium/issues/detail?id=119362 Getting the lowlevel keycode is nonportable (I didn't find the implementation, but found switch cases and fallbacks if it doesn't exist). Conversion to a portable usb-hid-equivalent keycode is left as a stub in the patch that introduced the Pepper feature.

On azerty, WASD ens up like your qwerty's ZQSD. It's mind-bending to try to play this way, way worse than HJKL.

I wonder if the author is wondering why there is a sudden influx of traffic after 6 months.

There is more interesting discussion on the ~7 months passed HN thread: http://news.ycombinator.com/item?id=3376620

Nice, but it seems to busy wait: my CPU is pegged at 50% even when I am not doing anything.

So, just like Minecraft. :-D

Last I looked, the vector math part of 3D wasn't handled by webGL, this uses Three.js to handle that, and looks to be the main bottleneck. Until you can do matrix/vector math using hardware, webGL is pretty much useless.

> Until you can do matrix/vector math using hardware, webGL is pretty much useless.

Modern matrix libraries like glMatrix


use typed arrays effectively to do very fast matrix and vector math in JS. A modern JS engine can transform such code into something very efficient, more than fast enough to do things like even first person shooters.

That is pretty much about right. I wrote a bit about the implementation[1], and the discussion went over how to optimize this (including, but not limited to, using shaders to do the drawing and not relying on Three.js so much).

[1] http://metaphysicaldeveloper.wordpress.com/2011/12/20/implem...

Would be interested if its worthwhile/possible using shaders as a wrapper for three.js. All I got when I was searching was there was a mozilla bug report and a hacked patch to expose SIMD through js[1], and a project to add SIMD support to vectors in Dart[2].

[1] https://bugzilla.mozilla.org/show_bug.cgi?id=644389

[2] http://www.altdevblogaday.com/2012/06/18/bringing-simd-accel...

Prior HN discussion on this topic: http://news.ycombinator.com/item?id=3376620

Does anyone know of a JavaScript (or CoffeeScript) library that will read the latest version of the Minecraft files? I wrote some JavaScript code that worked with the old version and then updated it for the version that came after that but haven't had time to get into the new version. Was thinking maybe someone already did it.

I made something similar a while ago but more with a focus on the world gen and larger worlds than the crafting aspect. If someone wants to hack on it or look at code, be my guest: https://github.com/mitsuhiko/webgl-meincraft

I wonder how this was created? (tools, libraries) Been thinking about learning WebGL for a while now.


(not trying to be a dick, I mean, at least to your libraries and tools question: it is all there)

Yeah, for some reason every time I looked at it, it would have an error. Thanks though.

There's a bug in this, on 2 adjacent sides you can walk one block further then you can create. The world isn't as big as it looks so this is easy to test.

Applications are open for YC Summer 2019

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact