public marks

PUBLIC MARKS from sbrothier with tag WebGL


Creating a Lightsaber with Polymer | Google Web Showcase - Google Developers

How we used Polymer to create a high-performance WebGL mobile controlled Lightsaber that is modular and configurable. We review some of the key details of our project to help you save time when creating your own next time you run into a pack of angry Stormtroopers.

Animating textures in WebGL - Web APIs | MDN

In this demonstration, we build upon the previous example by replacing our static textures with the frames of a playing Ogg video file. This is actually pretty easy to do, but is fun to look at, so let's get started. Similar code can be used to use any sort of data (such as a canvas as the source for your textures.

JavaScript — Rigging and skeletal animation in Three.js

Three.js supports some basic rigging and skeletal animation. The simplest way to achieve a nice character animation is to make it in appropriate software first. This article is going to be about Blender rigging workflow and how to do the best for a clean Three.js export.

Creating skeletal animation in Blender and exporting it to three.js. | DevMatrix

Today I’ve faced a rather difficult problem to solve. Creating model in Blender, animating it with armature and exporting the animation to THREE.js (r56) JSON format.

Pixi.js - 2D webGL renderer with canvas fallback

by 1 other
Pixi.js is a devoted rendering engine. There are a host of other engines covering game, sound and physics etc. and they all work beautifully with Pixi. We know developers have their favourites for all these components in their projects and they use them for their strengths.

Mountain Moon Volcano

by 1 other
Can a comic still work in 3D? I don't know, but this website is a step towards finding out. Have an explore, have a laugh and have a good time!


Tangram, A Mapping Library

Traditionally, maps have been expensive and time-consuming to make, but that’s changing fast. High-quality maps are easier to make every day thanks to OpenStreetMap and modern computer graphics capabilities, and we feel they can be pushed even further with ideas and techniques from 3D animation, video games, and other visual disciplines. To test this theory, the Mapzen graphics team has been working on a mapping library called Tangram.

Exploring the HTML5 Web Audio: visualizing sound |

by 2 others (via)
If you've read some of my other articles on this blog you probably know I'm a fan of HTML5. With HTML5 we get all this interesting functionality, directly in the browser, in a way that, eventually, is standard across browsers. One of the new HTML5 APIs that is slowly moving through the standardization process is the Web Audio API. With this API, currently only supported in Chrome and as of October 2013 also in Firefox, we get access to all kinds of interesting audio components you can use to create, modify and visualize sounds (such as the following spectrogram).

Badass JavaScript

by 3 others
A showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett.

Face substitution

This is a demo of face substitution using the javascript library clmtrackr. Keep your face still until the facemodel has fitted and try out different masks from the dropdown. Note that the face substitution works best with good, even lighting. The demo also needs support for WebGL, and works best in Google Chrome.


3d mesh

Webcam Toy

Plus de 80 effets amusants à utiliser avec votre webcam. Prenez des photos et publiez-les sur Twitter ou Facebook !

You Glitch | Corrupt Yourself

YouGlitch is a website where the Corrupted GIFs created with Corrupt.Video are displayed. The Software (Corrupt.Video) allows its users to glitch videos stored on their computer, videos from their webcam or their desktop in realtime. When a clip is recorded, a 10 seconds video and an animated GIF are saved locally and automatically uploaded to

Optical Flow using WebRTC getUserMedia

An experiment using WebRTC's getUserMedia feature to access the user's webcam and perform some effects using optical flow. Coded using oflow.js and three.js.


webcam mesh


Fast Image Filters with WebGL - PhobosLab

WebGLImageFilter is a small JavaScript library for applying a chain of filters to an image.

sbrothier's TAGS related to tag WebGL

3d +   animation +   ascii +   bd +   blog +   deguisement +   effects +   freelance +   gif +   google +   html5 +   interface +   javascript +   links +   lowpoly +   maps +   mobile +   music +   pixelshaders +   portfolio +   scroll +   sounds +   street +   tools +   ui +   ux +   video +   webdesign +