How to detect collision in webgl?

Question

How to detect collision in webgl, without using any library like three.js?

Answer 1

How to detect collision in webgl

You don't. WebGL, like OpenGL is only for drawing stuff. It doesn't manage a scene, it has no notion of "objects" or such high level things like collisions. It's all about points, lines, triangles and shaders.

Anything related to scene management or collisions lies outside the scope of WebGL (and OpenGL).

Answer 2

A simple approach it to do ray collision detection on the GPU. Checkout the following blogpost about the topic.

http://blog.xeolabs.com/ray-picking-in-scenejs

The main idea is to render the scene to a texture (using a FBO) using a shader that saves object ids instead of color. Then you can very fast do a lookup in this texture to see what a ray collides with.