Navigation

Extremely Fast and Simple WebGL Motion Detector to Rotate 3D Graphic

BY MARKUS SPRUNCK

In this WebGL experiment the browser captures the video signal and compares subsequent frames to detect motion of the user. With this signal the program finds the viewpoint and rotates the head, body and eyes of a teddy bear.

Allow the site to access your camera. Now move your head in the direction of the camera Frame. You may also use your hand to move the Teddy bear.

Figure 2: The teddy moves his body and eyes dependent from your movements

The movement of your head should be large enough or use your hand. To control the visible Frame of your camera and to change the detection parameter open the GUI. In the right bottom corner a control window appears.

Figure 3: The teddy moves his body and eyes dependent from your movements

Motion Detection Algorithm

The underlying algorithm for the used motion detection is extremely simple:

First the video Signal is mirrored on the Vertical Axis. Just all x-Coordinates are swapped and the y-Coordinate stays the same. This is needed to get the viewer perspective, usually the camera of your PC will create a reversed left to right picture.

After Thisalways subsequent frames of the video signal are compared. If the viewer moves his/her head the frames show small differences.
WebGL provides the possibility to
compare these frames with HW acceleration, so this is extremely fast.

Then the average position of all the changed
pixels will be computed AND DISPLAYED AS small red cross. This moving average shows the average position of all
movements in the screen.

To improve the results the lower part of the screen will not be analyses and this detection border is changeable in the GUI.

The algorithm is independent from the moving object, so you may also use a hand and/or other objects. Maybe you try is with a small bar of chocolate.