I had my first experience with WebGL around a few months ago and with GLSL when I was a part of the World Wide Maze team, but everything was done through three.js, which hides most of the nitty-gritty.
Since WebGL is based on OpenGL specifications and currently most graphic processing uses OpenGL as their infrastructure (well until OpenCL comes along), so I thought it would be useful to know the inner workings of the system.
In here I employed the Ping-Pong techniques by utilizing the Framebuffer Object architecture which enables millions of particles calculated through the texture, I’ve drawn a simple diagram to explain the process.
Hopefully that made any sense! This techniques also used for post-processing calculation by applying several passes through the texture.
Quick tips, if you want to use complex algorithms I suggest that you read a lot of math books and try to understand at least the basic, because there are already hundreds of mathematician that have published their work since centuries ago, Computer Vision algorithms like Space partitioning, Fortune’s algorithm, etc. has been around for decades and you can easily find the programming adaptation, all you have to do is just decode/modify/combine it.
- Chrome v29.0.1547.57
- Mac OSX 10.8.4, 3.2 Ghz Intel Core i3
- Google I/O 2011: WebGL Techniques and Performance
- Making WebGL Dance
- How to write portable WebGL
- Learning WebGL
- Introduction to shaders
- Iñigo Quílez’s blog
- Once you understand the concept of shaders just stare at these amazing shaders to get more in-depth