Category Archives: Web programming
In addition to showing some cool raymarching 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: https://www.youtube.com/watch?v=Y3S3MY3Vuf4 (I am still looking for a volunteer to create a higher quality recording for me 🙂 )
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 parametering 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” postprocessing is applied to the resulting page to create a “depth of field” effect. (The respective implementation is derived from Dave Hoskins work.) The “bokeh” postprocessing 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 postprocessing 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 Darkmelo for letting me use their music.
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):
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.
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 ScriptProcessor emulating some legacy AtariST. In addition to the stereo output the respective ScriptProcessor also generates three streams containing “playback volume” for the AtariST’s internal soundchip 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):
are certainly not a good idea if a program is supposed to be portable. Unfortunately that is exactly what ZXTune is using to parse the different binary music files.
“One of the rules of packed structs is that you have to access them directly through the packed struct type. In other words, you can’t, in general, take the address of a packed field and then access the field through that pointer, because the pointer type won’t reflect the packed attribute.” (sunfishcode)
Unfortunately ZXTune used boost::array instances within the various packed structs.. Problem: when methods are invoked on boost::array (or std::array, etc). The ‘this’ argument to the boost::array functions may be misaligned, but the boost::array functions themselves don’t know this.
On CPUs which don’t mind unaligned memory access you may get away within without realizing that there is a problem.. and in this case it was my attempt to cross-compile the program using Emscripten that revealed the issue. Not wanting to rewrite too much of the foreign code I opted for a quickfix: replacing the boost::array with a built-in array fixed the immediate problem…
Naturally a clean implementation should better refrain from depending on unaligned memory access at all… not all the CPUs are as forgiving as Emscripten.
(click on the below image for a live demo).
It was back “in the old days” and I remember my relief when some day I found out that all PCs were not necessarily mute: Thanks to some “walking frame” called “AdLib” they could actually make sounds… and a bit later things became pretty neat with the rise of Sound Blaster…
AdPlug plays sound data, originally created for the AdLib (OPL2) and Sound Blaster (Dual OPL2/OPL3) audio boards, directly from its original format on top of an emulator.
My latest bit of Xmas tinkering is a HTML5/WebAudio version of AdPlug (Thanks to Simon Peter and the other authors of AdPlug.). For a live demo click on the below image..
To complete the set of chipmusic emulators, here my WebAudio version of SC68 – an AtariST music emulator (that plays files like *.sc68 or *.sndh).
Eventough I had done some programming on the MegaST 4 back in the 90ies, I have to admit that at the time I had not realized that the machine had anything resembling a sound chip. Those were the days of 68k assembler, DSP machine code and GFA-Basic.. and we were just doing a Paintbox software for the “CHILI” framegrabber and realtime video-effects extension card… 🙂
But it seems the ST not only did have a MIDI interface but also a built-in sound chip…
Thanks to Photon Storm for sponsoring this little project.
This experiment once again confirmed my ealier observations that the debugger support built into today’s web browsers is utterly useless (but for the most trivial scenarios). So this not only was a travel back in time with regard to home computer music but also with regard to the modern developement tools that I had gotten used to: bye bye IDE – welcome back debug/trace output.
For all those thinking ‘ahhh but Chrome is so much better’ – think again: While it is true that Chrome’s developer tools are real quick there is a catch. Or as a colleague once said: “if the result does not have to be correct my code can be real quick!”. Here is an example of a situation that you may encounter while debugging in Chrome (this is actual – non tampered with – debugger output):
The debugger here has just stepped over a line of code that sets some variable to 0. On the very next line the debugger tells you that this very variable is NOT 0.. Another fun Chrome surprise is when you find that Chrome’s garbage collector will actually trash ‘event handler’ functions that are still in use – unless you separately anchor them to some dedicated variable.
I am so glad that I never make any mistakes as a matter of principle 🙂 So my latest bit of music playback programming could not be stopped by foul developer tools:
And what was this experiment about? xmp is a module player that plays over 90 mainstream and obscure module formats from Amiga, Atari, Acorn, Apple IIgs and PC, including Protracker (MOD), Scream Tracker 3 (S3M), Fast Tracker II (XM) and Impulse Tracker (IT) files. This functionality is now available on my little web page (click on the image above) 🙂
(You’ll find the source code here: http://sourceforge.net/projects/webxmp/)
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.
The music I selected above is by Dexter Britain and licensed under a Creative Commons license. (see www.dexterbritain.co.uk)
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/JavaScipt program works quite fluidly in Chome (on my GXT460). 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 particularily 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.