Just recently I learned about the Web Speech API which it’s already available in Chrome 25. It takes input from the computer’s microphone, does a speech recognition and returns you the results – without needing you to do anything. You just start the service, say “Hello” and get a result returned that contains the string “hello”. I immediately got nerd sniped and decided I needed to add speech recognition to decoupled-input to be able to issue voice commands in a game, like “Arm cannon”, “Fire missile” or “Activate autopilot”. There’s an example page over here where you can see it in action. Just press “V” to activate recognition and say one of “Full speed”, “Slow” or “Stop” to control the car’s speed; you get a green confirmation text when the command has been recognized. While this is seriously awesome, it also has some cons. Let’s go into some details.
Posts Categorized: Experiments in Web
Decoupled Input
The Ascent project had a bunch of upgrades these days, including better loading logic, a radar, pointer lock support and others. But the most important one certainly was decoupled input. I found it important enough to extract and polish it and create a separate GitHub repo for it. So, let me introduce you to decoupled-input!
Mouse-Picking Collada Models with THREE.js
Finding a Collada model that has been “clicked on” in a scene seems to be a common issue, and I’m getting quite some emails asking me about details. So here’s a how-to with annotated code.
The whole “finding an object” thing requires ray casting. When the user clicks anywhere on the screen, we’ll project the event coordinates into the 3D space so that we have a virtual “view-path” from the center of our view into the direction where the click took place – like our own eye does. We then follow that line until we find an intersection with an object in the scene. That line is the ray we are “casting”. OK, let’s go!
read more »
Optimizing the THREE.js Ray Casting Class
As I mentioned before, the THREE.js Ray class is not very optimized regarding memory usage. Of course, you should avoid expensive operations like ray casting, but it seems to be the cheapest way to detect if a given point is inside of a mesh. So you will eventually do a lot of ray casting in your render loop.
This is the case for Ascent, as I’m implementing shooting at things there. The whole “shooting at things” implementation can be optimized a lot, but that’s something for another post; for now, we just want a less memory-eating ray caster class.
read more »
Ascent Update: Shooting at Things with three.js
One of the main missing things in Ascent is “Being able to shoot at things”. To solve this, the first question is “What to shoot?”. Ok, there are rockets. But what about the almost-unlimited-basic-weaponry? Many space games feature laser guns. But, lasers, if implemented they way they’d actually look like and work, are boring. Just long lines, going on forever; not the fancy thing you know from Star Wars. You could also implement them to work like railguns – still, boring. But I remember that one of the coolest things of WWI flight simulators was firing bullets at enemies with the on-board cannon. And I’m sure one can find a satisfactory explanation why firing bullets in space is a reasonable thing to do 
The only thing that feels odd to me is that those bullets will keep on traveling forever until they hit anything…
Ascent update: Skybox
During the last month, I didn’t have much time to work on Ascent, mainly because of an awesome three week vacation in Italy. But there’s one tiny update I made that I find pretty important: moving from particles as scene “background” to a skybox.
Ascent – A WebGL Space Simulator Framework
Quite a while ago, I started RavenJS. It was awesome fun. Seeing it grow, and in the end, being able to walk the landscape, was an amazing experience. It triggered sweet memories from the past, and also showed what was possible today. But the whole project sadly has many downsides, the biggest being the fact that I will never be able to put it online somewhere. I still believe that it would have been an awesome opportunity; if I were the original publishers, I would have jumped at it, created a freemium model around it, and spent the rest of my days wondering where to put all the money. Seriously, an online MMORPG, without any plugin or executable to download, just open your browser, enter your (OpenID-) credentials and play? With decent 3D graphics? Plus, that all in a famous setting? I can hardly imagine the amount of success of such a thing would have. (Think about it a little more – virtually no barrier to play, payment and id providers all already in place, pushing updates without downloads, and so on…)
Well, however, I don’t want to get carried away, I guess you get what I mean. So, I decided to start something else. Something that would be easier to realize for a non-3D-guy like me. And something using three.js, as I’ve always been using GLGE for my WebGL experiments (RavenJS was built using GLGE, too). And, most important, something that could be open source and live on GitHub. Something that everybody could play, download and fork. Something people could contribute to, modify, extend, make better.
read more »
How to make three.js Ray caster detect Collada objects
Three.js' Ray caster successfully detecting a Pulsar transport vehicle.
Unfortunately, three.js’ Ray class currently doesn’t detect intersections with imported Collada objects. Unfortunately, because I heavily rely on imported models and I’m too lazy to do the detection manually.
But, the good new is, the collada objects carry all information needed for the ray caster to work properly; you just need to do some manual tweaking.
Porting a 3D RPG to WebGL, Part 1
It all began half a year ago when I sat down with a friend and fellow crew member, Stephan, and we agreed that Gothic was indeed one the best RPGs of all times (seriously, if you don’t know it and are into RPGs, you should get it). We also soon agreed that it would be awesome to experience it’s amazing atmosphere in a browser, using WebGL. Stephan shopped two shiny new copies of Gothic and we started hacking away and gave the project the very fitting title RavenJS…
Update: Stephan recommended to put the video on top, so here it goes: Some impressions from RavenJS, enjoy (fullscreen and headphones recommended)!
Storage Research – Your Help is Needed!
Right now, I’m doing some research regarding client-side storage on mobile devices. But for that, I need your help!
Please grab all phones you have and navigate to http://jensarps.de/tests/storage-tests/.
There are four tiny tests there. Please do them all and report your results for each phone. If you like, include your twitter handle so I can say thank you!
Your help is greatly appreciated!! Thanks a ton!!