Plasma Ball
This project is a recreation of a plasma ball using WebGL and JavaScript. The plasma ball is rendered with two shaders, one for the tendrils and one for the ball. The tendrils are animated on the GPU by blending rotation values passed into the vertex shader. The red contact points are rendered by coloring vertices on the sphere that are close to the tendrils and then relying on interpolation to create a drop off effect around the contact point. See below for a detailed project description.
Project Description
Each tendril in the plasma ball is comprised of a line of vertices. These vertices are slightly displaced from the main tendril axis to give a wavy look to the tendrils. Tendrils are animated via linear interpolation between two displacement states. One buffer contains the tendril start vertex states, while another buffer contains the tendril end vertex states. A third buffer contains the interpolation values for the tendril positions. By only changing the interpolation value every frame, animation of the tendrils is achieved on the GPU without the need to update the tendril positions on the CPU. Once a tendril's position has fully interpolated from the start state to the end state, the old end state becomes the new start state, and a new end state is generated, and buffer data is updated accordingly.
To allow the tendrils to move around the plasma ball, start and end direction vectors are defined, as well as an interpolation value. These values are updated similarly to the vertex position values. Tendrils are aligned to their correct direction via an axis-angle matrix generated on the GPU.
Due to time constraints, the red highlights are generated inefficiently. Before each frame is rendered, the endpoints of the tendrils are translated to their interpolated positions on the CPU via an axis-angle matrix. Then, the distance between the end tendril vertices and sphere vertices is calculated. If a vertex on the sphere is close to a tendril point, then the sphere vertex is colored red for this frame. After this, tendril and sphere vertex data is sent to the GPU for rendering.
In order to produce more realistic tendril animation, the interpolation values of each tendril are not the same for each vertex in the tendril. Vertices closest to the center change interpolation values at a faster rate than outer vertices. This causes the inner end of the tendril to start moving before the outer end. This is most obvious on fast-moving tendrils, where the tendrils will take on a curved shape.
Finally, the sphere itself changes coloration depending on the dot product between the vertex normal and camera direction. Vertices near the center of the screen on the plasma ball are transparent, where vertices near the edge of the screen are more transparent. This is a cheap way to simulate the look of a glass ball.
