WebGL - After-images of rotating Cube

This demo shows the after-images when the 3D cube rotates. Each after-image has a location coordinate where the cube was at previous frames. The older after-image, the fainter it is, and you can control the number of after-images. The after-image is saved every frame. If you change the frequency of after-images, you can set to display the after-image every n frames.


About After-image

In OpenGL, it 'draw' every frame. So in order to display the after-images, the location coordinate of the cube at that time should be stored every frame. In this demo, the set number of after-image(saved as the cube moves) is set number * frequency and the rest is deleted for saving memory. And after drawing the cube, it 'draw' after-image more and more transparent from the most recent saved.



Controls





Control X of the Cube

Control Y of the Cube

Control Z of the Cube






X-axis Y-axis Z-axis

Rotation speed: 0.0100

The Number of After-image: 20


Frequency of After-image: 1

Color of After-image

JavaScript code

						

(CC-NC-BY) 2019 JungYeun Won