WebGL Point Cloud Example

Example particle simulation with point clouds using WebGL2 shaders and three.js.

See the Live demo.

Point Cloud Data

The point cloud data was generated from a drone video (https://www.youtube.com/watch?v=yiNJTDxF8FY) of the Temple of Poseidon. The video was clipped and spliced into images via ffmpeg, then fed into colmap to generate the point cloud model.

Build

Download the git repository:

git clone https://github.com/rosszm/webgl-point-cloud.git
cd webgl-point-cloud

Install Node dependencies (Yarn):

yarn

Run the Vite dev server (Yarn):

yarn dev

This will print the address of the server, which defaults to localhost:3000.

References

Here is a list of references I found helpful for this project:

• WebGL2 Fundamentals
• Learn OpenGL
• WebGL Shader Examples
• Three.js GPGPU Examples
• The Book of Shaders
• Interactive Linear Algebra [UBC]