Blog Archives

WEBGL and fractals

Did I mention that I love fractals? In fact I do and that’s why I created the below intro:


turtles

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:

egaux2

After throwing all of the above together and 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..).

egaux3

“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 glimps at what it means to do 3D in the browser (the live version is here).
torus
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 tranparency handling right yet (see here), 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)