prosthetic knowledge

Rhizome: Prosthetic Knowledge Picks - WebGL

In this submission, I take a look at a web technology that brings impressive 3D projects into the browser.

Read it here

Shadertoy

Online coding community site to demonstrate examples of 3D graphics programming, offering smooth and interactive WebGL rendering in your browser:

Shadertoy is the first application to allow developers all over the globe to push pixels from code to screen using WebGL since 2009.

This website is the natural evolution of that original idea. On one hand, it has been rebuilt in order to provide the computer graphics developers and hobbyists with a great platform to prototype, experiment, teach, learn, inspire and share their creations with the community. On the other, the expressiveness of the shaders has arisen by allowing different types of inputs such as video or sound.

Check out many impressive examples here

Elevated

Beautiful in-browser demo of mountain flyover, amazingly comprised of only 28kb of code - via CreativeJS:

Elevated was originally released in 2009 at the Breakpoint demo party. Created by Rgba and TBC it took the viewer on a stunning trip around a beautiful mountain landscape, complete with music, rippling seas and lighting effects. All packed into a tiny 4k executable. A level of procedural generation that would make even Braben weep.

Fast forward to 2013 and the Japanese JavaScript gurus 301z have taken the PC original and converted it to just 28Kb worth of WebGL powered demo heaven. You’ll need Chrome or Firefox to view it with WebGL enabled, and it takes a while for it to calculate all of the textures, music and data at the beginning – but once done it’s a wonderful visual treat.

You can try out the demo for yourself here

Sketchfab 

Free online service which can display your uploaded 3D files within your browser with WebGL, interactive and embeddable:

Sketchfab is a web service to publish interactive 3D content online in real-time without plugin. The world we live in is in 3D, but the web is still in 2D, and we want to change that. We think your 3D models deserve something better than screenshots or “showreel” videos. That’s why we created Sketchfab. We understand 3D and bring it to the web.

As well as displaying items in a webpage, they are also embeddable - here are a couple of examples below:

You can find out more and try Sketchlab out here

Never Seen The Sky by Steven Wittens

Seasonal WebGL demo combines 3D graphics and dubstep, impressively demonstates what in-browser graphics are capable of today - Chrome only.

Try it out here
Other seasonal coding experiments can be found here

HexGL 

A Wipeout clone written in HTML5 that runs in your browser:

What is this?

HexGL is a futuristic, fast-paced racing game built by Thibaut Despoulain using HTML5, Javascript and WebGL.

Credits

HexGL was built with love using three.js, a 3D library built on top of WebGL and maintained by Mr.doob and AlteredQualia.
I’d also like to thank Nobiax for the great metalic road texture, and all the beta-testers that gave me a hand during the development phase.

While there isn’t a multiplayer mode, there is a Hall of Fame for the best finishing times.

To play, go to the HexGL site here

Another 3D Trippy Browser Webcam Toy 

It currently doesn’t have an official name, but works similar to WebCamMesh (previous post), albeit without the visible grid mesh. Put together by @mrdoob, it pseudo-converts your webcam feed into 3D (although not accurately - it’s based on colour as opposed to real depth data which you could only get with a connect).

Only works in Chrome (as far as I am aware), and you’ll need to press the ‘Hide Editor’ button in the top right.

Try it out here

ASCII Street View by Teehan+Lax Labs 

Interactive, brower-based WebGL-powered text-mode view of Google Streetview panoramas. Available in colour and green-terminal modes:

Real-time Ascii Art conversion of Google Street View panorama’s done in WebGL.

You’ll need Chrome, Firefox 8+, or another browser that supports CORS WebGL textures.

Coded by @peter_nitsch. Inspired by Sol’sTextFX library. Built with @thespite’sGoogle Street View Panorama library, and three.js.

Read about this at Teehan+Lax Labs.

Try it out here

SnappyTree 

Online browser-based 3D tool to create your own model of a tree, which is fully exportable for common file formats:

SnappyTree is a procedural tree creation app designed to demo webgl and proctree.js. SnappyTree produces proctree.js JSON which can be used to generate trees client side in other web applications/games. In addition, SnappyTree also provides export options for wavefront and collada file formats so the generated trees can be used in other native applications.

You can experiment with this online tool here

3DCG 

Japanese site appears to be 3D creative community similar to Pixiv, which hosts viewable 3D models using WebGL modern browser technology.

The above gif does not represent the quality of presentation nor the interactive functionality of the service - it is far smoother and the graphics have a higher definition. You can see the original here.

You can explore the site here - and if you look around, there are other fantastic examples.

Biodigital Human 

Online browser-based interactive resource allows you to examine human anatomy:

The BioDigital Human is a 3D platform that simplifies the understanding of anatomy, disease and treatments. Explore the body in 3D!

The BioDigital Human is a 3D platform that simplifies the understanding of anatomy, disease and treatments. Interactive tools for exploring, dissecting, and sharing custom views, combined with detailed medical descriptions provide an unprecedented new visual format to learn about your body.

This app uses the exciting new web standard for 3D - WebGL.

You can try it out here - if you use Chrome, you can get the Chrome app here