Category Archives: THREE.js

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):

screenshot

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.

ricemilk

clubhouse

“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)