
HTML5 games: 3D collision detection - fitzwatermellow
https://hacks.mozilla.org/2015/10/html-5-games-3d-collision-detection/
======
frik
As one of the linked articles is based on Three.js . It's like a plague that
simple 3D examples and tutorials almost always features that Three.js library
instead of "vanilla" Javascript with WebGL. People should learn WebGL and JS
first and later decide if such a library is even suitable for their usecase
(known to be slow).

It reminds me of 2-3 years ago, where almost every Javascript tutorial was
littered with JQuery library function calls. Most Stackoverflow questions were
answered with JQuery answers. In the meantime things have obviously changed
for the better.

With Three.js it's still extreme, there are even several books with "WebGL" in
the title that cover only or 90% of the content Three.js. In the meantime
organisations like Mozilla could start and ditch Three.js in favour WebGL. It
would be in common interest of everone.

~~~
greggman
I respectfully disagree. I write raw WebGL but I also have written 6 game
engines. I'll never do that again. I just want to get shit done. That means
for a game I'll start with Unity or Unreal.

Similarly for 3D most people just want to get shit done. In that case Three.js
is a great way to to just get stuff done.

There's man years of work to do to a full 3d engine. You can easily spend a
couple of man years just writing exporter/importers and trying to get every
little piece of data out and into some meaningful way into your engine. People
spend years making rendering systems and shader combiners and post processing
system.

I'm not saying three.js is perfect but at least at some level much of that is
already in there. Why should anyone skip all of that? Just to make years of
extra work for themselves?

If you want to do raw WebGL then go for, but don't push that on others. To me
that's like someone saying "you should write in assembly language". No, I'll
choose something that provides existing solutions so I can move on to my
actual content instead of re-inventing the wheel.

~~~
wtetzner
That's fine, but he makes a valid point about tutorials whose title makes it
sound like it's a WebGL tutorial but mostly cover Three.js. It's like finding
a tutorial about assembly, and having it be about C.

~~~
ladybenko
Hi, I'm the author the post.

I agree that it is important to know how things work without 3rd party
helpers, regardless of whether you'd use a game engine / library later or not.

However, the post on the Hacks blog presents some articles and demos we
created for the MDN and IMHO the title is appropriate, since one of the two
articles introduced ([https://developer.mozilla.org/en-
US/docs/Games/Techniques/3D...](https://developer.mozilla.org/en-
US/docs/Games/Techniques/3D_collision_detection)) is generic and it's about
algorithms in raw JavaScript.

I just thought there would be value too in showing how to do collision
detection using one of the most popular 3D graphics library and a physics
engine as well, since that would be the most common case when people are
developing games (versus making an engine)

~~~
wtetzner
Just to be clear, I wasn't suggesting anything was wrong with your post
(especially since it's about collision detection), just that there was valid
point made in general.

------
mrspeaker
The link seems to be the overview (with nifty demo) - the actual article is
here: [https://developer.mozilla.org/en-
US/docs/Games/Techniques/3D...](https://developer.mozilla.org/en-
US/docs/Games/Techniques/3D_collision_detection)

I've been playing around with 3D for a while, and have found that collision
detection is the (relatively) easy bit: it's collision _resolution_ that
messes me up!

~~~
talloaktrees
Yes, you're exactly right. Resolution is the tricky part. I made a simple FPS
game engine using Java + libgdx ([https://github.com/jrenner/gdx-
proto](https://github.com/jrenner/gdx-proto)), and it leveraged the bullet
physics library for collision detection, but handling collision resolution
myself. Even simple things like getting an object to to slide along a wall as
it collides with it at an angle can be tricky.

~~~
JupiterMoon
If you're already using bullet why not use if for collision resolution as
well? Or if you want to manually change things try using ODE as this is more
amiable towards doing so.

------
tigeba
A few years ago when I needed to write collision detection for a variety of
specialized cases, I found the book "Real-Time Collision Detection". It is one
of the few really comprehensive resources I was able to find on the topic. The
example sources are C++ but the concepts apply to 3d in any domain. The
website for the book is
[http://realtimecollisiondetection.net/](http://realtimecollisiondetection.net/)

~~~
vvanders
This is seriously the best technical book I've ever seen.

It's basically 3D data structures but also with a focus on cache friendly-ness
that you don't traditionally see anywhere else.

------
pachydermic
Thanks for sharing - not really interested in the 3d stuff yet, but the fact
that they're doing tutorials like this is amazing!

------
hellbanner
Doesn't run in Chrome - because of NPAPI?

