WebGL Canvas Playground
This is my internal WebGL canvas playground. I use it for development of shaders, math for gfx, prototyping the ideas, demos, effects etc.Some info:
- Demos below open on new tab of your browser
- Some of those are static, some other are animations, some other static-time-configured (each time you run it, the result may be little bit different)
- Everything should work on any modern browser, but it's mostly Windows-Chrome and Linux-Chrome tested
Simple tests:
- rectangles/alpha
very simple WebGL code, just gradiented rectangles to check some alpha arithmetics - hexagons
test of specialized hexagon shader/renderer - text
few pixel-shader variations around displaying text - blur, mirror/shadow, tinting and gradient-tinting tested.
- The Wave - Use left/right arrows to switch between variations.
4 different patterns, 2 of them animated (slow move).
It uses more advanced pixel shader, which unfortunately doesn't show consistent results over different devices:
- It generally looks good on modern Windows machine.
- Testing on linux machines gives different results, depending on how the machine is configured (and what gfx hardware there is) - sometimes it's ok, sometimes it's just black shade of The Wave and sometimes it doesn't show The Wave at all.
- Mobiles - full variation. All possiblites from Linux, but also sometimes The Wave is there in proper colors, but the qualilty of it is low (looks pixelized).
- It generally looks good on modern Windows machine.
Design ideas - just quick color-match checks: