@oosmoxiecode has released this lovely C64 styled post-processing WebGL shader. Seen running on-top of a trailer for the forthcoming Cyberpunk 2077 game. You can open the control panel and tweak the effects to alter the dithering. View source to see how the magic happens. As to be expected it’s powered with three.js and needs a WebGL capable browser, which thankfully are to be found pretty much everywhere these days.

Play with the C64 Shader Effect (warning: contains music, but great music

From the man himself:

This is a series of visuals I created for a party organized by Tool in February. They were projected on a wall and guests could interact with them using a Leap Motion device.

From the looks of his code (which is open sourced here) it looks like Bartek challenged himself to use as few libraries as possible in the build. I’d love to see a writeup from him outlining his creative and decision-making process.

More and more it seems web technologies are being seen as viable options to lower-level creative coding frameworks. So, so cool!

Sound Viz by Bartek Drodz

The annual Game Developers Conference is back in full swing in San Francisco. It was at last year’s GDC that Mozilla first demoed their collaboration with Epic on the WebGL port of the Unreal Engine 3. The demo was made possible by Mozilla’s Emscripten compiler and the JavaScript machine code hybrid that is asm.js. The collaboration continued this year with both showing off the Unreal Engine 4 running inside Firefox. Future plans are to focus on optimising asm.js for mobile.

The speed of the technology is impressive (close to Java or C++) but setting up the toolchain required to generate asm.js is not for everyone. Mozilla’s second GDC announcement addressed that through a new collaboration with the popular game dev toolmaker Unity. A WebGL export target has been predicted for a while but it is now confirmed as an “add-on” in the forthcoming Unity 5.

While not a new project it’s the first time I’ve seen Ironbane, a 3D MMO that’s been under development since 2012.

The chunky pixellated graphics work well and despite being a little glitchy in places it’s still quite polished and fun to play

Ironbane appears to be updated quite frequently, so definitely one to keep an eye on!

Ironbane via /r/javascript
Assets and server source are on Github.

It’s hard to resist playing with a good webcam experiment and Smoke & Mirror is an especially fun one. Watch your reflection form in tiny particles and then wisp away in smokey trails. It’s a fun to play with, but really tough to get a decent screenshot of

Daniel Brown created it as a WebGL shader study and has left the source nicely un-minified to make it easy to poke around under the hood. He also has an earlier experiment called we are all made of stars, which explores a similar style of webcam reflection. The smoke version is definitely my favourite of the two. It probably goes without saying, but you’ll need a WebGL capable browser and a webcam to view either experiment. They won’t be much to look at otherwise!

Smoke & Mirror
From Daniel Brown

“This is a series of minimalistic WebGL animations representing endless 3D landscapes. These animated loops were created for the purpose of technical experimentation around real-time 3D and Three.js. All landscapes are based on the awesome VJ clips by motion designer Beeple.”

There are 4 landscapes at the moment. From a snowy mountain to Tron-inspired neon lines and garish pink skies. All show what can be done with a little JavaScript and a lot of imagination.

View the Digital Landscapes.

This project is a little different than most we feature here, as it exists mostly outside of traditional screens. That’s not a place we often see web technologies used!

Star Canvas is an installation built by B-REEL to help celebrate their office’s fifth anniversary. The project uses WebGL, a canvas-based tool for creating constellations, and audio generated with Pure Data to make the whole thing an immersive experience. Check out their video for the full story. It looks like it was a whole lot of fun to build and use!

Star Canvas
From B-REEL

OutsideOfSociety (@oosmoxiecode) is back with another lovely WebGL HTML5 demo. This time its a metaball soup effect. In his own description: The base is a bunch of balls in a Box2D container. The balls are rendered like radial gradients, full alpha center to zero alpha at the outer radius. The result is then thresholded to only keep pixels above a certain value to get a fake metaball effect.

No matter how “fake” the effect is it’s great fun dragging the cubes around and splashing them into the gloopy mess.

Play with the Metaballs Soup

Liquid Heart is the 86th laboratory demo by Simo Santavirta (@simppafi) and involves a lovely pulsating and melting heart. Drag the camera around to view it from different angles, and as the demo says “notice the lack of hard edges”. As is becoming standard you need a WebGL capable browser to view this.

Play with a Liquid Heart.

This is a beautiful demo of Spherical Environment Mapping (MatCap/LitSphere) and Normal Mapping created by Jaume Sánchez @thespite. Select from a variety of object shapes, textures and normal maps from the slide-out panel on the right and adjust the intensity and other effects. The results are stunning, from objects that seemingly look like hot lava rocks, to reflective metal cheese graters, just by tweaking a couple of parameters. You can even drop your own textures onto the objects.

Needless to say a WebGL capable browser/computer is required, but I certainly had great fun producing images like this.

Play with Spherical Normal Mapping.