Category Archives: WEBGL
playing with shadertoy
Shadertoy is a nice little project that lets users program simple WEBGL fragment shaders that are then directly published as pages on their site. The subset of WEBGL features available for use on respective pages severely limits what can and what cannot be programmed on shadertoy.com. But as the name implies the site is meant as a playground that allows to quickly play with fragment shader code – without having to deal with the necessary glue code (vertex shaders, etc).
When publishing their fragment shaders, users also publish their source code, something that other users can then tinker with (credits for derived work can usually be found in the comments, or code may directly be marked as “forked” from somewhere else).
I sometimes play on the site myself and below a selection of respective shaders that I have done these last few years (if your device offers WEBGL2 support, you might want to directly look at the respective pages on shadertoy.com):
2019
twisted thingy – https://www.shadertoy.com/view/3dXSDB
isolines & capsules – https://www.shadertoy.com/view/wsSXzh
isolines – https://www.shadertoy.com/view/3sSSRR
2020
kleinian skulls – https://www.shadertoy.com/view/wtsyRB
RGB glitch – https://www.shadertoy.com/view/WlXcDr
deep-sea mandelbox – https://www.shadertoy.com/view/wllczj
fractional part patterns – https://www.shadertoy.com/view/wtXczf
colored moire – https://www.shadertoy.com/view/wtXczl
2021
warrior lissajous – https://www.shadertoy.com/view/NllGDn
2022
Fork of speakers – https://www.shadertoy.com/view/DtlGW8
2023
neon lights tunnel – https://www.shadertoy.com/view/cddSRM
Tequilla Rainbow – https://www.shadertoy.com/view/ddy3DD
audio reactive Discoteq – https://www.shadertoy.com/view/mlfBDX
metaballs v0.2 – https://www.shadertoy.com/view/cldBzN
an old player revisited
Ten years after my first sc68 web port I thought it might be time to update the code base to the latest sc68 dev version. This new version supposedly has improved SNDH playback capabilities and I used the occasion to play with WEBGL and also add a visualization of the emulation’s internal voice streams. A live demo can be found here: http://www.wothke.ch/webSC68
PS: I updated PlayMOD to now also use this version.
269 Life
In addition to showing some cool ray-marching based realtime graphics, my latest web page is dedicated to “269 Life” and the matching title is meant to attract some extra attention to that meaningful movement (see http://www.269life.com).
The realtime WEBGL web page can be found here:  https://www.wothke.ch/269life/. You’ll need some sort of 3D graphics accellerator and a Chrome browser to use it. Or you can have a look at a youtube recording here.
I am not repeating the information that can already be found in the comment of the youtube video here. Instead I’ve added some background information regarding the techniques that I used in the page.
All the fractal graphics are created using Knightly’s “pseudo kleinian” algorithm (see example code in “Fragmentarium”) as a base and parameterizing it with various “distance estimate” functions. An “orbit trap” based implementation is used to color the result. Depending on the specific “scene” a number of reflections is calculated (up to three). The “Phong Blinn” shading model is finally used in combination with a standard “ambient occlusion” implementation to render the fractal background (basically the same impls that I had previously used in “modum panem”).
Three different approaches are used to display text elements:
- “Flat” texts are created by using a font texture that is then displayed via simple triangles (two per character).
- Texts like the title or the ones in the “greetings” section are then based on extruded 3d fonts (see standard THREE.js examples).
- Finally there are the “particle based” texts that explode in the “greetings” section – which are created using regular canvas text rendering.
A “bokeh” post-processing is applied to the resulting page to create a “depth of field” effect. (The respective implementation is derived from Dave Hoskins work.) The “bokeh” post-processing is also used to create some interesting distortion effects on the overlayed title text (which is not using the same z-buffer).
Finally the “greetings” scene showcases the combination of “standard” THREE.js elements (particles, extruded texts, etc) with the shader generated fractal background: By having the fractal shader propagate its z-buffer information, the regular THREE.js overlays are later clipped correctly (thanks to Marius for the respective depth calculation – see boxplorer2).
The “neon signs” here are created via a post-processing pass that adds a “glow” as well as a “god’s ray” effect. A simple random noise based shader is used to create the purple “northlights” on the horizon and 20’000 confetti particles provide for some action.
Thanks again to Wolf Budgenhagen and LMan for letting me use their music.
part three..
And to complete the trilogy here another bit of fractal fun (in case your PC is not equipped with a fast enough graphics accelerator you can find a video recording here: https://youtu.be/PzTwOfoZp0E):
the beauty of numbers..
I just did a little revival of my old WebGL fractal stuff. The two below screens use the latest version of my Commodore C64 emulator to play two fitting music creations by Markus Klein.
vu meters?
Just a little experiment for how to synchronize visualization of additional data streams with the the playback of WebAudio music: The music samples are generated on the fly using a ScriptProcessorNode emulating some legacy AtariST. In addition to the stereo output the respective ScriptProcessorNode also generates three streams containing “playback volume” for the AtariST’s internal sound-chip voices:
just for fun a more psychedelic WebGL based rendering of the same data (the WebGL here combines an orbit trap fractal with an inverse distortion, and the “music volume” is used to parameterize the rendering):
Fractal Flames
I just completed my latest experiment 🙂 It is a revamped Web version of Orion Sky Lawlor’s “GPU-Accelerated Rendering of Unbounded Nonlinear Iterated Function System Fixed Points” (see here).
For good measure I have added a bit of music interaction 🙂 I suggest you have a look at the live demo here (Chrome recommended). A Youtube recording can be found here.
update: The original integration of SoundCloud music is no longer supported (I am sick and tired of mopping up after those clowns whenever they feel like breaking their API. The used song is now hard-coded.)
Programming background information:
- Starting from Dr. Lawlors opengl/C++/Windows program the main step was to get rid of any opengl legacy fixed pipeline rendering and replace it with a programmable pipeline WEBGL equivalent. Then some WEBGL limitations still had to be dealt with, e.g. adding missing WEBGL shader functions, replacement of unsupported for-loops in shaders or unsupported texture modes, etc. Luckily this process proved easier than expected. The resulting WEBGL/JavaScript program works quite fluidly in Chome (on my GTX460). Firefox’s WEBGL implementation also works for the most part – but it occasionally it crashes for no good reason and it is rather slow in compiling the shaders.
- Some surprise obstacles came with the attempt to implement the music playback and hook it up WebAudio’s AnalizerNode infrastructure: The first attempt to use some XMLHttpRequest based loading with AudioContext.decodeAudioData() processing proved a total failure, because Firefox’s implementation (versions 31 -33) just fails to decode the (supposedly “invalid”) mp3 data. Also it became obvious that the upfront decoding of the complete mp3 file (in Chrome) adds an unacceptable delay to the music startup. Interestingly playback of the same mp3 file works flawlessly in Chrome as well as in Firefox when using the HTMLAudioElement. So that’s what I am using now. Unfortunately that API is not implemented consistently in the different browsers and particularly the event handling in Firefox leaves a lot to be desired. But even Chrome fails to properly “loop” a song but instead goes into some corrupt state at the end of some (especially longer) songs. Once again browser specific tinkering is called for…
- The page uses multiple AnaylzerNodes with low-/band- and high-pass filters to detect certain music patterns that are then reflected in the graphics. Unfortunately Firefox again proved a difficult customer: Connecting FilterNodes to the HTMLAudioElement here sporadically leads to corrupted music playback. Also the Firefox FilterNodes produce completely different results than the Chrome ones.
WEBGL and fractals
Did I mention that I love fractals? In fact I do and that’s why I created the below intro:
I am using orbit trap logic that I implemented in a WEBGL fragment shader.  The add-on text scrollers/messages sport an exploding-pixels effect which is done using plain Canvas pixel operations. For good measure I added my WebAudio based SID chiptune playback (see my previous posts).
I guess that next time I’d better leave all the graphics to the GPU .. because my CPU is just getting too old. In case you are using a recent browser and if you have some sort of GPU in your computer, you might try to see the online version by clicking on the above image.
“hello world 3D” version 2..
On my second trip to the world of THREE.js and WEBGL I tried out yet another bunch of “new” things:
- use of THREE.js EffectComposers and Shaders to create “glow” effects, etc
- creating lightweight 3D text rendering by rendering a 2D font into a texture and by creating a geometry that then represents each character as two simple textured triangles
- create THREE.ShaderMaterials (i.e. WEBGL vertex and fragement shaders) to then apply visual effects to the above 3D text (e.g. rolling the characters or exploding the text-page, etc)
Then I came across Felix Woitzel’s fascinating “Travelling Wavefronts” demo and I had to understand how its WEBGL shader logic is done 🙂 After some tinkering I ended up with a slightly cleaned up version of my own with some added visual effect features:
After throwing all of the above together and adding a bit of WebAudio based SID chiptune playback (see my previous experiment), I ended up with a little Web intro 🙂 Those with a reasonably fast GPU may see it in action here  (due to my old CPU I really like to use as much of the GPU’s power as I can..).
“hello world” 3D with a pinch of concurrency..
By chance I had recently come across a very cool 3D web page and thereby discovered what modern web browsers meanwhile are capable of.
The experiment here is my THREE.js based equivalent of  “hello world” – which I did to just get a first glimpse at what it means to do 3D in the browser (the live version is here).
I added a Web Worker based fractal generator to experiment a bit with the benefits of a respective asynchronous approach.
Eventhough they haven’t managed to get the transparency handling right yet, the guys at THREE.js are certainly doing a great job abstracting from the ugly details of WEBGL wiring! (What they don’t seem to have any clue about is API management and backward compatibility.. Â e.g. repeatedly inverting the orientation of their 3D coordinate system from one version to the next.. LOL)
happy programming logbook 
